首页 > 代码库 > 关于web语义化
关于web语义化
最近一直在忙着投简历,在投简历的时候,发现了一个名词,叫web语义化,当时不太明白,什么叫语义化,相信很多人也有我当时的疑问,在这里我就把我最近学习到的,看到的总结一下,给大家提供一些解释,希望对大家能有所帮助。
所谓的web语义化,简单的解释下,就是将web的前端代码写成搜索引擎更容易理解的形式,就像人与人通过普通话聊天一样轻松,而不是和一个说方言的人聊天,虽然你大概能明白,但是有些费劲。同样,一份语义化做的好的前台代码,读起来,一样会是这个效果,举个例子,很多人写的前端代码会是这个样子:
<table>
<tr>
<td colspan="2">aaaaa</td>
</tr>
<tr>
<td>bbbb</td> <td>Name</td> 此处是作对比使用
<td>cccc</td> <td>Age</td>
</tr>
<tr>
<td>dddd</td> <td>biny</td> 此处是作对比用的
<td>eeee</td> <td>23</td>
</tr>
</table>
作为前端程序人员,我相信大家即使没有页面显示也都会明白这个是什么意思,但是搜索引擎不明白,它不明白你table中写的搜索引擎bbbb或者Name是什么意思,但是我们程序员能看懂Name是什么意思,但是如果这个代码写的坑一点,就是像我写的aaaa,bbbb,cccc,dddd那样,我想,大家一定都懵了吧。不光电脑懵了,我相信哪位童鞋看到这样的代码,也都会疯。所以,我们的代码写的既要便于编程人员读懂,也要便于搜索引擎读懂,这便是web语义化的真谛。还是上面的代码,如果换成这样的写法:
<table>
<caption>List</caption>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>biny</td>
<td>23</td>
</tr>
</tbody>
</table>
我想,如果是这样的代码,对于编码人员咱们可以一眼就看出这是什么意图,对于搜索引擎呢,也可以读懂这个代码的含义,而我们不难发现,所谓web语义化就是:用恰当的元素标签,写出结构合理,元素含义清楚的web前端代码!这样的代码便于搜索引擎和人们的理解。
下面是我从网上找的标签语义,不全,欢迎大家补充!!!
标签名 | 英文全拼 | 中文翻译 |
---|---|---|
div(无语义) | division | 分隔 |
span(无语义) | span | 范围 |
ol | ordered list | 排序列表 |
ul | unordered list | 不排序列表 |
li | list item | 列表项目 |
dl | definition list | 定义列表 |
dt | definition term | 定义术语 |
dd | definition description | 定义描述 |
h1~h6 | header 1 to header 6 | 标题1到标题6 |
p | paragraph | 段落 |
a | anchor | 锚 |
var | variable | 变量 |
pre | preformed | 预定义格式 |
blockquote | block quotation | 区块引用语 |
strong | strong | 加重 |
em | emphasized | 加重 |
b | bold | 粗体 |
br | break | 换行 |
font | font | 字体 |
u | underlined | 下划线 |
fieldset | fieldset | 域集 |
legend | legend | 图标 |
caption | caption | 标题 |
还有center和font是不介意使用的,至于为什么不介意使用,大家自己领悟吧,这个我目前解释不好。
好了,关于web语义化,今天就说这么多,该收拾收拾上课去了,如果再想到什么,日后补充。如果对本文有什么意见,请给我留言,谢谢啦,大家互相学习,互相进步!!!!