关于语义化标签
2016-07-11 14:22
260 查看
Html语义化标签,Html5新增语义化标签
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的形式嵌入其中。
<span class="tag"><<span class="title">article</span>></span> <span class="tag"><<span class="title">h1</span>></span>文章标题<span class="tag"></<span class="title">h1</span>></span> <span style="color: rgb(0, 0, 0);">这是一篇文章 </span><span class="tag"><<span class="title">article</span>></span>评论1...<span class="tag"></<span class="title">article</span>></span> <span class="tag"><<span class="title">article</span>></span>评论2...<span class="tag"></<span class="title">article</span>></span> <span class="tag"></<span class="title">article</span>></span>
2):section 标签:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
实例:
<span class="tag"><<span class="title">section</span>></span> <span class="tag"><<span class="title">h1</span>></span>章节一<span class="tag"></<span class="title">h1</span>></span> <span class="tag"><<span class="title">p</span>></span>详细内容...<span class="tag"></<span class="title">p</span>></span> <span class="tag"></<span class="title">section</span>></span> <span class="tag"><<span class="title">section</span>></span> <span class="tag"><<span class="title">h1</span>></span>章节二<span class="tag"></<span class="title">h1</span>></span> <span class="tag"><<span class="title">p</span>></span>详细内容...<span class="tag"></<span class="title">p</span>></span> <span class="tag"></<span class="title">section</span>></span>
3):aside 标签: 用来装载非正文类的内容。例如广告,成组的链接,侧边栏等等。
4):hgroup 标签:用于对网页或区段的标题元素(h1-h6)进行组合。
例如,在一个区段中你有连续的h系列的标签元素,则可以用hgroup将他们括起来。
<span class="tag"><<span class="title">hgroup</span>></span> <span class="tag"><<span class="title">h1</span>></span>标题1<span class="tag"></<span class="title">h1</span>></span> <span class="tag"><<span class="title">h2</span>></span>标题2<span class="tag"></<span class="title">h2</span>></span> <span class="tag"></<span class="title">hgroup</span>></span>
5):header 标签:定义文档的页面组合,通常是一些引导和导航信息。
6):footer 标签:定义 section 或 document 的页脚。
在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。
实例:
<span class="tag"><<span class="title">footer</span>></span> © 2012 Baidu 使用百度前必读 京ICP证030173号 <span class="tag"></<span class="title">footer</span>></span>
7):nav 标签:导航链接放在nav标签里。
nav标签里应该放入一些当前页面的主要导航链接。
例如在页脚显示一个站点的导航链接(如首页,服务信息页面,版权信息页面等等),就可以使用nav标签,当然,这不是必须的。
8):time 标签:定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。
该元素能够以机器可读的方式对日期和时间进行编码,搜索引擎也能够生成更智能的搜索结果
9):mark 标签:定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。
10):figure标签:规定独立的流内容(图像、图表、照片、代码等等)。
figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
11):figcaption 标签:定义 figure 元素的标题(caption)。
"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
实例:
<span class="tag"><<span class="title">figure</span>></span> <span class="tag"><<span class="title">figcaption</span>></span>美女图片<span class="tag"></<span class="title">figcaption</span>></span> <span class="tag"><<span class="title">img</span> <span class="attribute">src</span>=<span class="value">"meizi.jpg"</span> <span class="attribute">width</span>=<span class="value">"350"</span> <span class="attribute">height</span>=<span class="value">"234"</span> /></span> <span class="tag"></<span class="title">figure</span>></span>
相关文章推荐
- Codeforces Round #361 (Div. 2) 套题
- leetcode.177. Nth Highest Salary
- 如何根据基类指针来判断这个基类是由那个子类转换而来!
- HTML5
- web,视频播放两种方法
- Java ConcurrentModificationException异常原因和解决方法
- UVA - 699 The Falling Leaves 二叉树
- oninput,onpropertychange,onchange的用法
- 字符串-401 - Palindromes
- Hibernate+JPA注解
- PHP 获取中国时间,即上海时区时间
- Javascript数组操作详细解答
- oracle列出两个日期间所有日期
- Mike and Cellphone
- POJ 2367 Genealogical tree【拓普排序】
- MAP
- Java并发编程:同步容器
- 第一篇博文~
- Linq To Entity多条件or查询处理
- nodejs 安装没有找到 configure