HTML常用標籤整理
基礎標籤
!DOCTYPE
定義文檔類型。<!DOCTYPE>
html
定義 HTML 文檔。
title
定義文檔的標題。
body
定義文檔的主體。
!--...--
定義註釋。<!--...-->
文字類標籤
文字容器標籤
h1~h6
標題標籤，會加粗加大文字，分爲六類。
實例：
<h1>一級標籤</h1>
<h2>二級標籤</h2>
<h3>三級標籤</h3>
<h4>四級標籤</h4>
<h5>五級標籤</h5>
<h6>六級標籤</h6>實際效果爲：
一級標籤
二級標籤
三級標籤
四級標籤
五級標籤
六級標籤
p
段落標籤，字體較小，不同的段落標籤之間自動換行。
實例：
<p>我是一個段落</p>
<p>我在上面那個段落的下面，我們兩個在不同的段落，所以我會自己換行。</p>實際效果爲：
我是一個段落
我在上面那個段落的下面，我們兩個在不同的段落，所以我會自己換行。
文字修飾標籤
em,i
斜體標籤，把字體變斜。
實例：
<em>我是斜體標籤</em><br />
<i>我也是斜體標籤</i>實際效果：
我是斜體標籤我也是斜體標籤
b,strong
黑體標籤，把字體變粗。
實例：
<b>我是黑體標籤</b></br>
<strong>我也是黑體標籤</strong>實際效果：
我是黑體標籤我也是黑體標籤
small
細體標籤，字體更斜。
實例：
<small>我是細體標籤</small>實際效果：
我是細體標籤
br
換行標籤。
實例：
我是一行文字<br />我是另一行文字實際效果：
我是一行文字
我是另一行文字
hr
定義水平線。
實例：
<p>我是一個段落<p><hr />
<p>我是一個段落<p>實際效果：
我是一個段落
我是一個段落
del
刪除線標籤，給文字添加刪除線。
實例：
<del>我是加了刪除線的文字</del>實際效果：
我是加了刪除線的文字
佈局類標籤
div
塊容器標籤(block)：自己要佔一行。
實例：
<div>我是第一個塊容器</div>
<div>我是第二個塊容器</div>實際效果：
我是第一個塊容器我是第二個塊容器
span
內聯容器(inline)：可以一行直到超出父容器寬度。
實例：
<span>我是第一個內聯容器</span>
<span>我是第二個內聯容器</span>實際效果：
我是第一個塊容器我是第二個塊容器
列表類標籤
ul-li
無序列表標籤。
實例：
<ul>
科目
<li>語文</li>
<li>數學</li>
</ul>實際效果：
- 科目
- 語文
- 數學
ol-li
有序列表標籤。
實例：
<ol>
科目
<li>語文</li>
<li>數學</li>
</ol>實際效果：
科目
- 語文
- 數學
dl-dt-dd
定義列表標籤。
實例：
<dl>
<dt>HTML</dt>
<dd>超文本標記語言</dd>
<dt>CSS</dt>
<dd>層疊樣式表</dd>
</dl>實際效果：
- HTML
- 超文本標記語言
- CSS
- 層疊樣式表
表格類標籤
table
定義表格。
常用屬性：
1.border
規定表格邊框的寬度。
2.cellpadding
規定單元邊沿與其內容之間的空白。
3.cellspacing
規定單元格之間的空白。
如圖：
caption
定義表格標題。
th
定義表格中的表頭單元格。
相比td標籤，th標籤中的文字更加醒目。
tr
定義表格中的行。
td
定義表格中的單元。
th和td標籤都有兩個很重要的標籤，分別爲行合併和列合併：rowspan，colspan。
以該單元格爲起點，向右向下合併其他單元格。
thead
定義表格中的表頭內容。
tbody
定義表格中的主體內容。
tfoot
定義表格中的表注內容。
實例：
<table border="1">
<caption>Example</caption>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>實際效果：
| Month | Savings |
|---|---|
| Sum | $180 |
| January | $100 |
| February | $80 |
表單類標籤
form
定義供用戶輸入的 HTML 表單。
常用屬性有：
1.action 規定當提交表單時向何處發送表單數據。
2.method 規定用於發送 form-data 的 HTTP 方法，具體爲：get、post。
3.target 規定在何處打開 action URL，詳見超鏈接a的target屬性。
input
定義輸入控件。
常用屬性有：
1.type 規定 input 元素的類型,主要有button、checkbox、password、radio、reset、submit、text等。
2.name 定義 input 元素的名稱。
3.value 規定 input 元素的值。
button
定義按鈕。
儘管已經有了input標籤可以用作表示按鈕，但是爲了標籤的語義化，我們引入了button標籤也可以表示按鈕。
相比input提供的按鈕，button標籤有着更多的功能。
常用屬性：type：input或者submit。
textarea
定義多行的文本輸入控件。
常用屬性：
1.cols 規定文本區內的可見寬度。
2.rows 規定文本區內的可見行數。
select-option
定義選擇列表（下拉列表）。
實例：
</br>
<form action="">
user:<input type="text" />
<br />
password:<input type="password" />
<br />
gender<input type="radio" checked="checked" name="gender"/>male
<input type="radio" name="gender">female
<br />
hobby <input type="checkbox" checked="checked" />CSGO
<input type="checkbox" />LOL
<input type="checkbox" />OW
<br /> address
<select name="address" id="0">
<option value="ch">china</option>
<option value="am">americal</option>
<option value="jp" selected="selected">japan</option>
<option value="en">english</option>
</select>
<br />
<textarea name="text" id="1" cols="30" rows="10"></textarea>
<br />
<button type="submit">提交</button>
<input type="reset" value="重置" />
</form>實際效果：
圖像標籤
圖像標籤爲img，它有幾個重要的屬性：
src：圖片來源，可以是本地圖片（絕對地址和相對地址），可以是圖片的鏈接。
alt：用來代替圖片的文本，它有兩個作用，一個是在圖片加載失敗時顯示，一個是有利於搜索引擎的收錄。
實例：
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570872627&di=450f95a557f17d1badcdcfc4ace2ea92&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.cwq.com%2F201712%2F1513127498165415.jpeg" alt="hello-world">實際效果：
超鏈接標籤
超鏈接標籤爲a，它有兩個重要屬性：
href：超鏈接指向，它可以指向三種不同的內容：
1.URL：同一資源定位符 如：http://www.baidu.com
2.URI：同一資源標誌符 如：tel:10086/mail:****@163.com...
3.文件路徑 如../1.html
target：詳見超鏈接a的target屬性
實例：
<a href="http://www.baidu.com" target="_blank">baidu</a>實際效果：
baidu