筆記 - HTML5網頁設計初窺(2)
講師:蘇鵬布局發展概況
網頁中的布局與塊
DIV + id:url重寫技術
footer, top, main,
亂而無序
新的布局標記
header,hgroup,article,section,aside,footer
專注于內容,不專注于形式
所有標記 http://www.w3.org/TR/html-markup/
新布局元素概述
從頭開始
Header:出現在頁面最前面的內容
hgroup:在header里的
<header>
<img>
<hgroup>
<h1>
<h2>
</hgroup>
</header>
大塊文章
<article>
<img>
<h2>
<address>
<time>
</article>
日期和時間
<address>
Written by w3schools.com <br />
<a href="mailto:us@example.ort">Email us</a> <br />
Address: Box 564, Disneyland<br />
Phone:+12 34 56 78
</address>
<p>I have a date on <time datetime="2008-02-14">Valentines day</time></p>
<p>We open at <time>10:00</time> every morning.</p>
推薦使用第一種
Footer
<footer>
<p>
<nav>
<h3>
<div>
<a>
</div>
</nav>
</footer>
區域與塊
Aside
section
整體布局
兩類控件:內容控件+功能控件
與布局無關的
Figure
Figcaption
<figure>
<p>A view of the pulpit rok in Norway</p>
<img src="img_pulpit.jpg" width="304" height="228" />
</figure>
漢字元素
Ruby
<ruby>
韓<rt>safsdf</rt>
</ruby>
Time
日期
Compontent syntax Example
Date yyyy-mm-DD 2011-07-13
Time with hours hh:mm 18:28
Time with seconds hh:mm:ss 18:28:05
Time with milliseconds hh:mm:ss.f 18:28:05.2318
Date and time T to join date and 2011-07-12718:28
time
With time zone GMT Z at the end 2011-07-13T18:28:05Z
With time zone as offset +mm:hh / -mm:hh 2011-07T18:28:05+02:00
總結:
新的布局方式
新標簽:為搜索引擎提供友好支持,后續操作的方便。
html4有沒有辦法一下切換到html5
精髓:在API上,為了方便切換到html5,現在規范css,往html5現有的規范邊上靠,使用w3c的標記。