一、HTML簡(jiǎn)介
1.什么是HTML
HTML,Hyper Text Markup Language（超文本標(biāo)記語言）椰棘，由各種標(biāo)簽組成漓帚，用來制作網(wǎng)頁壳坪，告訴瀏覽器該如何顯示頁面。
2.作用
- 制作網(wǎng)頁莺戒，控制網(wǎng)頁和內(nèi)容的顯示
- 插入圖片粱栖、音樂、視頻脏毯、動(dòng)畫等多媒體
- 通過連接檢索信息
- 使用表單獲取用戶信息闹究，實(shí)現(xiàn)交互
3.版本
W3C，World Wide Web Consortium（萬維網(wǎng)聯(lián)盟）食店，制作Web技術(shù)相關(guān)標(biāo)準(zhǔn)和規(guī)范的組織渣淤，其中HTML就是W3C制定的標(biāo)準(zhǔn)。
兩個(gè)版本：HTML4.01吉嫩、HTML5
官網(wǎng)：http://www.w3school.com.cn/
4.后綴名
HTML文件是以.html或.htm結(jié)尾
二价认、HTML文檔結(jié)構(gòu)
1.基本結(jié)構(gòu)
- 1.1 簡(jiǎn)介
- HTML標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，如
<html>自娩，通常都是成對(duì)出現(xiàn)的用踩，如<html></html>渠退。 - 以
<html>為根標(biāo)簽，包含<head>頭部和<body>主體脐彩。 - 頭部提供關(guān)于網(wǎng)頁的相關(guān)信息碎乃，如標(biāo)題、文檔類型惠奸、字符編碼梅誓、關(guān)鍵字等摘要信息。
- 主體部分提供網(wǎng)頁的具體內(nèi)容佛南，真正要展示在頁面中梗掰。
- 合理的進(jìn)行縮進(jìn)。
- 標(biāo)簽不區(qū)分大小寫嗅回，但是推薦都是用小寫及穗。
- HTML標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，如
- 1.2 開發(fā)工具
記事本、Sublime绵载、Notepad++拥坛、Dreamweaver、VSCode尘分、WebStrom等猜惋。 - 1.3 瀏覽器
常見瀏覽器，IE微軟培愁、Chrome谷歌著摔、Firefox火狐、Safari蘋果
瀏覽器的作用是讀取HTML文件定续，并以網(wǎng)頁的形式顯示
瀏覽器不會(huì)直接顯示HTML標(biāo)簽谍咆，而是使用標(biāo)簽來解釋網(wǎng)頁的內(nèi)容
2.標(biāo)簽
- 2.1標(biāo)簽組成
一個(gè)完整的HTML標(biāo)簽組成
<標(biāo)簽名 屬性名="屬性值">內(nèi)容</標(biāo)簽名>
注意：屬性值要用引號(hào)引起來，一般使用雙引號(hào)
- 2.2 標(biāo)簽分類
根據(jù)標(biāo)簽是否關(guān)閉私股，分為：關(guān)閉型摹察，非關(guān)閉型- 關(guān)閉型：有結(jié)束標(biāo)簽，即成對(duì)出現(xiàn)
<title></title>
<body></body>
- 非關(guān)閉型
<meta>
<br>
<hr>
根據(jù)標(biāo)簽是否獨(dú)占一行倡鲸，分為塊級(jí)標(biāo)簽供嚎，行級(jí)標(biāo)簽
- 塊級(jí)標(biāo)簽：顯示為塊狀，獨(dú)自占一行
<h1></h1>
- 行級(jí)標(biāo)簽：不會(huì)獨(dú)占一行峭状，在行內(nèi)顯示
<span></span>
3.注釋
注釋在瀏覽器中是不會(huì)顯示的克滴，用來標(biāo)注解釋，但通過查看網(wǎng)頁源代碼是可以被看到的优床。
<!-- 注釋的內(nèi)容 -->
4.實(shí)體字符
也稱為特殊字符劝赔，用來顯示一些特殊符號(hào)，如< 胆敞、> 着帽、&杂伟、空格等。
語法：
&實(shí)體字符名稱;
常用實(shí)體字符
< < 小于號(hào) less than
> > 大于號(hào) greater than
空格 space 對(duì)于連續(xù)的空白字符（包括空格仍翰，縮進(jìn)赫粥，換行等），在瀏覽器中顯示時(shí)只會(huì)顯示為一個(gè)空格
& & 與
" " 雙引號(hào)
© ? 版權(quán)符號(hào) copyright
® ? 注冊(cè)符號(hào) register
× × 關(guān)閉符號(hào) close
注意：實(shí)體字符名稱是區(qū)分大小寫的
5.文檔類型
在HTML文檔第一行歉备，使用<!DOCTYPE>聲明HTML文檔類型傅是，用來告訴瀏覽器當(dāng)前頁面的文檔類型匪燕。
目前使用的HTML5：<!DOCTYPE html>
三蕾羊、常用標(biāo)簽
1.基本標(biāo)簽
1.1 有序列表
ol：ordered list
li：list item
默認(rèn)使用阿拉伯?dāng)?shù)字，從1開始標(biāo)記帽驯，可以通過屬性進(jìn)行修改
- type屬性：設(shè)置列表前的標(biāo)記符號(hào)龟再，取值：數(shù)字1、字母a或A尼变，羅馬數(shù)字i或I
- start屬性：設(shè)置起始值利凑，必須為數(shù)字
1.2 無序列表
ul：unordered list
li：list item
默認(rèn)使用實(shí)心圓作為符號(hào)標(biāo)記，可以通過屬性進(jìn)行修改
- type：設(shè)置列表前的符號(hào)標(biāo)記嫌术，取值：disc實(shí)心圓（默認(rèn)）哀澈、circle空心圓、square正方形度气、none不顯示符號(hào)
1.3 定義列表
dl：definition list
dt：definition title
dd：definition description
1.4 水平線標(biāo)簽
hr：horizontal
常用屬性：
- color：顏色
兩種寫法：
顏色名稱割按，如red、green磷籍、blue等
16進(jìn)制的RGB值：每個(gè)顏色的值在0-255之間适荣，轉(zhuǎn)換為16進(jìn)制為00-FF，如#FFFFFF - size：粗細(xì)
- width：寬度
兩種寫法：
像素院领，絕對(duì)值（固定值）
比例弛矛，百分比，相對(duì)于父容器寬度的百分比 - align：對(duì)齊方式
left比然、right丈氓、center
1.5 圖像標(biāo)簽
img：image
常見圖片格式：jpg、png强法、gif扒寄、bmp
常用屬性：
- src：source 指定圖片的路徑
- alt：當(dāng)圖片無法顯示時(shí)的提示信息
- title：當(dāng)鼠標(biāo)停留在圖片上時(shí)，顯示的信息
- width/height：設(shè)置圖片的寬和高
默認(rèn)顯示圖片原有大小拟烫，如果只設(shè)置一個(gè)值會(huì)按比例進(jìn)行縮放该编。
兩種寫法：
像素，絕對(duì)值
百分比硕淑，相對(duì)值课竣，相對(duì)于父容器尺寸的百分比
2.其他標(biāo)簽
為了更好的語義化
3.頭部標(biāo)簽
- meta 定義網(wǎng)頁的摘要信息嘉赎，如字符編碼、關(guān)鍵字于樟、描述公条、作者等。
- title 定義網(wǎng)頁的標(biāo)題迂曲。
- style 定義內(nèi)部css樣式
- link 引用外部的css樣式
- script 定義或引用腳本
- base定義基礎(chǔ)路徑
默認(rèn)以當(dāng)前文件所在位置為相對(duì)路徑的參照
4.標(biāo)簽嵌套
一個(gè)標(biāo)簽嵌套著另一個(gè)標(biāo)簽靶橱，但是標(biāo)簽的嵌套是有要求的，如：
<p style="width: 300px; height: 300px; background-color: green;">
<div style="width: 200px; height: 200px; background-color: blue;">
world
</div>
</p>
瀏覽器渲染后顯示頁面的代碼可能與編碼時(shí)有所不同
Chrome瀏覽器提供的開發(fā)人員工具路捧，用來幫助開發(fā)人員查看和調(diào)試頁面
如何打開：
- 在頁面空白處右擊——>檢查/審查/查看元素
- 按F12
常用工具：
- Elements：從瀏覽器的角度查看頁面关霸，瀏覽器渲染頁面時(shí)的結(jié)構(gòu)內(nèi)容
- Console：控制臺(tái)，顯示各種警告和錯(cuò)誤信息
- Network：查看網(wǎng)絡(luò)請(qǐng)求相關(guān)信息杰扫，瀏覽器向服務(wù)器請(qǐng)求了哪些資源队寇、資源大小、加載資源消耗的時(shí)間
四章姓、超鏈接
1.簡(jiǎn)介
使用超鏈接可以從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面佳遣，實(shí)現(xiàn)頁面間的導(dǎo)航
超鏈接的三種類型：
-普通鏈接/頁面間鏈接，跳轉(zhuǎn)到另一個(gè)頁面
- 錨鏈接凡伊，跳轉(zhuǎn)到錨點(diǎn)
- 功能性鏈接零渐，實(shí)現(xiàn)特殊功能
2.基本用法
使用<a>標(biāo)簽創(chuàng)建超鏈接
語法：
<a href="鏈接的地址" target="鏈接打開的位置">鏈接文本或圖像</a>
常用屬性：
- href：鏈接地址，連接路徑
- target：鏈接打開位置系忙，取值：
_self(自身诵盼、當(dāng)前，默認(rèn)值)
_blank(空白笨觅，新的)
_parent(父層框架)
_top(頂層框架)
路徑分類：
- 相對(duì)路徑
相對(duì)于當(dāng)前文件的路徑
不是以根開始的路徑
.表示當(dāng)前路徑
..表示上一級(jí)路徑 - 絕對(duì)路徑
以根開始的路徑
http://www.baidu.com
3.錨鏈接
3.1 簡(jiǎn)介
點(diǎn)擊鏈接后跳轉(zhuǎn)指定的位置(錨點(diǎn)anchor)
錨鏈接的分類：
- 頁面內(nèi)的錨鏈接
- 頁面間的錨鏈接
3.2 頁面內(nèi)的錨鏈接
步驟：
1.定義錨點(diǎn)（標(biāo)記）
<a name="錨點(diǎn)名稱">目標(biāo)位置</a>
或者
<div id="錨點(diǎn)名稱">鏈接文本</a>
2.連接錨點(diǎn)
<a href="#錨點(diǎn)名稱">鏈接文本</a>
3.3 頁面間的錨鏈接
<a href="目標(biāo)頁面#錨點(diǎn)名稱">鏈接文本</a>
4.功能性鏈接
5.URL
5.1 簡(jiǎn)介
URL：Uniform Resource Locator 統(tǒng)一資源定位符拦耐，用來定位資源所在位置。
5.2 組成
https://tieba.baidu.com/web/views/index.html?name=tom&age=21&sex=male#first
一個(gè)完整的URL由8部分組成：
協(xié)議 protocol见剩，如
http 超文本傳輸協(xié)議 (Hyper Text Transfer Protocol)杀糯，用來訪問網(wǎng)站
https 更加安全的協(xié)議
ftp 文件傳輸協(xié)議(File Transfer Protocol)，用來訪問服務(wù)器上的文件苍苞，實(shí)現(xiàn)文件的上傳和下載主機(jī)名 hostname 服務(wù)器地址固翰，如
tieba.baidu.com端口 port 位于主機(jī)名后面，使用冒號(hào)隔開
不同的協(xié)議使用不同的端口號(hào)羹呵，如http使用80骂际，https使用443，ftp使用21
如果使用默認(rèn)端口冈欢，則可以省略不寫
如果使用的不是默認(rèn)的端口歉铝，則必須指定端口路徑 path 目標(biāo)文件所在的路徑結(jié)構(gòu)，如
web/views資源 resource 要訪問的目標(biāo)文件凑耻，如
index.html查詢字符串 query string 也成為參數(shù)
在資源后面太示，使用?開頭的一組名稱
名稱和值之間使用“=”隔開柠贤，多個(gè)之間使用“&”隔開，如：
?name=tom&age=21&sex=male錨點(diǎn) anchor类缤，在資源后面以“#”開頭的文本,如：
#first表示鏈接到指定的錨點(diǎn)身份認(rèn)證 authentication臼勉，指定身份信息，
如ftp://賬戶:密碼@ftp.hxx.com/note/HTML.md
五餐弱、表格
1.簡(jiǎn)介
表格是一個(gè)規(guī)則的行列結(jié)構(gòu)宴霸，每個(gè)表格都是由若干行組成，每行由若干單元格組成
table row column
2.基本結(jié)構(gòu)
2.1 table標(biāo)簽
用來定義表格
常用屬性
- border 邊框膏蚓，默認(rèn)為0
- width/height 寬度/高度
- align 水平對(duì)齊方式瓢谢，取值：left、center降允、right
- bordercolor 邊框顏色
- bgcolor 背景顏色
- background 使用圖片作為背景
- cellspace 間距 單元格與單元格之間的間距
- cellpadding 邊距 單元格內(nèi)的內(nèi)容與邊框的距離
2.2 tr標(biāo)簽
用來定義行恩闻，table row
常用屬性：
- align 水平對(duì)齊艺糜，取值：left剧董，center，right
- valign 垂直對(duì)齊 vertical 取值：top middle bottom
- bgcolor 背景顏色
- background 背景圖片
2.3 td標(biāo)簽
用來定義列 table data
常用屬性：align valign bgcolor background
注意：table中至少有一個(gè)tr破停，tr中至少有一個(gè)td翅楼，數(shù)據(jù)必須放到單元格中
3.合并單元格
也稱為表格的跨行跨列
兩個(gè)屬性：
- rowspan
設(shè)置單元格所跨越的行數(shù)，如rowspan=2真慢，表示跨越了2行 - colspan
設(shè)置單元格所跨的列數(shù)毅臊，如colspan=4，表示跨越了4列
步驟：
1.在跨越的單元格中設(shè)置rowspan或colspan
2.將被跨越的單元格刪除
注意：必須保證每行的實(shí)際列數(shù)是相同的黑界，否則就會(huì)發(fā)生錯(cuò)亂
4.高級(jí)標(biāo)簽
4.1 caption標(biāo)簽
表格的標(biāo)簽
4.2 thead標(biāo)簽
表格的頭部 table head
4.3 th標(biāo)簽
表格的頭部標(biāo)簽 table head title
一般用在thead中管嬉，設(shè)置頭部的標(biāo)題，主要用來替代<td>朗鸠，相對(duì)于<td>進(jìn)行了加粗
4.4 tbody標(biāo)簽
表格的主體 table body
4.5 tfoot標(biāo)簽
表格的底部 table foot
六蚯撩、表單
1.簡(jiǎn)介
是一個(gè)包含若干表單元素的區(qū)域，用于獲取不同類型的用戶信息
表單元素是允許用戶在表單中輸入信息的元素烛占，如：文本框胎挎、密碼框、單選按鈕忆家、復(fù)選框犹菇、下拉列表、按鈕等
2.表單結(jié)構(gòu)
2.1 表單的語法
<form action="表單提交地址" method="提交方式">
多個(gè)表單元素
</form>
2.2 form標(biāo)簽
用來定義表單芽卿，可以包含多個(gè)表單元素
常用屬性：
- action
表單提交的地址揭芍，即處理數(shù)據(jù)的程序，默認(rèn)為當(dāng)前頁面 - method
提交表單的請(qǐng)求方式卸例，取值：get(默認(rèn)值)称杨、post
get和post的區(qū)別：
get：以查詢字符串的形式進(jìn)行提交流酬，數(shù)據(jù)在地址欄中可以被看到，限制長(zhǎng)度列另，是不安全的芽腾。
post：以表單數(shù)據(jù)組的形式進(jìn)行提交，在地址欄中不顯示页衙，長(zhǎng)度無限制摊滔，比較安全。 - enctype
指定提交數(shù)據(jù)的編碼方式店乐，取值：application/x-www-form-urlencoded(默認(rèn)值)艰躺、multipart/form-data(文件上傳時(shí)使用)
3.表單元素
<input type="表單元素類型" name="名稱" value="初始值">
大多數(shù)表單元素都是使用<input>標(biāo)簽來定義，通過設(shè)置type屬性定義不同的表單元素
3.1 單行文本框
常用屬性：
- name 指定表單名稱眨八，如果沒有指定name腺兴，那么該表單元素的數(shù)據(jù)是無法提交的
- value 表示表單元素的初始值
- size 指定表單元素的寬度
- maxlength 指定最大字符數(shù)，默認(rèn)沒有限制
- readonly 只讀
- disabled 禁用
readonly和disabled的區(qū)別：前者的數(shù)據(jù)可以被提交廉侧，后者不可以被提交页响。 - enable 啟用
表單元素被提交的兩個(gè)條件：1.必須指定了name屬性 2.非disabled
3.2 單選按鈕
常用屬性：
- name 名稱，多個(gè)radio的name屬性值必須相同段誊，才能實(shí)現(xiàn)互斥
- value 值
- checked 是否選中闰蚕，兩種狀態(tài)，選中连舍、未選中
3.3 復(fù)選框
常用屬性與radio類似
3.4 文件選擇器
常用屬性：
- name 名稱
- accept 設(shè)置可選的文件類型没陡，用來限制上傳的文件類型
使用MIME格式字符串對(duì)資源類型進(jìn)行限制
常見MIME類型：- 純文本，textplain text/html text/xml
- 圖像索赏，image/jpeg image/png image/gif
4.特殊表單元素
4.1 下拉列表
select常用屬性：
- name 名稱
- size 行數(shù)盼玄，可以同時(shí)顯示多個(gè)選項(xiàng)
- multiple 允許同時(shí)選擇多個(gè)
- disabled 禁用
option常用屬性：
- value 選項(xiàng)值（必須指定）
- selected 默認(rèn)選中的
optgroup常用屬性
- label 分組的標(biāo)題
4.2 文本域
常用屬性：
- name 名稱
- rows 指定行數(shù)
- cols 指定列數(shù)
5.其他表單元素
5.1 label標(biāo)簽
為表單元素提供標(biāo)簽，當(dāng)選中l(wèi)abel標(biāo)簽中的文本內(nèi)容時(shí)會(huì)自動(dòng)將焦點(diǎn)切換到與之關(guān)聯(lián)的表單元素
常用屬性：
- for 必須將該屬性的值設(shè)置為與之關(guān)聯(lián)的表單元素的id屬性值相同
注意：幾乎所有html標(biāo)簽都具有id屬性潜腻，且id值必須是唯一的
5.2 button標(biāo)簽
也表示按鈕埃儿，與input類似
語法：
<button type="按鈕類型">這是按鈕的文本和圖像</button>
常用屬性：
- type 按鈕類型，取值：submit(默認(rèn))砾赔、reset蝌箍、button
5.3 fieldset和legend標(biāo)簽
fieldset標(biāo)簽，對(duì)表單元素進(jìn)行分組
legend標(biāo)簽暴心，對(duì)分組添加標(biāo)題
七妓盲、內(nèi)嵌框架
1.簡(jiǎn)介
使用ifream框架可以在一個(gè)頁面中去引用另一個(gè)頁面，從而實(shí)現(xiàn)復(fù)用专普，比較靈活悯衬。
2.基本用法
語法：
<iframe src=""></iframe>
常用屬性：
- src 引用的頁面
- width/height 寬度和高度
- frameborder 是否顯示框架的邊框，取值：1(顯示)或0(不顯示)
- scrolling 是否顯示滾動(dòng)條，取值：yes筋粗、no策橘、auto
- name 為內(nèi)嵌框架設(shè)置名稱
3.在框架中打開鏈接
<iframe name="hello"></iframe>
<a href="鏈接地址" target="hello">鏈接文本或圖像</a>
八、HTML5簡(jiǎn)介
1.發(fā)展
W3C于1992.12發(fā)布了HTML4.0.1標(biāo)準(zhǔn)
W3C于2014.10發(fā)布HTML5標(biāo)準(zhǔn)
2.特點(diǎn)
- 取消了過時(shí)的標(biāo)簽娜亿，如font丽已、center等，它們僅用于展示外觀
- 增加了一些更具有語義化的標(biāo)簽买决，如header沛婴、footer、aside等
- 增加了一些新功能標(biāo)簽督赤，如audio嘁灯、video、canvas等
- 增加了一些表單控件躲舌，如email丑婿、date、time没卸、url羹奉、search等
- 可以直接在瀏覽器中繪畫(canvas)，無序flash
- 增加了本地存儲(chǔ)的支持
3.兼容性
http://caniuse.com
提供了各瀏覽器版本對(duì)HTML5和CSS3規(guī)范的支持程度
九办悟、HTML5新增內(nèi)容
1.結(jié)構(gòu)化相關(guān)標(biāo)簽
用來進(jìn)行頁面結(jié)構(gòu)的布局尘奏，本身無任何特殊樣式滩褥，需要使用CSS進(jìn)行樣式設(shè)置
- article 文章 定義一個(gè)獨(dú)立的內(nèi)容病蛉，完整的文章
- section 章節(jié) 定義文檔的章節(jié)、段落
- header 文章的頭部瑰煎、頁眉铺然、標(biāo)題
- footer 文章的底部、頁腳酒甸、標(biāo)注
- aside 定義側(cè)邊欄
- figure 圖片區(qū)域
- figcaption 為圖片區(qū)域定義標(biāo)題
- nav 定義導(dǎo)骯菜單
注意：結(jié)構(gòu)標(biāo)簽只是表明各部分的角色魄健，本身并無實(shí)際的外觀樣式，與普通div相同
2.語義相關(guān)標(biāo)簽
2.1 mark標(biāo)簽
標(biāo)注插勤，用來突出顯示文本內(nèi)容沽瘦，默認(rèn)添加黃色背景
2.2 time標(biāo)簽
定義日期和時(shí)間，便于內(nèi)容被搜索引擎更好的搜索到
2.3 details和summary標(biāo)簽
默認(rèn)會(huì)顯示summary中的內(nèi)容农尖，點(diǎn)擊后顯示details中的內(nèi)容
注意：并不是所有瀏覽器都兼容析恋、Chrome、Opera支持
2.4meter標(biāo)簽
計(jì)量?jī)x盛卡，表示度量
常用屬性：
- max 定義最大值助隧，默認(rèn)為1
- min 定義最小值 默認(rèn)為0
- value 定義當(dāng)前值
- high 定義限定為高的值
- low 定義限定為低的值
- optimum 定義最佳值
規(guī)則：
1.如果optimum大于high則表示越大越好
當(dāng)value大于high時(shí)為綠色
當(dāng)value位于low和high之間為黃色
當(dāng)value小于low時(shí)為紅色
2.如果optimum小于low則表示越小越好
當(dāng)value大于high時(shí)為紅色
當(dāng)value位于low和high之間為黃色
當(dāng)value小于low時(shí)為綠色
3.當(dāng)optimum介于low和high之間表示比較好
當(dāng)value大于high時(shí)為黃色
當(dāng)value小于low時(shí)為黃色
介于low和high之間時(shí)為綠色
2.5 progress標(biāo)簽
進(jìn)度條，表示進(jìn)度
常用屬性：
- value 定義當(dāng)前值
- max 定義完成的值
3.表單相關(guān)
3.1 新增表單元素
新增以下type類型：
- email 定義郵件類型
- url 接收地址
- tel 接收電話號(hào)碼滑沧，目前僅在移動(dòng)設(shè)備上有效
- number/range 接收數(shù)字/數(shù)字滑塊并村，包含min巍实、max、step
- date/month/week/time/datetime 日期時(shí)間選擇器
- color 顏色拾取
作用：
- 具有格式校驗(yàn)功能
- 可以與移動(dòng)設(shè)備的鍵盤相關(guān)聯(lián)
3.2 新增表單屬性
form標(biāo)簽屬性：
- autocomplete 是否啟用表單的自動(dòng)完成功能哩牍，取值：on(默認(rèn))棚潦、off
- novalidate 提交表單時(shí)不進(jìn)行校驗(yàn)，默認(rèn)會(huì)進(jìn)行表單校驗(yàn)
3.3 新增表單元素屬性
新增表單元素屬性：input/select/textarea等
- placeholder 提示文字
- required 是否必填
- autocomplete 是否啟用該表單元素的自動(dòng)完成功能
- autofocus 設(shè)置初始的焦點(diǎn)元素
- pattern 使用正則表達(dá)式(RegExp)膝昆、進(jìn)行數(shù)據(jù)校驗(yàn)
- list 使文本元素?fù)碛邢吕斜淼墓δ芡呤ⅲ枰渲胐atalist和option標(biāo)簽
- form 可以將表單元素寫在form標(biāo)簽外部，通過該屬性關(guān)聯(lián)指定的表單
4.多媒體相關(guān)
4.1 audio標(biāo)簽
在頁面中插入音頻外潜，不同瀏覽器對(duì)音頻格式的支持也不同
audio常用屬性：
- src 音頻文件的來源
- controls 是否顯示控制面板原环，默認(rèn)不顯示
- autoplay 是否自動(dòng)播放，默認(rèn)不自動(dòng)播放
- loop 是否循環(huán)播放
- muted 是否靜音
- preload 是否預(yù)加載处窥，取值：none不會(huì)預(yù)加載嘱吗、auto預(yù)加載(默認(rèn)值)、metadata只預(yù)加載元數(shù)據(jù)滔驾，如果設(shè)置了autoplay谒麦，則該屬性無意義
可以結(jié)合source標(biāo)簽使用，指定多個(gè)音頻文件哆致，瀏覽器會(huì)檢測(cè)并使用第一個(gè)可用的音頻文件
<audio>
<source src="音頻文件">
</audio>
4.2 video標(biāo)簽
在頁面中插入視頻文件绕德，不同瀏覽器對(duì)視頻格式的支持也是不同的
用法與audio標(biāo)簽基本相同，增加屬性：
- width/height 視頻播放器尺寸
- poster 在視頻加載前顯示的圖片
<video src="視頻文件" autoplay width="600px" poster="圖片名"></video>
