1 认识HTML5（2）
教学难点：理解语义标签
教学重点：熟练使用常见文档结构标签
教学时间：2学时
教学内容：
- 认识HTML文档结构
HTML5简化了HTML文档结构的复杂性，让HTML的文档结构更加简洁。
HTML4文档结构：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 3 "http://www.w3.org/TR/html4/strict.dtd"><!--文档声明，复杂无法记忆 --> 4 5 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 6 7 <head> 8 9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--文档编码 --> 10 11 <title>文档标题</title> 12 13 </head> 14 15 <body> 16 17 内容。。。。 18 19 </body> 20 21 </html>
HTML5文档结构：
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 7 <meta charset="UTF-8"> 8 9 <title>文档标题</title> 10 11 </head> 12 13 <body> 14 15 文档内容...... 16 17 </body> 18 19 </html>
1.1. 文档声明
（1）.内容类型
扩展名认为.html或.htm,内容类型仍为text/html
（2）.文档类型声明
<!DOCTYPE HTML>
（3）.字符编码
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">从HTML5开始，对于文件的字符编码推荐使用utf-8
1.2. 采用文档结构元素优化
- HTML5语义标签
2.1. 新标签
HTML中最核心的部分就是标签，在新一代HTML5中新增的很多新的标签，并且这些标签都附有语义。
2.2. 语义标签
语义= 意义。
语义标签 = 标签的意义。
标签名就代表了标签中内容的意思。<table>表格<form>表单
具有语义的标签能够让你更恰当地描述你的内容是什么，简单的理解：看到标签名，就知道这个标签所想表达的意义。一栋楼？语义：医院、学校一个div？<header>、<main>、<footer>。
语义元素能够清楚的描述其意义给浏览器、开发者、搜索引擎；
例如：
HTML4 <span>成都市高新区</span>
HTML5 <address>成都市高新区</address>
HTML4 <div>我是头部</div>
HTML5 <header>我是头部</header>
无语义元素实例: <div>、<span>无需考虑内容.
有语义元素实例: <form>、<table>、<img>清楚的定义了它的内容.
2.3. HTML5语法
1、标签不区分大小写
HTML5采用宽松的语法格式，标签可以不区分大小写，这是HTML5语法变化的重要体现。例如：
<p>这里的p标签大小写不一致</P>
在上面的代码中，虽然p标记的开始标记与结束标记大小写并不匹配，但是在HTML5语法中是完全合法的。
2、允许属性值不使用引号
在HTML5语法中，属性值不放在引号中也是正确的。例如：
<input checked=a type=checkbox/> <input readonly=readonly type=text />
以上代码都是完全符合HTML5规范的，等价于
<input checked="a" type="checkbox"/> <input readonly="readonly" type="text" />
3、允许部分属性值的属性省略
在HTML5中，部分标志性属性的属性值可以省略。例如：
<input checked="checked" type="checkbox"/> <input readonly="readonly" type="text" />
可以省略为：
<input checked type="checkbox"/> <input readonly type="text" />
从上述代码可以看出，checked="checked"可以省略为checked，而readonly="readonly"可以省略为readonly。
在HTML5中，可以省略属性值的属性如下表所示。
- HTML5全局属性
在HTML5中新增了全局属性，是指可以对任何元素都使用的属性。
1、contenteEditable属性
该属性的主要功能是允许用户在线编辑元素中的内容，是一个布尔值属性，可以被指定为true或false。此外，该属性还有一个隐藏的继承状态，属性值为true时，元素被指定为允许编辑；属性值为false时，元素被指定为不允许编辑。未指定true或false时，则由inherit状态来决定，如果父元素是可编辑的，则该元素就是可编辑的。
示例：让列表可编辑。
代码如下：
<h2>可编辑列表</h2> <olcontentEditable="true"> <li>网页设计</li> <li>HTML5</li> <li>正在学习中。。。。。</li> </ol>
注意：在编辑完元素中的内容后，如果要保存这些内容，只能把该元素的innerHTML发送到服务器端进行保存，目前没有特别的API来保存编辑后元素中的内容。
2、designMode属性
该属性用来指定整个页面是否可编辑，当页面可编辑时，页面中任何支持上述属性的元、素都变成了可编辑状态。该属性只能在JavaScript脚本里被编辑修改，有两个值on与off。
3、hidden属性
在HTML5中，所有的元素都允许使用一个Hidde属性，其功能是通知浏览器不渲染该元素，使元素处于不可见状态。但元素内容还是浏览器创建的，页面加载以后可以使用JavaScript脚本取消该属性，让元素可将。
- 文档结构元素
4.1. HTML5元素分类
HTML5新增了27个元素，废弃了16个元素，按优先等级定义为结构性元素、级块性元素、行内语义性元素和交互性元素4大类。
（1）结构性元素
主要负责Web的上下文结构的定义，确保HTML文档的完整性。
section：在Web页面中，用于区域的章节描述。
header：页面主体上的头部，head中的内容往往不可见，而header元素往往在一对body元素之中。
footer：页面的底部，通常会在这里标出网站的一些相关信息。
nav：专门用于菜单导航、链接导航的元素。
article：用于表示一篇文章的主体内容。
（2）级块性元素
用于Web页面区域的划分，确保内容的有效分隔。
aside：用于表达摘要、插入的引用等作为补充主体的内容，从一个单页面表示看，就是侧边栏，可以在左边，也可以在右边。从一个页面的布局看，就是摘要。
figure：是对多个元素进行组合并展示的元素。
code：表示一段代码块
dialog：用于表达人与人之间的对话。还包括dt和dd这两个组合元素，通常同时使用，dt表示说话者，dd表示说话者的内容。
（3）行内语义元素
主要完成Web页面具体内容的引用和表述，是丰富内容展示的基础。
meter'：表示特定范围内的数值，可用于工资、数量、百分比等。
time：表示时间值
progress：表示进度条。
video：表示视频元素
audio：音频元素
（4）交互性元素
主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础。
details：用于表示一段具体的内容
datagrid：用于控制客户端数据与显示，可以由动态脚本及时更新。
menu：主要用于交互菜单
command：用于处理命令按钮。
4.2. 构建主体内容元素
在HTML5中，为了使文档的结构更加清晰明确，追加了几个与页眉、页脚、内容区块等文档结构相关联的结构元素。
（1）article元素
article元素用来表示文档、页面中独立的、完整的、可以独自被外部引用的内容。可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件等。除了内容部分，一个article元素通常有它自己的标题，一般放在一个header元素里面，有时还有自己的脚注。当article元素嵌套使用的时候，内部的article元素内容必须与外部article元素内容相关。article元素支持HTML5全局属性。
示例1：演示使用article元素设计网络新闻展示。
<body> <article> <header> <h1>谷歌董事长施密特；每天把手机电脑关一小时</h1> <time pubdate=”pubdate">2012年05月21号</time> </header> <p>新浪科技讯北京时间5月21日早间消息，谷歌(微博)执行董事长埃里克.施密特周日在波士顿大学发表演讲时表示，大学生应当将眼光从智能手机和电脑屏幕上移开 </p> <footer> <p>http://www.sina.com.cn</p> </footer> </article> </body>
（2）pubdate添加发布日期
pubdate是一个可选的布尔值属性，可用在article元素的time元素上，意思是time元素代表了文章或整个网页的发布日期。
<body> <article> <header> <h1>谷歌董事长施密特；每天把手机电脑关一小时</h1> <p>发布日期<time datetime="2012-5-22" pubdate>2012年5月22日</time></p> <p>关于<time datetime=2012-5-23>5月23日</time>更正通知</p> </header> <p>新浪科技讯北京时间5月21日早间消息，谷歌(微博)执行董事长埃里克.施密特周日在波士顿大学发表演讲时表示，大学生应当将眼光从智能手机和电脑屏幕上移开 </p> <footer> <p>http://www.sina.com.cn</p> </footer> </article> </body>
注意：有两个time元素，分别定义了两个日期：更正日期和发布日期，使用pubdate表明哪个time元素代表了发布日期。
（3）section元素
section元素用于对网站或应用程序中页面上的内容进行分区。一个section元素通常由内容及标题组成。div元素也可以用来对页面进行分区，但section元素并非一个普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div,而非section元素。
在使用section元素时，需要注意以下3点：
●不要将section元素用作设置样式的页面容器，那是div的特性。section元素并非一个普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div。
●如果article元素、aside元素或nav元素更符合使用条件，那么不要使用section元素。
●没有标题的内容区块不要使用section元素定义。
（4）设计导航信息
nav元素用于定义导航链接。可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。并不是所有的链接组都要被放进nav元素，值需要将主要的、基本的链接组放进nav元素即可。
例如：只要是导航性质的链接，就可以很方便地将其放入nav元素中。该元素可以在一个文档中多次出现，作为页面区域的导航。
例如：
<nav> <ul> <li><ahref="#">首页</li> <li><ahref="#">公司概况</li> <li><ahref="#">产品展示</li> <li><ahref="#">联系我们</li> </ul> </nav>
（5）设计辅助信息
aside元素用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。
aside元素的用法主要分为两种：
●被包含在article元素内作为主要内容的附属信息。
●在article元素之外使用，作为页面或站点全局的附属信息部分。
例如：如下代码：
<body> <article> <header> <h1>标题</h1> </header> <section>文章主要内容</section> <aside>其他相关文章</aside> </article> <aside>右侧菜单</aside> </body>
4.3. 添加语义模块
在HTML5中新增了一些语义模块：标题模块header、标题分组hgroup、脚注模块footer、联系信息address。
（1）添加标题快header
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面的一个内容区块的标题，也可以包含其他内容。
示例：
<body> <header> <h1>网页标题</h1> </header> <article> <header> <h1>文章标题</h1> </header> <p>文章正文</p> </article> </body>
（2）给标题分组hgroup
hgroup元素可以为标题或者子标题进行分组，通常它与h1-h6元素组合使用，一个内容块中的标题及其子标题可以通过hgroup元素组成一组。如果文章只有一个标题，则不需要hgroup。
示例：
<body> <article> <header> <hgroup> <h1>主标题</h1> <h2>副标题</h2> <h3>标题说明</h3> </hgroup> <p> <time datetime="2012-6-20">发布时间:2012年6月20日</time> </p> </header> </article> </body>
（3）添加脚注块footer
footer元素可以作为内容块的注脚，如在父级内容块中添加注释，或者在网页中添加版权信息等。
（4）添加联系信息address
address原来用来在文档中定义联系信息，包括文档作者或者文档编辑者名称、电子邮箱、真实地址、电话号码等等。
示例：
<body> <address> <ahref="http://www.w3.org/">W3C</a> <ahref="http://www.whatwg.org/">WHATWG</a> <a href="http://www.mthml5.com/">HTML5研究小组</a> </address> </body>
- 复习
常见的文档结构元素如下：
header:标记头部区域内容（用于整个页面或页面中的一块区域）
footer：标记脚部区域的内容（用于整个页面或页面中的一块区域）
section：用于对网站或应用程序中页面上的内容进行分区。
article：用来表示文档、页面中独立的、完整的、可以独自被外部引用的内容。
aside：相关内容或者引文
nav：导航类辅助内容
例如：制作如图页面（采用div）：
修改成H5再来看看
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style type="text/css"> header,nav,article,footer { border:solid 1px #666; padding:10px; margin:6px; } header{width:500px;} nav{float:left;width:60px;height:100px;} article{float:left;width:406px;height:100px;} footer{clear:both;width:500px;} </style> </head> <body> <header>导航</header> <nav>菜单</nav> <article>内容</article> <footer>底部说明</footer> </body> </html>
修改成如下格式：使用百分比
课堂练习：按照刚才讲解的使用H5建立网页。
- 作业：
使用文档结构标签header,section,nav,footer,article等等完成下面的网页
分析如下：
Nav aside
1 header：设置margin、width90%、height等属性
2 div：设置width、height、背景等属性
3 nav：设置width25%、height、浮动等属性，在css样式表中设置a标签：display、width、height、margin、background-color等属性，还可设置伪类。
4 Session：设置width25%、height、浮动等属性，包含article，包含header、footer元素。