8. HTML5區塊元素標籤的使用與樣式

HTML5塊元素標籤的使用

本單元通過講解HTML塊元素、塊標籤等，掌握HTML區塊元素，並認識HTML5塊元素。

1. HTML區塊元素(block)
   區塊元素在顯示時，通常會以新行開始，高度，行高以及頂和底邊距都可控制，寬度預設是它的容器的100%，除非設定一個寬度。
   如 <h1> <p> <ul>
   sublime 假字 lorem
2. HTML行內元素(inline)
   行內元素通常不會以新行開始，高，行高及頂和底邊距不可改變；寬度就是它的文字或圖片的寬度
   <b> <a> <img>
   <a href="7-1.html" target="_blank">7-1.html</a>
3. HTML <div> 元素
   <div>元素是區塊元素，其主要是組合 HTML的容器
4. HTML <span>元素
   <span>元素是行內元素，可做為文本的容器
5. 更多標籤：http://www.w3school.com.cn/tags/

HTML樣式

本單元講解HTML樣式，包含基本標籤、屬性、三種樣式表插入方法（外部樣式表、內部樣式表、內聯樣式表）

1. 標籤：
   <style>：樣式定義
   <link>：資源引用
2. 屬性：
   rel="stylesheet"：外部樣式表
   type="text/css"：引入文檔的類型
3. 三種樣式表插入的方法：
   外部樣式表：

   <link rel="stylesheet" type="text/css" href="css/style.css" />

   
   內部樣式表：

   <style type="text/css">
     hr {color: sienna;}
     p {margin-left: 20px;}
     body {background-image: url("images/back40.gif");}
   </style>

   
   行內樣式表：

   <p style="color: sienna; margin-left: 20px">
     這是行內樣式表
   </p>