9_經常使用標籤以及默認樣式清除

經常使用標籤,可分爲塊標籤、內嵌標籤和內嵌塊ide

  塊:(div)                                                                           1. 獨佔一行顯示                                                                     2. 支持全部的樣式
    3.不設置寬高,寬度默認撐滿父級
    4.代碼換行不被解析

        內嵌:(span)                                                                         1. 能夠在一行顯示                                                                    2. 不支持寬高,上下的margin,上下padding支持的也有問題                                                 3. 代碼換行會解析出一個空格(字體和字體大小,能夠控制空格大小)                                              4.寬度由內容撐開字體

經常使用標籤分類:spa

   <div>div</div> <!-- 塊標籤 -->
    <span>span</span> <!-- 內嵌標籤 -->
    <a href="#">a連接</a>  <!-- 內嵌標籤 -->
    <strong>strong</strong>  <!-- 內嵌標籤 -->
    <em>em</em> <!-- 內嵌標籤 -->
    <h1>標題</h1><!-- 塊標籤 -->
    <h2>標題</h2><!-- 塊標籤 -->
    <h3>標題</h3><!-- 塊標籤 -->
    <h4>標題</h4><!-- 塊標籤 -->
    <h5>標題</h5><!-- 塊標籤 -->
    <h6>標題</h6><!-- 塊標籤 -->
    <p>段落</p> <!-- 塊標籤 -->
    <ul> <!-- 塊標籤 -->
        <li>無序列表</li> <!-- 塊標籤 -->
        <li>無序列表</li>
    </ul>
    <ol> <!-- 塊標籤 -->
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>
    <dl><!-- 塊標籤 -->
        <dt>定義列表</dt> <!-- 塊標籤 -->
        <dd>定義列表</dd> <!-- 塊標籤 -->
        <dd>定義列表</dd>
    </dl>
    <section>板塊</section> <!-- 塊標籤 -->
    <header>頭部</header> <!-- 塊標籤 -->
    <footer>底部</footer> <!-- 塊標籤 -->
    <article>文章 主體</article> <!-- 塊標籤 -->
    <aside>附屬信息</aside> <!-- 塊標籤 -->
    <nav>導航</nav> <!-- 塊標籤 -->
    <time>時間</time> <!-- 內嵌標籤 -->
    <mark>標記</mark> <!-- 內嵌標籤 -->
<img src=」#」> <!--內嵌塊-->設計

注意: 1. a標籤中 不能包含a標籤
      2. 內嵌標籤中不能包含塊標籤
      3. 部分塊標籤中 也不能再包含塊標籤: p, h1-h6, dt
      4. 注意如下幾種嵌套是固定的:
            ul li
                ul下只能包含li,li的父級也只能是ol或ul,固然li中能夠隨意放置
            ol li
                ol下只能包含li,li的父級也只能是ol或ul,固然li中能夠隨意放置
            dl dt dd
                dl下只能包含dt和dd,dt,dd的父級也只能是 dl,固然dd中能夠隨意放置
      5. 通常建議,塊和塊並列,內嵌和內嵌並列code

4、默認樣式清除orm

    標籤默認樣式清除(標籤字體樣式初始化)
    初始整個頁面的字體 和 字體大小,可是注意每一個項目都不一致,要跟着設計走blog

ul, ol,
     { 
  margin: 0;
  padding: 0;
  list-style: none; 
}
body ,p, dl, dd,h1,h2,h3,h4,h5,h6 {
  margin: 0;
}
h1,h2,h3,h4,h5,h6 {
  font-weight:normal;
  margin: 0;
}

a     { 
  text-decoration: none; 
}
img {
  vertical-align:top;
  border:none
}
em,strong {
  font-style:normal;
  font-weight:normal;
}
mark {
  background: none; 
}
相關文章
相關標籤/搜索