首页 >web前端 >html教程 >Html标签的语义化_html/css_WEB-ITnose

Html标签的语义化_html/css_WEB-ITnose

PHP中文网
PHP中文网原创
2016-06-24 12:07:281020浏览



      为了使我们的网站更好的被搜索引擎抓取收录,更自然的获得更高的流量,网站标签的语义化就显得尤为重要。所谓标签语义化,就是指标签的含义。

为了更好的理解标签的语义化,先看下面这个例子:

1 <table> 
2      <tr> 
3         <td>娱乐项目</td> 
4         <td>项目支出</td> 
5     </tr> 
6     <tr> 
7         <td>聚餐</td> 
8         <td>200元</td> 
9     </tr>
10 </table>


上面这一段代码就是明显的没有使用语义化标签的例子,为了让它的结构更加清晰,正确的做法如下:

<table>    
<caption>支出统计</caption>    
<thead>        
<tr>            
<th>娱乐项目</th>            
<th>项目支出</th>        
</tr>    
</thead>    
<tbody>       
<td>聚餐</td>        
<td>200元</td>    
</tbody>
</table>

其中,

63bd76834ec05ac1f4c0ebbeaafb0994:表格的标题;
ae20bdd317918ca68efdc799512a9b39:一表格的表头;
b4d429308760b6c2d20d6300079ed38e:表的某一列的列头。

是的,标签语义化的目的就是对搜索引擎友好,有了良好的结构和语义我们的网页内容便自然容易被搜索引擎抓取,这种符合搜索引擎收索规则的做法,网站的推广便可以省下不少的功夫,而且可维护性更高,因为结构清晰,十分易于阅读。这也是搜索引擎优化SEO(search engine optimization)重要的一步,当然关于SEO远远不止如此,要了解更多有关SEO的内容知识,可移步:

http://baike.baidu.com/link?url=f_v0cbvzTIxhwKNaJtdd-qGjGMefJww4ko9pJaZj4rJArylR_dpUZsobKKLlMKBi

http://www.seoxuetang.com/

言归正传,所以我们要做的,就是语义化我们的HTML标签和属性,如:

p 语义:Division(分隔)
span 语义:Span(范围)
ol 语义:Ordered List(排序列表)
ul 语义:Unordered List(不排序列表)
li 语义:List Item(列表项目)

1.c852f89da0acc8a6a464f0668266042e

4a249f0d628e2318394fd9b75b4636b1、c1a436a314ed609750bd7c7d319db4da、684271ed9684bde649abda8831d4d355、3f7b3decd2dcafb07b84d2d3985d9f40、39318b6f72ed39310530dfd69d0078e1、4e9ee319e0fa4abc21ff286eeb145ecc,作为标题使用,并且依据重要性递减。4a249f0d628e2318394fd9b75b4636b1是最高的等级。

 

2.e388a4556c0f65e1904146cc1a846bee

段落标记,知道了e388a4556c0f65e1904146cc1a846bee作为段落,你就不会再使用076402276aae5dbec7f672f8f4e5cc81来换行了,而且不需要076402276aae5dbec7f672f8f4e5cc81076402276aae5dbec7f672f8f4e5cc81来区分段落与段落。e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3中的文字会自动换行,而且换行的效果优于0c6dc11e160d3b678d68754cc175188a。


3.a4b561c25d9afb9ac8dc4d70affff419、907fae80ddef53131f3292ee4f81644b和8e99a69fbe029cd4e2b854e244eab143

a4b561c25d9afb9ac8dc4d70affff419标签语义为“加粗”

907fae80ddef53131f3292ee4f81644b标签语义为“强调”

8e99a69fbe029cd4e2b854e244eab143标签语义为“更强烈的强调” 而且em 默认用斜体表示,strong 用粗体表示。

当我们知道了这三个标签的语义时,做SEO时就好决定用哪个来强调重要的关键字了,强调用907fae80ddef53131f3292ee4f81644b和8e99a69fbe029cd4e2b854e244eab143,纯粹加粗用a4b561c25d9afb9ac8dc4d70affff419。

4.ff6d136ddc5fdfeffaf53ff6ee95f185标签、c34106e0b4e09414b63b2ea253ff83d6标签、25edfb22a4f469ecb59f1190150159c6标签

ff6d136ddc5fdfeffaf53ff6ee95f185标签语义为定义无序列表

c34106e0b4e09414b63b2ea253ff83d6标签语义为定义有序列表

25edfb22a4f469ecb59f1190150159c6标签语义为定义列表项目

因此当涉及到列表的项目,应该用ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6或c34106e0b4e09414b63b2ea253ff83d625edfb22a4f469ecb59f1190150159c6(或者是5c69336ffbc20d23018e48b396cdd57a73de882deff7a050a357292d0a1fca9467bc4f89d416b0b8236eaa5f43dee742来布局),而不是用f5d188ed2c074f8b944552db028f98a1或e388a4556c0f65e1904146cc1a846bee甚至45a2772a6b6107b401db3c9b82c049c2。

5.5c69336ffbc20d23018e48b396cdd57a标签、73de882deff7a050a357292d0a1fca94标签、67bc4f89d416b0b8236eaa5f43dee742标签

5c69336ffbc20d23018e48b396cdd57a标签语义为定义了定义列表

73de882deff7a050a357292d0a1fca94标签语义为定义了定义列表中的项目(即术语部分)

67bc4f89d416b0b8236eaa5f43dee742标签语义为定义列表中定义条目的定义部分

所以,当我们用带标题的列表时,即可采用5c69336ffbc20d23018e48b396cdd57a73de882deff7a050a357292d0a1fca9467bc4f89d416b0b8236eaa5f43dee742自定义列表实现

 

6.标签

标签的语义为被用来组合文档中的行内元素

(另外应当区分和

的区别,

是块级元素(block level),而是行内元素,前者的内容会自动换行,而后者前后不会自动换行

 )

 

7.1244aa79a84dea840d8e55c52dc97869、 b8a712a75cab9a5aded02f74998372b4、f3a85e1241a187c5ac462d886e9a968b

1244aa79a84dea840d8e55c52dc97869标签的语义为用来标记简短的单行引用,Web浏览器会自动识别在1244aa79a84dea840d8e55c52dc97869之间的内容

b8a712a75cab9a5aded02f74998372b4标签的语义为用来标记那些一段或者好几段的长篇引用

f3a85e1241a187c5ac462d886e9a968b标签既可以与1244aa79a84dea840d8e55c52dc97869 一起用,也可以与b8a712a75cab9a5aded02f74998372b4一起用,用来提供引用内容的来源地址。

看一个例子

1 <p> <cite>孔子</cite>曰:<q>有朋自远方来,不亦乐乎</q>.2 </p>
1 <blockquote cite=" 
2  <p>&#8220;我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,
我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战",为了兼容 Netscape 和 IE,网站
不得不为这两种浏览器写不同的代码。同样的,每当新的网络技术和交互设备的出现,我们也需要制作一个新版本来
支持这种新技术或新设备,例如支持手机上网的 WAP 技术。类似的问题举不胜举:网站代码臃肿、繁杂浪费了我们大
量的带宽;针对某种浏览器的 DHTML 特效,屏蔽了部分潜在的客户;不易用的代码,残障人士无法浏览网站等等。这是
一种恶性循环,是一种巨大的浪费。&#8221;
3 </p>
4 </blockquote>

8.f5d188ed2c074f8b944552db028f98a1、b4d429308760b6c2d20d6300079ed38e、b6c5a531a458a2e790c1fd6421739d1c、63bd76834ec05ac1f4c0ebbeaafb0994

f5d188ed2c074f8b944552db028f98a1标签的语义的为定义 HTML 表格

b4d429308760b6c2d20d6300079ed38e标签的语义为定义表格内的表头单元格

63bd76834ec05ac1f4c0ebbeaafb0994标签的语义为定义表格标题


9.bb9345e55eb71822850ff156dfde57c8标签、d5fd7aea971a85678ba271703566ebfd标签、4750256ae76b6b9d804861d8f69e79d3标签

bb9345e55eb71822850ff156dfde57c8标签的语义为定义一个按钮

d5fd7aea971a85678ba271703566ebfd 标签的语义为用于搜集用户信息,根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

4750256ae76b6b9d804861d8f69e79d3标签的语义为定义多行的文本输入控件

button控件 与 6e63ca93929ae453ed909631d485d875 相比,提供了更为强大的功能和更丰富的内容。bb9345e55eb71822850ff156dfde57c8 与 65281c5ac262bf6d81768915a4a77ac0 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。

标签的语义为用于搜集用户信息,根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。


button控件 与相比,提供了更为强大的功能和更丰富的内容。标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。

 

10.2e1cf0710519d5598b1f0f14c36ba674 标签

2e1cf0710519d5598b1f0f14c36ba674标签的语义为为input元素定义标注(标记)


11.426be984ffbbb815d7d88e3543a85d91, 823db3943044a0a9a620ada8d4b1d965


426be984ffbbb815d7d88e3543a85d91标签的语义为定义已经被插入文档中的文本。

823db3943044a0a9a620ada8d4b1d965标签的语义为定义文档中已被删除的文本。

426be984ffbbb815d7d88e3543a85d91与 823db3943044a0a9a620ada8d4b1d965 一同使用,来描述文档中的更新和修正。知道del,就不要再用2e44d2d3284d23d932e1fd85f3d4cf3a做删除线了,用del显然更具有语义化。而且del还带有cite和datetime来表明删除的原因以及删除的时间。ins是表示插入,也有这样的属性。


关于这两个标签的用法,可以参看:

http://www.w3school.com.cn/tags/tag_ins.asp

http://www.w3school.com.cn/tags/tag_del.asp

以上就是Html标签的语义化_html/css_WEB-ITnose的内容,更多相关内容请关注PHP中文网(www.php.cn)!


声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn