一、HTML頭部
<head></head>
- 在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息
- 可以添加在頭部區(qū)域的元素標(biāo)簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>
<!--設(shè)置當(dāng)前頁面的文本編碼方式-->
<meta charset="utf-8" />
二、HTML 標(biāo)簽
<body></body>
1. 標(biāo)題標(biāo)簽(h1-h6)
<h1>我是標(biāo)題1</h1>
<h2>我是標(biāo)題2</h2>
<h3>我是標(biāo)題3</h3>
<h4>我是標(biāo)題4</h4>
<h5>我是標(biāo)題5</h5>
<h6>我是標(biāo)題6</h6>
2. 段落標(biāo)簽(p)
注意：網(wǎng)頁中的文字，手動的換行和空格無效
<p>文字內(nèi)容</p>
3. 文字標(biāo)簽(font)
多個(gè)普通文字內(nèi)容在一行顯示
<font>文字內(nèi)容</font>
4. 強(qiáng)制換行和空格
br標(biāo)簽 —— 單標(biāo)簽，專門用在網(wǎng)頁中做強(qiáng)制換行
空格符號 —— 一個(gè) 代表空一個(gè)像素
??????? 一個(gè)&emsp代表空一個(gè)空格
<br />
5. 文本效果標(biāo)簽
注意：strong和em有強(qiáng)調(diào)的意思
<b>加粗</b>, <strong>加粗</strong>
<i>傾斜</i>, <em>傾斜</em>
6. 水平線(hr)
<hr />
7. 列表標(biāo)簽(ol, ul, dl)
有序列表
<ol>
<li>一月</li>
<li>二月</li>
</ol>
無序列表
<ul>
<li>語文</li>
<li>數(shù)學(xué)</li>
</ul>
自定義列表
dl - 代表整個(gè)列表
dt - 列表分類
dd - 分類下的內(nèi)容
<dl>
<dt>文科</dt>
<dd>歷史</dd>
<dd>政治</dd>
<dt>理科</dt>
<dd>物理</dd>
<dd>化學(xué)</dd>
</dl>
8. 圖片標(biāo)簽(img)
單標(biāo)簽
- src屬性 —— 設(shè)置網(wǎng)頁上顯示圖片的地址（地址可以是本地圖片路徑，也可以是網(wǎng)絡(luò)圖片的url）
- title屬性—— 圖片標(biāo)題；在鼠標(biāo)停留在圖片上的時(shí)候才會顯示出來
- alt屬性 —— 圖片加載失敗顯示的提示信息
<img src="圖片地址" title="標(biāo)題" alt="加載失敗提示信息"/>
9. 超鏈接(a)
href屬性 —— 規(guī)定點(diǎn)擊超鏈接后跳轉(zhuǎn)的位置
- 一個(gè)網(wǎng)頁地址 —— 在瀏覽器中打開指定的網(wǎng)頁
- 一個(gè)本地的html地址(相對路徑) —— 跳轉(zhuǎn)到(打開) 本地一個(gè)html文件對應(yīng)的網(wǎng)頁
- ?# —— 刷新網(wǎng)頁，會重新加載網(wǎng)頁內(nèi)容(如果有網(wǎng)絡(luò)請求會重新請求!)
- 選擇器 —— 讓網(wǎng)頁滾動到指定位置(不會重新加載數(shù)據(jù))（之前的標(biāo)簽的id屬性的值為選擇器內(nèi)容）
target屬性 —— 加載新頁面的方式
- _self(默認(rèn)) —— 在當(dāng)前頁面中加載新的頁面
- _blank —— 在新的窗口中加載新的頁面(原頁面不會覆蓋)
<a target="_blank">百度一下</a>
10. 表格標(biāo)簽(table)
table標(biāo)簽 —— 代表整個(gè)表格
tr標(biāo)簽 —— 代表表格中的一行
td標(biāo)簽 —— 代表表格中的一個(gè)單元格
標(biāo)簽屬性：
- border屬性 —— 設(shè)置表框?qū)挾?；table的屬性
- bordercolor屬性 —— 設(shè)置表框顏色；table的屬性
- cellspacing —— 設(shè)置單元格和單元格之間的間隙大??；table的屬性
- cellpadding —— 單元格中的內(nèi)容和單元格表框直接的間距
- width —— 設(shè)置寬度
??作為table屬性 —— 設(shè)置整個(gè)表格的寬度；每一列的寬度按比例分配
??作為td的屬性 —— 設(shè)置td所在的列對應(yīng)的寬度 - height —— 設(shè)置高度
??作為table屬性 —— 設(shè)置整個(gè)表格的高度；每一行的寬度按比例分配
??作為tr的屬性 —— 設(shè)置tr對應(yīng)的行的高度 - bgcolor —— 設(shè)置背景顏色
??作為table屬性 —— 設(shè)置整個(gè)表格的背景顏色
??作為tr屬性 —— 設(shè)置一行的背景顏色
??作為td屬性 —— 設(shè)置指定單元格的背景顏色 - align —— 設(shè)置對齊方法（left/right/center）
??作為table屬性 —— 讓整個(gè)表格在父標(biāo)簽中對齊
??作為tr屬性 —— 讓一行中所有單元格的內(nèi)容對齊
??作為td屬性 —— 讓指定的單元格中的內(nèi)容對齊
補(bǔ)充：HTML中的顏色 —— 可以是顏色的英文單詞；rgb16進(jìn)制值,前面加#, 例如：#ff0000
細(xì)線表格：
- 將border設(shè)置為0
- cellspacing的大小設(shè)置為想要的寬度的大小
- 設(shè)置整個(gè)表格的背景的顏色為邊框顏色，并且保證每個(gè)單元格的顏色和背景顏色不一樣
<table cellspacing="1" width="600" height="400" bgcolor="black">
<tr bgcolor="aliceblue">
<td></td>
<td></td>
</tr>
<tr bgcolor="aliceblue">
<td></td>
<td></td>
</tr>
</table>
不規(guī)則表格：
rowspan —— 行合并
colspan —— 列合并
11. 表單標(biāo)簽(form)
表單標(biāo)簽一般用來做用戶信息收集，一般不單獨(dú)使用，而是結(jié)合相關(guān)標(biāo)簽來使用(input,select,textarea)
<form action="" method="post">
action: 提交位置(接口相關(guān))
method: 請求方式(get/post)
12. input標(biāo)簽 —— 單標(biāo)簽
- type屬性:
決定輸入框的樣式
text(默認(rèn)) —— 普通的文本輸入框 - name屬性:
這個(gè)屬性主要用來區(qū)分?jǐn)?shù)據(jù)的。**提交的時(shí)候是以name=value形式提交 - value屬性：
單標(biāo)簽中的value相關(guān)雙標(biāo)簽的內(nèi)容；但是value值只能是文本
設(shè)置value屬性其實(shí)就是設(shè)置輸入框中默認(rèn)顯示的內(nèi)容;修改內(nèi)容其實(shí)是在修改value值
- text：文本輸入框
placeholder - 占位符(提示信息)
maxlength - 最多輸入字符個(gè)數(shù)
<input type="text" name="tel" value="123456" placeholder="請輸入電話號碼" maxlength="6"/>
- password：密碼輸入框
placeholder - 占位符(提示信息)
maxlength - 最多輸入字符個(gè)數(shù)
<input type="password" name="密碼" value="" placeholder="請輸入密碼(3-6位)" maxlength="8"/>
- radio：單選按鈕
name - 同一組數(shù)據(jù)對應(yīng)的name值設(shè)置成一樣的，才能做到單選
value - 這兒的value只是用于數(shù)據(jù)提交,不能顯示
checked - 設(shè)置為checked讓按鈕處于默認(rèn)選中狀態(tài)
<input type="radio" name="sex" value="男生" checked="checked"/><font>男</font>
<input type="radio" name="sex" value="女生" /><font>女</font>
<input type="radio" name="sex" id="s1" value="保密" /><label for="s1">保密</label>
注：文字和按鈕關(guān)聯(lián)（點(diǎn)擊文字和點(diǎn)擊按鈕的效果一樣）
??文字用label標(biāo)簽顯示，設(shè)置for屬性的值為想要關(guān)聯(lián)的按鈕的id的值
- checkbox：復(fù)選按鈕
name - 同一組數(shù)據(jù)的name值要一樣
value - 這兒的value只是用于數(shù)據(jù)提交,不能顯示
<input type="checkbox" name="instr" id="in1" value="教育" checked="checked" /><label for="in1">教育</label>
<input type="checkbox" name="instr" id="in2" value="互聯(lián)網(wǎng)" /><label for="in2">互聯(lián)網(wǎng)</label>
- button： 普通按鈕
value - 對應(yīng)的值會顯示在按鈕上
<input type="button" value="登錄" />
- submit：提交按鈕
將當(dāng)前所在的form標(biāo)簽中，設(shè)置了name屬性的相關(guān)的標(biāo)簽的數(shù)據(jù)以'name=value'的形式提交
<input type="submit" name="" id="" value="提交" />
- reset：重置按鈕
將當(dāng)前所在的form標(biāo)簽中，所有標(biāo)簽設(shè)置成初始狀態(tài)
<input type="reset" name="" id="" value="重置" />
13. 下拉列表(select)
select標(biāo)簽 - 代表整個(gè)下拉列表
option標(biāo)簽 - 代表列表中的每個(gè)選項(xiàng)；
??????可以通過設(shè)置selected屬性的值為"selected",來讓這個(gè)選項(xiàng)默認(rèn)選中
optgroup標(biāo)簽 - 設(shè)置label的值來對當(dāng)前下拉菜單的內(nèi)容進(jìn)行分組
<select name="省">
<optgroup label="省"></optgroup>
<option value="四川省">四川省</option>
<option selected="selected" value="遼寧省">遼寧省</option>
<optgroup label="直轄市"></optgroup>
<option value="北京">北京</option>
<option value="上海">上海</option>
</select>
14. 多行文本域(textarea)
textarea標(biāo)簽 - 輸入框，可以同時(shí)顯示多行內(nèi)容(可以自動換行和上下滾動)
name屬性 - 區(qū)分和提交
rows - 行數(shù)（不滾動最多能顯示的行數(shù)，影響輸入框的高度）
cols - 列數(shù) (一行顯示的文字的數(shù)量， 影響輸入框的寬度)
placeholder - 占位符
maxlength - 限制輸入的文字的個(gè)數(shù)
<textarea name="message" rows="4" cols="40" maxlength="200" placeholder="輸入你的問題">默認(rèn)文字</textarea>
14. div和span
塊級標(biāo)簽: 一個(gè)占一行,例如：div、h1、p、列表,table、tr、form， option...
行內(nèi)標(biāo)簽: 一行顯示多個(gè),例如：span、font、td、input、select、textarea...
