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>