HTML5 语义元素LOGIN

HTML5 语义元素

语义元素介绍

HTML5标准增加很多新的语意元素,若按种类来区分,有页面结构上的、文本内容上的、表单里的等等。

而这里主要介绍页面结构上的新元素。

什么是语义元素

简单来讲,语义元素就是为元素(标签)赋予某种意义,元素的名称就是元素要表达的意思。

如<header>表示页眉、<footer>表示页脚。

特点:

①易于维护:使用语义元素将会有更清晰的页面结构信息,易于页面的后续维护。不需要再查看代码:找到div再找到具体的ClassName。

②无障碍性:有助于屏幕阅读器和其他辅助工具的读取。

③利于搜索引擎优化:搜索机器人在检查一些HTML5的语义元素后,可以收集其索引页面的信息。

HTML5 语义元素

<header>:定义网页或文章的头部区域。可包含logo、导航、搜索条等内容。

<article>  

<header>    

<h1>Internet Explorer 9</h1>    

<p><time pubdate datetime="2011-03-15"></time></p>  

</header>  

<p>Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p>

</article>

   浏览器最低版本:IE 9、Chrome 5


使用说明:
①当用于标注网页的页眉时,可包含logo、导航、搜索条等信息。
②当用于标注内容的标题时,只有当标题还附带其他信息时才考虑用<header>,一般情况下用<h1>标注标题即可。

<main> : 定义网页中的主体内容。

  浏览器最低版本:IE 不支持、Chrome 35

<footer>:定义网页或文章的尾部区域。可包含版权、备案等内容。

<footer>  

<p>Posted by: Hege Refsnes</p> 

  <p><time pubdate datetime="2012-03-01"></time></p>

</footer>

  浏览器最低版本:IE 9、Chrome 5


使用说明:
①作为网页的页脚时,通常包含网站版权、法律限制及链接等内容。
②作为文章的页脚时,通常包含作者相关信息。

<nav>:标注页面导航链接。包含多个超链接的区域。

<nav>    

<a href="/html/">HTML</a> |    

<a href="/css/">CSS</a> |    

<a href="/js/">JavaScript</a> |    

<a href="/jquery/">jQuery</a>

</nav>

    浏览器最低版本:IE 9、Chrome 5


使用说明:
①一个页面可包含多个<nav>元素,如页面的导航和相关文章推荐等。
②<footer>区域里的联系信息、认证信息可不必包含在<nav>元素里。

<section>:通常标注为网页中的一个独立区域。

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

  浏览器最低版本:IE 9、Chrome 5


使用说明:
可作为网页中的独立区域,如文章中的一小节。

<article>:完整、独立的内容块;里面可包含独立的<header>、<footer>等结构元素。如新闻、博客文章等独立的内容快(不包括评论或者作者简介)。

<article>  

<h1>Internet Explorer 9</h1>  

<p>Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>

</article>

  浏览器最低版本:IE 9、Chrome 5

<aside>:定义周围主内容之外的内容块。如:注解。

<p>My family and I visited The Epcot center this summer.</p> 

 <aside>  

<h4>Epcot Center</h4>  

<p>The Epcot Center is a theme park in Disney World, Florida.</p>

</aside>

  浏览器最低版本:IE 9、Chrome 5

<figure>:代表一段独立的内容, 经常与<figcaption>(表示标题)配合使用, 可用于文章中的图片、插图、表格、代码段等等。

  浏览器最低版本:IE 9、Chrome 8

<figcaption>:定义 <figure> 元素的标题。

  浏览器最低版本:IE 9、Chrome 8

示意图:

1016.png


下一节
<!doctype html> <html> <head>  <meta charset="utf-8">  <title>php.cn</title>  </head> <body> <article> <header> <h1>HTML5为什么火</h1> <p><time pubdate datetime="2016-05-03"></time></p> </header> <p>以往,我们在Web上还只是上网看一些基础文档,但现在,Web是一个内涵非常丰富的平台。 和以前版本不同的是,HTML5并非仅仅用来表示Web内容,在这个平台上还能非常方便的加入视频、音频、图象、动画,以及同电脑的交互。<br /> HTML5的意义在于它带来了一个无缝的网络,无论是PC、平板电脑,还是智能手机都能很方便的浏览基于HTML5的各类网站。 <br /><br /> 对用户来说好处在于,我们手机上的App也会越来越少,用H5实现的游戏,不需要下载后安装, 就能立即在手机界面中生成一个APP图标,使用手机中的浏览器来运行,新增的导航标签也能更好的帮助小屏幕设备和视力障人士的使用。 H5拥有服务器推送技术,能让用户拥有更好的网页上的实时聊天,更快的网游体验。 </p> </article> </body> </html>
提交重置代码
章节课件