语义化HTML标签

原创 ruyan2013 随笔 待整理 757阅读 2014-08-28 13:03:05 举报

1、语义化HTML标签:

1)HTML告诉我们的是一块内容是什么(或其意义),而不是它长的什么样子。

2)写语义化的HTML结构其实很简单,首先要掌握HTML中各个标签的语义,在看到内容的时候想想用什么标签能更好的描述它,是什么就用什么标签。

2、常用标签分类:
1)、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题来使用,并且依据重要性依次递减。<h1>是最高的等级,常用的是h1至h3。
2)、<p></p> 作为段落标签,就不会再使用<br />来换行了,不需要<br /> 来区分段落与段落。p中的文字会自动换行,段落与段落之间的空隙也可以利用CSS来控制,很容易而且清晰的区分出段落与段落。
3)、<ul>无序列表,这个被大家广泛的使用,<ol>有序列表也有常用。在web标准化过程中,<ul> 还被更多的用于【导航条】,相同结构的分类标签使用。
4)、自定义列表:<dl>、<dt>、<dd> 通常自定义列表要比无序列表和有序列表用的少一些,如果需要解释一系列术语与解释的列表时,使用自定义列表就是很好的方法。
<dl>
<dt>列表中每个元素的标题</dt>
<dd>列表中元素的内容</dd>
<dd>列表中元素的内容</dd>
<dd>列表中元素的内容</dd>
</dl>
5)、<em>、< strong >强调标签:
1)、em 表示强调,strong 表示更强烈的强调。并且在浏览器中,em 默认用斜体表示,strong 用粗体表示。
2)、em 用来局部强调,strong 则是全局强调。从视觉上考虑,em 的强调是有顺序的,阅读到某处时,才会注意到。strong 的强调则是一种随意无顺序的,看见某文时,立刻就凸显出来的关键词句。
3)、em 表示内容的着重点(stress emphasis),strong 表示内容的重要性(strong importance),strong 不会改变所在句子的语意,em 则会改变所在句子的语义。
em 是句意强调,加与不加会引起语义变化。
strong 是重要性强调,和局部还是全局无关,局部强调用strong也可以,strong强调的是重要性,不会改变句意。
6)、合理使用<table>:如今,<table>的本义应当用作数据列表的地方,对于一些数据处理用<table>显得更加有序化和语义化。
详情信息:http://www.smallni.com/talk-about-semantic/
caption 标签 -- 定义HTML表格的标题
<colgroup> 标签用于对表格中的列进行组合,以便对其进行格式化。<colgroup> 标签只能在 table 元素中使用。
tabel属性:
Common -- 一般属性
summary -- 代表表格的摘要说明
width -- 代表表格的宽度
border -- 代表表格边框(此属性应该使用CSS实现)
cellspacing -- 表格边框与表格内容填充的距离,也是内容填充之间的距离(此属性应该使用CSS实现)
cellpadding -- 内容填充的宽度(此属性应该使用CSS实现)
<table>
<caption>表格标题</caption>
<tr>
<td>表格列</td><td>表格列</td>
</tr>
</table>

3、为神马要语义化?

手持移动设备的无障碍阅读
手持移动设备如PDA、智能手机等可能对CSS的解析能力较弱,这时可能就需要更语义的标签来体现一个页面的易读性

盲人等一些障碍人士的阅读
屏幕阅读器对不同标签所发出的声音是不同的,使用更语义的标签以能传达不同信息的重要性

搜索引擎的友好收录
虽然各大搜索引擎的排名规则不断的再变化,但规则里的正则始终是要匹配标签的,如果能用更语义的标签,蜘蛛爬行能够根据标签的使用来确定上下和各关键字的权重。

技术趋势所趋
正如html诞生时的初衷那样,各个标签的本义就是希望能在特定的地方使用合适的标签,而不是去用样式来表现一个不语义的标签。html5新增了更多的语义化的标签,原本用<div id=”header”></div>来实现的结构,通过html5的<header>标签我们可以更完美的表现。

便于团队项目的可持续运作及维护
语义化的命名能够使我们在多人协作一个项目时更加有序和快捷,而不需要去纠结另一位伙伴的CSS命名是什么意思。如果是个人项目,也便于后期其他同事的修改,语义化的命名时一个项目的可读性更高。

4、IE BUG相关文章集合 详细信息链接:http://www.qianduan.net/ie-bug-resources.html

常用前端学习网站:http://www.daqianduan.com/ (大前端 )
http://isux.tencent.com/zh-hans/ 腾讯ISUX
http://www.css88.com/ web前端开发
http://www.w3cfuns.com/

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复