<h2>HTML5學(xué)習(xí)感想</h2>
想過轉(zhuǎn)行<strong>html5</strong>有半年多時(shí)間了，很幸運(yùn)從朋友那邊了解到<strong>小碼哥</strong>并報(bào)了名，因家里行程原因沒能面對面跟著江哥一起學(xué)習(xí)html5基礎(chǔ)，但報(bào)名的第一天就迫不及待地下載了<strong>HTML+CSS</strong>全部視頻，并開始學(xué)習(xí)和做筆記。
在看江哥視頻的時(shí)候，對江哥的崇拜感油然而生，江哥講課激情澎湃、細(xì)膩、循環(huán)漸進(jìn)、思路清晰、面面俱到。帶著我們從HTML的作用、基礎(chǔ)結(jié)構(gòu)，到各類標(biāo)簽，每個(gè)知識點(diǎn)都引導(dǎo)著我們?nèi)フJ(rèn)識和掌握，期間也少不了鞏固知識點(diǎn)的練習(xí)，做到真正的100%吸收。特別是<strong>路徑問題</strong>這一塊，需要結(jié)合江哥的練習(xí)再自己仔細(xì)總結(jié)，才能更加的鞏固。江哥講課的認(rèn)真態(tài)度和激情讓我對<strong>H5</strong>的學(xué)習(xí)更加地渴望，每天的學(xué)習(xí)、敲代碼和總結(jié)讓我更加的充實(shí)、有沖勁。
印象最深的<strong>表單標(biāo)簽</strong>、<strong>video標(biāo)簽</strong>和<strong>marquee標(biāo)簽</strong>，一個(gè)對應(yīng)現(xiàn)在眾多網(wǎng)站的注冊界面，兩個(gè)對應(yīng)網(wǎng)站上的推廣，江哥讓我們了解了注冊界面的每個(gè)細(xì)節(jié)，看完視頻和跟著練習(xí)過一遍，再自己diy做幾個(gè)注冊界面和彈幕，非常有成就感，也感受到知識的吸收并轉(zhuǎn)化。
1月中旬才盼來江哥視頻的再次更新，也了解到江哥喜添丁，baby好可愛，<strong>喜歡江哥，崇拜江哥，</strong>也好期待能見到小碼哥的老師們，一起學(xué)習(xí)進(jìn)階HTML5。
<strong>學(xué)HTML5就選李南江，選培訓(xùn)機(jī)構(gòu)我只選小碼哥（www.520it.com）</strong>
學(xué)習(xí)筆記
- 字符集
<meta charset="GBK"> GBK（GB2312）僅儲存漢字和常用外文，體積小
<meta charset="UTF-8"> 國際通用，儲存了所有文字
- DTD文檔聲明
<!DOCTYPE html> 作用：告訴瀏覽器我是一個(gè)文檔
- __ H標(biāo)簽、P標(biāo)簽、Hr標(biāo)簽__
<h1>我是標(biāo)題</h1>
h1 h2 h3 h4 h5 h6標(biāo)簽, 只有h1到h6,其他的無效；用來添加標(biāo)題，字體依次變小。
<!--注意：會獨(dú)占一行 -->
<!--注意：一個(gè)界面只能出現(xiàn)一個(gè)h1標(biāo)簽 -->
<p>我是一段文本</p>
<!--注意：會獨(dú)占一行 -->
<!--如何快速添加前后標(biāo)簽？選中文字，按快捷鍵：Ctrl+Alt+T -->
<hr/>
<!--注意：會獨(dú)占一行 -->
<!--單標(biāo)簽 ，在瀏覽器上實(shí)現(xiàn)一條分割線-->
- 注釋
格式：<!--要解釋的內(nèi)容-->
快捷鍵：Ctrl+/
- Img標(biāo)簽
1、img是英文image的縮寫
2、img標(biāo)簽的格式：
src是英文source的縮寫，資源，用來告訴img標(biāo)簽需要顯示的圖片
<!--注意點(diǎn)：
和H系列的標(biāo)簽不一樣，img標(biāo)簽不會獨(dú)占一行
如果我們手動指定圖片的寬度和高度，會使圖片變形如果不想圖片變形，只指定一個(gè)值，系統(tǒng)會自動自動高度，都是等比拉伸，不會變形
-->
3、img包含的屬性：
width：寬度
height：高度
<!--width/height兩個(gè)屬性來控制圖片的高度和寬度 如果沒有指定寬度和高度，系統(tǒng)會默認(rèn)顯示 -->
title:當(dāng)鼠標(biāo)懸停在圖片上的時(shí)候，需要彈出的描述框中顯示什么內(nèi)容；
alt:是英文alternate的縮寫 作用是：當(dāng)需要顯示的圖片找不到時(shí)，顯示什么內(nèi)容。
- Img標(biāo)簽的路徑問題
給src屬性賦值有2種方式：
1、相對路徑：（掌握）
<!--就是每次都是從.html文件所在的文件夾開始查找-->
a、同級（圖片和.html文件存儲在同一個(gè)文件夾中）：
格式：src="xxx.jpg"
含義：在.html文件所在的文件夾中查找名稱叫做xxx.jpg的圖片
b、下級（存儲圖片的文件夾和.html文件夾在同一個(gè)文件夾中）：
<!--企業(yè)開發(fā)中用得最多-->
格式：src="images/xxx.jpg"
含義：在.html文件所在的文件夾中找到名稱叫做images的文件夾，然后再在images文件夾中找到名稱叫做xxx.jpg的圖片
c、上級（存儲圖片的文件夾和存儲代碼的文件夾在同一個(gè)文件夾中）
<!-- ../的含義必須深刻理解，代表從當(dāng)前的位置找到上一級文件夾-->
格式：src="../xxx.jpg"
含義：在.html文件所在的文件夾中找到這個(gè)文件夾的上一級文件夾，然后再在上一級文件夾中找到名叫xxx.jpg的圖片
2、絕對路徑：（了解）
絕對路徑就是每次都從指定的盤符開始查找。
<!--注意點(diǎn)：
路徑中不要出現(xiàn)中文，否則可能出現(xiàn)未知問題
如果是通過相對路徑來指定，那么不能跨盤符
-->
- Br標(biāo)簽
1.作用：換行
2.格式：<br>
<!--注意點(diǎn)：
1、多個(gè)br標(biāo)簽可以連續(xù)使用，使用了多少個(gè)br標(biāo)簽就會換多少行
2、由于html的作用就是用來給文本添加語義，而br標(biāo)簽的語義是：不另起一個(gè)段落換行，而在企業(yè)開發(fā)中一般情況下需要換行都是因?yàn)樾枰砥鹨粋€(gè)段落，所以在企業(yè)開發(fā)中很少使用br標(biāo)簽
-->
- a標(biāo)簽
- a標(biāo)簽的作用：就是用于控制頁面與玉面之間跳轉(zhuǎn)的
- a標(biāo)簽的格式：
<a href="指定需要跳轉(zhuǎn)的目標(biāo)頁面">需要展現(xiàn)給用戶查看的內(nèi)容</a>
例如：
<a >江哥博客</a>
- 注意點(diǎn)
- a標(biāo)簽不僅可以讓文字可以點(diǎn)擊，還可以讓圖片（在a標(biāo)簽的開始標(biāo)簽和結(jié)束標(biāo)簽之間添加img標(biāo)簽）也能被點(diǎn)擊
- 一個(gè)a標(biāo)簽必須有一個(gè)href屬性，否則a標(biāo)簽不知道要跳轉(zhuǎn)到什么地方
- 如果通過a標(biāo)簽的href屬性指定一個(gè)URL地址，那么必須在地址前面加上http://（不安全）或https://（安全）
- a標(biāo)簽中的其他屬性：
a標(biāo)簽中有一個(gè)叫做target屬性，這個(gè)屬性的作用就是專門用于控制如何跳轉(zhuǎn)- _self：用于在當(dāng)前選項(xiàng)卡中跳轉(zhuǎn)，也就是不新建界面跳轉(zhuǎn)，默認(rèn)就是_sel
- _blank：用于在新選項(xiàng)卡中跳轉(zhuǎn)，也就是新建界面跳轉(zhuǎn)
- 還有一個(gè)title屬性，和img標(biāo)簽中的 title一樣，都是用來控制鼠標(biāo)懸停時(shí)顯示的提示文本
- 所以一個(gè)完整的的a標(biāo)簽格式是3個(gè)屬性都有</ul>
-
base標(biāo)簽
就是專門用來統(tǒng)一指定當(dāng)前頁面中所有的超鏈接（a標(biāo)簽）需要如何打開； - 注意點(diǎn)：
- Base標(biāo)簽必須寫在head標(biāo)簽的開始標(biāo)簽和結(jié)束標(biāo)簽之間
- 如果既在base標(biāo)簽中指定了target又在a標(biāo)簽中指定了target，那么瀏覽器會按照a標(biāo)簽中指定的來執(zhí)行
<base target="_blank"> 控制整個(gè)頁面的跳轉(zhuǎn) 插入在head標(biāo)簽之中
<a target="_self">糯米</a>
<a >新聞</a>
<a >hao123</a>
<a >地圖</a>
<a >貼吧</a>
<a >視頻</a>
-
假鏈接
假鏈接存在的意義：
在企業(yè)開發(fā)前期，其他界面都沒有寫出來，那么我們就不知道應(yīng)該跳轉(zhuǎn)到什么地方，所以只能使用假鏈接來代替，當(dāng) 項(xiàng)目后期其他界面都已經(jīng)完成時(shí)再將假鏈接替換為真鏈接。 - 假鏈接的格式：
1、#
<body>
<a href="#">點(diǎn)我1</a>
</body>
2、JavaScript
<body>
<a href="javascript:">點(diǎn)我2</a>
</body>
兩種格式的區(qū)別：
"#"的假鏈接會自動返回網(wǎng)頁的頂部，而JavaScript：不會返回網(wǎng)頁的頂部錨點(diǎn)
要想a標(biāo)簽跳轉(zhuǎn)到指定的位置，必須告訴a標(biāo)簽一個(gè)獨(dú)一無二的身份證號碼，這樣才能找到
如果給HTML中的標(biāo)簽綁定一個(gè)獨(dú)一無二的身份號碼呢？ 在html中都有一個(gè)叫做id的屬性，id屬性是獨(dú)一無二的
-
想要跳轉(zhuǎn)到指定的位置分兩步
- 給目標(biāo)位置添加一個(gè)id屬性，然后指定一個(gè)獨(dú)一無二的值
- 告訴a標(biāo)簽需要跳轉(zhuǎn)到的目標(biāo)標(biāo)簽對用的獨(dú)一無二的身份證號碼是多少，把id貼到假鏈接#后面
格式：
<body>
<h2>我是頂部</h2>
<a href="#center">跳轉(zhuǎn)到中部</a>
<br>
<h2 id="center">我是中部</h2>
<br>
<h2>我是底部</h2>
<br>
</body>
- 注意點(diǎn)：
- 通過a標(biāo)簽跳轉(zhuǎn)到指定的位置，是沒有過渡動畫的，是直接一下子就跳轉(zhuǎn)了指定位置
- a標(biāo)簽除了可以跳轉(zhuǎn)到當(dāng)前界面的指定位置以外，還可以在跳轉(zhuǎn)到其他界面的同時(shí)直接跳轉(zhuǎn)到其他界面的制定位置【id要貼在目標(biāo)界面路徑后面加個(gè)#后面】，格式如下：
假設(shè) 【錨點(diǎn).html】和【錨點(diǎn)測試界面.html】在同個(gè)文件夾，那么
錨點(diǎn).html代碼
<body>
<a href="錨點(diǎn)測試界面.html#bottom">跳轉(zhuǎn)到錨點(diǎn)測試界面</a>
<h2>我是頂部</h2>
<a href="#center">跳轉(zhuǎn)到中部</a>
<br>
<h2 id="center">我是中部</h2>
<br>
<h2>我是底部</h2>
<br>
</body>
錨點(diǎn)測試界面.html代碼
<body>
<h2>我是錨點(diǎn)測試界面頂部</h2>
<br>
<h2>我是錨點(diǎn)測試界面中部</h2>
<br>
<h2 id="bottom">我是錨點(diǎn)測試界面底部</h2>
<br>
</body>
列表標(biāo)簽
列表標(biāo)簽的作用：給一堆數(shù)據(jù)添加列表語義，也就是告訴搜索引擎告訴瀏覽器這一堆是一個(gè)整體
-
html中列表標(biāo)簽的分類
- 無序列表（最多）（unordered list）
- 有序列表（最少）（ordered list）
- 定義列表（其次）（definition list）
無序列表
無序列表的作用：
給一堆數(shù)據(jù)添加列表語義，并且這一對數(shù)據(jù)所有的數(shù)據(jù)都沒有先后之分無序列表格式：
<ul>
<li>需要顯示的內(nèi)容</li>
</ul>
li其實(shí)就是list item（列表?xiàng)l目）的縮寫 list：（列表） item：（條目）```
* 注意點(diǎn)：
1. 一定要記住ul標(biāo)簽是用來給一堆數(shù)據(jù)添加列表語義的，而不是用來給他們添加小圓點(diǎn)的
2. ul標(biāo)簽和li標(biāo)簽是一個(gè)整體，是一個(gè)組合，所以一般情況下ul標(biāo)簽和li標(biāo)簽都是一起出現(xiàn)的，不會單個(gè)出現(xiàn)。
3. 由于ul標(biāo)簽和li標(biāo)簽是一個(gè)組合，所以ul標(biāo)簽中不推薦包含其他標(biāo)簽，也就是說ul標(biāo)簽中指揮看到li標(biāo)簽
* 無序列表應(yīng)用場景：
1. 新聞列表
2. 商品列表
3. 導(dǎo)航條
<h2>中國的城市有那些</h2>
<ul>
<li>北京</li>
<li>上海</li>
<li>武漢</li>
<li>天津</li>
</ul>
* 總結(jié)：
1. 雖然通過標(biāo)簽屬性也能修改樣式，但是在企業(yè)開發(fā)中千萬不要這么做
2. ul中最好只放li標(biāo)簽，但在企業(yè)開發(fā)中，li標(biāo)簽中的內(nèi)容可能會很復(fù)雜，所以我們可以繼續(xù)在li標(biāo)簽中添加其他的標(biāo)簽來豐富我們的界面
3. 一定要記住ul標(biāo)簽中 最好只放li標(biāo)簽
4. 但是li標(biāo)簽中還可以繼續(xù)放其他標(biāo)簽
5. 無序列表中的li標(biāo)簽中除了可以添加其他標(biāo)簽來豐富我們的界面以外，還可以添加ul標(biāo)簽來豐富我們的界面
* 在webstorm中如何編寫一個(gè)ul的格式：
ul>li*4
含義：生成一對ul標(biāo)簽，然后在這對ul標(biāo)簽中再生成4對li標(biāo)簽
* 更加高級編寫ul格式的代碼的語法：
ul>li2>h2+ul>li3
就會變成下面這樣：<strong>上面的加號+是同級別的意思</strong>
<ul>
<li>
<h2></h2>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<h2></h2>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
* __有序列表__
* 有序列表的作用：給一堆數(shù)據(jù)添加列表語義，并且這一對數(shù)據(jù)所有的數(shù)據(jù)都有先后之分。
* 有序列表的格式：
<ol>
<li></li>
</ol>
* 其他用法和ul都差不多，也就是應(yīng)用場景/注意點(diǎn)都和ul差不多
<strong>企業(yè)開發(fā)中不用ol，用ul標(biāo)簽，排序的序號等教給css做</strong>
* __定義列表__
* 定義列表的作用：
* 定義列表的格式：
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
* 其實(shí)dt和dd都是英文的縮寫：
dt是英文definition title的縮寫，含義就是用來定義列表
dd是英文definition description的縮寫，含義就是用來定義標(biāo)題對應(yīng)的描述的，描述dt的
* 定義列表的應(yīng)用：
1. 做網(wǎng)站尾部的相關(guān)信息
2. 做圖文混排
* 注意點(diǎn)：
* 和ul/ol一樣，dl和dt/dd是一個(gè)整體，所以他們一般情況下不會單獨(dú)出現(xiàn)，都是一起出現(xiàn)
* 和ul/ol一樣，由于dl和dt/dd是一個(gè)組合標(biāo)簽
* 一個(gè)dt可以沒有對應(yīng)的dd，也可以有很多個(gè)對應(yīng)的dd，但是都不推薦
* 和li標(biāo)簽一樣，當(dāng)需要豐富界面時(shí)，我們可以在dt和dd標(biāo)簽中繼續(xù)添加其他標(biāo)簽
* __表格標(biāo)簽的基本使用__
其實(shí)在過去表格標(biāo)簽用得非常非常多，絕大多數(shù)的網(wǎng)站都是使用表格標(biāo)簽來制作的，也就是說表格標(biāo)簽是一個(gè)時(shí)代的代表
* 什么是表格標(biāo)簽？
表格標(biāo)簽作用：用來給一堆數(shù)據(jù)添加表格語義，
其實(shí)表格是一種數(shù)據(jù)的展現(xiàn)形式，當(dāng)數(shù)據(jù)量非常大的時(shí)候，表格這種展現(xiàn)形式被認(rèn)為是最為清晰的一種展現(xiàn)形式
* 表格標(biāo)簽格式：
<table>
<tr>
<td></td>
</tr>
</table>
table代表整個(gè)表格，也就是一堆table標(biāo)簽就是一個(gè)表格；
tr標(biāo)簽代表整個(gè)表格中的一行數(shù)據(jù)，也就是說一對tr標(biāo)簽就是表格中的一行
td標(biāo)簽代表表格中一行中的一個(gè)單元格，也就是說一對td標(biāo)簽就是一行中的一個(gè)單元格。
* 注意點(diǎn)
* 表格標(biāo)簽有一個(gè)邊框?qū)傩裕@個(gè)屬性決定了邊框的寬度，默認(rèn)值是0，所以看不到邊框
<table border="1">
* 表格標(biāo)簽和列表標(biāo)簽一樣，他是一個(gè)組合標(biāo)簽，所以table/tr/td要么一起出現(xiàn)，要么一起不出現(xiàn)
* __表格標(biāo)簽的屬性__
* 寬度和高度的屬性
【可以給table和td標(biāo)簽使用】
* 表格的寬度和高度默認(rèn)是按照內(nèi)容的尺寸來調(diào)整的，也可以通過給table標(biāo)簽設(shè)置width/height屬性來手動指定表格寬度高度
* 如果給td標(biāo)簽設(shè)置width/height屬性，會修改當(dāng)前單元格的寬度和高度，不會影響整個(gè)表格的寬度和高度
* 水平對齊和垂直對齊的屬性
【水平對齊可以給table、tr、td標(biāo)簽使用】
【垂直對齊只能給tr、td標(biāo)簽使用】
* 給table標(biāo)簽設(shè)置align=”left/center/right”屬性，可控制表格在水平方向的對齊方式
* 給tr標(biāo)簽設(shè)置align屬性，可控制當(dāng)前行中所有單元格內(nèi)容的水平方向的對齊方式
* 給td標(biāo)簽設(shè)置align屬性，可以控制當(dāng)前單元格中內(nèi)容在水平方向的對齊方式
* 給 tr標(biāo)簽設(shè)置valign=”top/center/bottom”屬性，可控制當(dāng)前行中所有單元格內(nèi)容的水平方向的對齊方式
* 給td標(biāo)簽 設(shè)置valign屬性，可以控制當(dāng)前單元格中的內(nèi)容在垂直方向的對齊方式
* 注意點(diǎn)：
如果tr和td都設(shè)置了align/valign屬性，那么單元格中的內(nèi)容會按照td設(shè)置的來對齊
* 外邊距和內(nèi)邊距的屬性
【只能給table標(biāo)簽使用】
* 外邊距就是單元格和單元格之間的距離
默認(rèn)情況下單元格和單元格之間的外邊框距離是2px
Cellspacing="2px"
* 內(nèi)邊距就是單元格的邊框和文字之間的間隙
默認(rèn)情況下內(nèi)邊距是 1
Cellpadding="5px"
>注意：以上講解的內(nèi)容僅僅作為了解，以后在企業(yè)開發(fā)中都是用css
* __細(xì)線表格__
* 在表格標(biāo)簽中想通過指定外邊框?yàn)?來實(shí)現(xiàn)細(xì)線表格是不靠譜的，其實(shí)他是將2條線合并成一條線，看起來很不舒服的；
* 細(xì)線表格的制作方式：
1. 給table標(biāo)簽設(shè)置bgcolor
2. 給tr標(biāo)簽設(shè)置bgcolor
3. 給table標(biāo)簽設(shè)置cellspacing=”1px”
>注意：table、tr、td標(biāo)簽都支持bgcolor屬性，但只做了解；
__案例__
<table bgcolor="black" cellspacing="1">
<tr bgcolor="white">
<td>1.1</td>
<td>1.2</td>
</tr>
<tr bgcolor="white">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
* __表格中的其他標(biāo)簽__
* 表格標(biāo)題
在表格標(biāo)簽中提供了一個(gè)標(biāo)簽專門用來設(shè)置表格的標(biāo)題，這個(gè)標(biāo)簽叫caption，只要將標(biāo)題寫在caption中
* Caption標(biāo)簽的注意點(diǎn)：
* caption一定要寫在table標(biāo)簽中，否則無效
* caption一定要緊跟在table標(biāo)簽后面
* 標(biāo)題單元格標(biāo)簽
在表格標(biāo)簽中提供了一個(gè)標(biāo)簽專門用來存儲每一列的標(biāo)題，這個(gè)標(biāo)簽叫做 th標(biāo)簽，只要將當(dāng)前列的標(biāo)題存儲在這個(gè)標(biāo)簽中就會自動居中并且加粗文字
>到此為止我們發(fā)現(xiàn)，其實(shí)表格中有兩種單元格，一種是td，一種是th，td是專門用來存儲數(shù)據(jù)的，th是專門用來存儲當(dāng)前列標(biāo)題的
* __表格的結(jié)構(gòu)（只需了解）__
* 由于表格中存儲的數(shù)據(jù)比較復(fù)雜，為了方便管理和
* 表格中存儲的數(shù)據(jù)可以分為4類
① 表格標(biāo)題
② 表頭信息
③ 主題信息
④ 頁尾信息
* 表格的完整結(jié)構(gòu)
<body>
<table>
<caption>表格的標(biāo)題</caption>
<thead>
<tr>
<th>每一列的標(biāo)題</th>
</tr>
</thead>
<tbody>
<tr>
<td>數(shù)據(jù)</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>數(shù)據(jù)</td>
</tr>
</tfoot>
</table>
</body>
Caption作用：指定表格的標(biāo)題
Thead作用：指定表格的表頭信息
Tbody作用：指定表格的主題信息
Tfoot作用：指定表格的附加信息
* 注意點(diǎn):
* 如果我們沒有編寫tbody，系統(tǒng) 會自動給我們添加tbody
* 如果指定了thead和tbody，那么在修改整個(gè)表格的高度時(shí)，thead和tbody有自己的默認(rèn)的高度，不會隨著表格的高度變化而變化
* __單元格合并__
* 水平方向上的單元格合并
* 可以給 td標(biāo)簽添加一個(gè)colspan屬性，來指定把某一個(gè)單元格當(dāng)作多個(gè)單元格來看待（水平方向）
例如：
<td colspan="2"> </td>
含義：把當(dāng)前單元格 當(dāng)作兩個(gè)單元格（水平方向）來看待
* 注意點(diǎn)：
* 由于把某個(gè)單元格當(dāng)作了多個(gè)單元格來看待，所以就會多出一些單元格，所以需要刪掉一些單元格才能正常顯示
* 一定要記住單元格合并永遠(yuǎn)都是向后或者向下合并
* 垂直方向上的單元格合并
* 可以給td標(biāo)簽 添加一個(gè)rowspan屬性 ，來指定把某一個(gè)單元格當(dāng)作多個(gè)單元格來看待（垂直方向）
例如：
<td rowspan="2"> </td>
含義：把當(dāng)前單元格當(dāng)作兩個(gè)單元格（垂直方向）來看待
* 注意點(diǎn)：同上
* __編程中的一些快捷鍵__
* 快速移動選中的代碼，上下移動
往上移動 Ctrl+shift+↑（方向鍵上）
往下移動 Ctrl+shift+↓（方向鍵下）
* 快速合并和展開代碼（合并和展開的是 某一個(gè)標(biāo)簽→鼠標(biāo)放在標(biāo)簽內(nèi)部）
合并：Ctrl+ -
展開：Ctrl+ +
* 快速合并和展開代碼（合并和展開選中的所有標(biāo)簽）
合并：Ctrl+shift+ -
展開：Ctrl+shift+ +
* 快速新啟一行
Shift+enter（回車）
* __表單標(biāo)簽（內(nèi)有上節(jié)課2個(gè)獨(dú)立練習(xí)）__
* 什么是表單？
表單就是專門用來收集用戶信息的
* 什么是表單元素？
* 什么是元素？
在html中，標(biāo)簽/標(biāo)記/元素都是指html中的標(biāo)簽
例如：<a> a標(biāo)簽/a標(biāo)記/a元素
表單元素其實(shí)就是html中的一些標(biāo)簽，只不過這些標(biāo)簽比較特殊，在瀏覽器中所有的表單標(biāo)簽都有特殊的外觀和默認(rèn)的功能
* 表單的格式：
<form>
<表單元素>
</form>
* 常見的表單元素
input標(biāo)簽： 有一個(gè)type屬性，這個(gè)屬性有很多類型的取值，取值的不同就決定了input標(biāo)簽的功能和外觀
* 明文輸入框，type屬性賦值text
賬號：<input type="text">
* 暗文輸入框，type屬性賦值password
密碼：<input type="password">
* 給輸入框設(shè)置默認(rèn)值，可以添加一個(gè)value屬性
賬號：<input type="text" value="你想要的賬號">
密碼：<input type="password" value="你想要的密碼">
* 單選框，type屬性賦值radio
性別：
<input type="radio" name="xx">男
<input type="radio" name="xx">女
<input type="radio" name="xx">保密
>注意點(diǎn)：
1、默認(rèn)情況下單選框不會互斥，要想單選框互斥，必須給每一個(gè)單選框標(biāo)簽都設(shè)置一個(gè)name屬性，然后name屬性還必須設(shè)置相同的值；
2、要想讓單選框默認(rèn)選中某一個(gè)框子，那么可以給input標(biāo)簽添加一個(gè)checked屬性（如果有多個(gè)checked，只會默認(rèn)選最后一個(gè)）；
3、在html中如果屬性的取值和屬性的名稱一樣，可以只寫一個(gè)，但是在xhtml中必須寫上取值，所以在企業(yè)開發(fā)中我們推薦大家不要省略取值
* 多選框 type屬性賦值 checkbox
愛好：
<input type="checkbox">籃球
<input type="checkbox">足球
<input type="checkbox">棒球
<input type="checkbox">足浴
* **表單標(biāo)簽-按鈕**
* 定義普通按鈕（type賦值**button**）
* 可以通過value屬性來給按鈕指定標(biāo)題
* 作用：配合JS完成一些操作
<input type="button" value="我是按鈕">
* 圖片按鈕（type賦值**image**）
<input type="image" src="yzslx.jpg">
* 重置按鈕（type賦值**reset**）
<input type="reset">
* 作用：用于清空表單中已經(jīng)填寫好的數(shù)據(jù)
* 注意點(diǎn)：
如果想修改重置按鈕默認(rèn)的按鈕標(biāo)題，可以通過value屬性來修改
<input type="reset" value="清空">
* 提交按鈕（type賦值**submit**）
<input type="submit">
* 作用：將表單中已經(jīng)填寫好的數(shù)據(jù)，提交到遠(yuǎn)程服務(wù)器
* 注意點(diǎn)：
要想把表單中填寫好的數(shù)據(jù)提交到遠(yuǎn)程服務(wù)器，必須具備兩個(gè)條件：
1. 需要給form表單添加一個(gè)action屬性，通過這個(gè)action屬性指定需要提交到的服務(wù)器地址
<form action="http://www.xxx.com">
2. 需要給需要提交到服務(wù)器的表單元素添加一個(gè)name屬性
賬號：<input type="text"name="aa">
密碼：<input type="password" name="bb">
* 隱藏域（type賦值**hidden**）
<input type="hidden">
* 作用：配合提交按鈕將一些數(shù)據(jù)悄悄地提交到服務(wù)器
* 想真正了解隱藏域要等學(xué)到Ajax。
* **Label標(biāo)簽**
* 默認(rèn)情況下文字和輸入框是沒有關(guān)聯(lián)關(guān)系的，也就是說點(diǎn)擊文字，輸入框不會聚焦，如果想點(diǎn)擊文字時(shí)讓對應(yīng)的輸入框聚焦，那么就需要讓文字和輸入框進(jìn)行綁定
* 要想讓輸入框和文字綁定在一起，那么我們可以使用Label標(biāo)簽
* 綁定的格式：
1. 將文字利用label標(biāo)簽包裹起來
2. 給輸入框添加一個(gè)id屬性
3. 在label標(biāo)簽中通過for屬性和輸入框中的id進(jìn)行綁定即可
<form action="">
<label for="aaa">賬號：</label><input type="text" id="aaa">
<label for="bbb">密碼：</label><input type="text" id="bbb">
</form>
4. 注意：還有雖然不是官方推薦且有局限性的方法，就是直接用label包裹文字和輸入框
<label>
賬號：<input type="text">
</label>
* **datalist標(biāo)簽（僅了解）**
因?yàn)楸姸嘀髁鳛g覽器不支持
* datalist標(biāo)簽
* 作用：給輸入框綁定待選項(xiàng)
* datalist格式：
<datalist>
<option value="">待選項(xiàng)內(nèi)容</option>
</datalist>
* 如何給輸入框綁定待選列表
1. 建一個(gè)輸入框
2. 建一個(gè)datalist列表
3. 給datalist列表標(biāo)簽添加一個(gè)id
4. 給輸入框添加一個(gè)list屬性，將datalist的id值賦值給list屬性即可
<body>
請輸入您的車型：<input type="text" list="cars">
<datalist id="cars">
<option>寶馬</option>
<option>奔馳</option>
<option>本田</option>
<option>豐田</option>
</datalist>
</body>
* **表單標(biāo)簽-H5（僅了解）**
因?yàn)楸姸嘀髁鳛g覽器不支持
<form>
可以自動校驗(yàn)輸入的內(nèi)容是否符合郵箱的格式
郵箱：<input type="email">
可以自動校驗(yàn)輸入內(nèi)容是否是url地址
域名：<input type="url">
輸入框中只能輸入數(shù)字
電話：<input type="number">
可以通過日歷來選擇時(shí)間
時(shí)間：<input type="date">
可以通過取色板來選擇顏色
<input type="color">
<input type="submit">
</form>
* **表單標(biāo)簽-非input標(biāo)簽（理解）**
* **select標(biāo)簽**
* 作用：用于定義下拉列表
* 格式：
<select>
<optgroup label="分組名稱">
<option>列表數(shù)據(jù)</option>
<option>列表數(shù)據(jù)</option>
</optgroup>
</select>
* 注意點(diǎn)：
* 下拉列表不能輸入內(nèi)容，但是可以直接在列表中選擇內(nèi)容
* 可以通過給option標(biāo)簽添加一個(gè)selected屬性（賦值為selected）來指定列表的默認(rèn)值
* 可以通過給option標(biāo)簽包裹一層optgroup標(biāo)簽來給下拉列表中的數(shù)據(jù)
* **textarea標(biāo)簽**
* 作用：定義一個(gè)多行輸入框
* 格式：
<textarea>
</textarea>
* 注意點(diǎn)：
* 默認(rèn)情況下輸入框可以無限換行
* 默認(rèn)情況下輸入框有自己的寬度和高度
* 可以通過cols和rows來指定輸入框的寬度和高度，但是雖然指定了列數(shù)和行數(shù)，還是可以無線往下輸入
* 默認(rèn)情況下輸入框是可以手動拉伸的
* **video標(biāo)簽（掌握）**
* 什么是video標(biāo)簽
* 作用：播放視頻
* 格式：
<video src="">
</video>
* Video標(biāo)簽的屬性：
* src：用于告訴video標(biāo)簽需要播放的視頻地址
* autoplay：用于告訴video標(biāo)簽是否需要自動播放視頻
<video src="images/sb.webm" autoplay="autoplay"></video>
* controls：用于告訴video標(biāo)簽是否需要顯示控制條
* poster： 用于告訴video標(biāo)簽視頻沒有播放之前顯示的占位圖片
* loop：一般用于做廣告視頻，用于告訴video標(biāo)簽視頻播放完畢之后是否需要循環(huán)播放
* preload：預(yù)加載視頻，但是需要注意preload和autoplay相沖，如果設(shè)置了autoplay屬性，那么preload就失效
* muted:靜音
* width/height:和image標(biāo)簽一樣
* **video標(biāo)簽第二種格式(掌握)**
video>
<source src="" type=""></source>
<source src="" type=""></source>
</video>
* 由于視頻數(shù)據(jù)非常重要，所以五大瀏覽器廠商都不愿意支持別人的視頻格式，所以導(dǎo)致了沒有一種視頻格式是所有瀏覽器都支持的，這個(gè)時(shí)候w3c為了解決這個(gè)問題，推出了第二個(gè)video標(biāo)簽的格式。
* Video標(biāo)簽的第二種格式存在的意義就是為了解決瀏覽器適配問題
* Video元素支持三種視頻格式，我們可以把這三種格式都通過source標(biāo)簽指定給video標(biāo)簽，那么以后當(dāng)瀏覽器播放視頻時(shí)他就會從這三種中選擇一種自己支持的格式來播放
<video>
<source src="images/sb1.webm" type="video/webm"></source>
<source src="images/sb1.mp4" type="video/mp4"></source>
<source src="images/sb1.ogg" type="video/ogg"></source>
</video>
* 注意點(diǎn)：
當(dāng)前通過video標(biāo)簽的第二種格式雖然能夠指定所有瀏覽器都支持的視頻格式，但是顯然所有瀏覽器都通過video標(biāo)簽播放視頻還有一個(gè)前提條件，就是瀏覽器必須支持html5標(biāo)簽，否則同樣無法播放。在過去的一些瀏覽器是不支持html5標(biāo)簽的，所以為了讓過去的一些瀏覽器也能夠支持video標(biāo)簽來播放視頻，那么我們以后可以通過一個(gè)js的框架叫做html5media來實(shí)現(xiàn)。
* **audio標(biāo)簽(掌握)**
* 什么是audio標(biāo)簽？
* 作用：播放音頻
* 格式：
* 第一種：
<audio src=""></audio>
* 第二種：
<audio>
<source src="" type=""></source>
<source src="" type=""></source>
</audio>
* 注意點(diǎn)：
Audio標(biāo)簽的使和video標(biāo)簽的使用 基本一樣，video中能夠使用的屬性在audio標(biāo)簽中大部分能夠使用，并且功能一樣，只有3個(gè)屬性 不能用：width/height/poster
* **詳情和概要標(biāo)簽(理解) **
* 什么是詳情和概要標(biāo)簽？
* 作用：利用summary標(biāo)簽來描述概要信息，利用details標(biāo)簽來描述詳情信息
* 格式：
<details>
<summary>概要信息</summary>
詳情信息
</details>
* **marquee標(biāo)簽(理解)**
* 注意點(diǎn)：
marquee標(biāo)簽不是w3c推薦的標(biāo)簽，在w3c官方文檔中也無法查詢這個(gè)標(biāo)簽，但是各大瀏覽器對這個(gè)標(biāo)簽的支持非常好
* 什么是marquee標(biāo)簽？
* 作用：跑馬燈
* 格式：
<marquee>內(nèi)容</marquee>
* 屬性：
* Direction：設(shè)置滾動方向：left/right/up/down（分別是向左/向右/向上/向下），默認(rèn)向右
* Scrollamount：設(shè)置滾動速度，值越大就越快
* Loop：設(shè)置滾動次數(shù)，默認(rèn)是-1，也就是無限滾動
* Behavior：設(shè)置滾動類型，有2個(gè)取值：
1. slide（滾到邊界停止）；
2. alternate滾動到邊界就彈回。
* **html中被廢棄的標(biāo)簽**
* 為什么html有一部分標(biāo)簽被廢棄掉？
因?yàn)楫?dāng)前html中的標(biāo)簽只有一個(gè)作用，就是用來添加語義；
而早期的html標(biāo)簽中有一部分標(biāo)簽是沒有語義的，有一部分標(biāo)簽是用來修改樣式的，所以部分標(biāo)簽就被淘汰了。
比如：
<font> <b> <u> <i> <s>
以上這些標(biāo)簽都是沒有語義的，都是用來修改樣式的
* b（bold）加粗文本，沒有語義
* u（underlined）給文本添加下劃線，沒有語義
* i（italic）將文本傾斜，沒有語義
* s（strikethrough）給文本添加刪除線，沒有語義
* 注意點(diǎn)：
以后在企業(yè)開發(fā)中，不到萬不得已一定不要使用這些被廢棄的標(biāo)簽
如果一定要使用，一般情況都是用來作為CSS的鉤子來使用（i標(biāo)簽做一個(gè)小圖標(biāo)）
* 推出了代替標(biāo)簽
strong==b
ins==u
em==I
del=s
strong語義：定義重要性強(qiáng)調(diào)的文字
ins（inseted）語義：定義插入的文字
em（emphasized）語義：定義強(qiáng)調(diào)的文字
del（deleted）語義：定義被刪除的文字
>記住一點(diǎn)，只需關(guān)注標(biāo)簽的語義，不用關(guān)注標(biāo)簽的樣式
* **字符實(shí)體（理解）**
* 在html中對 空格/回車/tab 不敏感，會把多個(gè)空格/回車/tab當(dāng)作一個(gè)空格來處理
* 什么是字符實(shí)體？
在html中有的字符是被html保留的，有的html字符在html中是有特殊含義的，是不能在瀏覽器中直接顯示出來的，那么這些東西要想顯示出來就必須通過字符實(shí)體。
字符實(shí)體后面一定要加上分號（;）
就是一個(gè)空格，有多少個(gè) 就有多少個(gè)空格。
< 小于符號 < less than
大于符號 > greater than
? 版權(quán)符號 ?
