前端开发

浅谈HTML语义化

2021-01-10 09:59:09 阅读数 2680 收藏 0

        前两天做项目时,做头部导航和侧导航的时候,采用的div,头部导航使用div的float:left,的确很方便,又比采用ul>li减少了li的list-style:none,但是在头部导航的布局上就比较麻烦了,在苦思中想到了HTML语义化,到处查找资料和结合自己的实践,接下来就浅谈HTML的语义化。

        什么是HTML的语义化?HTML的语义化是指使用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器更加容易理解。

        语义化的HTML文档有助于提升你的网站对访客的易用性。对于搜索引擎来说,则有助于他们建立索引,并可能给予一个较高的权值。

        事实上SEO最有效的一种办法,就是对网页的HTNL结构进行重构,实质上就是HTML的语义化。

        注:HTML标签对大小写不敏感,但是推荐小写!

        各种常用标签的含义

        基本

        <html>…</html>           HTML文档

        <head>…</head>         文档的信息

        <meta/>        HTML 文档的元信息

        <title>…</title>              文档的标题

        <link>        文档与外部资源的关系

        <style>…</style>            文档的样式信息

        <body>…</body>          可见的页面内容

        <!—…—>        注释

        文本

        <h1>…</h1>            标题字大小(h1~h6)

        <b>…</b>            粗体字

        <strong>…</strong>            粗体字(强调)

        <i>…</i>            斜体字

        <em>…</em>            斜体字(强调)

        <u>…</u>            下划线

        <center>…</center>            居中文本

        <ul>…</ul>            无序列表

        <ol>…</ol>            有序列表

        <li>…</li>            列表项目

        <a>…</a>            超链接(锚)

        <font>          文本字体、大小、颜色

        <br/>            换行

        <del>...</del>        文档中已删除的文本

        <p>            段落

         <hr/>          水平线

        <img src="">        图像

        表格  

        <table>…</table>            表格

        <tr>…</tr>            表格中的行

        <th>…</th>            表头

        <td>…</td>            表格中的单元

        其他

        <form>…</form>            供用户输入的HTML表单

        <frame>           框架   

        语义化标签要注意的一些问题

      为了保证网页去掉样式后可读性依然好,并且又符合Web标准,我们应该注意以下几点:

       尽可能少的使用无语义标签,如span,div;

       在语义不明显,既可以用p,又可以用div的地方,尽量用p,因为p默认情况下有上下间距,去掉样式后的可读性更好,对兼容特殊终端有利;

       不要使用纯样式标签,例如b,font和u等,改用CSS设置。语义上需要强调的文本可以包含在strong或em里,这两个标签有"强调"的语义,其中前者是默认加粗,后者是斜体。