<编写高质量代码--web前端开发修炼之道>之html总结

2019独角兽企业重金招聘Python工程师标准>>>

最近在看一本书,觉得讲得特别精辟,把一些重要的地方记录下来
   使用语义化的标签
   (1)好处:能够很好地自我解释,方便搜索引擎理解网页的机构,抓取重要内容,去样式后也会根据浏览器的默认样式很好地组织网页内容,具有很好的可读性,从而实现对特殊终端的兼容
   (2)常见模块:
   demo 1: 常见的标签
   <h1>title</h1>
   <a href="#">更多</a>
   <p>段落</p>
   
   
   demo 2:表单
   <form action="" method="post">
      <fieldset>
           <legend>form title</legend>
           <label for="nameid">姓名</label>
           <input type="text"  id="nameid"/>
           <label for="password">密码</label>
           <input type="password"/>
           <input type="submit" value="登陆"/>
     </fieldset>
  </form>
 
  demo 3: 表格
  <table>
     <caption>表单html</caption>
     <thead>
        <tr>
          <th>表头1</th>
          <th>表头2</th>
          <th>表头3</th>
        </tr>
    </thead>
    <tbody>
       <tr>
          <td>单元格1</td>
          <td>单元格2</td>
          <td>单元格3</td>
       </tr>
    </tbody>
    </table>
    注意demo2中的label中的for内容应该和input中的id保持一致
    几点建议:
    (1)尽可能少地使用无语义标签div或者span
    (2)在语义不明显,既可以使用p也可以使用div的情况下,最好使用p,因为p有上下行边距,去掉样式之后可读性更好,对兼容特殊终端有利
    (3)不用使用纯样式标签,比如b,font或者u之类的标签,
        
         

转载于:https://my.oschina.net/sunshinewyf/blog/508530