HTML5筆記

阿新 • • 發佈：2020-07-18

一、HTML5 新增語義化標籤

div 對於搜尋引擎是沒有語義的。

頭部標籤
導航標籤
內容標籤
塊級標籤
側邊欄標籤
尾部標籤

注意：

語義化標準主要針對搜尋引擎
頁面內可以使用多次相同標籤
在 IE9 中這些元素需要轉成塊級元素
移動端更喜歡用這些標籤

二、HTML5 新增多媒體標籤

音訊 <audio>

屬性	值	描述
autoplay	autoplay	音訊在就緒後自動播放
controls	controls	向用戶顯示控制元件，如播放按鈕
loop	loop	迴圈播放
src	url	要播放音訊的 url

<!-- 因為不同瀏覽器支援不同格式，我們採取的解決方式是，為這個音訊準備多個格式 -->
<audio controls="controls">
    <source src="media/a.mp3" type="audio/mpeg" />
    <source src="media/a.ogg" type="audio/ogg" />
    你的瀏覽器不支援 audio 播放
</audio>

視訊 <video>

屬性	值	描述
autoplay	autoplay	視訊在就緒後自動播放
controls	controls	向用戶顯示播放控制元件
width	pixels(畫素)	設定播放器寬度
height	pixels(畫素)	設定播放器高度
loop	loop	迴圈播放
preload	auto(預先載入視訊)、none(不預載入視訊)	是否等載入完再播放
src	url	視訊url地址
poster	imgUrl	載入等待的畫面圖片
muted	muted	靜音播放

<video controls="controls" muted="muted" loop="loop" poster="img/pic.png">
    <source src="media/a.mp4" type="video/mp4" />
    <source src="media/a.ogg" type="video/ogg" />
    你的瀏覽器不支援 video 播放
</video>

三、HTML5 新增 input 表單

屬性值	說明
type="email"	Email格式內容
type="url"	URL 型別
type="date"	日期
type="time"	時間
type="month"	月
type="week"	周
type="number"	數字
type="tel"	手機號碼
type="search"	搜尋框
type="color"	生成一個顏色選擇表單

<form action="">
    郵箱：<input type="email">
    網址：<input type="url">
    日期：<input type="date">
    <input type="submit" value="提交">
</form>

四、HTML5 新增表單屬性

屬性	值	說明
required	required	表示其內容不能為空，必填
placeholder	佔位文字	存在內容後將不顯示
autofocus	autofocus	自動聚焦屬性，頁面載入完成自動聚焦到指定表單
autocomplete	off/on	當用戶在欄位開始鍵入時，瀏覽器基於之前鍵入過的值，應該顯示出在欄位中填寫的選項。預設已經開啟，如 autocomplete="on"。需要放在表單內同時加上 name 屬性。提交成功過。
multiple	multiple	可以多選檔案提交

<form action="">
    使用者名稱：<input type="text" required="required" placeholder="請輸入使用者名稱" autofocus="autofocus" name="username" />
    上傳頭像：<input type="file" name="" id="" multiple="multiple">
    <input type="submit" value="提交">
</form>

五、CSS3屬性選擇器

選擇符	簡介
E[att]	選擇具有 att 屬性的 E 元素
E[att = "val"]	選擇具有 att 屬性且值等於 val 的 E 元素
E[att ^= "val"]	匹配具有 att 屬性且值以 val 開頭的 E 元素
E[att $= "val"]	匹配具有 att 屬性且值為 val 結尾的 E 元素
E[att *= "val"]	匹配具有 att 屬性且值中含有 val 的 E 元素

屬性選擇器的權重是 0,0,1,0。

<head>
    <style>
        button {
            cursor: pointer;
        }
        /* 屬性選擇器使用方法 */
        /* 選擇的是：既是 button 標籤又有 disabled 屬性的元素 */
        button[disabled] {
            cursor: default;
        }
        input[type = "text"] {
            background-color: orange;
        }
        div[class ^= "icon"] {
            color: red;
        }
    </style>
</head>
<body>
    <button>按鈕</button>
    <button disabled="disabled">按鈕</button>
    <input type="text">
    <input type="search">
    <div class="icon1">圖示1</div>
    <div class="icon2">圖示2</div>
</body>

六、CSS3結構偽類選擇器

選擇符	簡介
E:first-child	匹配父元素中的第一個子元素 E
E:last-child	匹配父元素中的最後一個 E 元素
E:nth-child(n)	匹配父元素中的第 n 個子元素 E
E:first-of-type	指定型別 E 的第一個
E:last-of-type	指定型別 E 的最後一個
E:nth-of-type(n)	指定型別 E 的第 n 個

偽類選擇器的權重是 0,0,1,0。

nth-child(n)

n 可以是數字、關鍵詞、公式
常用關鍵詞：even（偶數）、odd（奇數）
如果 n 是公式，則從 0 開始計算
第 0 個元素或者超出了元素的個數會被忽略

公式	取值
2n	偶數
2n+1	奇數
5n	5 10 15 ...
n+5	從第 5 個開始（包含第五個）到最後
-n+5	前 5 個（包含第五個）

<head>
    <style>
        ul li:first-child {
            background-color: orange;
        }
        ul li:last-child {
            background-color: red;
        }
        ul li:nth-child(3) {
            color: skyblue;
        }
        ul li:nth-child(6n) {
            background-color: gray;
        }
        /* :nth-child(n) 是選擇父元素裡第 n 個孩子，它不管裡面的孩子是否是同一種類型 */
        /* 不會選中。因為 div 的第一個孩子不是 span 元素，而是 p 元素 */
        div span:nth-child(1) { 
            background-color: skyblue;
        }
        div span:nth-of-type(1) {
            color: purple;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>

    <div>
        <p>p</p>
        <span>span</span>
        <span>span</span>
        <span>span</span>
    </div>
</body>

七、CSS3偽元素選擇器

選擇符	簡介
::before	在元素內部的前面插入內容
::after	在元素內部的後面插入內容

注意：

偽元素選擇器是 ::，偽類選擇器是 :。
before 和 after 必須有 content 屬性；
before 在內容的前面，after 在內容的後面；
before 和 after 建立一個元素，但是屬於行內元素；
因為在 DOM 裡面看不見剛才建立的元素，所以稱為偽元素；
偽元素和標籤選擇器一樣，權重是 0,0,0,1。

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
        }
        div::before {
            content: "我";
            /* display: inline-block; */
            width: 50px;
            height: 50px;
            background-color: orange;
        }
        div::after {
            content: "你";
            /* display: inline-block; */
            width: 50px;
            height: 50px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div>和</div>
</body>

圖示字型的使用：

<head>
    <style>
        @font-face {
            font-family: "iconfont";
            src: url('../ali-fonts/iconfont.eot?t=1593357030338');
            /* IE9 */
            src: url('../ali-fonts/iconfont.eot?t=1593357030338#iefix') format('embedded-opentype'),
                /* IE6-IE8 */
                url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAN8AAsAAAAAB+wAAAMuAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqCeIJPATYCJAMUCwwABCAFhG0HWRvsBhEVnHnIfhw456cg538eFVuFTmqS/nPwPLWl788MGwIRYyuieiupmR6OonaEurNtGvIPoyJUl6z95adnBOhMLw0dHwB/3KuaKT6ffYvTnJtyAQxNoADN1TGWcAvSgnGHsQta4tkQwCE/ZZGmzdt2xcZgzhNAxo4aMQg7o8A0pAs2Qqxiq0FWYmGrReoaihXBz8sbGrFBYWnMpR2HNxtKwyA5rKb9yO/roWBOpwPYLtBAWcCATK40jEVHgbJoHPXvDA0BBxuFCpKDJmGlsFoUoXEOJHIsAUf5x1NokBhmahIADWHQQJDsIBAImiAwEFZCoCCsFkQDz7ULHCABGAcsQpKiU/LFOpiYmMtked6QvQf9Q0uOZB8On7DHYiep+4Pum/cXdRa7+/f6+1z32PN8qQe2V+6T1mvI4uLd12dvWOJ1W5ejh5+zzs/qunbC4niRk+b51cP8tVOy4zKc9YsPQt2woWsnzc7BiA0dmg68Vs5CPVN8j2jwK4uMqhsVanirzpnaF7vtLejFZOCloi+93A8OFj8wfU++YPyirDmL+PMxnhKEM7L+Z00PgiqZYTg96703w/e9YB7t5G1REYV16A9RYZpOD4JkecTJWckzpMEA2Zw3Pc+Msq2tZ5iZOz3vZmkwcAYzAYieGnRxAJ2hPIBfU7oBQJ3S8tt+h8ybNb8NSK37zXYNAE/z3w0CzvCgjYLOzJ/E7NhgNLaptIxS6zAUo0WFlAKltjnAr7Fk8GIakdc5FQQbLwFFAvlAY1MUbfBlwcKlKsSwaQAOZWix2yWTyWjEJAKlmQdASOMEKFI4CZo0rqMN/jlYxHkHMdJEg0N3yTyiS3EhdPrKaAQ92BM6R3Ow1aLD9BfGPBpOswPCD3nt3FAXVT78xBl5ihXrFhuRAIFpggc4H44jwcLUo5MiiSxtWYaqVyocTUpzZTSCHuwJnaM5eK1FF77/hTGPhhvqqtQ/5LUbHOqi6oB+CuZOdbdyn3WLjUiAwDTBA+hwtAIES/WkHp0UaYBvaUvULHQVFMuLpnfcBziYV7BEiRYjlsS4jKC8Z5dQH53p7bJZKOt/pph7OiwoVwoAAA==') format('woff2'),
                url('../ali-fonts/iconfont.woff?t=1593357030338') format('woff'),
                url('../ali-fonts/iconfont.ttf?t=1593357030338') format('truetype'),
                /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
                url('../ali-fonts/iconfont.svg?t=1593357030338#iconfont') format('svg');
            /* iOS 4.1- */
        }
        p::after {
            content: "\e735";  /* 反斜槓轉義字元 */
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: "iconfont";
            font-size: 16px;
        }
    </style>
</head>

八、2D轉換

轉換（transform）是 CSS3 中具有顛覆性的特徵之一，可以實現元素的位移、旋轉、縮放等效果

8.1 translate（2D移動）

可以改變元素在頁面內的位置，類似定位
最大優點：不會影響到其他元素的位置
2D移動中的百分比單位是相對於自身元素的，translate(50%, 50%)
對行內標籤沒有效果

<head>
    <style>
        div {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: orange;
        }
        p {
            position: absolute;
            top: 50%;
            left: 50%;
            /* margin-top: -50px;
            margin-left: -50px; */
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>

8.2 rotate（2D旋轉）

讓元素在二維平面內順時針或逆時針旋轉；
rotate 的引數為角度值，單位是 deg，如 rotate(45deg)；
角度值為正時，順時針；負時，逆時針；
預設旋轉的中心點是元素的中心點。

<head>
    <style>
        img {
            width: 150px;
            /* 順時針旋轉 45 度 */
            /* transform: rotate(45deg); */
            border-radius: 50%;
            border: 5px solid orange;
            transition: all .5s;
        }
        img:hover {
            /* 順時針旋轉 360 度 */
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="media/pic.jpg" alt="">
</body>

8.3 transform-origin（2D轉換中心點）

設定元素轉換是的中心點。
transform-origin: x y;
x、y 預設轉換的中心點是元素的中心點（50% 50%）
可以給 x、y 設定畫素或者方位名詞（top、bottom、left、right、center）

繪製三角形

<head>
    <style>
        div {
            position: relative;
            width: 300px;
            height: 35px;
            border: 2px solid #ccc;
            border-radius: 5px;
        }
        div::after {
            content: "";
            position: absolute;
            top: 10px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #999;
            border-bottom: 1px solid #999;
            transform: rotate(45deg);
            transform-origin: 75% center;
            transition: all 0.3s;
        }
        div:hover::after {
            transform: rotate(225deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>

旋轉效果

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid orange;
            margin: 0 auto;
            overflow: hidden;
        }
        div::before {
            content: "CSS";
            display: block;
            width: 100%;
            height: 100%;
            background-color: skyblue;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all .5s;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
        }
        div:hover::before {
            transform: rotate(0deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>

8.4 scale（縮放）

transform: scale(x, y);
transform: scale(1, 1);：寬和高都放大一倍，相當於不縮放；
transform: scale(2);：兩個引數值相同，相當於 scale(2, 2)；
與直接重設 width、height 相比的優勢：可以設定轉換中心點縮放，預設以中心點縮放；而且不影響其他盒子的佈局。

8.5 轉換的綜合寫法

同時使用多個轉換，格式：transform: translate() rotate() scale() ...；
不同的書寫順序會影響轉換的效果：旋轉會改變座標軸的方向。當同時有位移和其他轉換時，將位移放在最前面。

九、動畫

動畫（animation）是 CSS3 中具有顛覆性的特徵之一，可通過設定多個節點來精確控制一個或一組動畫，常用來實現複雜的動畫效果。

相比較過渡，動畫可以實現更多變化、更多控制、連續自動播放等效果。

定義動畫
使用動畫

9.1 動畫序列

屬性	描述
@keyframes	規定動畫
animation	所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性
animation-name	規定 @keyframes 動畫的名稱。（必須）
animation-duration	規定動畫完成一個週期所花費的秒或毫秒，預設是 0。（必須）
animation-timing-function	規定動畫的速度曲線，預設是 ease
animation-delay	規定動畫何時開始，預設是 0
animation-iteration-count	規定動畫被播放的次數，預設是 1，infinite 無限
animation-direction	規定動畫是否在下一週期逆向播放，預設是“normal”，alternate 逆播放
animation-play-state	規定動畫是否正在執行或暫停。預設是 running，還有 paused
animation-fill-mode	規定動畫結束後狀態，保持 forwards，回到起始 backwards

0% 是動畫的開始，100% 是動畫的完成。這樣的規則就是動畫序列。
在 @keyframes 中規定某項 CSS 樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。
動畫是使元素從一種樣式逐漸變為另一種樣式的效果。
用百分比來規定變化發生的時間，或用關鍵詞 from 和 to，等同於 0% 和 100%。

<head>
    <style>
        /* 1.定義動畫 */
        @keyframes move {
            /* 開始狀態 */
            0% {
                transform: translateX(0px);
            }
            /* 結束狀態 */
            100% {
                transform: translateX(1000px)
            }
        }
        div {
            width: 200px;
            height: 200px;
            background-color: orange;
            /* 呼叫動畫 */
            animation-name: move;
            /* 持續時間 */
            animation-duration: 5s;
        }
    </style>
</head>
<body>
    <div></div>
</body>

animation: 動畫名稱持續時間運動曲線何時開始播放次數是否反方向動畫起始或結束的狀態
animation: name duration timing-function delay iteration-count direction fill-mode;
animation: move 2s linear 1s infinite alternate forwards;

第一個時間 2s 一定是 duration。

9.2 速度曲線

值	描述
linear	勻速
ease	預設。動畫以低速開始，然後加快，在結束前變慢
ease-in	動畫以低速開始
ease-out	動畫以低速結束
ease-in-out	動畫以低速開始和結束
steps()	指定了時間函式中的間隔數量（步長）

<head>
    <style>
        body {
            background-color: #ccc;
        }
        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            animation: move 3s forwards, bear 1s steps(8) infinite;
        }
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100%  {
                background-position: -1600px 0;
            }
        }
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                transform: translateX(-50%);
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>

十、3D轉換

近大遠小
物體遮擋

10.1 透視 perspective

如果想要網頁產生 3D 效果需要透視（理解成 3D 物體投影的 2D 平面上）
實際上模仿人類的視覺位置，可視為安排一隻眼睛去看
透視也稱為視距，所謂的視距就是人的眼睛到螢幕的距離
距離視覺點越近的在電腦平面成像越大，越遠成像越小
透視的單位是畫素
透視需要寫在被視察元素的父盒子上面

d：就是視距，視距就是指人的眼睛到螢幕的距離
z：就是 z 軸，z 軸越大（正值），我們看到的物體就越大

10.2 旋轉

3D 旋轉指可以讓元素在三維平面內沿著 x 軸、y 軸、z 軸或者自定義軸進行旋轉

transform: rotateX(45deg) -- 沿著 x 軸正方向旋轉 45 度
transform: rotateY(45deg) -- 沿著 y 軸正方向旋轉 45 度
transform: rotateZ(45deg) -- 沿著 z 軸正方向旋轉 45 度
transform: rotate3d(x, y, z, 45deg) -- 沿著自定義軸旋轉 45 deg 為角度

rotateX()

div {
    perspective: 300px;
}

img {
    display: block;
    margin: 100px auto;
    transition: all 1s;
}

img:hover {
    transform: rotateX(-45deg)
}

左手準則：

左手的手拇指指向 x 軸的正方向
其餘手指的彎曲方向就是該元素沿著 x 軸旋轉的方向

rotateY()

div {
    perspective: 500px;
}
img {
    display: block;
    margin: 100px auto;
    transition: all 1s;
}
img:hover {
    transform: rotateY(180deg)
}

左手準則：

左手的拇指指向 y 軸的正方向
其餘的手指彎曲方向就是該元素沿著 y 軸旋轉的方向(正值)

rotateZ()

div {
    perspective: 500px;
}

img {
    display: block;
    margin: 100px auto;
    transition: all 1s;
}

img:hover {
    transform: rotateZ(180deg)
}

rotate3d
- transform: rotate3d(x, y, z, deg) -- 沿著自定義軸旋轉 deg 為角度
- x, y, z 表示旋轉軸的向量，是標識你是否希望沿著該軸進行旋轉，最後一個標識旋轉的角度
- transform: rotate3d(1, 1, 0, 180deg) -- 沿著對角線旋轉 45deg
- transform: rotate3d(1, 0, 0, 180deg) -- 沿著 x 軸旋轉 45deg
```
div {
    perspective: 500px;
}

img {
    display: block;
    margin: 100px auto;
    transition: all 1s;
}

img:hover {
    transform: rotate3d(1, 1, 0, 180deg)
}
```

10.3 呈現 transform-style

控制子元素是否開啟三維立體環境
transform-style: flat 代表子元素不開啟 3D 立體空間，預設的
transform-style: preserve-3d 子元素開啟立體空間
程式碼寫給父級，但是影響的是子盒子

<head>
    <style>
        body {
            /* 透視寫在被視察元素的父盒子上面 */
            perspective: 500px;
        }
               .box2 {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all .4s;
            /* 讓 .back 盒子保留立體空間 */
            transform-style: preserve-3d;
        }
        .box2:hover {
            transform: rotateY(180deg);
        }
        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            text-align: center;
            color: #fff;
            font-size: 30px;
            line-height: 300px;
            /* 背面內容不可見 */
            backface-visibility: hidden;
        }
        .front {
            background-color: orange;
            z-index: 1;
        }
        .back {
            background-color: skyblue;
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="front">前面</div>
        <div class="back">後面</div>
    </div>
</body>