[Web 前端] 001 html 常用塊級標簽
阿新 • • 發佈：2019-04-28
內容 配對 方向 4.2 位置 tle 影響 top oct 常用的 HTML 塊級標簽
不加 br；不加 br；不加 br
加 br；
加 br；
加 br
這是一個 div
百科知識，以後有機會再寫，這回“實用主義”，直接上用法
1. html 總體框架
註釋方法
<!-- + 需要註釋的內容 + -->
寫法
<!DOCTYPE html> <!-- 聲明文檔，告訴瀏覽器解析 html 代碼的版本 --> <html> <!-- html 是網頁當中最大的標簽，與閉合標簽配對 --> <head> <!-- head 頭，一般是對網頁進行設置 --> <meta charset="utf-8"> <!-- 設置網頁的編碼格式 --> <title>網頁的標題</title> </head> <body> <!-- body 體，主要用於寫顯示在頁面中的內容 --> hello html </body> </html>
- 效果
2. 常用的 HTML 塊級標簽(塊元素)
- 寫法
<!DOCTYPE html> <html lang="en"> <!-- 將此頁面定義為英文網頁 如果要定義成中文頁面：lang = "zh" --> <head> <meta charset="UTF-8"> <!-- utf-8 大小寫均可 --> <title>常用的 HTML 塊級標簽</title> </head> <body> <!-- 常用的有語義的塊級元素有默認樣式 獨占一行 --> <!-- 1. 標題標簽，只有 h1-h6 這 6 級 --> <h1>一級標題</h1> <h2>二級標題</h2> <h3>三級標題</h3> <h4>四級標題</h4> <h5>五級標題</h5> <h6>六級標題</h6> <!-- 2. 段落標簽 --> <p>和風熏柳，花香醉人，正是南國春光漫爛季節。</p> <!-- 3. 列表 --> <!-- 3.1 無序列表 ul + li 註意：ul 標簽中只能寫 li 標簽 --> <ul> <li>無序列表一</li> <li>無序列表二</li> <li>無序列表三</li> </ul> <!-- 3.2 有序列表 ol + li 有序列表中有 type 屬性和 start 屬性 type: 設置有列表的標記類型 start: 設置列表項標記的起始位置 --> <ol type="i" start="5"> <li>有序列表一</li> <li>有序列表二</li> <li>有序列表三</li> </ol> <!-- 3.3 自定義列表 dl + dt + dd --> <dl> <dt>dt 自定義列表一</dt> <dd>dd 自定義列表一的內容</dd> <dd>dd 自定義列表一的內容</dd> <dt>dt 自定義列表二</dt> <dd>dd 自定義列表二的內容</dd> </dl> <!-- 4. 表格標簽 table 聲明一個表格 th 表頭 tr 行 td 列 --> <!-- 4.1 table 的屬性： width: 設置單元格的總體寬度 height: 設置單元格的總體高度 border: 設置邊框顯示與否 cellpadding: 設置表格中的內容與邊框的間距 cellspacing: 設置表格與表格的間距 --> <!-- 4.2 單元格合並： colspan: 設置水平方向一個單元格占據的寬度 rowspan: 設置垂直方向一個單元格占據的高度 --> <!-- 4.3 單元格內容的對齊方式： 水平對齊方式 align: （默認靠左顯示） center: 居中 right: 靠右 垂直對齊方式 valign: （默認垂直居中） top: 靠上 bottom: 靠下 --> <!-- 註意： 如果給 tr 設置，會影響整行 如果給 td 設置，只影響當前的單元格 th 標簽：默認水平居中，有加粗效果 --> <table border="1" cellpadding="10px" cellspacing="0" width="500px" height="280px"> <tr> <th colspan="4">表頭</th> </tr> <!-- 第二行 --> <tr align="center"> <td rowspan="2">(2, 1) + (3, 1)</td> <td>(2, 2)</td> <td>(2, 3)</td> <td>(2, 4)</td> </tr> <!-- 第三行 --> <tr> <td>(3, 2)</td> <td>(3, 3)</td> <td>(3, 4)</td> </tr> <!-- 第四行 --> <tr> <td valign="top">(4, 1)</td> <td align="right" valign="bottom">(4, 2)</td> <td valign="bottom">(4, 3)</td> <td align="right" valign="top">(4, 4)</td> </tr> </table> <!-- 5. br: 換行 --> 不加 br；不加 br；不加 br <br>加 br； <br>加 br； <br>加 br <!-- 6. 水平分割線 width=50 長度為 50 width=50% 一半長度 align=left 出現在左邊 size=1 線加粗--> <hr width=50> <br> <hr width=50% align=right size=1> <br> <!-- 7. 區塊元素 沒有默認樣式(沒有默認的語義) div: 獨占一行，一般用來劃定一塊區域，配合 css 在布局中使用 --> <div>這是一個div</div> </body> </html>
- 效果
一級標題
二級標題
三級標題
四級標題
五級標題
六級標題
和風熏柳，花香醉人，正是南國春光漫爛季節。
- 無序列表一
- 無序列表二
- 無序列表三
- 有序列表一
- 有序列表二
- 有序列表三
- dt 自定義列表一
- dd 自定義列表一的內容
- dd 自定義列表一的內容
- dt 自定義列表二
- dd 自定義列表二的內容
| 表頭 | |||
|---|---|---|---|
| (2, 1) + (3, 1) | (2, 2) | (2, 3) | (2, 4) |
| (3, 2) | (3, 3) | (3, 4) | |
| (4, 1) | (4, 2) | (4, 3) | (4, 4) |
加 br；
加 br；
加 br
這是一個 div
[Web 前端] 001 html 常用塊級標簽