HTML5學習筆記
阿新 • • 發佈：2020-09-08
HTML5
基本標籤
ul標籤的css樣式屬性為list-style-type、list-style-image
新元素
多媒體元素
| 標籤 | 描述 |
|---|---|
<audio> |
定義音訊內容 |
<video> |
定義視訊（video 或者 movie） |
<source> |
定義多媒體資源 <video>和<audio> |
<embed> |
定義嵌入的內容，比如外掛。 |
<track> |
為諸如<video>和<audio>元素之類的媒介規定外部文字軌道。 |
<audio>
屬性：src、controls
樣例：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支援 audio 元素。
</audio>
目前，<audio> 元素支援的3種檔案格式：MP3、Wav、Ogg。
| 瀏覽器 | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
提示：這 3 種音訊的 MIME-type 分別是：
| 音訊格式 | MINE-type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
<video>
屬性：width、height、src、controls
樣例：
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的瀏覽器不支援 video 標籤。 </video>
目前，<video> 元素支援三種視訊格式：MP4、WebM、Ogg。
| 瀏覽器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES 從 Firefox 21 版本開始 Linux 系統從 Firefox 30 開始 | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES 從 Opera 25 版本開始 | YES | YES |
- MP4 = MPEG 4檔案使用 H264 視訊編解碼器和AAC音訊編解碼器
- WebM = WebM 檔案使用 VP8 視訊編解碼器和 Vorbis 音訊編解碼器
- Ogg = Ogg 檔案使用 Theora 視訊編解碼器和 Vorbis音訊編解碼器
視訊格式的 MIME 型別
| 格式 | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
新佈局元素
| 標籤 | 描述 |
|---|---|
<header> |
定義了文件的頭部區域。 |
<article> |
定義頁面獨立的內容區域。 |
<nav> |
定義導航連結的部分。 |
<aside> |
定義頁面的側邊欄內容。 |
<footer> |
定義 section 或 document 的頁尾。 |
<section> |
定義文件中的節（section、區段）。 |
表格與表單
<input>標籤屬性placeholder作為文字框或搜尋框提示，輸入時提示文字消失。
擴充套件知識
標籤規範
CSS
樣式
補充：
background-position
此屬性只對背景圖片有效。
| 值 | 含義 |
|---|---|
| position-x position-y | 單位：px， Xpos表示水平位置，Ypos表示垂直位置 |
| X% Y% | 使用百分比表示背景的位置 |
| X、Y方向關鍵詞 | 水平方向的關鍵詞： left、center、right 垂直方向的關鍵詞： top、center、bottom |
background-size
控制影象大小。
| 屬性值 | 描述 |
|---|---|
| auto | 預設值，使用背景圖片保持原樣 |
| percentage | 當使用百分值時，不是相對於背景的尺寸大小來計算的，而是相對於元素寬度來計算的 |
| cover | 整個背景圖片放大填充了整個元素 |
| contain | 讓背景圖片保持本身的寬高比例，將背景圖片縮放到寬度或者高度正好適應所定義背景的區域 |
線性漸變
顏色沿著一條直線過渡：從左到右、從右到左、從上到下等。
IE瀏覽器是Trident核心，加字首：-ms-
Chrome瀏覽器是Webkit核心，加字首：-webkit-
Safari瀏覽器是Webkit核心，加字首：-webkit-
Opera瀏覽器是Blink核心，加字首：-o-
Firefox瀏覽器是Mozilla核心，加字首：-moz-
linear-gradient ( position, color1, color2,…)
position為漸變方向，color為漸變顏色值
例：相容webkit核心的瀏覽器，應寫-webkit-linear-gradient(position, color1, color2,…)
高階選擇器
層次選擇器
| 選擇器 | 類 型 | 功能描述 |
|---|---|---|
| E F | 後代選擇器 | 選擇匹配的F元素，且匹配的F元素被包含在匹配的E元素內 |
| E>F | 子選擇器 | 選擇匹配的F元素，且匹配的F元素是匹配的E元素的子元素 |
| E+F | 相鄰兄弟選擇器 | 選擇匹配的F元素，且匹配的F元素緊位於匹配的E元素後面 |
| E~F | 通用兄弟選擇器 | 選擇匹配的F元素，且位於匹配的E元素後的所有匹配的F元素 |
結構偽類選擇器
| 選擇器 | 功能描述 |
|---|---|
| E:first-child | 作為父元素的第一個子元素的元素E |
| E:last-child | 作為父元素的最後一個子元素的元素E |
| E F:nth-child(n) | 選擇父級元素E的第n個子元素F，（n可以是1、2、3），關鍵字為even、odd |
| E:first-of-type | 選擇父元素內具有指定型別的第一個E元素 |
| E:last-of-type | 選擇父元素內具有指定型別的最後一個E元素 |
| E F:nth-of-type(n) | 選擇父元素內具有指定型別的第n個F元素 |
使用E F:nth-child(n)和E F:nth-of-type(n)的關鍵點
E F:nth-child(n)在父級裡從一個元素開始查詢，不分型別
E F:nth-of-type(n)在父級裡先看型別，再看位置
屬性選擇器
| 屬性選擇器 | 功能描述 |
|---|---|
| E[attr] | 選擇匹配具有屬性attr的E元素 |
| E[attr=val] | 選擇匹配具有屬性attr的E元素,並且屬性值為val（其中val區分大小寫） |
| E[attr^=val] | 選擇匹配元素E，且E元素定義了屬性attr，其屬性值是以val開頭的任意字串 |
| E[attr$=val] | 選擇匹配元素E，且E元素定義了屬性attr，其屬性值是以val結尾的任意字串 |
| E[attr*=val] | 選擇匹配元素E，且E元素定義了屬性attr，其屬性值包含了“val”，換句話說，字串val與屬性值中的任意位置相匹配 |
盒子模型
盒子模型的形象化表示如下：