目录

H5简介

新特性：

移除的元素（了解）

H5现状

H5新增的语义元素 

section

article

nav

aside

header

footer

 H5新增语义元素兼容问题

解决方案

HTML5是HTML最新的修订版本，具有新的元素，属性和行为。

HTML5规范于2014年10月29日由万维网联盟正式宣布。

随着移动化的进程，HTML5终将成为主流。

新特性：

• 新增语义化元素

• 新增表单相关新元素、新属性

• 新增了全局属性

• 新增API应用程序接口：

• canvas绘图

• 多媒体（视频、音频）

• 本地存储，离线存储、

• 地理信息

移除的元素（了解）

以下的 HTML 4.01 标签在HTML5中已经被删除：

● 定义只取首字母缩写
● 规定 Java applet 的文件名
● 定义文档中所有文本的默认颜色、大小和字体
● 呈现大号字体效果
●

标签控制文本的居中显示
● 标签定义目录列表
● 标签规定文本的字体、字体尺寸、字体颜色
● 标签定义 frameset 中的一个特定的窗口（框架）
● frameset 元素可定义一个框架集
● noframes标签向浏览器显示无法处理框架的提示文本<br /> ● <strike> strike 标签可定义加删除线文本定义。</p> </blockquote> <p>提示：由于H5是向前兼容的，所以在H5中使用这些标签也不会报错或出现异常，但这些元素在H5中已不被W3C标准推荐，建议尽量不要使用。</p> <h1 id="H5%E7%8E%B0%E7%8A%B6">H5现状 <p> HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。</p> <p></p> <p></p> <h1 id="H5%E6%96%B0%E5%A2%9E%E7%9A%84%E8%AF%AD%E4%B9%89%E5%85%83%E7%B4%A0%C2%A0">H5新增的语义元素  <hr /> <p>HTML5新增了页眉、页脚、内容块等文档结构相关的标签，可以使文档结构更加清晰明确。</p> <h2 id="section">section <ul><li> <p>语法：</p> <blockquote> <h3 id="%3Csection%3E%3C%2Fsection%3E"><section></section> </blockquote> </li><li> <p>作用：定义文档中的节（页面中内容的区段、文章中的章节）。 一个section元素通常由内容及标题组成</p> </li><li> <p>典型应用： 文章中的章节、 选项卡式对话框中的各个选项卡式页面</p> </li><li> <p>注意：样式上的分区用div,结构 上的分区用section</p> </li></ul> <h2 id="article">article <ul><li> <p>语法：</p> <blockquote> <h3 id="%3Carticle%3E%3C%2Farticle%3E"></article> </blockquote> </li><li> <p>作用：元素表示文档、页面、应用或网站中的独立结构，可以成为可独立分配的或可复用的结构。</p> </li></ul> <ul><li> <p>典型应用：论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目</p> </li><li> <p>注意： 每个article通常包括标题（h1 - h6元素）作为article元素的子元素 当article元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的article元素可嵌套在代表博客文章的article元素中。 可能包含一个或多个section article>section</p> </li></ul> <h2 id="nav">nav <ul><li> <p>语法</p> <blockquote> <h3 id="%3Cnav%3E%3C%2Fnav%3E"><nav></nav> </blockquote> </li><li> <p>作用：定义导航链接的部分</p> </li><li> <p>典型应用：主导航、侧边栏导航、页内导航、菜单、面包屑导航、分页、目录和索引等</p> </li></ul> <h2 id="aside">aside <ul><li> <p>语法</p> <blockquote> <h3 id="%3Caside%3E%3C%2Faside%3E"></aside> </blockquote> </li><li> <p>语义：定义当前页面或文章的附属信息部分</p> </li><li> <p>典型应用：侧边栏、标注框、广告等</p> </li></ul> <h2 id="header">header <ul><li> <p>语法</p> <blockquote> <h3 id="%3Cheader%3E%3C%2Fheader%3E"><header></header> </blockquote> </li><li> <p>语义：定义整个文档或文档中一个节段的的头部（页眉）。 作为文档的头部通常搜索表单、相关的logo、站点的名称以及水平菜单（如果有的话）等。 作为一个节段的头部，通常包含了节段的标题和作者名字等。</p> </li><li> <p>典型应用：整个页面的头部、文章页的包含标题部分的头部</p> </li></ul> <h2 id="footer">footer <ul><li> <p>语法：</p> <blockquote> <header></header> </blockquote> </li><li> <p>作用：定义文档或节的页脚 作为文档的页脚通常会包含版权信息和法律声明以及一些其他链接 作为节段的页脚，可能包含了节段的发布数据、许可声明等</p> </li><li> <p>典型应用:网页中的版权信息，相关阅读链接</p> </li></ul> <pre class='brush:php;toolbar:false'>, <section>, , and <nav> 可以拥有它们自己的 <footer> ,<header></pre> <h1 id="%C2%A0H5%E6%96%B0%E5%A2%9E%E8%AF%AD%E4%B9%89%E5%85%83%E7%B4%A0%E5%85%BC%E5%AE%B9%E9%97%AE%E9%A2%98"> H5新增语义元素兼容问题 <hr /> <p>问题概述：IE8浏览器中还没有添加对HTML5新标签的支持，当在页面中使用HTML5新标签时，新标签被当作错误处理</p> <h2 id="%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88">解决方案 <p>一、通过document.createElement（tagName）方法即可让浏览器识别新标签， 浏览器支持新标签后，还可以为新标签添加CSS样式。</p> <blockquote> <p></p> </blockquote> <p> </p> <pre class='brush:php;toolbar:false'>由于创建出来的元素是内联元素，所以需要转换成块级，宽度和高度才能生效 header,footer,nav,article,section,aside{ display: block; }</pre> <p>二：使用封装好的插件html5shiv.js解决</p> <p>html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式</p> <blockquote> <p>  </p> </blockquote> <p> 说明</p> <ul><li> <p>条件注释作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它</p> </li></ul></div> <div style="clear: both;"></div> <div class="author-info fl"> <div><span class="gray">转载请注明：</span>文章转载自 <a href="http://www.051e.com/" class="blue">www.051e.com</a></div> <div><span class="gray">本文地址：</span><a href="http://www.051e.com/it/293705.html" class="blue">http://www.051e.com/it/293705.html</a></div> </div> <div class="prev fl"> <p> <a style='text-align:left;' class='center-block text-center glyphicon glyphicon-collapse-down' href="http://www.051e.com/it/294151.html">上一篇 LeetCode</a> </p> <p> <a style='text-align:left;' class='center-block text-center glyphicon glyphicon-collapse-down' href="http://www.051e.com/it/293710.html">下一篇 关于“Pycharm复制到word文档出现乱码”问题——解决方法</a> </p> </div> <div class="new_tag fl"> </div> </div> <div class="new_r fr" style="border-radius:10px;"> <div class="tui fl"> <h3>Python相关栏目本月热门文章</h3> <ul> <li><span>1</span><a href="http://www.051e.com/it/1077902.html" title="JPA+QueryDSL">JPA+QueryDSL</a></li> <li><span>2</span><a href="http://www.051e.com/it/1077892.html" title="Cookie、Session、Token之间的区别到底在哪？">Cookie、Session、Token之间的区别到底在哪？</a></li> <li><span>3</span><a href="http://www.051e.com/it/1077888.html" title="springBoot使用自定义注解实现复杂校验">springBoot使用自定义注解实现复杂校验</a></li> <li><span>4</span><a href="http://www.051e.com/it/1077899.html" title="Mybatis-plus学习笔记---乐观锁、逻辑删除、代码自动生成器等">Mybatis-plus学习笔记---乐观锁、逻辑删除、代码自动生成器等</a></li> <li><span>5</span><a href="http://www.051e.com/it/1077896.html" title="反射Field、Method、Constructor">反射Field、Method、Constructor</a></li> <li><span>6</span><a href="http://www.051e.com/it/1077885.html" title="Servlet+mybatis整合Web项目">Servlet+mybatis整合Web项目</a></li> <li><span>7</span><a href="http://www.051e.com/it/1077884.html" title="SLF4j的介绍与使用+SpringBoot日志配置">SLF4j的介绍与使用+SpringBoot日志配置</a></li> <li><span>8</span><a href="http://www.051e.com/it/1077880.html" title="MybatisPlus【SpringBoot】 2 入门案例">MybatisPlus【SpringBoot】 2 入门案例</a></li> <li><span>9</span><a href="http://www.051e.com/it/1077898.html" title="IntelliJ IDEA 2022免费激活码正规申请方法（IDEA官方激活注册码）">IntelliJ IDEA 2022免费激活码正规申请方法（IDEA官方激活注册码）</a></li> <li><span>10</span><a href="http://www.051e.com/it/1077894.html" title="Qt多线程编程简介">Qt多线程编程简介</a></li> <li><span>11</span><a href="http://www.051e.com/it/1077890.html" title="商品管理模块微服务demo">商品管理模块微服务demo</a></li> <li><span>12</span><a href="http://www.051e.com/it/1077883.html" title="移动开发技术作业2">移动开发技术作业2</a></li> <li><span>13</span><a href="http://www.051e.com/it/1077875.html" title="SpringCloud 之OpenFeign 自定义配置和使用/自定义拦截器">SpringCloud 之OpenFeign 自定义配置和使用/自定义拦截器</a></li> <li><span>14</span><a href="http://www.051e.com/it/1077897.html" title="关于前端安全性那些事">关于前端安全性那些事</a></li> <li><span>15</span><a href="http://www.051e.com/it/1077895.html" title="JSP超市管理系统myeclipse定制开发SQLServer数据库网页模式java编程jdbc">JSP超市管理系统myeclipse定制开发SQLServer数据库网页模式java编程jdbc</a></li> <li><span>16</span><a href="http://www.051e.com/it/1077889.html" title="java---数位dp---计数问题（每日一道算法2022.10.21）">java---数位dp---计数问题（每日一道算法2022.10.21）</a></li> <li><span>17</span><a href="http://www.051e.com/it/1077886.html" title="在javaweb项目中进行添加的时候，下拉框选中的数据怎末进行保存呢">在javaweb项目中进行添加的时候，下拉框选中的数据怎末进行保存呢</a></li> <li><span>18</span><a href="http://www.051e.com/it/1077879.html" title="移动开发课程-作业二">移动开发课程-作业二</a></li> <li><span>19</span><a href="http://www.051e.com/it/1077876.html" title="基本数据类型转换（java）">基本数据类型转换（java）</a></li> <li><span>20</span><a href="http://www.051e.com/it/1077871.html" title="Spring Boot工程配置多数据源，Cannot resolve configuration property dynamic">Spring Boot工程配置多数据源，Cannot resolve configuration property dynamic</a></li> </ul> </div> </div> </div> <!-- 公共尾部 --> <div class="link main"> <div class="link_tit"> <span class="on">热门相关搜索</span> </div> <div class="link_tab"> <div class="link_con"> <a href="http://www.051e.com/TAG_1/beijingyinshuaxueyuanpaiming.html">北京印刷学院排名</a> <a href="http://www.051e.com/TAG_1/beifanggongyedaxuepaiming.html">北方工业大学排名</a> <a href="http://www.051e.com/TAG_1/beijinghangkonghangtiandaxuepaiming.html">北京航空航天大学排名</a> <a href="http://www.051e.com/TAG_1/shoudoujingjimaoyidaxuepaiming.html">首都经济贸易大学排名</a> <a href="http://www.051e.com/TAG_1/zhongguochuanmeidaxuepaiming.html">中国传媒大学排名</a> <a href="http://www.051e.com/TAG_1/shoudoushifandaxuepaiming.html">首都师范大学排名</a> <a href="http://www.051e.com/TAG_1/zhongguodezhidaxue(beijing)paiming.html">中国地质大学(北京)排名</a> <a href="http://www.051e.com/TAG_1/beijingxinxikejidaxuepaiming.html">北京信息科技大学排名</a> <a href="http://www.051e.com/TAG_1/zhongyangminzudaxuepaiming.html">中央民族大学排名</a> <a href="http://www.051e.com/TAG_1/zhongguohuquxueyuanpaiming.html">中国戏曲学院排名</a> <a href="http://www.051e.com/TAG_1/hebeizhengfazhiyexueyuanpaiming.html">河北政法职业学院排名</a> <a href="http://www.051e.com/TAG_1/hebeijingmaodaxuepaiming.html">河北经贸大学排名</a> <a href="http://www.051e.com/TAG_1/tianjinzhongdeyingyongjishudaxuepaiming.html">天津中德应用技术大学排名</a> <a href="http://www.051e.com/TAG_1/tianjinyixuegaodengzhuankexuejiaopaiming.html">天津医学高等专科学校排名</a> <a href="http://www.051e.com/TAG_1/tianjinmeishuxueyuanpaiming.html">天津美术学院排名</a> <a href="http://www.051e.com/TAG_1/tianjinyinlexueyuanpaiming.html">天津音乐学院排名</a> <a href="http://www.051e.com/TAG_1/tianjingongyedaxuepaiming.html">天津工业大学排名</a> <a href="http://www.051e.com/TAG_1/beijinggongyedaxuegengdanxueyuanpaiming.html">北京工业大学耿丹学院排名</a> <a href="http://www.051e.com/TAG_1/beijingjingchaxueyuanpaiming.html">北京警察学院排名</a> <a href="http://www.051e.com/TAG_1/tianjinkejidaxuepaiming.html">天津科技大学排名</a> <a href="http://www.051e.com/TAG_1/tielingweishengzhiyexueyuanpaiming.html">铁岭卫生职业学院排名</a> <a href="http://www.051e.com/TAG_1/shenyangbeiruanxinxizhiyejishuxueyuanpaiming.html">沈阳北软信息职业技术学院排名</a> <a href="http://www.051e.com/TAG_1/jilinyishuxueyuanpaiming.html">吉林艺术学院排名</a> <a href="http://www.051e.com/TAG_1/jilintiyoxueyuanpaiming.html">吉林体育学院排名</a> <a href="http://www.051e.com/TAG_1/baichengshifanxueyuanpaiming.html">白城师范学院排名</a> <a href="http://www.051e.com/TAG_1/tonghuashifanxueyuanpaiming.html">通化师范学院排名</a> <a href="http://www.051e.com/TAG_1/jilinnongyedaxuepaiming.html">吉林农业大学排名</a> <a href="http://www.051e.com/TAG_1/changchundianzikejixueyuanpaiming.html">长春电子科技学院排名</a> <a href="http://www.051e.com/TAG_1/jilingongyezhiyejishuxueyuanpaiming.html">吉林工业职业技术学院排名</a> <a href="http://www.051e.com/TAG_1/jilinsifajingguanzhiyexueyuanpaiming.html">吉林司法警官职业学院排名</a> <a href="http://www.051e.com/TAG_1/jilinjingchaxueyuanpaiming.html">吉林警察学院排名</a> <a href="http://www.051e.com/TAG_1/changchunjiankangzhiyexueyuanpaiming.html">长春健康职业学院排名</a> <a href="http://www.051e.com/TAG_1/jilinshuilidianlizhiyexueyuanpaiming.html">吉林水利电力职业学院排名</a> <a href="http://www.051e.com/TAG_1/daqingshifanxueyuanpaiming.html">大庆师范学院排名</a> <a href="http://www.051e.com/TAG_1/heilongjiangdaxuepaiming.html">黑龙江大学排名</a> <a href="http://www.051e.com/TAG_1/haerbinjianqiaoxueyuanpaiming.html">哈尔滨剑桥学院排名</a> <a href="http://www.051e.com/TAG_1/haerbintiedaozhiyejishuxueyuanpaiming.html">哈尔滨铁道职业技术学院排名</a> <a href="http://www.051e.com/TAG_1/haerbinyingyongzhiyejishuxueyuanpaiming.html">哈尔滨应用职业技术学院排名</a> <a href="http://www.051e.com/TAG_1/heilongjiangminzuzhiyexueyuanpaiming.html">黑龙江民族职业学院排名</a> <a href="http://www.051e.com/TAG_1/qitaihezhiyexueyuanpaiming.html">七台河职业学院排名</a> <a href="http://www.051e.com/TAG_1/heilongjiangshengtaigongchengzhiyexueyuanpaiming.html">黑龙江生态工程职业学院排名</a> <a href="http://www.051e.com/TAG_1/huadongshifandaxuepaiming.html">华东师范大学排名</a> <a href="http://www.051e.com/TAG_1/shanghaijiankangyixueyuanpaiming.html">上海健康医学院排名</a> <a href="http://www.051e.com/TAG_1/huadongligongdaxuepaiming.html">华东理工大学排名</a> <a href="http://www.051e.com/TAG_1/shanghaijiaotongdaxuepaiming.html">上海交通大学排名</a> <a href="http://www.051e.com/TAG_1/tongjidaxuepaiming.html">同济大学排名</a> <a href="http://www.051e.com/TAG_1/fudandaxuepaiming.html">复旦大学排名</a> <a href="http://www.051e.com/TAG_1/shanghaishadaxueyuanpaiming.html">上海杉达学院排名</a> <a href="http://www.051e.com/TAG_1/shanghaihujuxueyuanpaiming.html">上海戏剧学院排名</a> <a href="http://www.051e.com/TAG_1/shanghaiyinlexueyuanpaiming.html">上海音乐学院排名</a> </div> </div> </div> <div class="footer"> <div class="dl_con"> <div class="width1200"> <dl> <dt>学习工具</dt> <dd><a href="http://www.051e.com/tools/algebra/" title="代数计算器">代数计算器</a></dd> <dd><a href="http://www.051e.com/tools/trigonometry/" title="三角函数计算器">三角函数</a></dd> <dd><a href="http://www.051e.com/tools/analytical/" title="解析几何">解析几何</a></dd> <dd><a href="http://www.051e.com/tools/solidgeometry/" title="立体几何">立体几何</a></dd> </dl> <dl> <dt>知识解答</dt> <dd><a href="http://www.051e.com/ask/1033/" title="教育知识">教育知识</a></dd> <dd><a href="http://www.051e.com/ask/1180/" title="百科知识">百科知识</a></dd> <dd><a href="http://www.051e.com/ask/1155/" title="生活知识">生活知识</a></dd> <dd><a class="http://www.051e.com/ask/1199/" title="常识知识">常识知识</a></dd> </dl> <dl> <dt>写作必备</dt> <dd><a href="http://www.051e.com/zuowen/1128/" title="作文大全">作文大全</a></dd> <dd><a href="http://www.051e.com/zuowen/1130/" title="作文素材">作文素材</a></dd> <dd><a href="http://www.051e.com/zuowen/1132/" title="句子大全">句子大全</a></dd> <dd><a href="http://www.051e.com/zuowen/1154/" title="实用范文">实用范文</a></dd> </dl> <dl class="mr0"> <dt>关于我们</dt> <dd><a href="http://www.051e.com/about/index.html" title="关于我们" rel="nofollow">关于我们</a></dd> <dd><a href="http://www.051e.com/about/contact.html" title="联系我们" rel="nofollow">联系我们</a></dd> <dd><a href="http://www.051e.com/sitemap/" title="网站地图">网站地图</a></dd> </dl> </div> </div> <div class="copyright"> <p>终身学习网 版权所有 ©2023-2025 051e.com     ICP备案号：<a href="https://beian.miit.gov.cn" rel="nofollow">京ICP备12030808号</a> </p> </div> </div> <!-- 手机端 --> <div class="m_foot_top"> <img src="http://www.051e.com/foot.gif" width="192" height="27" alt="我们一直用心在做"><br/> <a href="http://www.051e.com/about/index.html">关于我们</a> <a href="http://www.051e.com/archiver/">文章归档</a> <a href="http://www.051e.com/sitemap">网站地图</a> <a href="http://www.051e.com/about/contact.html">联系我们</a> <p>版权所有 ©2023-2025 051e.com</p> <p>ICP备案号：<a href="http://beian.miit.gov.cn/" rel="nofollow">京ICP备12030808号</a></p> </div> <div class="to_top" style="display:none;"><img src="http://www.051e.com/skin/sinaskin/kaotop/picture/to_top.png"></div> <!--广告!--> <script type="text/javascript" src="http://www.051e.com/skin/sinaskin/kaotop/js/top.js"></script> <script src="http://www.051e.com/skin/sinaskin/kaotop/js/fixed.js" type="text/javascript"></script> <!--头条搜索!--> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?8e970cc56ab71c9869c17b8be046b3a9faa0a1af957d4e0e671a1c8a287d098bfd9a9dcb5ced4d7780eb6f3bbd089073c2a6d54440560d63862bbf4ec01bba3a"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script> <!--头条搜索结束!--> <!--百度推送!--> <script> (function(){ var bp = document.createElement('script'); bp.src = '//push.zhanzhang.baidu.com/push.js'; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <!--百度推送结束!--> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?debd760bceebed9e0328bf80f349ab68"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> </div> <script type="text/javascript"> $(".alert_kf").click(function() { mantis.requestChat(); }); </script> <script type="text/javascript"> var mySwiper_weixin = new Swiper('.pc_swiper_weixin', { autoplay: 3000, //可选选项，自动滑动 loop: true, speed: 1000, pagination: '.swiper-pagination', paginationClickable: true, }) </script> <script type="text/javascript"> $(function() { $(window).scroll(function() { if ($(window).scrollTop() > 100) { $(".to_top").fadeIn(1000); } else { $(".to_top").fadeOut(1000); } }); $(".to_top").click(function() { if ($('html').scrollTop()) { $('html').animate({ scrollTop: 0 }, 300); return false; } $('body').animate({ scrollTop: 0 }, 300); return false; }); }); </script> </body> </html>