塊級元素,簡單來說,就是自己獨占一行的元素。其特點: ①總是在新行上開始; ②高度,行高以及外邊距和內邊距都可控制; ③寬度預設是它的容器的100%,除非設定一個寬度。 ④它可以容納內聯元素和其他塊元素 彙總代碼如下: 1 <!doctype html> 2 <html> 3 <head> 4 <m ...
塊級元素,簡單來說,就是自己獨占一行的元素。其特點:
①總是在新行上開始; ②高度,行高以及外邊距和內邊距都可控制; ③寬度預設是它的容器的100%,除非設定一個寬度。 ④它可以容納內聯元素和其他塊元素 彙總代碼如下:1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <!-- 塊狀元素 獨占一行 --> 9 10 <!-- div無語義,稱它為盒子 --> 11 <div>盒子</div> 12 13 <!-- h1-h6語義 定義標題 --> 14 <h1>標題1</h1> 15 <h2>標題2</h2> 16 <h6>標題3</h6> 17 18 <!-- p 語義 段落標簽 寫文字--> 19 <p>文章</p> 20 21 <!-- 列表多數用來存一系列的相似的數據 --> 22 <!-- 有序列表 --> 23 <ol> 24 <li>導航1</li> 25 <li>導航2</li> 26 <li>導航3</li> 27 </ol> 28 <!-- 無序列表 --> 29 <ul> 30 <li>導航1</li> 31 <li>導航2</li> 32 <li>導航3</li> 33 </ul> 34 <!-- 定義列表 解釋某個名詞 --> 35 <dl> 36 <dt>名詞</dt> 37 <dd>解釋名詞的位置</dd> 38 </dl> 39 40 <!-- 表格 渲染性能不好 少用 --> 41 <table> 42 <caption>表格頭部</caption> 43 <!-- tr是行 --> 44 <tr> 45 <!-- th表頭 --> 46 <th>星期一</th> 47 <th>星期二</th> 48 </tr> 49 <tr> 50 <!-- td單元格 --> 51 <td>上課</td> 52 <td>上課</td> 53 </tr> 54 </table> 55 </body> 56 </html>