HTML5的新语义化的竹签

在HTML五在此之前运用HTML+CSS文书档案结构写法

ID选择器表明id选取器——用于标志页面上一定成分(举例站点导航、页眉、页脚)并且必须唯壹;
也足以用来标记持久结构性元素(如主导航、内容区域)

class选用器表明 class类选择器——能够使用于页面任意多个因素,分外适合标志内容类型或其余一般的条规】

图片 1

Diagram illustrates a
typical two-column layout marked up using divs with id and class
attributes.**It contains a header, footer, and horizontal navigation bar below the header.

  • The main
    content contains an article
    and sidebar on
    the right.*

(翻译:上海教室展现优秀的两列布局标识使用div的id和class类属型.它富含多个页眉,页脚,横向的领航栏.主要内容包罗一篇小说和左侧的侧面栏

缺点
一.不便利SEO搜索引擎对页面内容的抓取

       二.文书档案组织定义不强烈

于是乎HTML伍油然则生,化解上述难题,专门增多页眉、页脚、导航、小说内容等跟结构有关的布局成分标签

图片 2

 The div elements can be
replaced with the new
elements: header, nav, section,
article, aside, and footer.

(翻译:div成分被替换到新的成分:header 页眉, nav
导航, section 区块, article 小说, aside 侧边栏 , and footer
页脚.)

HTML伍协会代码

<body>
  <header>...</header>
  <nav>...</nav>
  <article>
     <section>
       ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

对HTML5语义化标签解释

<main> 定义重要内容

<header>
页眉,可能包蕴标题元素,也得以分包别的因素,像logo、分节底部、搜索表单等

<header>
 <hgroup>
    <h1>页眉主标题</h1>
    <h1>页眉副标题</h1>
 </hgroup>
</header>

<nav> 定义注重模块也许导航链接的集合

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<article>是二个破例的section标签,它比section具备更通晓的语义,它象征2个单独的、完整的相干内容块,可单独于页面其余内容使用。比方一篇完整的论坛帖子,1篇博客作品,二个用户评价等等。一般的话,article会有标题部分(平日包括在header内),有时也会含有footer。article能够嵌套,内层的article对外围的article标签有专属关系。比方,一篇博客的文章,能够用article彰显,然后一些商量能够以article的款型嵌入在那之中。

<article>
   <header>
       <hgroup>
             <h1>这是一篇介绍HTML 5结构标签的文章</h1>
             <h2>HTML 5的革新</h2>
      </hgroup>
      <time datetime="2011-03-20">2011.03.20</time>
   </header>
   <p>文章内容详情</p>
</article>

<aside>与1个和其它页面剧情大概无关的局地,被认为是独立于该内容的1局地还要能够被单独的拆分出来不会使全部受影响。其一般性表现为侧边栏恐怕放置内容。

<aside id="sidebar">
 <section class="widget">
  <h4 class="widgettitle">Sidebar</h4>
  <ul>
    <li><a href="#">WordPress</a> (3)</li>
    <li><a href="#">Design</a> (23)</li>
    <li><a href="#">Design </a>(18)</li>
  </ul>
 </section>
</aside>

<section>表示文书档案中的三个区域(或节),比方,内容中的二个专题组,一般的话会有隐含1个标题(heading)

诚如经过是或不是含有三个题名 (<h1><h6> element)
作为子节点 来 辨识每个<section>

<section>
  <h1>这里是section标题...</h1>
  <p>这里是section标题对于内内容...</p>
</section>

<figure> 元素代表1段独立的内容.用于对成分进行整合。多用于图片与图片描述组合。

<!-- Just a figure -->
<figure>
  <img src="figure.png" alt="figure.png图片按" title="figure图片">
</figure>
<p>段落</p>

<!-- Figure with figcaption -->
<figure>
   <img src="figure.png" alt="figure.png图片按" title="figure图片">picture"> 
   <figcaption>figure图片描述</figcaption>
</figure>
<p>段落.....</p>

<footer>
定义了整整页面或内部某个的页脚(并且普通包蕴原创小编,版权音信,联系格局和站点地图,文书档案相关的链接等新闻)

<footer>
  原创作者;版权信息;联系方式;文档相关链接等...
</footer>

<hgroup>
标签用于对网页或区段(section)的标题实行重组。使用新的HTML5成分hgroup,可以为header要素增添更加多的音信。(底部主标题/副题目)

<hgroup>
  <h1>Main title</h1>
  <h2>Secondary title</h2>
</hgroup>

【参考资料】 

 
http://developer.telerik.com/featured/w3c-vs-whatwg-html5-specs-differences-documented/

 
https://samdutton.wordpress.com/2015/04/02/high-performance-html/

 
https://developer.mozilla.org/CN/docs/Web/HTML/Element

 
http://www.cnblogs.com/houodeit/archive/2012/05/27/2519798.html

 
http://alistapart.com/article/previewofhtml5

  https://dev.w3.org/html5/html-author/\#syntactic-overview
HTML5 API

作者:Avenstar

出处:http://www.cnblogs.com/zjf-1992/p/6182406.html

有关作者:专注于WEB前端开辟

正文版权归小编全部,转发请标明原来的文章链接。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图