首页 > 代码库 > 关于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语义化,今天就说这么多,该收拾收拾上课去了,如果再想到什么,日后补充。如果对本文有什么意见,请给我留言,谢谢啦,大家互相学习,互相进步!!!!