zoukankan      html  css  js  c++  java
  • HTML5-语义元素

    <section>元素

      定义文档中的节。比如章节、页眉、页脚或文档中的其他部分

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

    运行结果:

    <article>元素

       定义独立的内容

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

    运行结果:

    <nav>元素

       定义导航链接的部分

    <nav>
        <a href="/html/">HTML</a> |
        <a href="/css/">CSS</a> |
        <a href="/js/">JavaScript</a> |
        <a href="/jquery/">jQuery</a>
    </nav>

    运行结果:

    <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>

    运行结果:

    <header>元素

       描述了文档的头部区域

      可以使用多个header

    <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>

    运行结果:

    <footer>元素

       描述了文档的底部区域

      可以使用多个footer

    <footer>
      <p>Posted by: Hege Refsnes</p>
      <p><time pubdate datetime="2012-03-01"></time></p>
    </footer>

    运行结果:

    <fiture>和<figcaption>元素

      <figure>标签规定独立的流内容(图像、图表、照片、代码等等)。

      <figure> 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

      <figcaption> 标签定义 <figure> 元素的标题.

      <figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

    <figure>
      <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
      <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
    </figure>

    运行结果:

  • 相关阅读:
    文件的上传&预览&下载学习(五)
    文件的上传&预览&下载学习(四)
    MySQL学习(一)大纲
    MySQL学习(四)锁机制
    MySQL学习(五)事务
    小程序在WXML页面添加的data属性,在点击事件中,获取的属性名皆为小写字母
    CSS解决数字,字母自动换行的问题添加wordbreak:breakall; wordwrap:breakword;
    理解CSS盒模型
    浮动
    对于第四章“流程控制”的学习和认识
  • 原文地址:https://www.cnblogs.com/xiaonangua/p/yuyi.html
Copyright © 2011-2022 走看看