zoukankan      html  css  js  c++  java
  • 高质量的Html:语义化标签

    一:(理论)语义化标签是什么?

     

    语义化标签就是尽量让Html的标签是有相对应的结构的含义的,以Table为例:

    1 <table>
    2  <tr><td>消费项目</td><td>消费金额</td></tr>
    3  <tr><td>吃饭</td><td>20元</td></tr>
    4  </table>

    你看出了上面的Table有什么毛病吗?嘿嘿,那你看这个语义化的标签

      

    1 <table>
    2  <caption>花费记账</caption>
    3  <thead><tr><th>消费项目</th><th>消费金额</th></tr></thead>
    4  <tbody><td>吃饭</td><td>20元</td></tbody>
    5  </table>

    这两块代码的标签不一样,而下面这段代码,无疑更符合Web标准,

    <caption>这个标签一看就是表格的标题,<thead>一看就知道是表格的表头,<th>一看就知道里面的内容是这个表的某一列的列头。这样的结构清晰更能让机器,浏览器明白它是什么意思,而第一段代码所表示的东西要含糊不清些。

    再说我们习以为常的

      

    1 <title>博客园简介</title><body>博客园是一个软件开发的技术乐园,它于2004年创办,这里...</body>

    你看,为什么我们看一篇文章,一下就知道标题在哪呢?在浏览器的顶端。那为什么浏览器能抓取呢?就是它知道这个语义化标签<title>里的就是文章标题,要是我们不遵守这个,而是

      

    1 <span>博客园简介</span><span>博客园是一个软件开发的技术乐园,它于2004年创办,这里...<span>

    那浏览器怎么就知道谁是标题,谁是内容了呢?

    二:(理论)语义化标签怎么样?

      

       1.结构更好,更利于搜索引擎的抓取(SEO的优化)和开发人员的维护(可维护性更高,因为结构清晰)。

      2.更有利于特殊终端的阅读(手机,个人助理等)。 

    三:(行动)语义化标签怎么办?

     

       尽量用有结构含义的,少用无语义的,如<span>,<div>无意义,看不出是什么东西,可是<address>一看就知道这里面的是地址。

    那么,怎么判断你的页面是否符合Web标准之一:语义化标签呢?你可以把你的页面暂时去掉样式后看可读性怎么样,如果这个时候感觉你的页面很乱,那就说明的的页面的语义化标签不怎么样,而如果你的页面去掉样式了感觉依然不是杂乱无章的,那么,就说明你的页面结构清晰,语义化标签比较可以了。

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

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

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

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

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

     

    这只是我的一点看法,希望抛砖引玉一下,看过的人把自己的想法也说出来,让大家知道你的想法,也是完善此文。

    ..
  • 相关阅读:
    启用Netlogon debug,查看服务器验证瓶颈
    Windows Server 2016调整网卡顺序
    AD用户添加到组
    客户端查看/修改所属站点
    OpenCV相关库
    《塔木德》笔记
    《如何阅读一本书》笔记
    《创业维艰》笔记
    《社会心理学》笔记
    《智能商业》笔记
  • 原文地址:https://www.cnblogs.com/lanyueer/p/2056463.html
Copyright © 2011-2022 走看看