HTML5新增添的标签以及已移除的元素

    作者:课课家教育更新于: 2016-07-26 16:26:17

      一、什么是HTML5

      HTML4.01诞生于1999年12月24日,W3C推荐标准。自从那以后,Web世界已经经历了巨变。

      HTML5是下一代HTML标准,诞生于2014年10月28日,W3C推荐标准。HTML5仍处于完善之中。然而,大部分现代浏览器已经具备了某些HTML5支持,如:Google Chrome和Mozilla Firefox浏览器。

    HTML5新增添的标签以及已移除的元素_HTML5开发_HTML_课课家

      在HTML5标准中,新增加了几个用于增添页面语义的标签,这些标签有:nav、aside、section和article等。与别的大多数标签不同,浏览器在解释渲染这些标签的时候仅仅把它作为普通的div块级元素来处理,不会添加任何额外的展现逻辑;也就是说,这些标签仅用于增添语义。对于Web开发人员而言,使用这些标签的实际意义主要有2点:搜索引擎优化,以及增加页面的可用性(Accessibility)。

      、元素分类

      在元素分类上,nav、aside、section和article称之为“SectioningContent”。

      1.nav

      nav元素主要用于包含页面上的导航链接,因此在nav元素中直接包含ul元素或者ol元素是一种非常常见的做法。尽管如此,nav中也可以不包含ul或者ol元素,比如在nav元素中可以包含一个文章段落(p标签),而在该文章段落中包含一些链接(a标签)。

      与article元素一样,nav元素内部不能出现main元素。

      2.aside

      aside元素一般用于表示页面上的侧边栏,不过该元素仅仅只在语义上表示“侧边栏”,浏览器在解析渲染该标签时只会将其作为普通的div块级元素来处理。如果要真正得到侧边栏的效果,则Web开发人员需要自己编写CSS来实现。

      3.section

      section元素意指页面或Web应用中的一部分,不同的section互相之间其“主题”或者说“基调”应当有所不同,一般会通过在section元素内放置heading元素(h1-h6)来定义这个“主题”/“基调”。

      把section当成div使用是一种错误——除了页面可展现的内容,section的子元素不应该承担任何其它角色(样式、行为、辅助标签等)。

      4.article

      article元素可用于表示页面上某块具有一定独立性的内容,这个内容可以是一篇文章、论坛上的一个帖子/评论、一篇博客、一个可交互的控件等。article标签可以嵌套使用,当这么做时,子article元素与父article元素在逻辑上必须有相应的关联。如Web开发者可以将一篇博客的正文以及评论作为父级article元素,而将其中的各个评论作为子article元素。

      article元素内部不能出现main元素——main元素意指页面的主要内容,当有main元素时,article元素作为main元素的子元素而存在。

      二、HTML5的新特性

      HTML5中的一些有趣的新特性:

      1.用于绘画的canvas元素;

      2.用于媒介回放的video和audio元素;

      3.对本地离线存储的更好的支持;

      4.新的特殊内容元素,比如article、footer、header、nav、section;

      5.新的表单控件,比如calendar、date、time、email、url、search。

      、已移除元素

      有些HTML 4.01元素在HTML5中已经被删除,HTML5不支持或不赞成使用的标签有:
    、、、、<strike>。</strong></acronym></p> <p><strong>  1.<strong><acronym></strong></strong></p> <center><nav></nav> <p style="text-align: left;">  定义只取首字母的缩写,HTML5不支持。使用<abbr>定义缩写代替,其中title属性可用于在鼠标指针移动到元素上时显示出缩写的完整版本,坚持写上title,这样对浏览器和搜索引擎都比较友好。</abbr></p> <p style="text-align: left;"><abbr></abbr><strong>  2.<applet></strong></p> <p style="text-align: left;">  定义嵌入的applet,HTML5中不支持。使用object元素标签代替。</p> <p style="text-align: left;">  <strong>3.<strong><b></strong></strong></p> <p style="text-align: left;">  定义规定粗体文本。支持但根据HTML5规范,在没有其他合适标签更合适时,才应该把标签作为最后的选项。如果是为了强调重要的文本,建议使用标签更为合适;如果只是纯粹为了加粗文本,建议使用CSS样式font-weight:bold设置粗体文本。</p> <p style="text-align: left;">  <strong>4.<strong><basefont></strong></strong></p> <p style="text-align: left;">  定义页面中文本的默认字体系列、颜色或大小,只有InternetExplorer支持。使用CSS样式表代替。</p> <p style="text-align: left;">  <strong>5.<strong><center></strong></strong></p> <center></center> <p style="text-align: left;">  定义文本居中,HTML4.01不赞成使用,HTML5不支持。使用CSS样式text-align:center设置文本居中。</p> <p style="text-align: left;">  <strong>6.<strong><font></strong></strong></p> <p style="text-align: left;">  定义定义文字的字体、大小和颜色,HTML4.01不赞成使用,HTML5不支持。使用样式设置。</p> <p style="text-align: left;">  迄今为止,虽然并没有什么流行的浏览器可以完全的支持所HTML5规范的所有功能,但可以确信HTML5有一天将是WEB更加的美好。</p> </center><div class="art_tag">标签: <a title="HTML5开发" href="https://m.kokojia.com/s4160/">HTML5开发</a><a title="HTML" href="https://m.kokojia.com/s163/">HTML</a><a title="web开发" href="https://m.kokojia.com/s1810/">web开发</a></div><div class="updown"><p><span>上一篇:</span><a title="微信公众号运营中要注意哪些问题?" href="/article/20523.html">微信公众号运营中要注意哪些问题?</a></p><p><span>下一篇:</span><a title="微信公众号运营中要注意哪些问题?" href="/article/18937.html">如何实现Android日期时间选择器以及自定义大小的设置</a></p></div></ul></div><div class="course_recom"><div class="cr-title"><span class="b-border">为您推荐</span></div><ul class="course_lists"><li><div class="course_pico"><a href="/course-3108.html" title="手把手教你学Android视频教程(基础篇)"><img src="https://www.kokojia.com/Public/course_image/big/2016-01/569c9a0a029ed.png" alt="手把手教你学Android视频教程(基础篇)"></a></div><div class="courses_info"><div class="courses_names"><a href="/course-3108.html" title="手把手教你学Android视频教程(基础篇)">手把手教你学Android视频教程(基础篇)</a></div><p><span class="price_area">¥8.80</span></p></div></li><li><div class="course_pico"><a href="/course-5691.html" title="Android高级开发之NDK课程视频教程"><img src="https://www.kokojia.com/Public/course_image/big/2018-10/5bbb7198d75ef.png" alt="Android高级开发之NDK课程视频教程"></a></div><div class="courses_info"><div class="courses_names"><a href="/course-5691.html" title="Android高级开发之NDK课程视频教程">Android高级开发之NDK课程视频教程</a></div><p><span class="price_area">¥179.00</span></p></div></li><li><div class="course_pico"><a href="/course-4531.html" title="过周末App,iOS中级项目实战视频教程"><img src="https://www.kokojia.com/Public/course_image/big/2017-06/593a0be484580.jpeg" alt="过周末App,iOS中级项目实战视频教程"></a></div><div class="courses_info"><div class="courses_names"><a href="/course-4531.html" title="过周末App,iOS中级项目实战视频教程">过周末App,iOS中级项目实战视频教程</a></div><p><span class="price_area">¥398.00</span></p></div></li><li><div class="course_pico"><a href="/course-4381.html" title="Android从入门到精通经典视频教程"><img src="https://www.kokojia.com/Public/course_image/big/2017-05/591943e249c7f.jpeg" alt="Android从入门到精通经典视频教程"></a></div><div class="courses_info"><div class="courses_names"><a href="/course-4381.html" title="Android从入门到精通经典视频教程">Android从入门到精通经典视频教程</a></div><p><span class="price_area">¥199.00</span></p></div></li><li><div class="course_pico"><a href="/course-4672.html" title="虚幻引擎UE4材质节点初级探究视频教程"><img src="https://www.kokojia.com/Public/course_image/big/2017-07/597602e269661.png" alt="虚幻引擎UE4材质节点初级探究视频教程"></a></div><div class="courses_info"><div class="courses_names"><a href="/course-4672.html" title="虚幻引擎UE4材质节点初级探究视频教程">虚幻引擎UE4材质节点初级探究视频教程</a></div><p><span class="price_area">¥98.00</span></p></div></li><li><div class="course_pico"><a href="/course-3365.html" title="Mugeda专业级HTML5交互动画入门篇(新手必学)视频教程"><img src="https://www.kokojia.com/Public/course_image/big/2016-10/5805bac058dc1.jpeg" alt="Mugeda专业级HTML5交互动画入门篇(新手必学)视频教程"></a></div><div class="courses_info"><div class="courses_names"><a href="/course-3365.html" title="Mugeda专业级HTML5交互动画入门篇(新手必学)视频教程">Mugeda专业级HTML5交互动画入门篇(新手必学)视频教程</a></div><p><span class="price_area">¥1.00</span></p></div></li></ul></div></div><div class="common_bottom-tar"><ul><li><a href="https://m.kokojia.com"><dl><dt><i class="tar-index"></i></dt><dd> 首页 </dd></dl></a></li><li><a href="https://m.kokojia.com/list/"><dl><dt><i class="tar-class"></i></dt><dd> 分类 </dd></dl></a></li><li><a href="https://m.kokojia.com/?m=Wap&a=myInfo"><dl><dt><i class="tar-my"></i></dt><dd> 我的 </dd></dl></a></li><li><a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.nuoxian.kokojia"><dl><dt><i class="tar-app"></i></dt><dd> APP </dd></dl></a></li><ul></div><script> $(".common_bottom-tar li").click(function (){ $(this).addClass("on"); }); if ($.cookie('close_ad')!= "close"){ $(".common_bottom-ad").show(); } $(".common_bottom-ad .ad-close").click(function (){ $(".common_bottom-ad").hide(); $.cookie('close_ad', 'close', { expires: 1 }); }); </script><div style="display: none;" class="headerMask"></div><div class="footer"><p class="home_footer mb5" style="display:none"><a class="pc_web" style="margin-right:10px;" href="http://www.kokojia.com/list/2.html"></a><span class="split"></span><a class="mb_web" style="margin-left:10px;" href="http://m.kokojia.com/"></a></p><!--p>咨询电话:020-32643462 (<a href="/?m=Wap&a=telephone">联系方式</a>)</p--><p><a href="http://m.kokojia.com/?m=Wap&a=aboutkoko">广州挪贤计算机科技有限公司</a> 版权所有</p><p>© 2013-2025 课课家 kokojia.com</p></div></div><a style="display:none;" id="returnTop" href="javascript:scroll(0,0)" class="hide"><i class="icon-arrow-t"></i></a><div class="right_menu" style="position: fixed;right: -270px;width:270px;display: block;z-index:9999"><div class="right_menu_con"><h2 class="hjclass-txt">课课家教育</h2><div class="menu-list clearbox"><a href="http://m.kokojia.com"><span class="item-icon item-1"><i class="icon-home"></i></span> 首页 </a><a href="http://m.kokojia.com/list/"><span class="item-icon item-2"><i class="icon-course"></i></span> 课程分类 </a><a href="http://m.kokojia.com/packageList.html"><span class="item-icon item-9"><i class="fa fa-cubes" aria-hidden="true"></i></span> 课程套餐 </a><a href="http://m.kokojia.com/roadmapList.html"><span class="item-icon item-1"><i class="fa fa-map-o" aria-hidden="true"></i></span> 线路图 </a><a href="http://m.kokojia.com/book/"><span class="item-icon item-7"><i class="icon-book"></i></span> 读书 </a><a href="http://m.kokojia.com/article/list/"><span class="item-icon item-4"><i class="icon-quan"></i></span> 资讯 </a><a href="http://m.ebuy.kokojia.com"><span class="item-icon item-6"><i class="icon-item"></i></span> 商城 </a><a href="https://m.blog.kokojia.com"><span class="item-icon item-11"><i class="fa fa-code" aria-hidden="true"></i></span> 博客 </a><a href="http://m.bbs.kokojia.com"><span class="item-icon item-3"><i class="icon-my"></i></span> 论坛 </a><a href="http://m.kokojia.com/?m=Wap&a=myCourse"><span class="item-icon item-8"><i class="icon-xb"></i></span> 我的课程 </a><a href="http://m.kokojia.com/?m=Wap&a=payCenter"><span class="item-icon item-5"><i class="icon-cz"></i></span> 帐户中心 </a><a href="http://m.kokojia.com/?m=Wap&a=courseCart"><span class="item-icon item-10"><i class="icon-cart2"></i></span> 购物车 </a></div></div></div><div class="user_center" id="user_center"><div class="user_center_con unlogin"><div class="myinfo-box clearbox"><div class="userimg"><div class="userimg_con"><img src="/Public/images/wap/anonymous.png"></div></div><p class="unlogin-txt">未登录</p></div><div class="links-login"><a href="/login.html" class="btn btnGreen">登录</a><a href="/register.html" class="btn btnDark mt20">注册</a></div></div><script type="text/javascript" src="/Public/js/Wap/left.js"></script><script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?16501697fab310f5102e2b71a31b453a"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script><script type="text/javascript"> var htmlH = $(document).height(); $("#container").css("height", 'auto'); $(".right_menu").css("height", htmlH); </script></body></html>1