1）有序列表ol，由多個li標簽組成。

<ol>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ol>
顯示結果中自帶序號：

2）無序列表ul
<ul>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ul>
顯示結果中無序號：

兩層無序列表嵌套的話第二層的黑點變為空心：

3）定義列表dl

<dl>
<dt>定義列表的標題</dt>
<dd>定義列表的描述項</dd>
<dd>定義列表的描述項</dd>
<dd>定義列表的描述項</dd>
</dl>
顯示結果中，標題自動頂格顯示，一個列表一般只有一個標題，但可
以有多個描述項。
4）figure組合標簽

<figure>
<img src="img/icon.png" />
<figcaption>
圖標
</figcaption>
</figure>
5）div分區標簽
用於配合css使用，將網頁劃分為區塊，可以包裹各種標簽。

<div style="background-color: blue; >
div裏面的文字
</div>
6）span標簽
span標簽用於包裹行內的文字，常配合css使用修改文字樣式。

學習<span style="color: red; font-size: 50px;">前端</span>

7）em、i、strong、b標簽
em和i都表示傾斜，strong和b都表示加粗。
em和strong有強調含義，強調給搜索引擎看。strong的強調成都比em
更高。
強調的作用：可以讓搜索引擎快速抓取網頁的重點內容，實現代碼的
語義化。

<em>em標簽，字體傾斜+強調</em><br />
<strong>strong標簽，字體加粗+強調</strong><br />
<i>僅僅是傾斜</i><br />
<b>僅僅是加粗</b><br />

8）<u>下劃線標簽</u>

9） 引用標簽：blockquote、q、cite。
blockquote：顯示效果為整段縮進，用於引用一整段標簽，是塊級標
簽。
q：自動加引號，用於引用一句話，是行級標簽。
cite：字體傾斜常用語引用作品名，書畫名。
<blockquote cite="">引用標簽</blockquote>
<q cite="www.baidu.com">引用，自動加雙引號,短引用</q>
<cite>引用，字體傾斜。常用語作品名字的引用</cite>

10）img圖片標簽(行級標簽)
src：圖片所在路徑。
路徑的表示方式：①網絡圖片地址不建議使用；
②可以使用圖片的絕對路徑，因為絕
對路徑使用file://協議，網頁使用http://協 議打開無法訪問
file協議的文件。絕對路徑寫法file:///C:/tupian.jpg
③相對路徑，推薦使用的唯一方式。
a.圖片在當前文件的下一層"文件夾名
/圖片名"；
b.圖片與當前文件在同一層，直接寫
圖片名；
c.在上一層，"../圖片名"，註意圖片
必須包含在項目裏面不能退出項目根目錄。
width/height:寬度高度屬性

title：鼠標放在圖片上時顯示的文字。
alt：圖片由於各種原因無法加載出來時顯示的文字。
省略alt將默認顯示title的名稱。
align：圖片周圍的文字相對於圖片的排列方式。top、center、
bottom。
<img src="img/icon.png" width="50px" height="50px" title="鼠
標放在圖
片上時顯示的文字" alt="圖片未加載" align="center" />

11）超鏈接標簽a
href:跳轉的地址，可以是網絡連接，也可以是本地html文件的相對路
徑。
target:超鏈接新頁面打開的位置。_self在當前頁面打開(默認)，
_blank在新頁面打開。
title:鼠標指在超鏈接上顯示的文字。
功能性超鏈接：
mailto：給指定郵箱發送郵件
tencent：與指定QQ聊天。
錨鏈接：點擊超鏈接可以跳轉到頁面的指定的位置(錨點)。
a.在頁面指定位置定義一個錨點<a name="top"></a>
b.將超鏈接的href屬性改為 #錨點名稱。<a href="#top">
跳轉到某位置</a>
c.跳轉到其他頁面指定錨點的方式。<a href="其他頁面的地
址.html#top">其他頁面的某位置</a>
12）表格table及相關屬性
tr:行；td：列；th:首行表頭中每個單元格用th表示，默認文字加粗
居中。
border：給表格的每個td和整個tabl加邊框。如果boder的值>1，則只
有最外層邊框加粗，td邊框不變。
cellspacing：單元格與單元格之間的間距。值為0時，相鄰的邊框不
會合並，而是兩條邊框的寬度。
表格邊框合並：
style="border-collapse: collapse;"
設置邊框合並以後，cellspacing屬性將會失效。
cellpadding：單元格內邊距，單元格中文字與邊框之間的距離。
width/height：表格的寬高。
align：表格的位置。
bodercolor/bgcolor/background:後倆同時存在是背景圖生效。
表格的行列屬性：
作用於tr或者td上的屬性：
1、寬高
2、bgcolor。當表格的屬性與行列的屬性發生沖突時，優先級采用“
近者優先”的原則：table<td<tr
3、align/valign：設置單元格中文字水平對齊方式/垂直對齊方式。
表格的跨行與跨列：
1、跨列：colspan
2、跨行：rowspan
3 H5智能表單

1）H5給我們提供了將form外的input與表單關聯的方式。只需要給form表單起一個id，然後給表單外面的input添加form屬性，指向這個id，就可以實現表單與input的綁定。
2）H5給我們新增了許多input的新的type類型。
3）H5新增的input屬性：
①form：關聯制定表單的id。
②placeholder：輸入框的提示內容
③required：必填。
④autofocus：指定輸入框，自動獲取焦點。
⑤autocomplete：記住輸入情況。自動提示。可以給form標簽設置

1 表格完整化結構
caption：表格標題，無論<caption>標簽放在表格第幾行，表格標題
永遠在表格正上方居中。
thead:表頭，永遠在緊挨表格最上部。
tbody：身體部分，在thead之下，在tfoot之上。
tfoot：尾部，永遠在表格最下部。
2 表單

1）action：表單提交給哪個服務器地址；
method：表單提交數據的方式。
get和post區別：
①get使用url傳遞數據，所有內容在地址欄可見，不安全。
post的數據無法在地址欄看到，較安全。
②get傳遞的數據量有限，而且只能傳遞純文本。而host可傳
遞大量數據，且可傳遞圖片、視頻等文件。
③get傳輸速度比post快。
get傳遞數據的url格式：http://原來的地址.html?
name1=value1&name2=value2;
所以，input使用時，name屬性必不可少，若缺少name，
將導致該輸入框的數據不向後臺傳遞。
2）input常用屬性(屬性名與值相同的，值都可以省略)
①type：表示當前輸入框時哪種類型的；
②name：給輸入框起別名，向後臺傳遞時，使用name=value的形式傳
遞；
③value：當前input的默認值
④placeholder：輸入框的提示內容，當輸入框有value時，提示內容
消除。
⑤hidden：隱藏當前輸入框，可以寫為hidden="hidden"，也可以省略
屬性值，只寫<input type="text" hidden />隱藏的輸入框內容，依
然可以向後臺傳遞數據。
⑥disabled：禁用當前輸入框，顯示但不能使用。被禁用的輸入框內
容，將不能向後臺傳遞數據。
3）input的type類型：
①text
②password
③radio：單選。value值不能省略。憑借name是否相同，區
分按鈕是否為同一組。同一組按鈕只能選中一個，name必須相同。
checked="checked" 設置單選按鈕，默認被選中 。
④checkbox：多選按鈕，其他與單選按鈕相同。
⑤file：文件上傳框。
accept屬性，可以限制上傳哪種類型的文件。"*"表示可以上
傳所有類型文件，"image/*"可以上傳圖片類型的所有。
multiple：設置可以上傳多個文件。
⑥submit：表單提交按鈕。
⑦reset：表單重置按鈕。
⑧image：圖形提交按鈕，作用同submit。
⑨button：無任何作用，只顯示按鈕形狀。
⑩hidden：隱藏的輸入框。與text輸入框使用hidden時效果一樣。
4）select下拉選擇區塊
①此標簽裏每一項用<option></option>。
②name屬性，學要卸載select標簽中。
③option標簽中value值若有則傳遞value值，若沒有則傳遞標簽中間
的文字。
④option添加屬性selected="selected",設置默認選中項。
⑤selected屬性multiple，設置當前下拉控件可以多選。(了解)
⑥option添加屬性title，鼠標指向時顯示的文字。
⑦select可以使用<optgroup></optgroup>,標簽對選項進行分組，用
lable屬性顯示分組名。
5）textarea文本域
①文本域大小用css控制。
②設置文本域大小不能在網頁中顯示時拖動改變。
style="resize:none;"
③屬性readonly只讀。文本域中的文字在網頁中顯示時不能更改。
④文字超出區域處理overflow樣式，可以設置文字超出區域的顯示方
式。style="overflow:"
a.overflow:hidden;超出區域的字隱藏。
b.overflow:scroll;無論文字多少都會顯示水平&垂直滾動條
。
c.overflow:auto;默認效果。文字多出現滾動條，文字少不
出現。
d.overflow-x/-y單獨修改某個方向的滾動條。

3 H5智能表單
1）H5給我們提供了將form外的input與表單關聯的方式。只需要給
form表單起一個id，然後給表單外面的input添加form屬性，指向這個
id，就可以實現表單與input的綁定。
2）H5給我們新增了許多input的新的type類型。
3）H5新增的input屬性：
①form：關聯制定表單的id。
②placeholder：輸入框的提示內容
③required：必填。
④autofocus：指定輸入框，自動獲取焦點。
⑤autocomplete：記住輸入情況。自動提示。可以給form標
簽設置。

HTML最基本知識