一、什么是 HTML5
-
HTML5的概念與定義- 定義：
HTML5定義了HTML標(biāo)準(zhǔn)的最新版本，是對(duì)HTML的第五次重大修改，號(hào)稱下一代的HTML - 兩個(gè)概念：
- 是一個(gè)新版本的
HTML語(yǔ)言，定義了新的標(biāo)簽、特性和屬性 - 擁有一個(gè)強(qiáng)大的技術(shù)集，這些技術(shù)集是指：
HTML5、CSS3、javascript, 這也是廣義上的HTML5
- 是一個(gè)新版本的
- 定義：
-
HTML5拓展了哪些內(nèi)容- 語(yǔ)義化標(biāo)簽
- 本地存儲(chǔ)
- 兼容特性
-
2D、3D - 動(dòng)畫(huà)、過(guò)渡
-
CSS3特性 - 性能與集成
-
HTML5的現(xiàn)狀絕對(duì)多數(shù)新的屬性，都已經(jīng)被瀏覽器所支持，最新版本的瀏覽器已經(jīng)開(kāi)始陸續(xù)支持最新的特性，
總的來(lái)說(shuō)：
HTML5已經(jīng)是大勢(shì)所趨
二、HTML5 新增標(biāo)簽
什么是語(yǔ)義化
-
新增了那些語(yǔ)義化標(biāo)簽
header--- 頭部標(biāo)簽nav--- 導(dǎo)航標(biāo)簽article--- 內(nèi)容標(biāo)簽section--- 塊級(jí)標(biāo)簽aside--- 側(cè)邊欄標(biāo)簽footer--- 尾部標(biāo)簽
-
使用語(yǔ)義化標(biāo)簽的注意
語(yǔ)義化標(biāo)簽主要針對(duì)搜索引擎
新標(biāo)簽可以使用一次或者多次
在
IE9瀏覽器中，需要把語(yǔ)義化標(biāo)簽都轉(zhuǎn)換為塊級(jí)元素語(yǔ)義化標(biāo)簽，在移動(dòng)端支持比較友好，
另外，
HTML5新增的了很多的語(yǔ)義化標(biāo)簽，隨著課程深入，還會(huì)學(xué)習(xí)到其他的
三、多媒體音頻標(biāo)簽
- 多媒體標(biāo)簽有兩個(gè)，分別是
- 音頻 --
audio - 視頻 --
video
- 音頻 --
-
audio標(biāo)簽說(shuō)明- 可以在不使用標(biāo)簽的情況下，也能夠原生的支持音頻格式文件的播放，
- 但是：播放格式是有限的
- audio 支持的音頻格式
- audio 目前支持三種格式
- audio 的參數(shù)
5、audio 代碼演示
<body>
<!-- 注意：在 chrome 瀏覽器中已經(jīng)禁用了 autoplay 屬性 -->
<!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->
<!--
因?yàn)椴煌瑸g覽器支持不同的格式，所以我們采取的方案是這個(gè)音頻準(zhǔn)備多個(gè)文件
-->
<audio controls>
<source src="./media/snow.mp3" type="audio/mpeg" />
</audio>
</body>
四、多媒體視頻標(biāo)簽
-
video 視頻標(biāo)簽
- 目前支持三種格式
-
語(yǔ)法格式
<video src="./media/video.mp4" controls="controls"></video> video 參數(shù)
-
video 代碼演示
<body> <!-- <video src="./media/video.mp4" controls="controls"></video> --> <!-- 谷歌瀏覽器禁用了自動(dòng)播放功能，如果想自動(dòng)播放，需要添加 muted 屬性 --> <video controls="controls" autoplay muted loop poster="./media/pig.jpg"> <source src="./media/video.mp4" type="video/mp4"> <source src="./media/video.ogg" type="video/ogg"> </video> </body> -
多媒體標(biāo)簽總結(jié)
- 音頻標(biāo)簽與視頻標(biāo)簽使用基本一致
- 多媒體標(biāo)簽在不同瀏覽器下情況不同，存在兼容性問(wèn)題
- 谷歌瀏覽器把音頻和視頻標(biāo)簽的自動(dòng)播放都禁止了
- 谷歌瀏覽器中視頻添加 muted 標(biāo)簽可以自己播放
- 注意：重點(diǎn)記住使用方法以及自動(dòng)播放即可，其他屬性可以在使用時(shí)查找對(duì)應(yīng)的手冊(cè)
五、新增 input 標(biāo)簽
六、新增表單屬性
七、CSS3 屬性選擇器(上)
- 什么是
CSS3- 在
CSS2的基礎(chǔ)上拓展、新增的樣式
- 在
-
CSS3發(fā)展現(xiàn)狀- 移動(dòng)端支持優(yōu)于
PC端 -
CSS3目前還草案，在不斷改進(jìn)中 -
CSS3相對(duì)H5，應(yīng)用非常廣泛
- 移動(dòng)端支持優(yōu)于
- 屬性選擇器列表
image.png
-
屬性選擇器代碼演示
button { cursor: pointer; } button[disabled] { cursor: default }
八、CSS3 屬性選擇器(下)
-
代碼演示
input[type=search] { color: skyblue; } span[class^=black] { color: lightgreen; } span[class$=black] { color: lightsalmon; } span[class*=black] { color: lightseagreen; }
九、結(jié)構(gòu)偽類選擇器
- 屬性列表
-
代碼演示
ul li:first-child { background-color: lightseagreen; } ul li:last-child { background-color: lightcoral; } ul li:nth-child(3) { background-color: aqua; }
十、nth-child 參數(shù)詳解
- nth-child 詳解
- 注意：本質(zhì)上就是選中第幾個(gè)子元素
- n 可以是數(shù)字、關(guān)鍵字、公式
- n 如果是數(shù)字，就是選中第幾個(gè)
- 常見(jiàn)的關(guān)鍵字有
even偶數(shù)、odd奇數(shù) - 常見(jiàn)的公式如下(如果 n 是公式，則從 0 開(kāi)始計(jì)算)
- 但是第 0 個(gè)元素或者超出了元素的個(gè)數(shù)會(huì)被忽略
-
代碼演示
<style> /* 偶數(shù) */ ul li:nth-child(even) { background-color: aquamarine; } /* 奇數(shù) */ ul li:nth-child(odd) { background-color: blueviolet; } /*n 是公式，從 0 開(kāi)始計(jì)算 */ ul li:nth-child(n) { background-color: lightcoral; } /* 偶數(shù) */ ul li:nth-child(2n) { background-color: lightskyblue; } /* 奇數(shù) */ ul li:nth-child(2n + 1) { background-color: lightsalmon; } /* 選擇第 0 5 10 15, 應(yīng)該怎么選 */ ul li:nth-child(5n) { background-color: orangered; } /* n + 5 就是從第5個(gè)開(kāi)始往后選擇 */ ul li:nth-child(n + 5) { background-color: peru; } /* -n + 5 前五個(gè) */ ul li:nth-child(-n + 5) { background-color: tan; } </style>
十一、nth-child 和 nt-of-type 的區(qū)別
-
代碼演示
<style> div :nth-child(1) { background-color: lightblue; } div :nth-child(2) { background-color: lightpink; } div span:nth-of-type(2) { background-color: lightseagreen; } div span:nth-of-type(3) { background-color: #fff; } </style> -
區(qū)別
-
nth-child選擇父元素里面的第幾個(gè)子元素，不管是第幾個(gè)類型 -
nt-of-type選擇指定類型的元素
-
十二、偽元素選擇器
- 偽類選擇器
-
偽類選擇器注意事項(xiàng)
-
before和after必須有content屬性 -
before在內(nèi)容前面，after 在內(nèi)容后面 -
before和after創(chuàng)建的是一個(gè)元素，但是屬于行內(nèi)元素 - 創(chuàng)建出來(lái)的元素在
Dom中查找不到，所以稱為偽元素 - 偽元素和標(biāo)簽選擇器一樣，權(quán)重為 1
-
-
代碼演示
<style> div { width: 100px; height: 100px; border: 1px solid lightcoral; } div::after, div::before { width: 20px; height: 50px; text-align: center; display: inline-block; } div::after { content: '德'; background-color: lightskyblue; } div::before { content: '道'; background-color: mediumaquamarine; } </style>
十三、偽元素的案例
-
添加字體圖標(biāo)
p { width: 220px; height: 22px; border: 1px solid lightseagreen; margin: 60px; position: relative; } p::after { content: '\ea50'; font-family: 'icomoon'; position: absolute; top: -1px; right: 10px; }
十四、2D 轉(zhuǎn)換之 translate
-
2D轉(zhuǎn)換-
2D轉(zhuǎn)換是改變標(biāo)簽在二維平面上的位置和形狀 - 移動(dòng)：
translate - 旋轉(zhuǎn)：
rotate - 縮放：
scale
-
-
translate語(yǔ)法- x 就是 x 軸上水平移動(dòng)
- y 就是 y 軸上水平移動(dòng)
transform: translate(x, y) transform: translateX(n) transfrom: translateY(n) -
重點(diǎn)知識(shí)點(diǎn)
-
2D的移動(dòng)主要是指 水平、垂直方向上的移動(dòng) -
translate最大的優(yōu)點(diǎn)就是不影響其他元素的位置 -
translate中的100%單位，是相對(duì)于本身的寬度和高度來(lái)進(jìn)行計(jì)算的 - 行內(nèi)標(biāo)簽沒(méi)有效果
-
代碼演示
div {
background-color: lightseagreen;
width: 200px;
height: 100px;
/* 平移 */
/* 水平垂直移動(dòng) 100px */
/* transform: translate(100px, 100px); */
/* 水平移動(dòng) 100px */
/* transform: translate(100px, 0) */
/* 垂直移動(dòng) 100px */
/* transform: translate(0, 100px) */
/* 水平移動(dòng) 100px */
/* transform: translateX(100px); */
/* 垂直移動(dòng) 100px */
transform: translateY(100px)
}
十五、讓一個(gè)盒子水平垂直居中
- 看代碼
十六、2D 轉(zhuǎn)換 rotate
-
rotate 旋轉(zhuǎn)
-
2D旋轉(zhuǎn)指的是讓元素在二維平面內(nèi)順時(shí)針或者逆時(shí)針旋轉(zhuǎn)
-
-
rotate語(yǔ)法/* 單位是：deg */ transform: rotate(度數(shù)) -
重點(diǎn)知識(shí)點(diǎn)
-
rotate里面跟度數(shù)，單位是deg - 角度為正時(shí)，順時(shí)針，角度為負(fù)時(shí)，逆時(shí)針
- 默認(rèn)旋轉(zhuǎn)的中心點(diǎn)是元素的中心點(diǎn)
-
-
代碼演示
img:hover { transform: rotate(360deg) }
