Html语义化标签,Html5新增语义化标签

自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全.

希望大家有新的见解可以给我留言,我会补充上去,谢谢大家

1.什么是语义化标签?

那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下我可以使用这个标签才合理)比如,

网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。

文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用em标签表示强调等等。

2.为啥使用语义化标签?

1. 更容易被搜索引擎收录。

2. 更容易让屏幕阅读器读出网页内容。

3. 能够更好的体现页面的主题

4.兼容性更好,支持更多的网络设备

3.html语义化标签

1):<a>标签:实现超链接

强调:title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)

2):<p>标签:文章段落放到<p>标签中

3):<hx>标签:文章标题,栏目标题用<hx>表示

标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。

4):<strong>和<em>标签:特别强调某几个文字

但两者在强调的语气上有区别:<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。

两个标签相比,目前国内前端程序员更喜欢使用<strong>表示强调。

5):<q>标签:短文本引用

注意要引用的文本不用加双引号,浏览器会对q标签自动添加双引号

6):<blockquote>标签:长文本引用

注意浏览器对<blockquote>标签的解析是缩进样式

7):<address>标签:为网页加入地址信息

8):<ul>标签:无序列表

9):<ol>标签:有序列表

10):<caption>标签:为表格添加标题和摘要

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

语法:<table summary="表格简介文本">

标题用以描述表格内容,标题的显示位置:表格上方。

   语法:<caption>标题文本</caption>

 4.Html5语义化标签

1):article标签:装载显示一个独立的文章内容。

例如一篇完整的论坛帖子,一则网站新闻,一篇博客文章等等,一个用户评论等等 artilce可以嵌套,则内层的artilce对外层的article标签有隶属的关系。

例如,一个博客文章,可以用article显示,然后一 些评论可以以article的形式嵌入其中。

  1. <article>
  2. <h1>文章标题</h1>
  3. 这是一篇文章
  4. <article>评论1...</article>
  5. <article>评论2...</article>
  6. </article>

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

实例:

  1. <section>
  2. <h1>章节一</h1>
  3. <p>详细内容...</p>
  4. </section>
  5. <section>
  6. <h1>章节二</h1>
  7. <p>详细内容...</p>
  8. </section>

3):aside 标签: 用来装载非正文类的内容。例如广告,成组的链接,侧边栏等等。

4):hgroup 标签:用于对网页或区段的标题元素(h1-h6)进行组合。

例如,在一个区段中你有连续的h系列的标签元素,则可以用hgroup将他们括起来。

  1. <hgroup>
  2. <h1>标题1</h1>
  3. <h2>标题2</h2>
  4. </hgroup>

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

6):footer 标签:定义 section 或 document 的页脚。

  在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。

实例:

  1. <footer> © 2012 Baidu 使用百度前必读 京ICP证030173号 </footer>

7):nav 标签:导航链接放在nav标签里。

nav标签里应该放入一些当前页面的主要导航链接。

例如在页脚显示一个站点的导航链接(如首页,服务信息页面,版权信息页面等等),就可以使用nav标签,当然,这不是必须的。

8):time 标签:定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。

该元素能够以机器可读的方式对日期和时间进行编码,搜索引擎也能够生成更智能的搜索结果

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

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

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

11):figcaption 标签:定义 figure 元素的标题(caption)。

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

实例:

  1. <figure> <figcaption>美女图片</figcaption>
  2. <img src="meizi.jpg" width="350" height="234" />
  3. </figure>

浅谈html语义化标签,Html5新增语义化标签的更多相关文章

  1. html5 新增语义标签

    一份模板: <body> <header> <hgroup> <h1>Page title</h1> <h2>Page subt ...

  2. html5新增及删除标签

    一.新增标签 有一种划分为,功能性标签[html5新增,如canvas,旧浏览器没有]和语义性标签[如header等只是增强语义,没有新功能].下面按照分几个小类来说. 1.结构标签 新增的结构标签, ...

  3. HTML标签-->HTML5新增

    HTML的Form新增属性 <form method="post" name="myForm"> <p> 邮箱:<input ty ...

  4. html5新增语义化标签

    注意:body.section.nav 需要h1-h6. div.header则不需要. 1):<article> 显示一个独立的文章内容. 例如一篇完整的论坛帖子,一则网站新闻,一篇博客 ...

  5. html5新增语义标签

    1.header <header> 标签定义文档的页眉(介绍信息). 2.nav <nav> 标签定义导航链接的部分. 3.article <article> 标签 ...

  6. HTML5新增的音频标签、视频标签

    我们所说的H5就是我们所说的HTML5中新增的语言标准 一.音频标签 在HTML5当中有一个叫做audio的标签,可以直接引入一段音频资源放到我们的网页当中 格式: <audio autopla ...

  7. HTML5新增标签(新增27个标签,废弃16个标签)

    1>结构性标签:负责web上下文结构的定义 article:文章主题内容 header:标记头部区域内容 footer:标记脚部区域内容 section:区域章节表述 nav:菜单导航,链接导航 ...

  8. HTML5新增元素、标签总结

    总是遇到h5新标签的笔试题目,就查阅了资料来总结一下: 1.form相关: (1)form属性:在HTML5中表单元素可放在表单之外,通过给该元素添加form属性来指向目标表单(form属性值设为目标 ...

  9. HTML5新增元素,标签总结

    总是遇到h5新标签的笔试题目,就查阅了资料来总结一下: 1.form相关: (1)form属性:在HTML5中表单元素可放在表单之外,通过给该元素添加form属性来指向目标表单(form属性值设为目标 ...

随机推荐

  1. IIS Express启动命令

    http://www.iis.net/learn/extensions/using-iis-express/running-iis-express-from-the-command-line C:\P ...

  2. Html / CSS常见问题 解决方案

    解决Safari下input光标过大 input { line-height: normal; } 设置浮层 html, body { /*只有父元素设置宽高为100%子元素设置宽高100%时才能撑满 ...

  3. mongo安装、备份与常见命令整理

    http://zlboy888.blog.163.com/blog/static/315357072012919241104/ 1 下载安装包  官方下载地址:http://www.mongodb.o ...

  4. Android笔记:利用InputStream和BufferedReader 进行字节流 字符流处理

    通过socket获取字节流处理时最初使用的是BufferedReader和PrintWriter  这种方式在解析字符串时是比较方便的 但是在处理字节时不够方便最终还是回归到InputStream和O ...

  5. c#导出excel(转)

    C#导出Excel文件实例代码 2010-08-03 14:10:36|  分类: 软件编程 |  标签:excel  c#导出excel   |字号大中小 订阅 /// <summary> ...

  6. Selenium2学习-005-WebUI自动化实战实例-003-三种浏览器(Chrome、Firefox、IE)启动脚本源代码

    此文主要通过 三种浏览器(Chrome.Firefox.IE)启动脚本 功能,进行 Selenium2 三种浏览器启动方法的实战实例讲解.文中所附源代码于 2015-01-18 20:33 亲测通过, ...

  7. [转]AppCompat 22.1,Goole暴走,MD全面兼容低版本

    AppCompat 22.1,Goole暴走,MD全面兼容低版本 分类: Android2015-04-24 09:48 1354人阅读 评论(0) 收藏 举报 android   目录(?)[+] ...

  8. ubuntu12.04 登录黑屏

    新安装的ubuntu12.04LTS,登录之后黑屏,切换到ubuntu2D能够进入UI.解决方法记录于此. 转载: http://blog.csdn.net/albertsh/article/deta ...

  9. ubuntu12.04进入单用户模式

    更改ubuntu配置文件出错了,只能进入单用户模式改回来. 转载至: http://blog.csdn.net/lfyaa/article/details/9899497 1.重启ubuntu,VMw ...

  10. 深入css中的margin

    深入css中的margin 第一:margin-top css代码(元素没有任何定位的情况下,并且元素默认为block) <style type="text/css"> ...