HTML5教程 10分钟了解Elements的使用-职坐标

HTML5教程 10分钟了解Elements的使用

沉沙 2018-06-05 来源：阅读 1690 评论 0

摘要：HTML Elements是HTML DOM中的概念，是DOM的Node。Element是可以有属性和子节点的node。希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。

首先说明HTML Elements是HTML DOM中的概念，是DOM的Node。Element是可以有属性和子节点的node。node还有Text, Attribute,Comment,Namespace等。顺便说下HTML Tags是个语法概念，HTML Tags are used to delimit the start and end of elements in the markup.

对Element的分类定义，语义上和语法上是不一样的。

在语义上，根据数据的content model定义来确定使用哪个element，是绘制图形数据则用canvas element，是视频数据则用video element，一篇文章数据用article element，等等。div element永远是最后考虑的。

特别注意Grouping content类的div element和Sections类的article element/section element的区别。

HTML5以前div element随便用都没问题，HTML5则明确限定了div element的使用范围。它没有任何特别的语义，纯粹用于有着共同的属性/样式/脚本需求的一组连续元素。如果这组元素本身已有特殊语义的父元素，就没必要再加一层div了。

虽然从官方详细说明来看，article element可使用于所有可分发或可复用的独立完整的内容数据，比如可用于Web Widget/Gadget，section element可以用于上下文中一组有着共同主题的内容数据，比如网站主页中可分成an introduction, news items, and contact information的数据部分，哇，这样div element几乎没有存在的必要了，但是从官方示例代码以及单词字面意思来看，通常article element仅使用于有header或footer element及主体内容的完整数据，比如文章，section element仅用于有h1-h6 element的片段数据（一般有多片同样结构的数据），比如文章小节。

这里写个简单的例子。
HTML5以前一般页面主结构的元素使用

<!DOCTYPE html><html><head>
  <title>Blog</title></head><body>
  <div id="header">
    <div id="nav">
      <h1>Navigation</h1>
      <ul>
        <li><a href="articles.html">Index of all articles</a></li>
      </ul>
    </div>
  </div>
  <div id="main">
    <div class="article">
      <div class="header">
        <h1>Hello</h1>
      </div>
      <div class="articleBody">
        ...
      </div>
      <div class="footer">
        <p>Posted
          <span>2016-03-08 Tuesday</span>.</p>
      </div>
    </div>
    ...
  </div>
  <div id="footer">
  </div>
</html>

HTML5一般博客主页结构的元素使用

<!DOCTYPE html><html><head>
  <title>Blog</title></head><body>
  <header>
    <nav>
      <h1>Navigation</h1>
      <ul>
        <li><a href="articles.html">Index of all articles</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article itemprop="blogPosts">
      <header>
        <h1 itemprop="headline">Hello</h1>
      </header>
      <div itemprop="articleBody">
        ...
      </div>
      <footer>
        <p>Posted
          <time itemprop="datePublished" datetime="2016-03-08">Tuesday</time>.</p>
      </footer>
    </article>
    ...
  </main>
  <footer>
  </footer></body>
</html>

简洁，在结构和语义清晰的前提下，能省则省。还有属性的语法规则，列在前面的都是最省写法。

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML5/CSS3频道，获取更多WEB前端知识！

html5 css3入门到精通 html5 css3入门 html5教程w3c

本文由 @沉沙发布于职坐标。未经许可，禁止转载。