img標簽
功能：告訴瀏覽器需要顯示一張圖片;
-
參數：width、height、src、title、alt；
- width：設置圖片的寬度；
- height：設置圖片的高度；
- src：圖片源（也就是圖片的路徑，便于瀏覽器查找）；
- title：鼠標懸停到該圖片要顯示的標題；
- alt：英文alternate的縮寫，告訴瀏覽器如果src里的圖片不存的時候用什么圖片來替換，也就是占位符。
代碼格式：
-
注意點：
- img標簽不會獨占一行；
- 同時設置width和height有可能會造成圖片拉伸變形，單獨設置莫一項屬性會讓圖片等比例縮放；
- 如果沒有設置width和height屬性，系統會按圖片的原始尺寸顯示。
-
路徑問題：通過src屬性賦值有兩種方式
- 相對路徑：從 .html 文件所在路徑下查找我們稱之為相對路徑；
- 同級：圖片和 .html 文件存儲在同一個文件中，格式為：
<img src="QRCode.png>。 - 下級：存儲圖片的文件夾在 .html文件所在文件夾的子目錄，格式為：
。 - 上級：存儲圖片的文件夾是 .html 的上級目錄，格式為：
<img src="../QRCode.png>。 - 在mac系統下格式為：
<img src="./QRCode.png>。
- 同級：圖片和 .html 文件存儲在同一個文件中，格式為：
- 相對路徑：從 .html 文件所在路徑下查找我們稱之為相對路徑；
絕對路徑：每次都從指定的路徑進行查找稱之為絕對路徑，格式為
<img src="C:\Users\guoyong\Desktop\QRCode.png"，企業開發中不會使用絕對路徑。
br標簽
- 功能：換行
- 注意點：
-
<br>標簽可以連續使用，使用了多少該標簽就會換多少行； -
<br>標簽的語意是不另起一段換行（也就是說該標簽是在段落內的換行），所以在企業開發中很少使用<br>標簽。
-
a標簽
功能：用于頁面與頁面之間的跳轉（添加超鏈接）；
-
屬性：href，title，target：
- href：必有屬性，標志著要跳轉到的目的地，可以為網絡URL，也可以為本地文件路徑或者本頁錨點；
- title：合同img的title屬性一樣，鼠標懸停的時候顯示的標題；
- target：取值范圍 _self 和 _blank，專門用于控制如何跳轉，_self 為當前選項卡跳轉，_blank 為新建選項卡跳轉。
格式：
<a href="指定需要跳轉的目標URL">展現給用戶查看的內容</a>
- 注意點：
1. 可以為圖片添加超鏈接，格式為：
<a href="指定需要跳轉的目標URL">
</a>
- 一個a標簽必須有 href 屬性，否則瀏覽器無法獲取需要跳轉到什么地方；
- 如果通過a標簽的 href 屬性指定一個URL地址，必須在前面加上
http://或者https://,否則無法跳轉；- a標簽的 href 屬性不但可以指定網絡跳轉，也可以指定本地路徑跳轉。
- 錨點，代碼示范：
<!--跳轉到本頁錨點-->
<a href="#center">跳轉到中部</a>
<h2 id="center">我是中部</h2>
<!--跳轉到鏈接頁錨點-->
<a href="錨點的測試界面.html#bottom">跳轉到錨點測試界面</a>
base標簽
- 功能：專門用來指定頁面中超鏈接的跳轉方式，代碼示范
<base target="_blank"> - 注意點：
- 必須寫在 head 的開始標簽和結束標簽之間；
- 如果在 base 標簽和 a 標簽中同時設置屬性 target 那么瀏覽器會默認按照 a 標簽的屬性值執行。
假鏈接
- 概念：點擊之后不執行跳轉的鏈接，稱之為假鏈接；
- 應用場景：無法確定跳轉鏈接的時候用假鏈接代替（例如開發前期其他頁面沒有寫出來的時候）；
- 假鏈接的格式：
<a href="#">點我呀1</a>
<a href="javascript:">點我呀2</a>
- 兩者的區別在于使用 # 的假鏈接點擊后會使頁面滾回到最頂端，使用 javascript：的假鏈接什么都不做。
無序列表（unordered list）（使用最多）
- 功能：為一組數據添加列表語意，并且這組數據沒有先后之分，例如：中國城市列表，班級同學名稱列表等等。
- 格式：
<ul>
<li>北京</li>
<li>上海</li>
<li>廣州</li>
<li>深圳</li>
<li>重慶</li>
<li>天津</li>
</ul>
ul為unordered list的縮寫，ul 里的 li 標簽為 list item 的縮寫。
-
注意點：
- ul 標簽是用來給一組數據添加列表語意的，而不是為了添加小圓點的；
- ul 標簽和 li 標簽是一個整體，所以一般情況下 ul 標簽和 li 標簽不會單獨出現；
- 由于 ul 和 li 標簽是一個組合，所以 ul 標簽中不推薦包含其他標簽，也就是說在 ul 標簽中只會看到 li 標簽；
- li 標簽中的內容可能會很復雜，所以可以在 li 標簽中添加其他的標簽來豐富界面。
-
應用場景
- 新聞列表；
- 商品列表；
- 導航條
、、、、
有序列表（ordered list）（使用最少）
- 功能：為一組數據添加列表語意，并且這組數據有先后之分，例如：
- 格式：其他用法與 ul 都差不多，也就是應用場景和注意點都和ul差不多
<ol>
<li>李代沫 - 到不了</li>
<li>李代沫 - 骨子里的我</li>
<li>Siz Khalifa/Charlie Puth - See You Again</li>
<li>關喆 - 領悟</li>
<li>薛之謙 - 方圓幾里</li>
<li>A-Lin - 給我一個理由忘記</li>
<li>周杰倫 - 黃金甲</li>
<li>薛之謙 - 意外</li>
<li>薛之謙 - 你還要我怎樣</li>
<li>梁靜茹 - 愛久見人心</li>
</ol>
- 網頁效果：
有序列表
定義列表（definition list）（次于無序列表）
- 功能：為一組數據添加列表語意，先通過 dt 標簽定義列表中的所有標題，然后再通過 dd 標簽給每個標題添加描述信息；
- 格式：
<dl>
<dt>北京</dt>
<dd>中國的首都</dd>
<dt>上海</dt>
<dd>富人的集中地</dd>
</dl>
dt 是英文 Definition Title 的縮寫，所以 dt 的含義就是用來定義列表中的標題
dd 是應為 Definition Description 的縮寫，所以 dd 的含義就是定義標題對應的描述
-
應用場景
- 網站尾部的相關信息
- 做圖文混排
-
注意點：
- 和 ul/ol 一樣，dl 和 dt/dd 是一個整體，一般情況下不會單獨出現；
- 和 ul/ol 一樣，dl 和 dt/dd 是一個整體，所以建議 dl 中只放 dt 和 dd 標簽；
- 一個 dt 可以沒有對應的 dd 標簽，也可以有多個 dd 標簽，無論沒有或者多個 dd 標簽都不推薦使用，推薦使用一個 dt 對應一個 dd；
- 當需要豐富頁面的時候，可以在 dt 或者 dd 里繼續添加其他標簽。
表格標簽
- 功能：為一堆數據添加表格語意。表格是一種數據的展現形式，當數據量非常大的時候，表格這種展現形式被認為最為清晰的展現形式。
- 格式：table 標簽代表整個表格，tr 表示表格中的一行，td 代表單元格。
<table>
<tr>
<td><td>
</tr>
</table>
-
屬性：
-
width / height：可以給 table 和 td 標簽使用。
- 表格的尺寸默認是根據內容的尺寸自動調整的，也可以手動給 table 設置 width / height 屬性的方式手動來調整表格的寬度和高度；
- 給 td 標簽設置 width / height 屬性，會修改當前單元格的寬度和高度，不會影響整個表格的寬高；
-
align / valign：
-
align：水平對齊 可以為 table / tr / td 標簽使用。
- 給 table 標簽設置 align 屬性，可以控制表格在水平方向的對齊方式；
- 給 tr 標簽設置 align 屬性，可以控制當前行中所有單元格內容的水平方向的對齊方式；
- 給 td 標簽設置 align 屬性，可以控制當前單元格中內容在水平方向的對齊方式。
-
valign：垂直對齊 只能為 tr 和 td 標簽使用。
- 給 tr 標簽設置 valign 屬性，可以控制當前行中所有單元格內容的垂直對齊方式；
- 給 td 標簽設置 valign 屬性，可以控制當前單元格內容的垂直對齊方式。
-
-
cellspeacing / cellpadding
- cellspeacing：外邊距屬性，只能給 table 標簽設置該屬性，表示單元格與單元格之間的距離，默認情況下單元格與單元格之間的距離為2px；
- cellpadding：內邊距屬性，也是只能給 table 標簽設置該屬性，表示單元格中內容與單元格邊框之間的間隙，默認值為 1。
-
-
表格的結構：由于表格中存儲的數據比較復雜，為了方便管理和閱讀以及提升語意，所以一般會對表格中存儲的數據進行分類，可以分為以下四類。
- 表格的標題
- 表格的表頭信息：表頭信息不受表格整體高度的影響，修改需要用css
- 表格的主體信息
- 表格的頁尾信息：表尾信息不受表格整體高度的影響，修改需要用css
- 表格的完整格式：
<table>
<caption>
<h2>這是里表格的標題</h2>
</caption>
<thead>
<tr>
<th>這里是每一列的標題</th>
</tr>
</thead>
<tbody>
<tr>
<td>這里是表格中的數據</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>這里是表格末尾信息</td>
</tr>
</tfoot>
</table>
- 注意點：
table 標簽有一個邊框(border)屬性，這個屬性決定了邊框的寬度，默認情況下寬度為0，所以默認情況下看不到表格；
table 標簽和 ul / ol / dl 標簽一樣，它是一個組合標簽，所以 table、tr、td 要么一起出現，要么就一起不出現，不會單獨出現；
如果 tr 標簽和 td 標簽 同時設置了 align 屬性，那么單元格中的內容會根據 td 中屬性的值進行調整；
如果 tr 標簽和 td 標簽 同事設置了 valign 屬性，那么單元格中的內容會根據 td 中屬性的值進行調整。
caption 標簽
- 功能：表格標題標簽，在表格標簽中提供的專門設置表格標題的標簽，只要將標題寫在 caption 標簽中，那么此標題就會默認相對表格寬度居中；
- 格式：
<table>
<caption>
<h2>此處顯示為表格的標題</h2>
</caption>
</table>
- 注意點：
- caption 標簽一定要寫在 table 標簽里面，否則無效；
- caption 標簽一定要緊跟在 table 標簽的后面。
th 標簽
- 功能：表格標簽中專門提供的用來存儲每一列標題的標簽。只要將當前列的標題寫在該標簽中，字體會默認居中加粗。
- 格式：
<tr bgcolor="#a9a9a9">
<th>排名</th>
<th>關鍵詞</th>
<th>趨勢</th>
<th>今日搜索</th>
<th>最近7日</th>
<th>相關鏈接</th>
</tr>
- 單元格合并
- 水平方向單元格合并
- 在 td 標簽里添加屬性 “colspan = 合并單元格數量”
- 格式：
<table border="0.5" bgcolor="black" width="300" height="200" cellspacing="1">
<tr bgcolor="white">
<td colspan="2"></td>
<td></td>
</tr>
<tr bgcolor="white">
<td ></td>
<td ></td>
<td></td>
</tr>
<tr bgcolor="white">
<td ></td>
<td ></td>
<td></td>
</tr>
</table>
- 垂直方向單元格合并
- 給 td 標簽里添加屬性 "rowspan = 合并單元格數量"
- 格式：
<table border="0.5" bgcolor="black" width="300" height="200" cellspacing="1">
<tr bgcolor="white">
<td rowspan="2"></td>
<td ></td>
<td></td>
</tr>
<tr bgcolor="white">
<td ></td>
<td></td>
</tr>
<tr bgcolor="white">
<td ></td>
<td ></td>
<td ></td>
</tr>
</table>
- 注意點：
- 由于把某一個單元格當做了多個單元格來看待，所以會多出來一部分單元格，需要刪掉多出來的單元格；
- 單元格永遠默認向后或者向下合并，無法更改；
表單標簽(重點)
- 什么是表單？
- 專門用來收集用戶信息的 html 頁面。
- 什么是表單元素
- 在 html 中，標記/標簽/元素都是指 html 的標簽。例如
<a>a標簽 / a標記 / a元素。表單元素就是是 html 中比較特殊的一些標簽，在瀏覽器中所有的表單元素都有特殊的外觀和默認的功能。
- 在 html 中，標記/標簽/元素都是指 html 的標簽。例如
- 表單的格式：
<form>
具體的表單標簽
</form>
- 常見的表單元素
- input 標簽：input 標簽有一個 type 屬性，該屬性有很多類型的取值，取值的不同就決定了 input 標簽的功能和外觀。
- 屬性：
- type
- text ：定義明文輸入框
- password ：定義暗文輸入框e
- radio ：定義單選框，可通過設置 checked 屬性設置默認選中。
- checkbox ：定義多選框，可通過設置 checked 屬性設置默認選中。
- button ：定義普通按鈕，可以設置通過 value 屬性設置按鈕的標題。
- image ：定義圖片按鈕，可以添加 src 屬性加載圖片，用法痛 img 標簽一樣。
- reset ：定義重置按鈕，用于清空表單中已經填寫好的數據。有默認的標題，可通過設置 value 屬性進行更改。
- submit ：定義提交按鈕，將表單中已經填寫好的數據提交到遠程服務器。
- hidden ：定義隱藏域，配合提交按鈕將一些數據隱式的提交到服務器
- email ：定義自動校驗文本框內容是否符合郵箱格式。H5 新增屬性，大部分瀏覽器不支持。
- url ：定義自動校驗文本框內容是否符合 url 格式。H5 新增屬性，大部分瀏覽器不支持。
- number ：定義只能輸入阿拉伯數字的文本框。H5 新增屬性，大部分瀏覽器不支持。
- date ：定義時間選擇器文本框。H5 新增屬性，大部分瀏覽器不支持。
- color ：定義顏色選擇器。H5 新增屬性，大部分瀏覽器不支持。
- value：設置默認值
- label：設置文字和輸入框進行綁定
- 綁定格式：
- type
<!--第一種方式：官方推薦-->
<label for="account">賬號：</label><input type="text" id="account">
<!--第二種方式-->
<label>
賬號：<input type="text">
</label>
- 注意點
- 單選框默認情況下單選框不會互斥，設置單選框互斥的方法為每一個單選框都添加一個相同的屬性 name ，該屬性值必須保持一致。
- 設置單選框默認狀態下選中，給 input 標簽添加 checked 屬性。
- 在 HTML 中如果屬性的取值和屬性的名稱一致，可以省略取值只寫一個，但在 XHTML 必須寫上取值，所以在企業開發中最好不要省略取值。
- 要想把表單中的數據提交到遠程服務器，必須具備兩個條件：
- 需要給 form 表填添加一個 action 屬性，通過這個 action 的值指定需要提交到的服務器地址；
- 需要給每一個需提交的表單項添加一個 name 屬性
datalist標簽（了解）
- 功能：為輸入框綁定待選項
- 格式：
<label for="carType">請輸入您的車型:</label><input type="text" id="carType" list="cars">
<datalist id="cars">
<option>寶馬</option>
<option>寶萊</option>
<option>奔馳</option>
<option>賓利</option>
<option>奧迪</option>
<option>路虎</option>
</datalist>
-
網頁效果：
datalist標簽
select標簽
- 功能：用于定義下拉列表；
- 格式：
<select>
<optgroup label="北京">
<option>朝陽區</option>
<option>海淀區</option>
<option>豐臺區</option>
<option>通州區</option>
<option>昌平區</option>
<option>順義區</option>
</optgroup>
<optgroup label="廣州">
<option>海珠區</option>
<option>越秀區</option>
<option>天河區</option>
<option>黃浦區</option>
</optgroup>
</select>
-
網頁效果:
select標簽效果 -
注意點：
- 下拉列表不能輸入內容，但可以直接在列表中選擇內容；
- 可以通過給 option 標簽內添加一個 selected 屬性設置下拉列表的默認值；
- 可以通過給 option 標簽包裹一層 optgroup 標簽來給下拉列表中的數據分類。
textarea標簽
- 功能：定義一個多行輸入框
- 格式：
<textarea cols="5" rows="5">
這里可以隨意輸入文字用來設置輸入框的默認值
</textarea>
- 網頁效果：
textarea標簽網頁效果
- 注意點：
- 默認情況下輸入框可以無限換行；
- 默認情況下輸入框有默認的寬度和高度；
- 可以通過 cols 和 rows 來指定輸入框的寬度和高度。雖然指定了列數和行數，但還是可以無限輸入文字；
- 默認情況下，輸入框可以手動拉伸的。
fieldset標簽（了解）
- 作用：可以給表單添加一個邊框。
legend標簽（了解）
- 作用：可以給 fieldset 邊框指定一個標題
- 以下為表單標簽總結做的練習：
<form action="http://www.baidu.com">
<fieldset>
<legend>注冊界面</legend>
<p>
<label for="account">賬號:</label>
<input type="text" id="account" name="account">
</p>
<p>
<label for="pwd">密碼:</label>
<input type="password" id="pwd" name="pwd">
</p>
<p>
<label>性別:</label>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="yao" checked="checked">保密
</p>
<p>
<label>愛好:</label>
<input type="checkbox" name="sport" value="baskedBall">籃球
<input type="checkbox" name="sport" value="footBall">足球
<input type="checkbox" name="sport" value="sing">唱歌
<input type="checkbox" name="sport" value="dancing" checked="checked">跳舞
</p>
<p>
<label for="profile">個人簡介:</label>
<textarea name="profile" id="profile" cols="20" rows="5"></textarea>
</p>
<p>
<label for="birthday">生日:</label>
<input type="date" id="birthday" name="birthday">
</p>
<p>
<label for="email">郵箱:</label>
<input type="email" id="email" name="email">
</p>
<p>
<label for="phone">手機:</label>
<input type="number" id="phone" name="phone">
</p>
<p>
<input type="submit" value="注冊">
<input type="reset" value="清空">
</p>
</fieldset>
</form>
- 網頁效果:
form表單練習網頁效果
marquee標簽
- 作用：制作跑馬燈效果
- 格式：
<marquee>這里填寫需要添加效果的文字</marquee> - 屬性：
- direction ：設置滾動方向，取值為 up / down / left / right;
- scrollamount ：設置文字滾動速度，值越大滾動速度越快；
- loop ：設置文字滾動次數，默認值為 -1 無限滾動；
- behavior ：設置滾動類型，取值范圍 slide / alternate
- 注意點：
- marquee 標簽不是 W3C 推薦的標簽，在 W3C 官方文檔中也無法查詢到該標簽，但各大瀏覽器對它的支持非常好。
HTML5 新增標簽
video 標簽
- 作用：用于播放視頻。
- 格式：
<!--第一種格式, 常規寫法-->
<video src=""></video>
<!--第二種格式，為了解決各個瀏覽器的適配問題-->
<video>
<source src="" type="">
<source src="" type="">
</video>
- 屬性：
- src ：用于告訴 video 標簽需要播放的視頻所在的路徑；
- autoplay ：用于告訴 video 標簽是否需要自動播放視頻；
- controls ：用于告訴 video 標簽是否需要顯示控制條；
- poster ：用于告訴 video 標簽視頻未播放之前顯示的占位圖片；
- loop ：用于告訴 video 標簽視頻播放完畢之后是否循環播放。一般用于廣告；
- preload ：用于告訴 video 標簽視頻在未播放之前是否進行預加載。用于網絡視頻。如果存在 autoplay 屬性，那么該屬性設置了也不會生效；
- muted ：用于告訴 video 標簽播放視頻的時候靜音；
- width ：用于指定 video 標簽的寬度；
- height ：用于指定 video 標簽的高度。
audio 標簽
- 作用：用于播放音頻。
- 格式：
<!--第一種格式,常規寫法-->
<audio src="images/yinyue.mp3" autoplay="autoplay" controls="controls"></audio>
<!--第二種格式,為了解決各個瀏覽器的適配問題-->
<audio controls="controls" autoplay="autoplay">
<source src="images/yinyue.mp3" type="audio/mp3">
</audio>
- 注意點：
- audio 標簽的使用和 video 標簽基本一樣，video 中使用的屬性 audio 大部分能夠使用并且功能都一樣。
- 只有三個屬性不能用 height/width/poster
詳情概要標簽
- 作用：利用 summary 標簽描述概要信息，利用 details 標簽描述詳情信息。默認情況下為折疊展示，需要交互顯示詳情。
- 格式：
<details>
<summary>全棧工程師</summary>
全站工程師是指掌握多種技能,并能利用多種技能獨立完成產品的人。[1]也要全端工程師(同時具備前端和后臺能力),英文Full Stack developer
</details>
- 網頁效果：
概要
詳情
HTML中廢棄的標簽
廢棄原因：當前 HTML 中的標簽只有添加語意一種作用，而早期的 HTML 標簽中有一部分標簽是沒有語意的，這部分標簽是用來修改樣式的，所以會被淘汰，當前 HTML 頁面所有跟樣式有關的部分都用 CSS 來編寫。
-
被廢棄的標簽
-
<br>：強制換行 -
<hr>：添加一條分割線 -
<font>： -
<b>：（bold）加粗文本，沒有任何語意。 -
<u>：（underlined）給文本添加下劃線，沒有任何語意。 -
<i>：（italic）將文本傾斜，沒有任何語意。 -
<s>：（strikethrough）給文本添加刪除線，沒有任何語意。
-
-
廢棄標簽的替代標簽
-
<strong>:替代<b>，加粗文本，定義重要性強調的文字； -
<ins>:(inseted)替代<u>，給文本添加下劃線，定義插入的文字； -
<em>:(emphasized)替代<i>，將文本傾斜，定義強調的文字； -
<del>:(deleted)替代<s>，給文本添加刪除線，定義被刪除的文字。
-
-
注意點
- 在企業開發中，不到萬不得已一定不要用廢棄掉的標簽。
- 如果一定要使用，一般情況下都是作為 CSS 的鉤子來使用。
字符實體
- 在 HTML 中對 空格/回車/Tab不敏感，會把多個空格/回車/Tab當做一個空格來處理，所以在需要用到這些按鍵的時候需要用到字符實體來替代。
- 作用：在 HTML 中有的字符是被 HTML 保留的，有的 HTML 字符在 HTML 中有特殊含義的，是不能在瀏覽器中顯示出來的。要想顯示出這些字符必須通過字符實體。
- 以下為常用的字符實體：
-
：空格，一個就是一個空格，有多少個就有多少個空格； -
<(less than)：小于號“<”； -
>(greater than)：大于號">"； -
?：版權符號。
-
