zoukankan      html  css  js  c++  java
  • HTML5-语义化标签

    article

    -- 解释 
    article标签装载显示一个独立的文章内容。例如一篇完整的论坛帖子,一则网站新闻,一篇博客文章等等,一个用户评论等等 artilce可以嵌套,则内层的artilce对外层的article标签有隶属的关系。例如,一个博客文章,可以用article显示,然后一 些评论可以以article的形式嵌入其中。

    -- 示列 
    <article>
    <h1>文章标题</h1>
    这是一篇文章
       <article>评论1...</article>
        <article>评论2...</article>
    </article>

    section

    -- 解释 
    section 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

    -- 示列 
    <body>
    <section>
       <h1>章节一</h1>
        <p>详细内容...</p>
    </section>
    <section>
       <h1>章节二</h1>
        <p>详细内容...</p>
    </section>
    </body>

    aside

    -- 解释 
    aside 用来装载非正文类的内容。例如广告,成组的链接,侧边栏等等。

    -- 示列 
    <body>
    <aside>
    热门文章
    </aside>
    <aside>
    广告
    </aside>
    <article>
    <h1>文章标题</h1>
    这是一篇文章
       <article>评论1...</article>
        <article>评论2...</article>
    </article>
    </body>

    hgroup

    -- 解释 
    hgroup 标签用于对网页或区段的标题元素(h1-h6)进行组合。例如,在一个区段中你有连续的h系列的标签元素,则可以用hgroup将他们括起来。

    -- 示列 
    <hgroup>
    <h1>The reality dysfunction</h1>
    <h2>Space is not the only void</h2>
    </hgroup> <hgroup>
    <h1>Dr. Strangelove</h1>
    <h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
    </hgroup>

    header

    -- 解释 
    header 标签定义文档的页面组合,通常是一些引导和导航信息。

    -- 示列 
    <header>
    <p>this is the page Logo</p>
    <nav>this is page navigation</nav>
    </header>

    footer

    -- 解释 
    footer 标签定义 section 或 document 的页脚。在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。

    -- 示列 
    <footer> © 2012 Baidu 使用百度前必读 京ICP证030173号 </footer>

    nav

    -- 解释 
    nav 标签定义显示导航链接不是所有的成组的超级链接都需要放在nav标签里。nav标签里应该放入一些当前页面的主要导航链接。 例如在页脚显示一个站点的导航链接(如首页,服务信息页面,版权信息页面等等),就可以使用nav标签,当然,这不是必须的。

    -- 示列 
    <nav>
    <ul>
    <li><a href=”articles.html”>Index of all articles</a></li>
    <li><a href=”today.html”>Things sheeple need to wake up for today</a></li>
    <li><a href=”successes.html”>Sheeple we have managed to wake</a></li>
    </ul>
    </nav>

    time

    -- 解释 
    time 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码,这样, 举例说,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。

    -- 示列 
    <p>我们在每天早上 <time>9:00</time> 开始营业。</p> 
    <p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>

    mark

    -- 解释 
    mark 标签定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。

    -- 示列 
    <p>Do not forget to buy <mark>milk</mark> today.</p>

    figure

    -- 解释 
    figure标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

    -- 示列 
    <p>黄浦江上的的卢浦大桥</p> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>

    figcaption

    -- 解释 
    figcaption 标签定义 figure 元素的标题(caption)。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

    -- 示列 
    <figure> <figcaption>黄浦江上的的卢浦大桥</figcaption> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>

    contextmenu+menu

    -- 解释 
    contextmenu 添加到系统右键菜单 [貌似这个功能只有firefox支持,很悲催的]

    -- 示列 
    <div>添加到系统右键菜单< contextmenu=mymenu /div> <menu type="context" id="mymenu" />

    右击我试试
     

    <!--进度条progress 直接的 每个浏览器样式不一样-->
    <progress></progress>
    <!--0.1指的是进度到百分之10 这样其余是空白的 算是进度指示条-->
    <!--100指的是进度数值为100 那么0.1指100分之0.1 默认为1-->
    <!--进度条想动用JS啊-->
    <progress class="myStyle" value="0.1" max="100"></progress>

    <!--我想体现一个数据(固定的)比如华东地区的房子购买比例那么用进度条显示-->
    <!--这个时候我们用mate标签-->
    <!--这个没有什么浏览器支持-->
    <!-- Value:表示当前标量的实际值;如果不做指定,那么meter标签中的第一个数字就会被认为是其当前实际值,如果标签内没有数字,那么标量的实际值就是0。
    Min:当前标量的最小值;如不做指定则为0。
    Max:当前标量的最大值;如不做指定则为1;如果指定的最大值小于最小值,那么最小值会被认为是最大值。
    Low:当前标量的低值区;必须小于或等于标量的高值区数字;如果低值区数字小于标量最小值,那么它会被认为是最小值。
    High:当前标量的高值区。
    Optimum:最佳值;其范围在最小值与最大值区间当中,并且可以处于高值区 -->
    <meter min="0" max="100" low="40" high="90" optimun="100" value="91">A+</meter>
    </body>
    </html>

  • 相关阅读:
    通过shell脚本排查jar包中类冲突
    批量复制及执行命令shell脚本
    java String hashCode遇到的坑
    hive常用命令
    hadoop-2.10.0安装hive-2.3.6
    centos7安装mysql-5.7.28
    centos7安装mysql-5.5和mysql-5.6
    centos7搭建hadoop2.10高可用(HA)
    centos7搭建hadoop2.10完全分布式
    kafka(一)-为什么选择kafka
  • 原文地址:https://www.cnblogs.com/hello-web/p/6979326.html
Copyright © 2011-2022 走看看