1 HTML標(biāo)簽：
作用所有HTML中標(biāo)簽的一個(gè)根節(jié)點(diǎn)。
2 head標(biāo)簽：
作用：用于存放：title,meta,base,style,script,link。注意在head標(biāo)簽中我們必須要設(shè)置的標(biāo)簽是title
3.title標(biāo)簽：
作用：讓頁(yè)面擁有一個(gè)屬于自己的標(biāo)題往毡。
4.body標(biāo)簽：
作用：頁(yè)面在的主體部分，用于存放所有的HTML標(biāo)簽：p,h,a,b,u,i,s,em,del,ins,strong,img
5.<!DOCTYPE html>
這句話就是告訴我們使用哪個(gè)html版本？ 我們使用的是 html 5 的版本。 html有很多版本绪氛，那我們應(yīng)該告訴用戶和瀏覽器我們使用的版本號(hào)。<!DOCTYPE> 標(biāo)簽位于文檔的最前面涝影，用于向?yàn)g覽器說(shuō)明當(dāng)前文檔使用哪種 HTML 或 XHTML 標(biāo)準(zhǔn)規(guī)范钞楼，必需在開頭處使用<!DOCTYPE>標(biāo)簽為所有的XHTML文檔指定XHTML版本和類型，只有這樣瀏覽器才能按指定的文檔類型進(jìn)行解析袄琳。
6.<meta charset="UTF-8">
utf-8是目前最常用的字符集編碼方式询件，常用的字符集編碼方式還有g(shù)bk和gb2312。gb2312 簡(jiǎn)單中文? 包括6763個(gè)漢字唆樊，BIG5? 繁體中文 港澳臺(tái)等用宛琅，GBK包含全部中文字符，是GB2312的擴(kuò)展逗旁，加入對(duì)繁體字的支持嘿辟，兼容GB2312，UTF-8則包含全世界所有國(guó)家需要用到的字符
7.標(biāo)題標(biāo)簽
為了使網(wǎng)頁(yè)更具有語(yǔ)義化片效，我們經(jīng)常會(huì)在頁(yè)面中用到標(biāo)題標(biāo)簽红伦，HTML提供了6個(gè)等級(jí)的標(biāo)題，即<h1>淀衣、<h2>昙读、<h3>、<h4>膨桥、<h5>和<h6>
其基本語(yǔ)法格式：<hn>? 標(biāo)題文本? </hn>
8.段落標(biāo)簽
在網(wǎng)頁(yè)中要把文字有條理地顯示出來(lái)蛮浑，離不開段落標(biāo)簽，就如同我們平常寫文章一樣只嚣，整個(gè)網(wǎng)頁(yè)也可以分為若干個(gè)段落沮稚，而段落的標(biāo)簽就是 ? ?<p>? 文本內(nèi)容? </p>
9.水平線標(biāo)簽
在網(wǎng)頁(yè)中常常看到一些水平線將段落與段落之間隔開册舞，使得文檔結(jié)構(gòu)清晰蕴掏，層次分明。這些水平線可以通過(guò)插入圖片實(shí)現(xiàn)调鲸，也可以簡(jiǎn)單地通過(guò)標(biāo)簽來(lái)完成盛杰，<hr />就是創(chuàng)建橫跨網(wǎng)頁(yè)水平線的標(biāo)簽。其基本語(yǔ)法格式： <hr />是單標(biāo)簽
10.換行標(biāo)簽
在HTML中线得，一個(gè)段落中的文字會(huì)從左到右依次排列饶唤，直到瀏覽器窗口的右端，然后自動(dòng)換行贯钩。如果希望某段文本強(qiáng)制換行顯示，就需要使用換行標(biāo)簽 <br />
11.div span標(biāo)簽
div span 是沒(méi)有語(yǔ)義的 是我們網(wǎng)頁(yè)布局主要的2個(gè)盒子。語(yǔ)法格式：
<div> 這是頭部 </div>? ? <span>今日價(jià)格</span>
12.文本格式化標(biāo)簽
在網(wǎng)頁(yè)中角雷，有時(shí)需要為文字設(shè)置粗體祸穷、斜體或下劃線效果，這時(shí)就需要用到HTML中的文本格式化標(biāo)簽勺三，使文字以特殊的方式顯示雷滚。
??b? i? s? u? 只有使用 沒(méi)有 強(qiáng)調(diào)的意思? ? ? strong? em? del? ins? 語(yǔ)義更強(qiáng)烈
13.標(biāo)簽屬性
使用HTML制作網(wǎng)頁(yè)時(shí)，如果想讓HTML標(biāo)簽提供更多的信息吗坚，可以使用HTML標(biāo)簽的屬性加以設(shè)置祈远。其基本語(yǔ)法格式如下：
<標(biāo)簽名 屬性1="屬性值1" 屬性2="屬性值2" …> 內(nèi)容 </標(biāo)簽名>
在上面的語(yǔ)法中，
1.標(biāo)簽可以擁有多個(gè)屬性商源，必須寫在開始標(biāo)簽中车份，位于標(biāo)簽名后面。
2.屬性之間不分先后順序牡彻，標(biāo)簽名與屬性扫沼、屬性與屬性之間均以空格分開。
3.任何標(biāo)簽的屬性都有默認(rèn)值庄吼，省略該屬性則取默認(rèn)值缎除。
采取? 鍵值對(duì) 的格式? key="value"? 的格式?
14.圖像標(biāo)簽img
HTML網(wǎng)頁(yè)中任何元素的實(shí)現(xiàn)都要依靠HTML標(biāo)簽，要想在網(wǎng)頁(yè)中顯示圖像就需要使用圖像標(biāo)簽总寻，接下來(lái)將詳細(xì)介紹圖像標(biāo)簽<img />以及和他相關(guān)的屬性器罐。其基本語(yǔ)法格式如下：
<img src="圖像URL" />
該語(yǔ)法中src屬性用于指定圖像文件的路徑和文件名，他是img標(biāo)簽的必需屬性渐行。
15.鏈接標(biāo)簽
在HTML中創(chuàng)建超鏈接非常簡(jiǎn)單技矮，只需用標(biāo)簽環(huán)繞需要被鏈接的對(duì)象即可，其基本語(yǔ)法格式如下：
<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a>
href：用于指定鏈接目標(biāo)的url地址殊轴，當(dāng)為標(biāo)簽應(yīng)用href屬性時(shí)衰倦，它就具有了超鏈接的功能。? Hypertext Reference的縮寫旁理。意思是超文本引用
target：用于指定鏈接頁(yè)面的打開方式樊零，其取值有_self和_blank兩種，其中_self為默認(rèn)值孽文，_blank為在新窗口中打開方式驻襟。
注意：
1.外部鏈接 需要添加 http:// www.baidu.com
2.內(nèi)部鏈接 直接鏈接內(nèi)部頁(yè)面名稱即可 比如 < a href="index.html"> 首頁(yè) </a >
3.如果當(dāng)時(shí)沒(méi)有確定鏈接目標(biāo)時(shí)，通常將鏈接標(biāo)簽的href屬性值定義為“#”(即href="#")芋哭，表示該鏈接暫時(shí)為一個(gè)空鏈接沉衣。
4.不僅可以創(chuàng)建文本超鏈接，在網(wǎng)頁(yè)中各種網(wǎng)頁(yè)元素减牺，如圖像豌习、表格存谎、音頻、視頻等都可以添加超鏈接肥隆。
16.錨點(diǎn)定位
通過(guò)創(chuàng)建錨點(diǎn)鏈接既荚，用戶能夠快速定位到目標(biāo)內(nèi)容。創(chuàng)建錨點(diǎn)鏈接分為兩步：
1.使用<a href=#id名>鏈接文本</a>創(chuàng)建鏈接文本栋艳。
2.使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置恰聘。
17.base 標(biāo)簽
base 可以設(shè)置整體鏈接的打開狀態(tài) ，base 寫到? <head>? </head>? 之間
18.特殊字符標(biāo)簽
19.注釋標(biāo)簽
在HTML中還有一種特殊的標(biāo)簽——注釋標(biāo)簽吸占。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁(yè)面中的注釋文字晴叨，就需要使用注釋標(biāo)簽。其基本語(yǔ)法格式如下：
<!-- 注釋語(yǔ)句 -->
20.路徑
實(shí)際工作中矾屯，通常新建一個(gè)文件夾專門用于存放圖像文件兼蕊，這時(shí)再插入圖像，就需要采用“路徑”的方式來(lái)指定圖像文件的位置问拘。路徑可以分為： 相對(duì)路徑和絕對(duì)路徑
相對(duì)路徑：
1. 圖像文件和HTML文件位于同一文件夾：只需輸入圖像文件的名稱即可遍略，如<img src="logo.gif" />。
2. 圖像文件位于HTML文件的下一級(jí)文件夾：輸入文件夾名和文件名骤坐，之間用“/”隔開绪杏，如<img src="img/img01/logo.gif" />。
3. 圖像文件位于HTML文件的上一級(jí)文件夾：在文件名之前加入“../” 纽绍，如果是上兩級(jí)蕾久，則需要使用 “../ ../”，以此類推拌夏，如<img src="../logo.gif" />僧著。
絕對(duì)路徑：
“D:\web\img\logo.gif”，或完整的網(wǎng)絡(luò)地址障簿，例如“http://www.itcast.cn/images/logo.gif”盹愚。
21.無(wú)序列表 ul
無(wú)序列表的各個(gè)列表項(xiàng)之間沒(méi)有順序級(jí)別之分，是并列的站故。其基本語(yǔ)法格式如下：
<ul>
? <li>列表項(xiàng)1</li>
? <li>列表項(xiàng)2</li>
? <li>列表項(xiàng)3</li>
? ......
</ul>
注意：
1. <ul></ul>中只能嵌套<li></li>皆怕，直接在<ul></ul>標(biāo)簽中輸入其他標(biāo)簽或者文字的做法是不被允許的。
2. <li>與</li>之間相當(dāng)于一個(gè)容器西篓，可以容納所有元素愈腾。
3. 無(wú)序列表會(huì)帶有自己樣式屬性
22.有序列表 ol
有序列表即為有排列順序的列表，其各個(gè)列表項(xiàng)按照一定的順序排列定義岂津，有序列表的基本語(yǔ)法格式如下：
<ol>
? <li>列表項(xiàng)1</li>
? <li>列表項(xiàng)2</li>
? <li>列表項(xiàng)3</li>
? ......
</ol>
23.自定義列表
定義列表常用于對(duì)術(shù)語(yǔ)或名詞進(jìn)行解釋和描述虱黄，定義列表的列表項(xiàng)前沒(méi)有任何項(xiàng)目符號(hào)。其基本語(yǔ)法如下：
<dl>
? <dt>名詞1</dt>
? <dd>名詞1解釋1</dd>
? <dd>名詞1解釋2</dd>
? ...
? <dt>名詞2</dt>
? <dd>名詞2解釋1</dd>
? <dd>名詞2解釋2</dd>
? ...
</dl>
24.創(chuàng)建表格
在HTML網(wǎng)頁(yè)中吮成，要想創(chuàng)建表格橱乱，就需要使用表格相關(guān)的標(biāo)簽辜梳。創(chuàng)建表格的基本語(yǔ)法格式如下：
<table>
? <tr>
? ? <td>單元格內(nèi)的文字</td>
? ? ...
? </tr>
? ...
</table>
在上面的語(yǔ)法中包含三對(duì)HTML標(biāo)簽，分別為 <table></table>仅醇、<tr></tr>冗美、<td></td>魔种，他們是創(chuàng)建表格的基本標(biāo)簽析二，缺一不可，下面對(duì)他們進(jìn)行具體地解釋节预。
1.table用于定義一個(gè)表格叶摄。
2.tr 用于定義表格中的一行，必須嵌套在 table /table標(biāo)簽中安拟，在 table /table中包含幾對(duì) tr /tr蛤吓，就有幾行表格。
3.td /td：用于定義表格中的單元格糠赦，必須嵌套在<tr></tr>標(biāo)簽中会傲，一對(duì) <tr> </tr>中包含幾對(duì)<td></td>，就表示該行中有多少列（或多少個(gè)單元格）拙泽。
注意：
1. <tr></tr>中只能嵌套<td></td>
2. <td></td>標(biāo)簽淌山，他就像一個(gè)容器，可以容納所有的元素
表格屬性:
表頭標(biāo)簽:
表頭一般位于表格的第一行或第一列顾瞻，其文本加粗居中泼疑，如下圖所示，即為設(shè)置了表頭的表格荷荤。設(shè)置表頭非常簡(jiǎn)單退渗，只需用表頭標(biāo)簽<th></th>替代相應(yīng)的單元格標(biāo)簽<td></td>即可。
表格結(jié)構(gòu)：
在使用表格進(jìn)行布局時(shí)蕴纳，可以將表格劃分為頭部会油、主體和頁(yè)腳（頁(yè)腳因?yàn)橛屑嫒菪詥?wèn)題，我們不在贅述）古毛，具體 如下所示：
<thead></thead>：用于定義表格的頭部翻翩。
必須位于<table></table> 標(biāo)簽中，一般包含網(wǎng)頁(yè)的logo和導(dǎo)航等頭部信息喇潘。
<tbody></tbody>：用于定義表格的主體体斩。
位于<table></table>標(biāo)簽中，一般包含網(wǎng)頁(yè)中除頭部和底部之外的其他內(nèi)容颖低。
表格標(biāo)題：
caption 元素定義表格標(biāo)題：
<table>
? <caption>我是表格標(biāo)題</caption>
</table>
caption 標(biāo)簽必須緊隨 table 標(biāo)簽之后絮吵。您只能對(duì)每個(gè)表格定義一個(gè)標(biāo)題。通常這個(gè)標(biāo)題會(huì)被居中于表格之上忱屑。
合并單元格:
跨行合并：rowspan 跨列合并：colspan
合并單元格的思想： 將多個(gè)內(nèi)容合并的時(shí)候蹬敲，就會(huì)有多余的東西暇昂，把它刪除。? ? 例如 把 3個(gè) td 合并成一個(gè)伴嗡， 那就多余了2個(gè)急波，需要?jiǎng)h除。
公式：? 刪除的個(gè)數(shù)? =? 合并的個(gè)數(shù)? - 1?
25.表單標(biāo)簽
在HTML中瘪校，一個(gè)完整的表單通常由表單控件（也稱為表單元素）澄暮、提示信息和表單域3個(gè)部分構(gòu)成。
? 表單控件：包含了具體的表單功能項(xiàng)阱扬，如單行文本輸入框泣懊、密碼輸入框、復(fù)選框麻惶、提交按鈕馍刮、重置按鈕等。
? 提示信息： 一個(gè)表單中通常還需要包含一些說(shuō)明性的文字窃蹋，提示用戶進(jìn)行填寫和操作卡啰。
? 表單域： 他相當(dāng)于一個(gè)容器，用來(lái)容納所有的表單控件和提示信息警没，可以通過(guò)他定義處理表單數(shù)據(jù)所用程序的url地址匈辱，以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域惠奸，表單中的數(shù)據(jù)就無(wú)法傳送到后臺(tái)服務(wù)器梅誓。
26.input 控件
<input />標(biāo)簽為單標(biāo)簽，type屬性為其最基本的屬性佛南，其取值有多種梗掰，用于指定不同的控件類型。除了type屬性之外嗅回，<input />標(biāo)簽還可以定義很多其他的屬性及穗，其常用屬性如下表所示。
27.label標(biāo)簽
label 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)簽）绵载。
作用：? 用于綁定一個(gè)表單元素, 當(dāng)點(diǎn)擊label標(biāo)簽的時(shí)候, 被綁定的表單元素就會(huì)獲得輸入焦點(diǎn)
for 屬性規(guī)定 label 與哪個(gè)表單元素綁定埂陆。
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
28.textarea控件(文本域)
如果需要輸入大量的信息，就需要用到<textarea></textarea>標(biāo)簽娃豹。通過(guò)textarea控件可以輕松地創(chuàng)建多行文本輸入框焚虱，其基本語(yǔ)法格式如下：
<textarea cols="每行中的字符數(shù)" rows="顯示的行數(shù)"> 文本內(nèi)容</textarea>
29.下拉菜單
使用select控件定義下拉菜單的基本語(yǔ)法格式如下
<select>
? <option>選項(xiàng)1</option>
? <option>選項(xiàng)2</option>
? <option>選項(xiàng)3</option>
? ...
</select>
注意：
1.<select></select>中至少應(yīng)包含一對(duì)<option></option>。
2. 在option 中定義selected =" selected "時(shí)懂版，當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)鹃栽。
30.表單域
在HTML中，form標(biāo)簽被用于定義表單域躯畴，即創(chuàng)建一個(gè)表單民鼓，以實(shí)現(xiàn)用戶信息的收集和傳遞薇芝，form中的所有內(nèi)容都會(huì)被提交給服務(wù)器。創(chuàng)建表單的基本語(yǔ)法格式如下：
<form action="url地址" method="提交方式" name="表單名稱">
? 各種表單控件
</form>
常用屬性：
1. Action
? 在表單收集到信息后丰嘉，需要將信息傳遞給服務(wù)器進(jìn)行處理夯到，action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。
2. method
? 用于設(shè)置表單數(shù)據(jù)的提交方式饮亏，其取值為get或post耍贾。
3. name
? 用于指定表單的名稱，以區(qū)分同一個(gè)頁(yè)面中的多個(gè)表單克滴。
注意：? 每個(gè)表單都應(yīng)該有自己表單域逼争。
31.常用新標(biāo)簽
- header：定義文檔的頁(yè)眉
- nav：定義導(dǎo)航鏈接的部分
- footer：定義文檔或節(jié)的頁(yè)腳
- article：標(biāo)簽規(guī)定獨(dú)立的自包含內(nèi)容
- section：定義文檔中的節(jié)（section优床、區(qū)段）
- aside：定義其所處內(nèi)容之外的內(nèi)容
32.常用新屬性
placeholder????
用法：<input type="text" placeholder="請(qǐng)輸入用戶名"> ? ??
含義：占位符提供可描述輸入字段預(yù)期值的提示信息 ? ??
autofocus
用法：<input type="text" autofocus>? ? ? ? ? ??
含義：規(guī)定當(dāng)頁(yè)面加載時(shí) input 元素應(yīng)該自動(dòng)獲得焦點(diǎn)
multiple
用法：<input type="file" multiple> ? ? ? ? ? ?
含義：多文件上傳 ? ? ? ? ? ? ? ? ? ?
autocomplete
用法：<input type="text" autocomplete="off">??
含義：規(guī)定表單是否應(yīng)該啟用自動(dòng)完成功能 ? ? ? ??
required
用法：<input type="text" required> ? ? ? ? ? ?
含義：?必填項(xiàng) ? ? ? ? ? ? ? ? ? ? ?
accesskey
用法：<input type="text" accesskey="s"> ? ? ? ?
含義：規(guī)定激活（使元素獲得焦點(diǎn)）元素的快捷鍵 ? ? ?
33.新增的type屬性值
email????????????<input type="email"> ? ? ? ? ? ? ?輸入郵箱格式?
tel ? ? ? ? ? ? ? ? <input type="tel"> ? ? ? ? ? ? ? ? ? 輸入手機(jī)號(hào)碼格式 ?
url ? ? ? ? ? ? ? ? <input type="url"> ? ? ? ? ? ? ? ? ? 輸入url格式 ? ?
number????????<input type="number"> ? ? ? ? ?輸入數(shù)字格式 ? ?
search ? ? ? ? ?<input type="search"> ? ? ? ? ? 搜索框（體現(xiàn)語(yǔ)義化）?
range????????????<input type="range"> ? ? ? ? ? ?自由拖動(dòng)滑塊 ? ?
time ? ? ? ? ? ? ?<input type="time"> ??
date ? ? ? ? ? ? ?<input type="date"> ??
datetime ? ? ?<input type="datetime">
month ? ? ? ? ?<input type="month"> ??
week????????????<input type="week"> ? ?
34.多媒體 embed
embed可以用來(lái)插入各種多媒體劝赔，格式可以是 Midi、Wav胆敞、AIFF着帽、AU、MP3等等移层。url為音頻或視頻文件及其路徑仍翰，可以是相對(duì)路徑或絕對(duì)路徑。
<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
35.多媒體 audio
HTML5通過(guò)<audio>標(biāo)簽來(lái)解決音頻播放的問(wèn)題观话。
使用相當(dāng)簡(jiǎn)單予借，如下圖所示
并且可以通過(guò)附加屬性可以更友好控制音頻的播放，如：
autoplay 自動(dòng)播放
controls 是否顯不默認(rèn)播放控件
loop 循環(huán)播放
多瀏覽器支持的方案频蛔，如下圖
36.多媒體 video
HTML5通過(guò)<video>標(biāo)簽來(lái)解決音頻播放的問(wèn)題灵迫。
同樣，通過(guò)附加屬性可以更友好的控制視頻的播放
autoplay 自動(dòng)播放
controls 是否顯示默認(rèn)播放控件
loop 循環(huán)播放
width 設(shè)置播放窗口寬度
height 設(shè)置播放窗口的高度
多瀏覽器支持的方案晦溪，如下圖
