img標簽：
- img標簽中的img其實是英文image的縮寫,所以img標簽的作用, 就是告訴瀏覽器我們需要顯示一張圖片;
- img標簽格式:< img src="">其實img標簽中的src是英文source的縮寫，所以img標簽中的src就是用來告訴img標簽, 需要顯示的圖片名稱.
- 注意點：
- 和H系列標簽/p標簽還有Hr標簽不一樣, img標簽不會獨占一行.
- 如果我們手動指定了img標簽顯示的圖片的寬度和高度, 有可能會導致圖片變形, 那么如果又想指定寬度和高度, 又不想讓圖片變形. 我們可以只指定寬度和高度其中的一個值即可
- 只要指定了高度, 系統會自動根據高度計算出寬度, 只要指定了寬度, 系統會自動根據寬度計算出高度, 并且都是等比拉伸的, 也就是說不會變形
4.img中的其它屬性:
width: 寬度 & height: 高度
在img標簽中width/height這兩個屬性的作用, 就是用來告訴img標簽將來需要顯示的圖片有多寬有多高;
如果img標簽沒有指定需要顯示的圖片的寬高, 那么系統會按照圖片默認的寬高來顯示,
如果img標簽指定的寬高, 那么系統會按照指定的寬高來顯示.title: 用于告訴瀏覽器, 當鼠標懸停在圖片上時, 需要彈出的描述框中顯示什么內容
alt其實是英文alternate的縮寫, 它的作用就是用于告訴瀏覽器, 當需要顯示的圖片找不到時顯示什么內容。
br標簽：
- br標簽作用: 換行
- br標簽格式:
<br>/<br/> - br標簽的注意點:
- 多個br標簽可以連續使用, 使用了多少個br標簽就會換多少行;
- 由于HTML的作用就是用來給文本添加語義, 而br標簽的語義是不另起一個段落換行, 而在企業開發中一般情況下需要換行都是因為需要另起一個段落, 所以在企業開發中很少使用br標簽。
a標簽：
- 什么是a標簽?
a標簽的作用: 就是用于控制頁面與頁面之間跳轉的；
a標簽的格式: < a href="指定需要跳轉的目標界面">需要展現給用戶查看的內容< /a > - a 標簽的屬性：
target屬性, 這個屬性的作用就是專門用于控制如何跳轉：
_self: 用于在當前選項卡中跳轉, 也就是不新建頁面跳轉. target默認屬性。
_blank: 用于在新的選項卡中跳轉, 也就是新建頁面跳轉。title屬性，a標簽中的title和img標簽中的title一樣, 都是用來控制鼠標懸停時顯示的提示文本的。
- 注意點:
- a標簽不僅可以讓文字可以點擊, 還可以讓圖片也能夠被點擊；
- 一個a標簽必須有一個href屬性, 否則a標簽不知道要跳轉到什么地方；
- 如果通過a標簽的href屬性指定一個URL地址, 那么必須在地址前面加上http://或https://
- a標簽的href屬性除了可以指定一個網絡地址以外, 還可以指定一個本地地址。
base標簽：
base標簽就是專門用來統一的指定當前網頁中所有的超鏈接(a標簽)需要如何打開。
例子：
<head>
<meta charset="UTF-8">
<title>11-base標簽</title>
<base target="_blank">
</head>
注意點:
- base標簽必須寫在head標簽的開始標簽和結束標簽之間;
- 如果既在base中指定了target又在a標簽中指定了target,那么瀏覽器會按照a標簽中指定的來執行;
- 如需要單獨給某個a鏈接添加跳轉方式，可以在那個a標簽中單獨指定跳轉樣式。
列表標簽
作用: 給一堆數據添加列表語義, 也就是告訴搜索引擎告訴瀏覽器這一堆數據是一個整體。
分類：
- 無序列表(最多)(unordered list)
- 有序列表(最少)(ordered list)
- 定義列表(其次)(definition list)
無序列表作用：給一堆數據添加列表語義, 并且這一堆數據中所有的數據都沒有先后之分。
格式：
< ul>
<li>需要顯示的條目內容</li>
</ul>
li其實是英文list item的縮寫；
list是列表的意思，item是條目的意思，所以結合起來就是 列表條目的意思。
注意點：
- 一定要記住ul標簽是用來給一堆數據添加列表語義的, 而不是用來給他們添加小圓點的；
- ul標簽和li標簽是一個整體, 是一個組合. 所以一般情況下ul標簽和li標簽都是一起出現, 不會單個出現. 也就是說不會單獨使用一個ul標簽或者單獨使用一個li 標簽, 都是結合在一起使用；
- 由于ul標簽和li標簽是一個組合, 所以ul標簽中不推薦包含其它標簽, 也就是說以后你在ul標簽中只會看到li標簽。
應用場景
1.新聞列表
2.商品列表
3.導航條
表格標簽
作用：用來給一堆數據添加表格語義。
其實表格是一種數據的展現形式, 當數據量非常大的時候, 表格這種展現形式被認為是最為清晰的一種展現形式。
格式：
< table>
<tr>
<td>需要顯示的內容</td>
</tr>
</table>
表格標簽中的table代表整個表格, 也就是一個table標簽所包裹的內容就是一個表格。
表格標簽中的tr標簽代表整個表格中的一行數據, 也就是說一對tr標簽就是表格中的一行；
其實表格標簽中的td標簽代表表格中一行中的一個單元格, 也就是說一對td標簽就是一行中的一個單元格。
注意點
- 表格標簽有一個邊框屬性, 這個屬性決定了邊框的寬度. 默認情況下這個屬性的值是0, 所以看不到邊框;
- 表格標簽和列表標簽一樣, 它是一個組合標簽, 所以table/tr/td要么一起出現, 要么一起不出現, 不會單個出現。
屬性
- width&height:可以給table標簽和td標簽使用。
- 表格的寬度和高度默認是按照內容的尺寸來調整的, 也可以通過給table標簽設置width/height屬性的方式來手動指定表格的寬度和高度；
- 如果給td標簽設置widht/height屬性, 會修改當前單元格的寬度和高度, 不會影響整個表格的寬度和高度；
- 水平對齊和垂直對齊的屬性：其中水平對齊可以給table標簽和tr標簽和td標簽使用，垂直對齊只能給tr標簽和td標簽使用。
- 給table標簽設置align屬性, 可以控制表格在水平方向的對齊方式；
- 給tr標簽設置align屬性, 可以控制當前行中所有單元格內容的水平方向的對齊方式
- 給td標簽設置align屬性, 可以控制當前單元格中內容在水平方向的對齊方式
注意點: 如果td中設置了align屬性, tr中也設置了align屬性, 那么單元格中的內容會按照td中設置的來對齊。
- 外邊距和內邊距的屬性：只能給table標簽使用。
外邊距就是單元格和單元格之間的距離, 我們稱之為外邊
距，默認情況下單元格和單元格之間的外邊距的距離是2px；內邊距就是單元格的邊框和文字之間的間隙, 我們稱之為內邊距，默認情況下內邊距是1；
細線表格：
細線表格的制作方式:
- 給table標簽設置bgcolor;
- 給tr標簽設置bgcolor;
- 給table標簽設置cellspacing = "1px".
注意點:
table標簽和tr標簽以及td標簽都支持bgcolor屬性。
（但是以上內容僅僅作為了解, 因為樣式以后都是通過css來控制）
表格標簽的其它標簽：
- 表格標題：這個標簽叫做caption. 只要將標題寫在caption標簽中, 那么標題就會自動相對于表格的寬度居中。
注意點：
caption一定要寫在table標簽中, 否則無效；
caption一定要緊跟在table標簽后面； - 標題單元格：這個標簽叫做th標簽, 只要將當前列的標題存儲在這個標簽中就會自動居中+加粗文字；
到此為止我們就發現, 其實表格中有兩種單元格, 一種是td, 一種是th，td是專門用來存儲數據的, th是專門用來存儲當前列的標題的。
表格的結構
- 由于表格中存儲的數據比較復雜, 為了方便管理和閱讀以及提升語義, 我們可以對表格中存儲的數據進行分類。
表格中存儲的數據可以分為4類：
- 表格的標題(caption);
- 表格的表頭信息(thead);
- 表格的主體信息(tbody);
- 表格的頁尾信息(tfoot)
- 表格的完整結構
<table>
<caption>表格的標題</caption>
<thead>
<tr>
<th>每一列的標題</th>
</tr>
</thead>
<tbody>
<tr>
<td>數據</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>數據</td>
</tr>
</tfoot>
</table>
- 注意點:
- 如果我們沒有編寫tbody, 系統會系統給我們添加tbody；
- 如果指定了thead和tfoot, 那么在修改整個表格的高度時, thead和tfoot有自己默認的高度, 不會隨著表格的高度變化而變化；
合并單元格
- 水平方向上的單元格合并：
可以給td標簽添加一個colspan屬性, 來指定把某一個單元格當做多個單元格來看待(水平方向)
例如:
<td colspan="2"></td>
含義: 把當前單元格當做兩個單元格來看待;
注意點：
- 由于把某一個單元格當做了多個單元格來看待，所以需要刪掉一些單元格才能正常顯示；
- 一定要記住單元格合并永遠都是向后或者向下合并，而不能向前或者向上合并。
- 垂直方向上的單元格合并：
可以給td標簽設置一個rowspan屬性，來指定把某一個單元格當做多個單元格來看待（垂直方向）
例如：
<td rowspan="2"></td>
含義：把當前單元格當做兩個單元格來看待。
表單標簽
- 什么是表單？
表單就是專門用來收集用戶信息的； - 什么是表單元素？
2.1 什么是元素？
在HTML中標簽/標記/元素都是HTML中的標
簽，例如< a >a標簽/a標記/a元素。
2.2表單元素其實還是HTML中的一些標簽，只不過這些標簽比較特殊，在瀏覽器中所有的表單標簽都有特殊的外觀和默認的功能。 - 表單的格式：
<form>
<表單元素>
</form>
- 常見的表單元素：
4.1 input標簽, input標簽有一個type屬性, 這個屬性有很多類型的取值, 取值的不同就決定了input標簽的功能和外觀不同。
常見的input屬性
明文輸入框：
<form>
賬號:<input type="text">
</form>
暗文輸入框:
<form>
密碼:<input type="password">
</form>
給輸入框設置默認值:
<form>
賬號:<input type="text" value="lnj"><br>
密碼:<input type="password" value="123"></form>`
單選框：
性別:
<input type="radio" name="xx" checked>男
<input type="radio" name="xx">女
<input type="radio" name="xx" >保密<br>
注意點:
1.默認情況下單選框不會互斥, 要想單選框互斥那么必須給每一個單選框標簽都設置一個name屬性, 然后name屬性還必須設置相同的值;
2.要想讓單選框默認選中某一個框子, 那么可以給input標簽添加一個checked屬性;
3.在HTML中如果屬性的取值和屬性的名稱一樣, 可以只寫一個. 但是在XHTML中必須寫上取值, 所以在企業開發中我們推薦大家不要省略取值。
多選框:
愛好:
<input type="checkbox">籃球
<input type="checkbox">足球
<input type="checkbox" checked="checked">棒球
<input type="checkbox" checked="checked">足浴
按鈕：
- 普通按鈕：可以通過value屬性來給按鈕指定標題；
作用：配合JS來完成一些操作。
<input type="button" value="我是按鈕">
- 圖片按鈕：可以用指定圖片作為按鈕；
作用：同普通按鈕一樣，可以配合JS來完成一些操作。
<input type="image" src="images/register.jpg">
- 重置按鈕：
作用：用于清空表單中已經填寫好的數據；
注意點：如果想要修改重置按鈕默認的按鈕標題可以通過Value屬性來修改。
<input type="reset" value="清空">
- 提交按鈕：
作用：將表單這種已經填寫好的數據，提交到遠程服務器。
注意點：要想把填好的數據提交到遠程服務器，必須具備兩個條件： - 需要給form表單添加一個action的屬性，通過這個action屬性指定需要提交到的服務器
地址； - 需要給需要提交到服務器的表單元素添加一個name屬性。
<input type="submit">
隱藏域：
作用 : 配合提交按鈕將一些數據默默的悄悄的提交到服務器。
<input type="hidden" name="cc" value="kukuku">
H5新增input標簽屬性：
可以自動校驗輸入的內容是否符合郵箱的格式：
郵箱:<input type="email">
可以自動校驗輸入的內容是否是URL地址:
域名:<input type="url">
輸入框中只能輸入數字:
電話:<input type="number">
可以通過日歷來選擇時間:
時間:<input type="date">
可以通過取色板來選擇顏色:
顏色: <input type="color">
4.2 label標簽，用于將文字和輸入框關聯起來。
- 默認情況下文字和輸入框是沒有關聯關系的, 也就是說點擊文字輸入框不會聚焦, 如果想點擊文字時讓對應的輸入框聚焦, 那么就需要讓文字和輸入框進行綁定;
- 要想讓輸入框和文字綁定在一起, 那么我們可以使用Label標簽;
- 綁定的格式:
3.1 將文字利用label標簽包裹起來
3.2 給輸入框添加一個id屬性
3.3在label標簽中通過for屬性和輸入框中的id進行綁定即可。
<label for="account">賬號:</label><input type="text" id="account">
<form action="">
<label for="account">賬號:</label><input type="text" id="account"><br>
<label for="pwd">密碼:</label><input type="password" id="pwd"><br>
4.3 datalist標簽:
作用：給輸入框綁定待選項。
格式：
<datalist>
<option>待選項內容</option>
</datalist>
如何給輸入框綁定待選列表:
1. 寫一個輸入框；
2. 寫一個datalist列表；
3. 給datalist列表標簽添加一個id;
4. 給輸入框添加一個list屬性,將datalist的id對應的值賦值給list屬性即可。
請輸入你的車型: <input type="text" list="cars">
<datalist id="cars">
<option>奔馳</option>
<option>寶馬</option>
<option>奧迪</option>
<option>路虎</option>
<option>賓利</option>
</datalist>
4.4 select 標簽：
作用：用于定義下拉列表。
格式：
<select>
<optgroup label="分組名稱">
<option>列表數據</option>
</optgroup>
</select>
<select>
<optgroup label="北京">
<option>朝陽區</option>
<option>昌平區</option>
<option>通州區</option>
</optgroup>
<optgroup label="廣州">
<option>天河區</option>
<option>越秀區</option>
<option>黃浦區</option>
</optgroup>
</select>
注意點：
1.下拉列表不能輸入內容, 但是可以直接在列表中選擇內容;
2.可以通過給option標簽添加一個selected屬性來指定列表的默認值;
3.可以通過給option標簽包裹一層optgroup標簽來給下拉列表中的數據分類。
4.5 textarea標簽:
作用: 定義一個多行輸入框;
格式：
<textarea>
</textarea>
注意點：
1.默認情況下輸入框可以無限換行；
2.默認情況下輸入框有自己的寬度和高度；
3.可以通過cols和rows來指定輸入框的寬度和高度, 但是雖然指定了列數和行數, 但是還是可以無限往下輸入；
4.默認情況下輸入框是可以手動拉伸的（如設置resize: none則無法改變輸入框大小）；
5.注意：
表單元素一定要寫在表單中。
video/audio標簽：
-
video標簽：
作用：用于播放視頻。
格式一：
<video src="">
</video>
<video src="images/sb1.webm" autoplay="autoplay" loop="loop" muted="muted" width="800px"></video>
格式二：
<video>
<source src="" type=""></source>
<source src="" type=""></source>
</video>
屬性：
src: 用于告訴video標簽需要播放的視頻地址；
autoplay: 用于告訴video標簽是否需要自動播放視頻；
controls: 用于告訴video標簽是否需要顯示控制條；
poster: 用于告訴video標簽視頻沒有播放之前顯示的占位圖片；
loop: 一般用于做廣告視頻, 用于告訴video標簽視頻播放完畢之后是否需要循環播放；
preload: 預加載視頻, 但是需要注意preload和autoplay相沖, 如果設置了autoplay屬性, 那么preload屬性就會失效；
muted:靜音；
width/height: 和img標簽中的一模一樣。
格式二存在的意義：
由于視頻數據非常非常的重要, 所以五大瀏覽器廠商都不愿意支持別人的視頻格式, 所以導致了沒有一種視頻格式是所有瀏覽器都支持的，這個時候W3C為了解決這個問題, 所以推出了第二個video標簽的格式，其存在的意義就是為了解決瀏覽器適配問題。
video 元素支持三種視頻格式, 我們可以把這三種格式都通過source標簽指定給video標簽, 那么以后當瀏覽器播放視頻時它就會從這三種中選擇一種自己支持的格式來播放。
注意點:
- 當前通過video標簽的第二種格式雖然能夠指定所有瀏覽器都支持的視頻格式, 但是想讓所有瀏覽器都通過video標簽播放視頻還有一個前提條件, 就是瀏覽器必須支持HTML5標簽, 否則同樣無法播放;
- 在過去的一些瀏覽器是不支持HTML5標簽的, 所以為了讓過去的一些瀏覽器也能夠通過video標簽來播放視頻, 那么我們以后可以通過一個JS的框架叫做html5media來實現。
2.audio標簽：
作用：用于播放音頻。
格式：同video一樣，具有兩種格式。
<audio src="">
</audio>
<audio>
<source src="" type="">
</audio>
注意點:
audio標簽的使用和video標簽的使用基本一樣, video中能夠使用的屬性在audio標簽中大部分都能夠使用, 并且功能都一樣
只不過有3個屬性不能用, height/width/poster,這與播放產品的性質有直接關系。
詳情和概要
什么是詳情和概要標簽?
作用:利用summary標簽來描述概要信息, 利用details標簽來描述詳情信息；默認情況下是折疊展示, 想看見詳情必須點擊。
格式:
<details>
<summary>概要信息</summary>
詳情信息
</details>
<details>
<summary>鄭伊健</summary>
簡介：鄭伊健，1967年10月4日出生于中國香港，籍貫廣東恩平，香港影視演員、流行男歌手。1988年參加新秀歌唱大賽加入無線電視，因拍攝“陽光檸檬茶”廣告而入行，拜羅文為師。1991年...
</details>
marquee
作用: 跑馬燈
格式：
<marquee>內容</marquee>
屬性:
direction: 設置滾動方向 left/right/up/down(默認left)；
scrollamount: 設置滾動速度, 值越大就越快；
loop: 設置滾動次數, 默認是-1, 也就是無限滾動；
behavior: 設置滾動類型 slide滾動到邊界就停止, alternate滾動到邊界就彈回。
注意點:
marquee標簽不是W3C推薦的標簽, 在W3C官方文檔中也無法查詢這個標簽, 但是各大瀏覽器對這個標簽的支持非常好。
<!--滾動方向-->
<marquee>騎著馬兒看著燈</marquee>
<marquee direction="right">騎著馬兒看著燈</marquee>
<marquee direction="up">騎著馬兒看著燈</marquee>
<marquee direction="down">騎著馬兒看著燈</marquee>
<hr>
<!--設置滾動速度-->
<marquee scrollamount="1">騎著馬兒看著燈</marquee>
<marquee scrollamount="10">騎著馬兒看著燈</marquee>
<!--設置滾動次數-->
<marquee loop="10">騎著馬兒看著燈</marquee>
<!--設置滾動類型-->
<marquee behavior="slide">騎著馬兒看著燈</marquee>
<marquee behavior="alternate">騎著馬兒看著燈</marquee>
字符實體
1.在HTML中對空格/回車/tab不敏感, 會把多個空格/回車/tab當做一個空格來處理。
2.什么是字符實體?
在HTML中有的字符是被HTML保留的, 有的HTML字符在HTML中是有特殊含義的, 是不能在瀏覽器中直接顯示出來的, 那么這些東西要想顯示出來就必須通過字符實體。
3.常見的實體字符：
