HTML5专属解释
一、什么是 HTML5
- 定義：HTML5 定義了 HTML 標準的最新版本，是對 HTML 的第五次重大修改，號稱下一代的 HTML
- 兩個概念：
- 是一個新版本的 HTML 語言，定義了新的標簽、特性和屬性
- 擁有一個強大的技術集，這些技術集是指： HTML5 、CSS3 、javascript, 這也是廣義上的 HTML5
- 語義化標簽
- 本地存儲
- 兼容特性
- 2D、3D
- 動畫、過渡
- CSS3 特性
- 性能與集成
HTML5 的現狀
絕對多數新的屬性，都已經被瀏覽器所支持，最新版本的瀏覽器已經開始陸續支持最新的特性，
總的來說：HTML5 已經是大勢所趨
二、HTML5 新增標簽
什么是語義化
新增了那些語義化標簽
- header — 頭部標簽
- nav — 導航標簽
- article — 內容標簽
- section — 塊級標簽
- aside — 側邊欄標簽
- footer — 尾部標簽
?
使用語義化標簽的注意
三、多媒體音頻標簽
- 音頻 – audio
- 視頻 – video
- 可以在不使用標簽的情況下，也能夠原生的支持音頻格式文件的播放，
- 但是：播放格式是有限的
audio 支持的音頻格式
-
audio 目前支持三種格式
?
audio 的參數
?
5、audio 代碼演示
<body><!-- 注意：在 chrome 瀏覽器中已經禁用了 autoplay 屬性 --><!-- <audio src="./media/snow.mp3" controls autoplay></audio> --><!-- 因為不同瀏覽器支持不同的格式，所以我們采取的方案是這個音頻準備多個文件--><audio controls><source src="./media/snow.mp3" type="audio/mpeg" /></audio> </body>四、多媒體視頻標簽
video 視頻標簽
- 目前支持三種格式
?
語法格式
<video src="./media/video.mp4" controls="controls"></video>video 參數
?
video 代碼演示
<body><!-- <video src="./media/video.mp4" controls="controls"></video> --><!-- 谷歌瀏覽器禁用了自動播放功能，如果想自動播放，需要添加 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>多媒體標簽總結
- 音頻標簽與視頻標簽使用基本一致
- 多媒體標簽在不同瀏覽器下情況不同，存在兼容性問題
- 谷歌瀏覽器把音頻和視頻標簽的自動播放都禁止了
- 谷歌瀏覽器中視頻添加 muted 標簽可以自己播放
- 注意：重點記住使用方法以及自動播放即可，其他屬性可以在使用時查找對應的手冊
五、新增 input 標簽
六、新增表單屬性
七、CSS3 屬性選擇器(上)
什么是 CSS3
- 在 CSS2 的基礎上拓展、新增的樣式
CSS3 發展現狀
- 移動端支持優于 PC 端
- CSS3 目前還草案，在不斷改進中
- CSS3 相對 H5，應用非常廣泛
屬性選擇器列表
?
屬性選擇器代碼演示
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; }九、結構偽類選擇器
屬性列表
?
代碼演示
ul li:first-child {background-color: lightseagreen; }ul li:last-child {background-color: lightcoral; }ul li:nth-child(3) {background-color: aqua; }十、nth-child 參數詳解
nth-child 詳解
-
注意：本質上就是選中第幾個子元素
-
n 可以是數字、關鍵字、公式
-
n 如果是數字，就是選中第幾個
-
常見的關鍵字有 even 偶數、odd 奇數
-
常見的公式如下(如果 n 是公式，則從 0 開始計算)
-
但是第 0 個元素或者超出了元素的個數會被忽略
?
代碼演示
十一、nth-child 和 nt-of-type 的區別
區別
- nth-child 選擇父元素里面的第幾個子元素，不管是第幾個類型
- nt-of-type 選擇指定類型的元素
十二、偽元素選擇器
偽類選擇器
?
偽類選擇器注意事項
- before 和 after 必須有 content 屬性
- before 在內容前面，after 在內容后面
- before 和 after 創建的是一個元素，但是屬于行內元素
- 創建出來的元素在 Dom 中查找不到，所以稱為偽元素
- 偽元素和標簽選擇器一樣，權重為 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>十三、偽元素的案例
添加字體圖標
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 轉換之 translate
-
2D 轉換是改變標簽在二維平面上的位置和形狀
-
移動： translate
-
旋轉： rotate
-
縮放： scale
- x 就是 x 軸上水平移動
- y 就是 y 軸上水平移動
重點知識點
- 2D 的移動主要是指 水平、垂直方向上的移動
- translate 最大的優點就是不影響其他元素的位置
- translate 中的100%單位，是相對于本身的寬度和高度來進行計算的
- 行內標簽沒有效果
代碼演示
十五、讓一個盒子水平垂直居中
- 看代碼
十六、2D 轉換 rotate
rotate 旋轉
- 2D 旋轉指的是讓元素在二維平面內順時針或者逆時針旋轉
rotate 語法
- rotate 里面跟度數，單位是 deg
- 角度為正時，順時針，角度為負時，逆時針
- 默認旋轉的中心點是元素的中心點
總結
- 上一篇： ios13全选手势_iOS13大揭秘：深
- 下一篇： 在线浏览pdf doc html,前端实