zoukankan      html  css  js  c++  java
  • HTML html5 语义化标签

    什么是语义化标签

    语义化标签就是具有某种含义及结构的标签,让其更容易理解和使用。

    HTML5 新增了一些语义化标签,如下:

    article

    article 标签装载显示一个独立的文章内容。例如一篇完整的论坛帖子,一则网站新闻,一篇博客文章,一个用户评论等等。

    artilce可以嵌套,则内层的artilce对外层的article标签有隶属的关系。例如,一个博客文章,可以用article显示,然后一些评论可以以article的形式嵌入其中。

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

    section

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

    <section>
    	<h1>章节一</h1>
    	<p>详细内容...</p>
    </section>
    <section>
    	<h1>章节二</h1>
    	<p>详细内容...</p>
    </section>
    

    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>
    	<p>this is the page Logo</p>
    	<nav>this is page navigation</nav>
    </header>
    

    footer 标签通常放在包含在页脚的信息,例如版权声明、法律信息、站内导航、友情链接等。一个网页不限于只能有一个 footer。例如 article 元素里可以有 footer 放置与文章相关的信息,脚注、参考资料、引用出处等。

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

    figure

    figure 标签用于标识插图,配合 figcaption 为 figure 标记里的图片添加图题。规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

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

    time

    -- 解释 
    time 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码,这样, 举例说,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。
    
    -- 示列 
    <p>我们在每天早上 <time>9:00</time> 开始营业。</p> 
    <p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>
    

    mark

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

    Do not forget to buy milk today.

    contextmenu+menu

    -- 解释 
    contextmenu 添加到系统右键菜单 [貌似这个功能只有firefox支持,很悲催的]
    
    -- 示列 
    <div>添加到系统右键菜单< contextmenu=mymenu /div> 
    <menu type="context" id="mymenu" />
    右击我试试
    作者:Binge
    本文版权归作者和博客园共有,转载必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。
  • 相关阅读:
    springcloud费话之配置中心server修改
    springboot的jar包部署
    Address already in use : connect
    关于账户登录鉴权系统的要点
    springcloud费话之配置中心客户端(SVN)
    springcloud费话之配置中心基础(SVN)
    springcloud费话之断路器(hystrix in feign)
    springcloud费话之Eureka接口调用(feign)
    springcloud费话之Eureka服务访问(restTemplate)
    springcloud费话之Eureka集群
  • 原文地址:https://www.cnblogs.com/binbingg/p/13705110.html
Copyright © 2011-2022 走看看