HTML常用標籤總結 [建議收藏]
好好學習，天天向上
本文已收錄至我的Github倉庫DayDayUP：github.com/RobodLee/DayDayUP，歡迎Star
1. 標題標籤
<h1> </h1>……<h6> </h6>
為了使網頁更具有語義化,我們經常會在頁面中用到標題標籤。HTML提供了6個等級的網頁標題
即<h1>-<h6>
2. 段落和換行標籤
段落標籤：
<p> </p>
在HTML標籤中,
標籤用於定義段落,它可以將整個網頁分為若千個段落
換行標籤：
<br/>
在HTML中,一個段落中的文字會從左到右依次排列,直到瀏覽器窗口的右端,然後才自動換行。如果希望
某段文本強制換行顯示，就需要使用換行標籤<br/>
3. 文本格式化標籤
加粗：
<strong> </strong>或者<b> </b>傾斜：
<em> </em>或者<i> </i>刪除線：
<del> </del>或者<s> </s>下劃線：
<ins> </ins>或者<u> </u>
4. <div></div>和<span></span>
<div></div>是大盒子，一行只能放一個大盒子
<div style="background-color: brown;">111</div>
<div style="background-color: bisque;">222</div>
<div style="background-color: aqua;">333</div>
<span></span>是小盒子，一行可以放多個
5. 圖像標籤
圖像標籤：
<img src="xxxxxx" 屬性2="xxxxxx">
| 屬性 | 屬性值 | 說明 |
|---|---|---|
| src | 圖片路徑 | 必須屬性 |
| alt | 文本 | 替換文本。圖像不能顯示的文字 |
| title | 文本 | 提示文本。鼠標放到圖像上，顯示的文字 |
| width | 像素 | 設置圖像的寬度 |
| height | 像素 | 設置圖像的高度 |
| border | 像素 | 設置圖像的邊框粗細 |
6. 超鏈接標籤
< a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>
| 屬性 | 作用 |
|---|---|
| href | 用於指定鏈接目標的ur地址，(必須屬性)當為標籤應用href屬性時，它就具有了超鏈接的功能； href=「#」表示這是一個空鏈接； 如果href裏面地址是—個文件或者壓縮包,會下載這個文件 |
| target | 用於指定鏈接頁面的打開方式，其中_self為默認值(在本窗口中打開)，_ blank為在新窗口中打開方式 |
7. 錨點鏈接
<a href="#要跳轉的元素的id"></a>
點擊鏈接的時候，會跳轉到指定元素所在的位置。
8. 注釋和特殊字符
注釋以「<!-」開頭，以「->」結束。
特殊字符：
| 特殊字符 | 描述 | 字符的代碼 |
|---|---|---|
| 空格符 | |
|
| < | 小於號 | < |
| > | 大於號 | > |
| & | 和 | & |
| ￥ | 人名幣 | ¥ |
| © | 版權 | © |
| ® | 註冊商標 | ® |
| ℃ | 攝氏度 | ° |
| ± | 正負號 | ± |
| × | 乘號 | × |
| ÷ | 除號 | ÷ |
| ² | 平方上標2 | ² |
| ³ | 立方上標3 | ³ |
9. 表格標籤
<table></tabe>是用於定義表格的標籤。
<tr></tr>標籤用於定義表格中的行,必須嵌套在< table></ table>標籤中
<td></td>用於定義表格中的單元格，必須嵌套在< tr></ tr>標籤中
<th></th>表示表格的表頭部分，表示表格的第一行或第一列，其中的文本內容加粗居中顯示
<thead></thead>用於定義表格的頭部。< thead>內部必須擁有< tr>標籤，一般是位於第一行
<tbody></tbody>用於定義表格的主體，主要用於放數據本體。
一些常用的屬性：
| 屬性名 | 屬性值 | 描述 |
|---|---|---|
| align | left、center、right | 規定表格相對周圍元素的對齊方式 |
| border | 1 或 「」 | 規定表格單元是否擁有邊框，默認為「」，表示沒有邊框 |
| cellpadding | 像素值 | 規定單元邊沿與其內容之間的空白,默認1像素 |
| cellspacing | 像素值 | 規定單元格之間的空白，默認2像素 |
| width | 像素值或百分比 | 規定表格的寬度 |
| height | 像素值或百分比 | 規定表格的高度 |
| rowspan | 要合併的單元格個數 | 合併行單元格，記得要刪除多餘的單元格 |
| colspan | 要合併的單元格個數 | 合併列單元格，記得要刪除多餘的單元格 |
<table border="1" cellspacing="0" width="500" height="250">
<thead>
<tr>
<th>表頭1</th>
<th>表頭2</th>
<th>表頭3</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td align="left" rowspan="2">111</td>
<td colspan="2">222</td>
</tr>
<tr>
<td>555</td>
<td>666</td>
</tr>
</tbody>
</table>
10. 列表標籤
<ul></ul>：定義無序列表，裏面只能放 li 標籤，其它標籤不被允許
<ol></ol>：定義有序列表，裏面只能放 li 標籤，其它標籤不被允許
<li></li>：有序列表和無序列表中的列表項，相當於一個容器，裏面可以放其它標籤
<dl></dl>：定義自定義列表，裏面只能包含dt和dd標籤
<dt></dt>：定義自定義列表中的項目
<dd></dd>：描述自定義列表中的每一個項目
<ul>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<dl>
<dt>幫助中心</dt>
<dd>賬戶管理</dd>
<dd>購物指南</dd>
<dd>訂單操作</dd>
<dt>服務支持</dt>
<dd>售後政策</dd>
<dd>自助服務</dd>
<dd>相關下載</dd>
</dl>
11. 表單標籤
通常一個表單由一個大的表單域構成，表單域裏面又包含表單元素和提示信息。
<form></form>：表單域標籤，表單域就是一個包含表單元素的區域
<form></form>標籤常用屬性：
| 屬性 | 屬性值 | 作用 |
|---|---|---|
| action | url地址 | 用於指定接收並處理表單數據的服務器程序的url地址 |
| method | get / post | 用於設定表單數據的提交方式 |
| name | 名稱 | 用於指定表單的名稱，以區分用一個頁面中的多個表單域 |
<input/>：輸入表單元素
<lable></lable>：綁定一個表單元素，當點擊 lable 標籤內的文本時，會自動將焦點轉到對應的表單元素上，lable 標籤的for屬性必須得與相關元素的id屬性相同
<select></select>：下拉表單元素，用於定義一個下拉列表
<option></option>：下拉列表中的元素，定義selected=「selected」屬性時，當前項為默認選中項
<textarea></textarea>文本域元素，用於定義一個多行文本輸入框，cols屬性規定每行的字符數，rows屬性規定顯示的行數
<input/>標籤的常用屬性：
| 屬性 | 屬性值 | 描述 |
|---|---|---|
| type | 見下表 | 用於設置<input/>標籤的不同形式 |
| name | 用戶自定義 | 定義input元素的名稱 |
| value | 用戶自定義 | 設置input元素的默認值 |
| checked | checked | 設置此input元素首次加載時應當被選中 |
| maxlength | 正整數 | 規定輸入字段中的字符的最大長度 |
<input/>標籤type屬性值：
| 屬性值 | 描述 |
|---|---|
| button | 定義可點擊按鈕 |
| checkbox | 定義複選框，一組複選框name屬性必須相同 |
| file | 定義輸入字段和 「瀏覽」 按鈕，供文件上傳 |
| hidden | 定義隱藏的輸入字段 |
| image | 定義圖像形式的提交按鈕 |
| password | 定義密碼字段，該字段中的字符被掩碼 |
| radio | 定義單選按鈕，一組單選按鈕的name屬性值必須相同 |
| reset | 定義重置按鈕，清除表單中的所有數據 |
| submit | 定義提交按鈕，提交到action屬性指定的地址 |
| text | 定義單行的輸入字段，用戶可在其中輸入文本，默認寬度為20字符 |
<form action="xxx.jsp" method="GET">
<table width="500">
<tr>
<td>性別</td>
<td>
<input type="radio" id="man" name="sex"/>
<label for="man"><img src="images/man.jpg"> 男 </label>
<input type="radio" id="women" name="sex"/>
<label for="women"><img src="images/women.jpg"> 女 </label>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select name="year">
<option selected="selected">--請選擇年--</option>
<option>1990</option>
<option>2000</option>
<option>2010</option>
</select>
<select name="month">
<option selected="selected">--請選擇月--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="day">
<option selected="selected">--請選擇日--</option>
<option>11</option>
<option>12</option>
<option>13</option>
</select>
</td>
</tr>
<tr>
<td>所在地區</td>
<td>
<input type="text" value="安徽" name="area">
</td>
</tr>
<tr>
<td>婚姻狀況</td>
<td>
<input type="radio" name="marital_status" id="spinsterhood">
<label for="spinsterhood"> 未婚 </label>
<input type="radio" name="marital_status" id="married">
<label for="married"> 已婚 </label>
<input type="radio" name="marital_status" id="divorce">
<label for="divorce"> 離婚 </label>
</td>
</tr>
<tr>
<td>學歷</td>
<td><input type="text" name="edu_bg"></td>
</tr>
<tr>
<td>喜歡的類型</td>
<td>
<input type="checkbox" name="like_type" id="wumei">
<label for="wumei"> 嫵媚的 </label>
<input type="checkbox" name="like_type" id="keai">
<label for="keai"> 可愛的 </label>
<input type="checkbox" name="like_type" id="xiaoxianrou">
<label for="xiaoxianrou"> 小鮮肉 </label>
<input type="checkbox" name="like_type" id="laolarou">
<label for="laolarou"> 老臘肉 </label>
<input type="checkbox" name="like_type" id="douxihuan">
<label for="douxihuan"> 都喜歡 </label>
</td>
</tr>
<tr>
<td>自我介紹</td>
<td>
<textarea cols="30" rows="10" name="self_introduction"></textarea>
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" value=" 免費註冊 ">
</td>
</tr>
</table>
</form>
碼字不易，可以的話，給我來個
點贊，收藏，關注如果你喜歡我的文章，歡迎關注微信公眾號 『 R o b o d 』
