《web前端开发修炼之道》读书笔记-HTML篇

    之前一直是开发后台的，这段时间由于公司项目的关系，开始前端的开发，同时前端也是自己一个比较感兴趣的内容。之前对于前端，可谓样样都懂点，样样又都不懂。

    《编写高质量代码-web前端开发修炼之道》这本书没有讲太多的理论知识，而是通过大量的实践和技巧来帮助你对web前端的修炼，值得一读。本系列博客也主要会分成三部分：HTML，CSS，JavaScript。

---

高质量的HTML篇

     HTML的标签从设计之初就考虑到了语义，而不是像下面这个例子一样，毫无语义可言：

<div class="header">
         <div>logo</div>
         <div class="menu">
             <div>菜单一</div>
             <div>菜单二</div>
             <div>菜单三</div>
      </div>
<div>  
<div class="main">......</div>
<div class="footer">
          <div>xxx版权所有</div>
          <div>关于我们</div>
          .....
</div>  

    整个篇幅都是div，虽然说显示出来的后的美观程度可能并不受影响，但是，其一，搜索引擎看不到视觉效果，看到的都是网页的代码，而搜索引擎会通过标签来判断内容的语义；其二，这可能对以后前端的重构带来麻烦；其三，这完全不是一个编写高质量代码的人写出来的代码。

   下面是一些容易被忽略的标签语义对照，其他常用的可以去w3school上查询：

标签名	中文对照
dl	定义列表
dt	定义术语
dd	定义描述
address	地址
var	变量
em	加重
b	粗体
i	斜体

     那么，虽然我们知道了各种标签的语义，在编写HTML时，怎么才知道真正的使用合理了呢？

   去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。

    换句话就是说，可以通过某些工具，去掉网页中全部的CSS样式，在查看网页时，结构依然清晰。这个工具，推荐大家使用FireFox中的web developer，安装好后就是如下效果了：

     就以百度首页为例，再去除了所有CSS后，展示情况依然看到比较清晰的结构信息，标签的使用上也绝不是依靠div堆砌出来的，而是灵活运用了诸如p、span、ul等的标签：

  

   在语义化标签使用时应该注意的一些其他问题

1. 尽可能少地使用无语义标签div和span，这样有利于整体网页的展示速度；
2. 在语义不明显，即可使用p也可以使用div的地方，尽量使用p，因为p默认情况下有上下间距，去掉样式后可读性好，对兼容性特殊的终端有利；
3. 不要使用纯样式标签，例如b、font和u等，改用CSS来设置。语义上强调的文本可以包括在strong或者em标签里，strong和em都有“强调”的语义，其中strong默认样式是加粗，em则是斜体；
4. 块级元素不要包含在内联元素中。

比如说这种情况就是错误的（span为内联元素，div为块级元素）
<span>……<div>……</div></span>

    随着HTML5的普及，语义化标签也显得越来越重要，例如最开始那个用div堆砌出来的HTML经过改造，以至于从肉眼上，我们就能够看到语义，O(∩_∩)O~

<header>
      <h1>
      <a href="xxx"><img alt="xxx" src="xxx">logo</a>
     </h1>
    <nav>
      <a href="xxx"></a>
      <a href="xxx"></a>
      ……
    </nav>
</header>
<section>……</section>
<footer>……</footer>

 

下一篇将带来高质量CSS方面的知识，敬请期待……