什么是语义化标签

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

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 标签定义文档的页面组合,通常是一些引导和导航信息。

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

footer

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" />
右击我试试

HTML html5 语义化标签的更多相关文章

  1. html5语义化标签使用规范

    Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...

  2. Html5语义化标签详解及其兼容性处理

    <header></header> 页眉 主要用于页面的头部的信息介绍,也可用于板块头部 <hgroup></hgroup> 页面上的一个标题组合 一个 ...

  3. html5语义化标签——回顾

    html5 头部结构   <!doctype html>    <meta charset=“utf-8”/> <header></header> 页眉 ...

  4. 第二季第十一天 html5语义化标签 css透明度

    span不能设置宽高背景 HTML5语义化标签 <section>标签所包裹的是有一组相似的主题的内容,可以用这个标签来实现文章的章节.标签式对话框中的各种标签页等类似的功能. <s ...

  5. HTML5语义化标签

    在HTML5中最基础也是比较好理解的也就是语义化标签了,,顾名思义语义化也就是可以直接读懂的标签~,这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋,跟同事对接项目也会节约很多时间~ ...

  6. 让HTML5语义化标签兼容IE浏览器

    解决方案:IE9以下旧版本浏览器不支持新的语义化标签.其中一种解决方案就是用js将HTML5增加的标签创建出来,就像下面这样.(放在header部位) <script> var html5 ...

  7. html5语义化标签总结二

    HTML 5的革新之一:语义化标签二文本元素标签.分组元素标签. HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张页面中结构元素构成网页大体,但是也需要其他内容来填充 ...

  8. 转html5语义化标签总结一

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

  9. HTML5语义化标签重构页面

    在HTML5未出现之前我们都用div+css来构建页面,比如<div id=”header”>,div的滥用,使得代码的可读性和可维护性很差,现在用本文来介绍一下用HTML5′干净的’语义 ...

  10. HTML5语义化标签总结

    1.语义化标签总结 基础布局标签 <header></header> <nav></nav> <main></main> < ...

随机推荐

  1. 采用QT技术,开发OFD电子文档阅读器

    前言 ofd作为板式文档规范,相当于国产化的pdf.由于pdf标准制定的较早,相关生态也比较完备,市面上的pdf阅读器种类繁多.国内ofd阅读器寥寥无几,作者此前采用wpf开发了一款阅读器,但该阅读器 ...

  2. Spring Security OAuth 格式化 token 输出

    个性化token 背景 上一篇文章<Spring Security OAuth 个性化token(一)>有提到,oauth2.0 接口默认返回的报文格式如下: {     "ac ...

  3. 有了CopyOnWrite为何又要有ReadWriteLock?

    引言 前文我们有介绍<看了CopyOnWriteArrayList后自己实现了一个CopyOnWriteHashMap> 关于CopyOnWrite容器的,但是它也有一些缺点: 内存占用问 ...

  4. 没有SEO的DiscuzQ 值不值得站长选择?

    此文写于2021年1月22日.至少到今天,Discuz Q 依然没有推出SEO的解决方案. 据官方团队交流说,SEO是在需求池中排在第一位,但目前还没有相应的措施来解决无法SEO. Discuz Q: ...

  5. 1.7.1- HTML表格table

    存在即是合理的,表格的是一种常用的标签,不是用来布局,常见是用处理 适合用表格table的地方: 创建表格:

  6. 0-0 Linux安装在VMvare虚拟机上

    一.安装VMware虚拟机: 双击, 上面一步会提示你输入密钥,你只要双击这个,复制里面的一串码粘贴进去就可以. 点击完成,至此VM虚拟机安装完成. 二.在VMvare虚拟机上安装centos. 1. ...

  7. 小图标文字对齐的终极解决方案demo

    CSS代码: .icon { display: inline-block; width:20px; height:20px; background: url(delete.png) no-repeat ...

  8. 【SpringBoot】Springboot1.5.9整合WebSocket

    一.WebSocket介绍 1.WebSocket是什么? WebSocket是协议,是HTML5开始提供的基于TCP(传输层)的一种新的网络协议, 它实现了浏览器与服务器全双工(full-duple ...

  9. Oracle 数据库裸设备扩容处理

    前段时间,我管理的一台Oracle数据库表空间容量不足了,由于本人以前没有接触过Oracle的使用所以,就自己查资料来研究如何扩容,网上的文档多数都是在物理机上扩容,而偏偏我的数据文件是存储在裸设备上 ...

  10. CTB-Locker敲诈者病毒下载器分析

    一. 样本基本信息 样本名称:927354529512.scr 样本大小:110592 字节 病毒名称:Win32.Trojan.Ctb-locker.Auto 样本MD5值:3A6D7E551C13 ...