原创力文档- 1、本文档共8页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
HTM5新增加的语义标记主讲人：高洛峰妹子
HTML5新增加了一些新的元素和属性，反映典型的现代网站用法。其中有些是技术上类似div和span标签，但有一定含义，例如nav（网站导航块）和footer，这种语义标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。也提供了新的功能标签，如媒体播放器audio和video标记。还有一些过时的HTML4标记将取消，像包括纯粹用作显示效果的标记，如font和center，因为它们已经被CSS取代。
新增的结构元素曾经，网页编写会频繁使用table这样的没有任何语义的布局,不过最终还是慢慢的接受了相对更语义化的div布局替代了，并且开始调用外部样式表。但不幸的是，代码中大量使用div标记又太单一了，而复杂的网页设计需要大量不同的标签结构代码，我们把它叫做“div-soup”综合症。现在，HTML5和CSS3正跃跃欲试的等待大家，新增加了和布局相关的多种语义标记。
元素名说明section表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用标记文档结构。article表示页面中的一块与上下文不相关的独立内容，例如博客中的一篇文章。aside表示article元素内容之外的，与article元素内容相关的辅助信息。header表示页面中一个内容区块或整个页面的标题。hgroup用于整个页面或页面中一个内容区块的标题进行组合。footer表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名，创建日期及创作者联系信息。nav表示页面中导航链接的部分figure表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元，使用figcaption元素为figure元素组添加标题。
尽管这有些勉强，但这个实例还是可以说明使用HTML4对一个复杂的页面设计进行，代码化后依然过于臃肿。不过HTML5元素富有更细致的语义，可以代替那些毫无语义的div标签，并同时为CSS的调用提供了“自然”的CSS钩子。这种语义化的特性不仅提升了我们网页的质量和语义，并且大量减少了曾经代码中用于CSS必须调用的class和id属性。事实上，后面课程中介绍的CSS3也是可以忽略掉所有class和id的。现在布局中结合了富有新的语义化标记的HTML5、CSS3为web设计师们的网页提供了神一般的力量。
让IE（包括IE6）支持HTML5元素，我们需要在HTML头部添加以下JavaScript，Opera，FireFox等其他非IE浏览器就会忽视这段代码，也不会存在http请求。上面这段代码仅会在IE浏览器下运行，还有一点需要注意，在页面中调用html5.js文件必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。
关注高洛峰微信公众账号了解更多相关信息更多课程内容关注兄弟连云课堂：
文档评论（0）