20121019-html5
DESCRIPTION
2012/10/19 成功大學 資訊工程學系 網頁應用及程式設計 Web Applications and Programming 網頁TRANSCRIPT
HTML
WMMKS Lab郭至軒
HTML 5
當前版本 HTML 4.01
HTML 5：含 HTML、CSS 以及 Javascript
尚未正式推出，大多數主流瀏覽器支援部份功能，至於 IE...
HTML5 & CSS3 Support
new tags
section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr
new tag
section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr
new tag
標題
首頁 文章彙整 關於作者 其他
部落格文章
版權宣告
new tag
<div></div>
<div></div>
<div></div>
<div></div>
new tag
<header></header>
<section></section>
<footer></footer>
<nav></nav>
new tag
<header></header>
<section></section>
<footer></footer>
<div></div>
網頁更富有語意！
removed tags
acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt
removed tags
acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt
媒體播放
<audio>播放音樂
<video>播放影片
動畫製作
- Canvas API
- CSS 3
- Javascript
- http://bit.ly/QnNJ14- http://bit.ly/QnNxyW- http://bit.ly/TZZ9yd
Powerful CSS 3
圓角、旋轉、變形、移動、漸變...
- http://bit.ly/U002qB- http://bit.ly/QnP5J3- http://bit.ly/QnP5sE- http://bit.ly/U00ULU- http://bit.ly/U00kh9
More...
HTML5 - Wikipedia
HTML5 - Google 搜尋
something about HTML
瀏覽器支援不嚴謹的 HTML 語法
<html>
<head>
</head>
<body>
<ol>
<li>資訊週加油阿！</li>
<li>傳情品可以幫我打折嗎？
</li>
<li>不然傳給我也是 OK 的 :)</ol>
</body>
</html>
something about HTML
瀏覽器支援不嚴謹的 HTML 語法
<html>
<head>
</head>
<body>
<ol>
<li>資訊週加油阿！</li>
<li>傳情品可以幫我打折嗎？
</li>
<li>不然傳給我也是 OK 的 :)
</li></ol>
</body>
</html>
something about HTML
01: <html>
02: <head>
03: </head>
04: <body>
05: <table border=1>
06: <tr>
07: <td> r1,c1 <td>
08: <td> r1,c2 </td>
09: </tr>
10: <tr>
11: <td> r2,c1 </td>
12: <td> r2,c2 </td>
13: </tr>
14: </table>
15: </body>
16: </html>
something about HTML
something about HTML01: <html>
02: <head>
03: </head>
04: <body>
05: <table border=1>
06: <tr>
07: <td> r1,c1 <td>
08: <td> r1,c2 </td>
09: </tr>
10: <tr>
11: <td> r2,c1 </td>
12: <td> r2,c2 </td>
13: </tr>
14: </table>
15: </body>
16: </html>
something about HTML
01: <html>
02: <head>
03: </head>
04: <body>
05: <table border=1>
06: <tr>
07: <td> r1,c1 </td><td></td>08: <td> r1,c2 </td>
09: </tr>
10: <tr>
11: <td> r2,c1 </td>
12: <td> r2,c2 </td>
13: </tr>
14: </table>
15: </body>
16: </html>
About browser
How browsers work
［译］How browsers work
Browser
多用不同的瀏覽器測試！
Let's Kill IE6
Browser
IE is magic
IE only!!!
只有 IE 看得到！
WTF...
右鍵 → 檢查元素 (inspect element)
Debuger
Firebug
Firebug (Firefox addon)
Firefox 3D view
a little tips of coding
縮排
Indentation
01: <html>
02: <head>
03: </head>
04: <body>
05: <table border=1>
06: <tr>
07: <td> r1,c1
</td><td></td>
08: <td> r1,c2 </td>
09: </tr>
10: <tr>
11: <td> r2,c1 </td>
12: <td> r2,c2 </td>
13: </tr>
14: </table>
15: </body>
16: </html>
01: <html>
02: <head>
03: </head>
04: <body>
05: <table border=1>
06: <tr>
07: <td> r1,c1 </td><td></td>
08: <td> r1,c2 </td>
09: </tr>
10: <tr>
11: <td> r2,c1 </td>
12: <td> r2,c2 </td>
13: </tr>
14: </table>
15: </body>
16: </html>
a little tips of coding
編輯器
Editor
Notepad++ (Windows Only)
(g)Vim (Cross-platform)
Gedit (Cross-platform)
TextMate (Mac OS X)
Coda (Mac OS X)
a little tips of coding
行號
語法高亮標記
其他...
Syntax Highlight01: <html>
02: <head>
03: </head>
04: <body>
05: <table border=1>
06: <tr>
07: <td> r1,c1
</td>
08: <td> r1,c2
</td>
09: </tr>
10: <tr>
11: <td> r2,c1
</td>
12: <td> r2,c2
</td>
13: </tr>
14: </table>
15: </body>
16: </html>
01: <html>
02: <head>
03: </head>
04: <body>
05: <table border=1>
06: <tr>
07: <td> r1,c1
</td>
08: <td> r1,c2
</td>
09: </tr>
10: <tr>
11: <td> r2,c1
</td>
12: <td> r2,c2
</td>
13: </tr>
14: </table>
15: </body>
16: </html>
Zen Coding
zen-coding
- HTML 很冗
- 開了還要關
- 角括號裡面還要塞一些 attribute
What The F*ck!!!!
Zen Coding
div#page>div.logo+ul#navigation>li*5>a
<div id="page"><div class="logo"></div><ul id="navigation">
<li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li>
</ul></div> 影片：http://vimeo.com/7405114
End