一、HTML5的新特性
的新增特性主要是針對于以前的不足惠啄，增加了一些
慎恒、
和
等任内。
這些新特性都有兼容性問題，基本是IE9+以上版本的瀏覽器才支持融柬，如果不考慮兼容性問題死嗦，可以大量使用這些新特性。
聲明：
1.新特性增加了很多粒氧，但是我們專注于開發(fā)常用的新特性越除。
2.基礎(chǔ)班我們講解部分新特性，到了就業(yè)辦還會繼續(xù)講解其他特性外盯。
1.1摘盆、HTML5新增的語義化標(biāo)簽
- <header>：頭部標(biāo)簽
- <nav>：導(dǎo)航標(biāo)簽
- <article>：內(nèi)容標(biāo)簽
- <section>：定義文檔某個區(qū)域
- <aside>：側(cè)邊欄標(biāo)簽
- <footer>：尾部標(biāo)簽
image.png
- 這種語義化標(biāo)準(zhǔn)主要是針對
的
- 這些新標(biāo)簽頁面中可以使用
- 在IE9中，需要把這些元素轉(zhuǎn)換為
- 其實(shí)门怪，我們移動端更喜歡使用這些標(biāo)簽
- HTML5還增加了很多其他標(biāo)簽骡澈，我們后面再慢慢學(xué)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML5新增語義化標(biāo)簽</title>
<style>
header, nav {
height: 120px;
background-color: pink;
border-radius: 15px;
width: 800px;
margin: 15px auto;
}
section {
width: 500px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<header>頭部標(biāo)簽</header>
<nav>導(dǎo)航欄標(biāo)簽</nav>
<section>某個區(qū)域</section>
</body>
</html>
image.png
1.2、HTML5新增的多媒體標(biāo)簽
HTML5在不使用插件的情況下掷空，也可以原生的支持視頻格式文件的播放肋殴，當(dāng)然，支持的格式是有限的坦弟。
1.2.1护锤、視頻<video>
當(dāng)前<video>元素支持三種視頻格式：盡量使用mp4格式
| 瀏覽器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | Yes | No | No |
| Chrome | Yes | Yes | Yes |
| Firefox | Yes。從Firefox 21版本開始酿傍，Linux系統(tǒng)從Firefox 30開始 | Yes | Yes |
| Safari | Yes | No | No |
| Opera | Yes烙懦。從Opera 25版本開始 | Yes | Yes |
語法
<video src="文件地址" controls="controls"></video>
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg">
<source src="move.mp4" type="video/mp4">
您的瀏覽器暫不支持<video>標(biāo)簽播放視頻
</video>
視頻<video>——常見屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 視頻就緒自動播放(谷歌瀏覽器需要添加muted來解決自動播放問題) |
| controls | controls | 向用戶顯示播放控件 |
| width | pixels(像素) | 設(shè)置播放器寬度 |
| height | pixels(像素) | 設(shè)置播放器高度 |
| loop | loop | 播放完是否繼續(xù)播放該視頻，循環(huán)播放 |
| preload | auto(預(yù)先加載視頻)赤炒、none(不應(yīng)加載視頻) | 規(guī)定是否預(yù)加載視頻(如果有了autoplay 就忽略該屬性) |
| src | url | 視頻url地址 |
| poster | Imgurl | 加載等待的畫面圖片 |
| muted | muted | 靜音播放 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML5新增視頻標(biāo)簽</title>
<style>
video {
width: 100%;
}
</style>
</head>
<body>
<video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/mi9.jpg"></video>
</body>
</html>
1.2.2 音頻<audio>
當(dāng)前<audio>元素支持三種音頻格式：
| 瀏覽器 | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer | Yes | No | No |
| Chrome | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes |
| Safari | Yes | Yes | No |
| Opera | Yes | Yes | Yes |
語法
<audio src="文件地址" controls="controls"></audio>
<audio controls="controls">
<source src="happy.mp3" type="audio/mpeg">
<source src="happy.ogg" type="audio/ogg">
您的瀏覽器暫不支持<audio>標(biāo)簽氯析。
</audio>
常見屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出現(xiàn)該屬性，則音頻在就緒后馬上播放莺褒。 |
| controls | controls | 如果出現(xiàn)該屬性掩缓，則向用戶顯示控件，比如播放按鈕遵岩。 |
| loop | loop | 如果出現(xiàn)該屬性你辣，則每當(dāng)音頻結(jié)束時重新開始播放。 |
| src | url | 要播放的音頻的URL尘执。 |
- 谷歌瀏覽器把音頻和視頻自動播放禁止了舍哄。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML5新增音頻標(biāo)簽</title>
</head>
<body>
<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
</body>
</html>
1.2.3、多媒體標(biāo)簽總結(jié)
- 音頻標(biāo)簽和視頻標(biāo)簽使用方式基本一致誊锭。
- 瀏覽器支持情況不同表悬。
- 谷歌瀏覽器把音頻和視頻自動播放禁止了。
- 我們可以給視頻標(biāo)簽添加muted屬性來靜音播放視頻丧靡，音頻不可以(可以通過JavaScript解決)
- 視頻標(biāo)簽是重點(diǎn)蟆沫，我們經(jīng)常設(shè)置自動播放叉讥，不使用controls控件，循環(huán)和設(shè)置大小屬性饥追。
1.3、HTML5新增的input類型
| 屬性值 | 說明 |
|---|---|
| type="email" | 限制用戶輸入必須為Email類型 |
| type="url" | 限制用戶輸入必須為URL類型 |
| type="date" | 限制用戶輸入必須為日期類型 |
| type="time" | 限制用戶輸入必須為時間類型 |
| type="month" | 限制用戶輸入必須為月類型 |
| type="week" | 限制用戶輸入必須為周類型 |
| type="number" | 限制用戶輸入必須為數(shù)字類型 |
| type="tel" | 手機(jī)號碼 |
| type="search" | 搜索框 |
| type="color" | 生成一個顏色選擇表單 |
- 重點(diǎn)記坠蘅：number 但绕、 tel 、 search這三個
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 我們驗(yàn)證的時候必須添加form表單域 -->
<form action="">
<ul>
<li>郵箱: <input type="email" /></li>
<li>網(wǎng)址: <input type="url" /></li>
<li>日期: <input type="date" /></li>
<li>時間: <input type="time" /></li>
<li>數(shù)量: <input type="number" /></li>
<li>手機(jī)號碼: <input type="tel" /></li>
<li>搜索: <input type="search" /></li>
<li>顏色: <input type="color" /></li>
<!-- 當(dāng)我們點(diǎn)擊提交按鈕就可以驗(yàn)證表單了 -->
<li> <input type="submit" value="提交"></li>
</ul>
</form>
</body>
</html>
image.png
1.4 HTML5新增的表單屬性
| 屬性 | 值 | 說明 |
|---|---|---|
| required | required | 表單擁有該屬性表示其內(nèi)容不能為空惶看，必填 |
| placeholder | 提示文本 | 表單的提示信息捏顺，存在默認(rèn)值將不顯示 |
| autofocus | autofocus | 自動聚集屬性，頁面加載完成自動聚集到指定表單 |
| autocomplete | off/on | 當(dāng)用戶在字段開始鍵入時纬黎，瀏覽器基于之前鍵入過的值幅骄，應(yīng)該顯示出在字段中填寫的選項。默認(rèn)已經(jīng)打開本今，如autocomplete="on"拆座，關(guān)閉autocomplete="off"需要放在表單內(nèi)，同時加上name屬性冠息，同時成功提交 |
| multiple | multiple | 可以多選文件提交 |
input::placeholder {
color: pink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML5新增表單屬性</title>
<style>
input::placeholder {
color: pink;
}
</style>
</head>
<body>
<form action="">
<input type="search" name="sear" id="" required="required" placeholder="pink老師" autofocus="autofocus" autocomplete="off">
<input type="file" name="" id="" multiple="multiple">
<input type="submit" value="提交">
</form>
</body>
</html>
image.png
