HTML基本標簽（一）
使用title標簽
title標簽：網頁的標題，即網頁選項卡上的文字。
<head>
<title>******</title>
</head>
使用link標簽
鏈接網頁圖標，title前的小logo
rel屬性：聲明鏈接文件的類型，此處選icon
type屬性：可以省略
href屬性：表示圖片的路徑地址
<link rel="icon" href="img/icon.png"/>
使用meta標簽
描述文檔類型和編碼
描述搜索關鍵字和描述
<head>
<meta charset="urf-8">
</head>
meta標簽常用屬性：
1、charset：設置文檔的字符集編碼格式
HTML5中設置字符集編碼：<meta charset="UTF-8">
HTML4.01之前...: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
>>>常見的字符集編碼格式：
a.GB-2312:國標碼。簡體中文
b.GBK:擴展的國標碼
c.UTF-8：萬國碼 Unicode 常用
2、http-equiv:將我們的信息寫給瀏覽器看，讓瀏覽器按照這里面的要求執行，
可選屬性值：Content-Type(文檔類型) refresh(網頁定時刷新) set-cookie(設置瀏覽器cookie緩存)
需要配合content屬性使用。（http-equiv屬性只是表明需要設置那一部分，具體的設置內容，放到content屬性中）
例如：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
3、name屬性：使用方法同"http-equiv"，將我們的信息寫給搜索引擎看的。
常用且需要掌握的屬性值：author（作者） keyword（網頁關鍵字）
description（網頁描述）這兩個屬性設置，網頁必不可少。
例如：
<!--作者-->↓↓↓
<meta name="author" content="http://www.********.com" />
<!--網頁關鍵字：多個關鍵字用英文（半角）逗號分隔-->
<meta name="keywords" content="HTML5，網頁，Web前端開發" />
<!--網頁描述：搜索網站時，title下面的解釋文字。至關重要！！！-->
<meta name="description" content="*******************" />
下面是一些比較常用的行級以及塊級標簽
1、標簽分類
塊級標簽：顯示為塊，
前后隔一行（自動換行）
行級標簽：按行從左往右逐一顯示。
2、常見塊級標簽
<h1></h1>......<h6></h6>:標題標簽
h標簽：標題標簽，自動加粗，h1最大，h6最小
水平線標簽：<hr/>
<p></p>：段落標簽
<br/>:換行標簽
<blockquote>……</blockquote>:引用標簽
<pre></pre>:預格式標簽（一般用來承載代碼）
瀏覽器默認顯示樣式：1、顯示為等寬字體 2、代碼中的換行、空格等元素可在瀏覽器直接顯示。
3、基於布局的塊級標簽
有序列表標簽：<ol></ol>
列表項：<li></li>
無序列表標簽：<ul></ul>
定義描述列表（使用定義列表實現圖文混編效果）：<dl></dl>
列表標題：<dt>一般只有一項</dt> 標題頂格顯示
列表描述項：<dd>可以有N多項</dd> 描述項相對標題進行縮進顯示
組合標簽<figure></figure> 用於顯示圖片及圖片標題
分區標簽（可以包裹任何標簽也可以被任何標簽包裹）<div></div>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常見的塊級標簽</title> </head> <body> <!--h標簽：標題標簽，自動加粗，h1最大，h6最小--> <h1>h1標題標簽</h1> <h2>h2標題標簽</h2> <h3>h3標題標簽</h3> <h4>h4標題標簽</h4> <h5>h5標題標簽</h5> <h6>h6標題標簽</h6> <!--<hr/>:水平線標簽--> <hr /> <!--<p></p>：段落標簽--> <!--<br/>:換行標簽--> <p>p標簽是段落標簽，這里是一段文字</p> <p>p標簽是段落標簽，<br />這里是第二段文字</p> <!--引用標簽.cite屬性表明引用來源，一般表明引用網址，瀏覽器默認顯示為首行縮進--> <blockquote cite="http://www.jredu100.com"> 橫眉冷對千夫指，俯首甘為孺子牛。 </blockquote> <!--<pre></pre>:預格式標簽 瀏覽器默認顯示樣式：1、顯示為等寬字體 2、代碼中的換行、空格等元素可在瀏覽器直接顯示。 --> <pre>哈哈哈哈哈哈哈哈哈哈 啊哈哈哈哈哈哈</pre> <!-- 有序列表：<ol></ol> order list 列表項：<li>可以有N多個</li> --> <ol> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ol> <!-- 無序列表： <ul></ul> unorder list 列表項：<li></li> --> <ul> <li>無序第一項</li> <li>無序第二項</li> <li>無序第三項</li> </ul> <!-- 定義描述列表：<dl></dl> 列表標題：<dt>一般只有一項</dt> 標題頂格顯示 列表描述項：<dd>可以有N多項</dd> 描述項相對標題進行縮進顯示 --> <dl> <dt>這是定義列表的標題</dt> <dd>描述項第一項</dd> <dd>描述項第二項</dd> <dd>描述項第三項</dd> </dl> <!-- 組合標簽：<figure></figure> 用於顯示圖片及圖片標題 兩個子標簽：<img />圖片 <figcaption></figcaption> 圖片標題 顯示效果：圖片下面一個標題，同時圖片和標題前帶縮進。 --> <figure> <img src="img/icon.png"/> <figcaption>這是圖片標題</figcaption> </figure> <!-- 分區標簽：<div></div> --> <div style="width: 100px;height: 80px;background-color: chartreuse;">這是一個div</div> </body> </html>
4、常見的行級標簽
span（文本）：：無實際意義，用於包裹某部分文字修改特定樣式
em（強調）
strong（強調）
i（傾斜）
b（加粗）
【Strong、em、b、i標簽的區別】
1、strong和em都表示強調，strong顯示為粗體，em顯示為傾斜。而且，strong的強調成都比em更高。
2、strong和b都能加粗，em和i都能傾斜。但是，strong和em多了一層強調的語義。HTML5語言，要求標簽盡可能的實現語義化。
q（短引用）：顯示為文字用“”引起來
small（縮小字體）small（縮小字體）big（放大字體）
small標簽和big標簽可以多層嵌套，直到字號達到上限或下限為止。
img（圖片）
1、src：表示引用圖片的地址。
路徑地址的寫法：
① 相對路徑：以當前文件為准，去尋找圖片地址。
a、與當前文件處於同一層的圖片，直接寫圖片名
b、圖片在當前文件下一層：文件夾名/圖片名
c、圖片在當前文件上一層：../圖片名
② 絕對路徑：file：///盤符：/文件夾/圖片.后綴名 但是，嚴禁使用。
③ 網絡地址：網絡上的圖片鏈接，但是，一般不使用，因為當原地址網站刪除圖片時，自己的網站圖片同樣會消失。
2、height=""width=""圖片的寬度高度。可以用css樣式（style="wi在·dth: ;height: ;"）代替
3、title：圖片標題。當鼠標指上后顯示的文字。
4、alt：當圖片無法顯示的時候，顯示的文字。
補充img屬性
align：設置圖片周圍文字相對於圖片的位置。top、center、bottom
a（超鏈接）
1、href：超鏈接的路徑,可以是網絡鏈接，也可以是本地文件（路徑確定同img）
2、target：超鏈接打開的位置。_self在自身頁面打開（默認）_blank新頁面打開
3、title：鼠標指上后顯示的文字。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常見的行級標簽</title> </head> <body> <a name="#top"></a> <!--span（文本）：無實際意義，用於包裹某部分文字修改特定樣式--> 這是<span style="color: red;font-size: 36px;">span</span>中的文字 <br /> <!--em（強調）--> <em>這是em中的標簽</em> <br /> <!--strong（強調）--> <strong>這是strong中的文字</strong> <br /> <!--i（傾斜）--> <i>這是i標簽中的文字</i> <br /> <!--b（加粗）--> <b>這是b標簽中的文字</b> <br /> <!--q（短引用）：顯示為文字用“”引起來--> <q cite="www.jredu100.com">這是短引用標簽q中的文字</q> <br /> <!--small（縮小字體）big（放大字體） small標簽和big標簽可以多層嵌套，直到字號達到上限或下限為止。 --> <small>我被small縮小了一號。</small> <big>我是big標簽</big> <br /> <a name="weixin"></a> <img src="img/icon.png" height="" width="" title="鼠標指上后顯示的文字" alt="圖片沒有加載成功時顯示的文字"/> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <a href="tencent://message/?uin=982283757" target="_self" >這是一個超鏈接</a> <img src="img/computer.jpg" align="center"/>************* <!--S有誤文本：刪除線--> <s>這是s標簽中的文字</s> <!--cite標簽：瀏覽器顯示為傾斜。常用與書、畫作、作品的引用--> <cite>這是cite標簽</cite> <!--code：只是表示計算機代碼，但是瀏覽器只會顯示等寬字體，不會保留代碼格式，需配合pre標簽使用--> <pre><code> function h(obj){ obj.style.behavior='url(#default#homepage)'; var a = obj.setHomePage('//www.baidu.com/'); } </code></pre> <!--bdo：表示文本方向，dir="lte"從左往右 dir="rtl"從右往左--> <bdo dir="ltr">1234567</bdo> <bdo dir="rtl">1234567</bdo> <!--kbd：表示需要用戶用鍵盤輸入的內容，瀏覽器顯示為等寬字體--> 請輸入"<kbd>Esc</kbd>"退出系統 <!--sup:上標文本 sub：下標文本--> X<sup>2</sup> X<sub>2</sub> <!--版權符號--> © © <!--u：下划線--> <u>這是u標簽</u> <!--mark：高亮或標記文本，瀏覽器顯示為黃色背景--> <mark>這是mark標簽中的內容</mark> </body> </html>
錨點語法
錨鏈接：
① 本頁面錨鏈接：a.設置錨點：<a name="top"></a>
b. 在超鏈接上，使用#name 跳轉到對應錨點。
② 頁面間錨鏈接：a.在即將跳轉頁面的指定位置，設置錨點
b.在超鏈接的href屬性中使用"頁面地址.html#name"
<a href="text.html#name">跳轉到新頁面指定部分</a>
功能性鏈接：mailto://********* @qq.com用於給指定郵箱發送郵件
tencent://message/?uin=********* 給指定QQ發送消息
file:///e:/aaa.png 打開本地文件
表格
表格 table（表格的標題：<captipon></caption>)
表格的行：<tr></tr> 每行中的列：<td></td>
表格的表頭：<th></th> 默認加粗，單元格居中
【常用屬性】
1、border：給表格添加邊框，當border屬性增大時，只有外圍框線增加，單元格的邊框線始終為1px
2、Cellspacing：單元格與單元格之間的間隙距離，當Cellspacing="0"時，只會使單元格間隙為0，但不會合並邊框線。【表格邊框合並】style="border-collapse: collapse;":無需再寫Cellspacing="0"
3、Cellpadding：每個單元格中的內容與邊框線的距離。
4、Width、Height：表格的寬高
5、align：表格在屏幕的左中右位置顯示。 left center right
>>>注意：給表格加上align屬性相當於讓表格浮動。會直接打破表格后面元素的原有排列方式。
6、Bgcolor：背景色 等同於style="background-color:;"
7、Background：背景圖片 等同於style="background-image:;"且背景圖會覆蓋背景色
8、Bordercolor：邊框顏色
行及單元格標簽的屬性
【tr和td相關的屬性（td同樣好使）】
1、width/height：單元格的寬高
2、bgcolor：單元格的背景顏色
3、align：left center right 單元格中的文字水平對齊方式
4、valign：top center bottom 單元格中的文字垂直對齊方式
5、nowrap：nowarp="nowrap" 單元格中文字不換行
注意：
1、當表格屬性與行列屬性沖突時，以行列屬性為准；（近者優先）
2、表格的align屬性，是控制表格自身在瀏覽的的顯示位置，行和列的algin屬性，是控制 單元格中文字在單元格中的對齊方式；
3、表格的align屬性，並不影響表格內文字的水平對齊方式
tr的align屬性，可以控制一行中所有單元格的水平對其方式
【表格的跨行跨列】
colspan 跨列，當某個格跨N列時，其右邊N-1個單元格需刪除
rowspan 跨行，當某個格跨N行時，其下方N-1個單元格需刪除
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>table表格</title> </head> <body> <table width="500" border="1" cellspacing="0" style="border-collapse: collapse;" cellpadding="10" align="right" bgcolor="hotpink" background="img/computer.jpg" bordercolor="blue"> <caption>我是表格的標題</caption> <tr> <th>表頭1</th> <th>表頭2</th> <th>表頭3</th> </tr> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> </tr> </table> <table border="1"> <tr> <td>111</td> <td colspan="3">111</td> </tr> <tr> <td rowspan="3">222</td> <td>222</td> <td>222</td> <td>222</td> </tr> <tr> <td>333</td> <td>333</td> <td>333</td> </tr> <tr> <td>444</td> <td>444</td> <td>444</td> </tr> </table> </body> </html>
表單（一般與table配合使用）<form></form>
1、兩個重要屬性：action-表單提交的服務器地址 method-表單提交數據的方法（有get和post兩個屬性值）
2、get和post的區別：
① get：使用URL傳參：http://服務器地址?name1=value1&name2=value2（?表示傳遞參數，?后面采用name=value的形式傳遞，多個參數之間用&鏈接）
URL傳參不安全，所有信息可在地址欄顯示，並且可以通過地址欄隨意傳遞其他數據。
URL傳參數據量有限，只能傳遞少量數據。
唯一優點：傳參速率快。
② post：使用http請求傳遞數據。URL地址欄不可見，比較安全，且傳遞量沒有限制。
綜上所述，常用post傳遞數據。
3、【input標簽及屬性】
① type：表示input輸入框的類型。可選值有：
② name：input輸入框的別名。一般情況下必填。因為，傳遞數據時，使用 name=value的形式傳遞
③ value：input輸入框的默認值。
④ placeholder：input的提示內容，當輸入框有value的時候，提示內容消失。
⑤ （了解）tabindex="1" 控制點擊tab鍵時的跳轉順序，從最小的開始，逐個往大的數值跳轉，獲得焦點。
【input特殊屬性值】
① checked="checked" 默認選中
② disabled="disabled" 設置控件不能使用。用在按鈕上不能點擊，用在輸入框中不能修改。 而且，如果輸入框disabled，則輸入框信息不能往后台傳遞。
③ hidden="hidden"隱藏。等同於
<input type="hidden" name="username" value="1234" />。
常用於配合disabled，或根據其他需要，使其隱藏域傳遞數據。
（border：hidden 消除邊框）
4、【input-type屬性詳解】
① text：文本輸入框
② password：密碼輸入框，輸入內容時顯示為"·"
③ radio：單選按鈕。（value必寫）
checkbox：復選按鈕。
>>>name和value屬性需同時存在，提交時，提交的是value中的屬性值。
例如：<input type="radio" name="sex" value="男"/> 提交時，顯示"sex=男"
>>>radio憑借name屬性區分是否為同一組。name相同為同組，且同組中只能選擇一個。
>>>checked="checked"默認選中。（radio只能選一個，checkbox可以選多個）
④ file：文件上傳按鈕。
⑤ submit：提交按鈕，提交表單數據。（這里以注冊功能為例）
⑥ reset：重置按鈕，將表單數據重置為初始狀態。
⑦ image：圖形提交按鈕。功能同submit，可以提交數據。
⑧ button：普通按鈕，沒有任何功能。
5、【下拉選擇控件select】
（補充：當用name標簽取名時，只能包含數字、字母、下划線，且不能以數字開頭）
① 寫法：<select>
<option></option> //可以有N多個
</select>
② name屬性，應該寫在<select>上，所有選項只有一個name
③ multiple="multiple"設置select控件為多選，可在界面使用ctrl+鼠標，進行多選。
④ option常用屬性：
value=""：當option沒有value屬性時，往后台傳遞的是<option></option>標簽中間的文字；
當option有value屬性時，往后台傳遞的是value屬性的值。
title：鼠標指上后顯示的文字
selected="selected"：默認選中。
⑤ <optgroup label="山東省"></optgroup>：用於將option標簽進行分組，label屬性表示分組名。
6、【文本域textarea】
① 寫法：<textarea></textarea>
② 設置寬高 style="width: 200px; height: 150px;" 自身有cols="" rows="" 兩個屬性，但一般不用。
③ readonly="readonly"設置為只讀模式，不允許編輯。
④ style="resize: none;"設置為寬高不允許修改。
⑤ style="overflow：；"設置當文字超出區域時，如何處理。
>>>也可以通過overflow-x/overflow-y分別設置水平垂直方向的顯示方式。
>>>常用屬性值：hidden 超出區域的文字，隱藏無法顯示
scroll 無論文字多少，均會顯示滾動條
auto 自動，根據文字多少自動決定是否顯示滾動條（默認樣式）
7、 【表單的邊框與標題】
<fieldset> //表單邊框
<legend>********</legend> //表單標題
</fieldset>
>>>如果想要讓標題嵌入到邊框中，需將標題提標簽寫到邊框標簽里面。
>>>一個表單可以有多組邊框+標題的組合。
8、【HTML5 智能表單】
① H5新增input的form屬性，用於指向特定form表單的id，實現input無需放在form標簽之中，即可通過表單進行提交。
<form id=foo>
...
</form>
<input ... form="foo">
② type新增屬性：（詳見表格）
③ input元素的新增屬性：
Autocomplete：自動完成功能：記錄用戶之前輸入的內容，並在下次輸入時自動提示完成輸入。
>>> 屬性值：on/off
>>> 可以在form表單上使用，對整張表單的所有控件進行自動完成的開關
也可以在input上使用，完成對特定輸入框進行修改。
>>> 絕大部分瀏覽器，默認開啟。
Autofocus：自動獲得焦點。autofocus="autofocus"，只能設置input元素自動獲得焦點。
Form：所屬表單。通過form表單的id，確定此input屬於哪個表單。
Required：必填。required=“required” 設置input必填，否則阻止提交。
Pattern：使用正則表達式驗證input的模式（后續講解）
Placeholder：提示內容，當有value時取消提示。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表單form</title> </head> <body> <input type="text" name="test" form="form1"/> <form action="測試.html" method="method" id="form1"> <fieldset> <legend>用戶注冊</legend> <table> <tr> <td>用戶名</td> <td> <input type="text" name="username" placeholder="請輸入用戶名" disabled="disabled"/> </td> </tr> <tr> <td>密碼</td> <td> <input type="password" name="password" /> </td> </tr> <tr> <td>性別</td> <td> <input type="radio" name="sex" value="男" checked="checked"/>男 <input type="radio" name="sex" value="女"/>女 </td> </tr> <tr> <td>興趣</td> <td> <input type="checkbox" name="hobby" value="吃" />吃 <input type="checkbox" name="hobby" value="喝" />喝 <input type="checkbox" name="hobby" value="玩" />玩 <input type="checkbox" name="hobby" value="樂" />樂 </td> </tr> <tr> <td>頭像</td> <td> <input type="file" value="頭像" /> </td> </tr> <tr> <td>城市</td> <td> <select name="city"> <option selected="selected">請選擇</option> <optgroup label="山東省"> <option title="這里是title">青島</option> <option <!--selected="selected"-->煙台</option> <option value="1">濟南</option> </optgroup> <optgroup label="北京市"> <option>海淀區</option> <option>朝陽區</option> </optgroup> </select> </td> </tr> <tr> <td> <input type="submit" value="注冊"/> </td> <td> <input type="reset" value="重置" /> </td> </tr> <tr> <td>服務協議</td> </tr> <tr> <td colspan="2"> <textarea style="width: 230px; height: 100px;resize: none;overflow: scroll;" readonly="readonly">這里是服務協議！</textarea> </td> </tr> <tr> <td> <input type="image" src="img/icon.png" title="這就是個圖片提交按鈕"/> </td> <td> <input type="button" value="然而並沒有什么卵用" disabled="disabled"/> </td> </tr> <tr> <td> <input type="datetime-local" name="color"/> </td> </tr> </table> </fieldset> </form> </body> </html>