html语义化

html语义化

> 1.使用div进行布局 不要用div进行无心义的包裹
> 2.span没有任何语义
> 3.既能够使用div也能够使用P时，尽可能使用p，p为分段
> 4.不要使纯样式标签，如: b、font、u等，改用css设置
> 5.须要强调的文本，用em(斜体，不要使用i)或strong（加粗，不要使用b）
> 6.使用表格时，标题caption，表头thead，主体tbody，尾部tbody，表头th，单元用td
> 7.每一个input标签加上id，要求说明部分用lebel包裹起来，加上for="someid"，关联起来
> 8.使用ul和ol来表述列表
> 9.多使用html5标签，header、nav、main、footer、article、section
> 10.简化html，尽可能使用::after和::before来增长附近内容

//要实现   
123<div>666</div>
444
//传统作法
<p style="float:left;">123</p>
<div style="float:left;clear:right">666</div>
<p>444<p>
//h5语义化作法
<style>
   .d1{}
   .d1::before{
     content:"123",
     display: inline-block;
  }
  .d2::after{
     content:"444",
     display: block;
  }
</style>
<div class="d1"></div>
//这样作的好处，简化了html结构，减小dom层的渲染时间，便于维护

　　

语义化布局

<headr>
    <nav></nav>
</headr>
<div class="content">
    <section>1楼</section>
    <section>2楼</section>
    <section>3楼</section>
    <aside></aside>
    <address>地址</address>
</div>
<footer></footer>