讲师:苏鹏
布局发展概况
网页中的布局与块
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的标记。