HTML5_新标签

(一)HTML5 添加的一些新标签:

  • <section>, <video>, <progress>, <nav>, <meter>, <time>, <aside>, <canvas>
  • 作用:更加的语义化

(二)新的布局页面展示:

  • 代码如下:
<!DOCTYPE html>
<html>
  <head>
    <title>my page</title>
  </head>
  <body>
    <header>header</header>
    <nav>nav</nav>
    <article>
       <section>section</section>
    </article>
    <aside>aside</aside>
    <footer>footer</footer>
  </body>
</html>

(三)HTML5标签详解

  • <section>——对内容进行分块,分段
  • section表示一段专题性的内容,一个 section 元素通常由内容以及标题组成。
  • 例如:文章分段等
  • 代码示例:
<section>
       <h1>潜行者m的个人介绍</h1> 
       <p>潜行者m是一个男的中国人。。。。。。</p>
</section>
  • note:
    相邻的 section 元素的内容应当是相关的,而不是像 article 那样独立
  • <article>——代表一个独立的、完整的相关内容块
  • 当我们描述一件具体的事物的时候,通常鼓励使用article,而不是section
  • 例如:博客中的一篇文章,论坛中的一个帖子等,article中通常包含头部(header)、底部(footer
  • 代码示例:
<article> 
    <header>
       <h1>潜行者m的个人介绍</h1>
    </header> 
    <p>潜行者m是一个男的中国人。。。。。</p>
    <footer> 
       <p>潜行者m版权所有</p>
    </footer>
</article>
  • note:
    特殊的section标签,它比section的语义更明确

  • <nav>——页面导航的链接组

  • 代码示例:

<nav> 
      <ul>
       <li>...</li>
       <li>...</li>
       <li>...</li>
      </ul>
</nav>
  • <aside>——用来呈现非正文的内容,是页面里一个单独的部分
  • 它包含的内容与页面的主要内容是分开的,可以被删除,而不会影响到网页的内容、章节或是页面所要传达的信息
  • 例如:广告,侧边栏
  • 代码示例:
<aside> 
      <h1>作者简介</h1> 
</aside>
  • <header>——定义文档的页眉,通常是一些导航信息
  • 它不局限于写在网页头部,也可以写在网页内容里
  • 代码示例:
<header>
       <hgroup>
         <h1>网站标题</h1>
       </hgroup>
</header>
  • note:
    通常header标签至少包含一个标题标记h1-h6,还可以包括hgroup,table,search,nav等

  • <footer>——定义section或document的页脚

  • 例如:文章的作者或者日期
  • 代码示例:
<footer> 页脚信息</footer>
  • note:
    它和header标签使用基本一样,可以在一个页面中多次使用
  • <hgroup>——是对标题元素h1-h6进行组合
    • 例如:可以用hgroup将连续的h标签括起来
  • 代码示例:
<hgroup>
       <h1>这是一篇介绍HTML 5结构标签的文章</h1>
       <h2>HTML 5的革新</h2>
       <h6>...</h6>
</hgroup>
  • <figure>——用于对元素进行组合
    • 多用于图片与图片描述组合
    • 代码示例:
<figure>
      [站外图片上传中……(2)] 
      <figcaption>这儿是图片的描述信息</figcaption>
</figure>

(四)、article与section的详解

  • 区别:

article 元素更强调独立性、完整性,section 更强调相关性。

  • 联系:
    • sectionarticle可以互相嵌套,也就是说他们没有上下级关系,section可以包含articlearticle也可以包含section
  • 代码示例:

<article> 
      <header> 
         <h1>潜行者m的个人介绍</h1>
      </header>
      <p>潜行者m是一个中国男人,是一个帅哥。。。。</p>
      <section>
        <h2>评论</h2> 
        <article> 
          <h3>评论者:潜行者n</h3> 
          <p>确实,m同学真的很帅</p> 
        </article> 
        <article> 
          <h3>评论者:潜行者a</h3> 
          <p>M今天吃药了没?</p>
         </article>
      </section>
</article>
  • article、section 与 div 的区别
  • articlesection 是用来划分区域的,但是我们也不可以用articlesection来取代div用来布局网页,这样做,就相当于用ul来打造表格table一样

  • div的用处就是用来布局网页,划分大的区域,但在不同的内容块中,我们需要按照需求添加 articlesection 等内容块,并且显示其中的内容,这样才是合理的使用这些元素

  • 使用section标签需要注意的地方
  • 不要将section作为用来设置样式或行为,那是div的工作

  • 如果article,aside,nav更符合状况,不要使用section

  • 不要为没有标题的内容区块使用section

参考文章推荐:

article 元素与 section 元素区别详解

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容