HTML5與CSS3知識點總結
好好學習，天天向上
本文已收錄至我的Github倉庫DayDayUP：github.com/RobodLee/DayDayUP，歡迎Star
原文鏈接：//blog.csdn.net/weixin_43461520/article/details/113201713
HTML5新增標籤
HTML5針對以前的不足，新增了一些新的標籤、表單以及表單屬性等。
語義化標籤
之前在做布局的使用，使用了大量的div，這些div都是沒有語義的，我們不能很輕易的就判斷出某個div大致是什麼內容，所以在HTML5中新增了語義化標籤來彌補這個缺陷，現在我們可以根據標籤名去推斷出其大致內容，方便代碼的閱讀，而且使用語義化標籤也可以提高被搜索引擎檢索的概率。
<header>：頭部標籤
<nav>：導航標籤
<article>：內容標籤
<section>：定義文檔某個區域
<aside>：側邊欄標籤
<footer>：尾部標籤
多媒體標籤
HTML5原生支持音視頻文件的播放，其中音頻標籤和視頻標籤的使用方式基本一致 。
<autdio>：音頻
<audio>標籤支持三種音頻格式，分別是MP3、Wav以及Ogg，其中MP3格式所有的瀏覽器都支持。
語法：
<audio src="文件地址" controls="controls"></audio>
<audio>標籤常見屬性👇
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 表示音頻在就緒後馬上播放 |
| controls | controls | 表示向用戶顯示控件，比如播放按鈕 |
| loop | loop | 循環播放，即每當音頻結束時重新開始播放 |
| src | url | 要播放的音頻的url |
<video>：視頻
<video>標籤支持三種視頻格式，分別是MP4、WebM以及Ogg，其中MP4格式所有的瀏覽器都支持。
語法：
<video src="文件地址" controls="controls"></video>
其中<video>標籤有很多屬性，比較常見的有👇
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 視頻就緒自動播放(谷歌瀏覽器不會自動播放，需要添加muted屬性來自動播放) |
| controls | controls | 向用戶顯示播放控件 |
| width | pixels(像素) | 設置播放器寬度 |
| height | pixels(像素) | 設置播放器高度 |
| loop | loop | 插放完是否繼續播放該視頻，循環播放 |
| preload | auto(預先加載視頻) none(不加載視頻) |
規定是否預加載視頻 (如果有了 autoplay 就忽略該屬性) |
| src | url | 視頻ur地址 |
| poster | 圖片的url | 加載等待的畫面圖片 |
| muted | muted | 靜音插放 |
input表單
在HTML5中，增加了一些新的input類型，使其語義化更加明顯。
| 屬性值 | 說明 |
|---|---|
| type=”email” | 限制用戶輸入必須為Email類型 |
| type=”url” | 限制用戶輸入必須為URL類型 |
| type=”date” | 限制用戶輸入必須為日期類型 |
| type=”time” | 限制用戶輸入必須為時間類型 |
| type=”month” | 限制用戶輸入必須為月類型 |
| type=”week” | 限制用戶輸入必須為周類型 |
| type=”number” | 限制用戶輸入必須為數字類型 |
| type=”tel” | 手機號碼 |
| type=”search” | 搜索框 |
| type=”color” | 生成一個顏色選擇表單 |
HTML5中不僅新增了一些input類型，還新增了一些表單屬性👇
| 屬性 | 值 | 說明 |
|---|---|---|
| required | required | 表單擁有該屬性表示其內容不能為空，必填 |
| placeholder | 提示文本 | 表單的提示信息，存在默認值將不顯示 |
| autofocus | autofocus | 自動聚焦屬性，頁面加載完成自動聚焦到指定表單 |
| autocomplete | off / on | 當用戶在字段開始鍵入時，瀏覽器基於之前鍵入過的值，應該顯示出在字段中填寫的選項。默認已經打開，如autocomplete=”on”，關閉autocomplete=”off，需要放在表單內，同時加上name屬性，並且提交成功過 |
| multiple | multiple | 可以多選文件提交 |
CSS3新增選擇器
屬性選擇器
屬性選擇器可以在不用藉助於類或者id選擇器的情況下直接根據元素特定屬性來選擇元素，它的權重為10。
E[att]：選擇具有att屬性的E元素
<!-- 將具有value屬性的按鈕1中文字顏色修改為紅色，按鈕2因為不具有value屬性，所以文字顏色沒有改變 -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input[value] {
color: red;
}
</style>
</head>
<body>
<input type="button" value="按鈕1">
<input type="button">
</body>
E[att="val"]：選擇具有att屬性且屬性值等於val的E元素
<!-- 將value屬性值為 「按鈕2」 的button的文字顏色修改為藍色 -->
<head>
<style>
input[value="按鈕2"] {
color: blue;
}
</style>
</head>
<body>
<input type="button" value="按鈕1">
<input type="button" value="按鈕2">
</body>
E[att^="val"]：匹配具有att屬性且值以val開頭的E元素
E[att$="val"]：匹配具有att屬性且值以val結尾的E元素
E[att*="val"]：匹配具有att屬性且值中含有val的E元素
結構偽類選擇器
結構偽類選擇器主要根據文檔結構來選擇元素，常用於根據父級元素選擇裏面的子元素。
E: first-child：匹配父元素中的第一個子元素E
E: last-child：匹配父元素中最後一個E元素
E: nth-child(n)：匹配父元素中的第n個子元素E，n也可以是關鍵字even偶數、odd奇數，如果直接寫字母n則表示選擇所有的子元素
<head>
<style>
ul li:first-child {
background-color: skyblue;
}
ul li:last-child {
background-color: aquamarine;
}
ul li:nth-child(2) {
background-color: blueviolet;
}
</style>
</head>
<body>
<ul>
<li>歡迎關注</li>
<li>微信公眾號：</li>
<li>Robod</li>
</ul>
</body>
E: first-of-type：指定類型E的第一個
E: last-of-type：指定類型E的最後
E: nth-of-type(n)：指定類型E的第n個
這三個和上面三個使用起來類似，不過還是有一點區別的，nth-child是對父元素裏面所有子元素排序選擇(序號是固定的)先找到第n個孩子，然後看看是否和E匹配；而nth-of-type則是對父元素裏面指定子元素進行排序選擇，先去匹配E，然後再根據E找第n個子元素。
<head>
<style>
ul li:nth-child(1) {
/* 先對ul里的所有子元素排序，找到序號為1的元素，發現是p標籤而不是li，所以樣式不生效 */
background-color: skyblue;
}
div li:nth-of-type(1) {
/* 先匹配對應的li元素，對li元素進行排序，排序後選擇第一個li */
background-color: skyblue;
}
</style>
</head>
<body>
<ul>
<p>微信公眾號：Robod</p> <!-- 序號是1 -->
<li>歡迎關注</li> <!-- 序號是2 -->
<li>微信公眾號：</li>
<li>Robod</li>
</ul>
<div>
<p>p</p>
<li>li1</li> <!-- 序號是1 -->
<li>li2</li> <!-- 序號是2 -->
</div>
</body>
偽元素選擇器
有的時候我們只需要一個簡單的標籤，如果用HTML做的話就會使代碼結構變得複雜，這時候就可以用偽元素選擇器，它可以幫助我們利用CSS創建新標籤元素，從而簡化HTML結構。偽元素選擇器有兩個，分別是::before（在元素內部的前面插入內容）和::after（在元素內部的後面添加內容），需要注意的是它們創建的元素是行內元素，而且在文檔樹裏面是找不到的，這兩個選擇器必須要有content屬性(可以沒有值)，偽元素選擇器的權重是1，
<!--語法：
element::before{}
-->
<head>
<style>
div {
position: relative;
width: 300px;
height: 200px;
background-color: aquamarine;
}
div::before {
content: '微信公眾號';
}
div::after {
position: absolute;
font-size: 30px;
content: "Robod";
right: 10px;
}
</style>
</head>
<body>
<div>
:
</div>
</body>
CSS3新特性
CSS3盒模型
之前我們在定義盒子大小的時候，指定了width屬性，可是盒子實際的寬度並不是width，padding和border都會將盒子撐大，也就是實際的盒子寬度是width+padding+border，而現在可以用box-sizing來指定盒模型，box-sizing屬性有以下兩個值。
content-box：這個是默認值，盒子的寬度是width+padding+border
border-box：盒子的大小為width屬性的值
<head>
<style>
.box1 {
width: 400px;
height: 100px;
border: 20px solid red;
background-color: aqua;
padding: 10px;
box-sizing: content-box;
}
.box2 {
width: 400px;
height: 100px;
border: 20px solid green;
background-color: blanchedalmond;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1">請小夥伴們給我的文章來個贊！</div>
<div class="box2">歡迎關注微信公眾號：Robod</div>
</body>
CSS3濾鏡filter
filter屬性將模糊或顏色偏移等圖形效果應用於元素，通常用於調整圖像，背景和邊框的渲染。常用的幾個函數如下：
filter: blur(5px)該函數用來對圖片進行模糊處理，數值越大圖片越模糊
filter: contrast(200%)調整圖像的對比度，0%會全黑，100%圖像不變，超過100%更低的對比度
filter: grayscale(80%)將圖像轉換為灰度圖像，100%完全轉為灰度圖像，0%圖像無變化
filter: hue-rotate(90deg)給圖像應用色相旋轉還有其它的一些可以參考//developer.mozilla.org/en-US/docs/Web/CSS/filter
calc()函數
calc()函數可以在聲明CSS屬性值時執行一些計算，例如：
width: calc(100% - 30px); <!-- 表示比父盒子小30像素 -->
CSS3過渡
過渡動畫是從一個狀態漸漸的過渡到另外一個狀態，通常和:hover一起搭配使用。
/*語法：*/
transition:要過渡的屬性 花費時間 運動曲線 何時開始
/*參數說明 */
1、屬性：想要變化的css屬性,寬度高度背景顏色內外邊距都可以，如果想要所有的屬性都變化過渡,寫一個 all 即可
2、花費時間：單位是秒(必須寫單位)比如0.5s
3、運動曲線：默認是ease(逐漸慢下來，可以省略)，還可以是linear(勻速)，ease-in(加速)，ease-out(減速)，ease-in-out(先加速後減速)
4、何時開始：單位是秒(必須寫單位)，可以設置延遲觸發時間默認是0s(可以省略)
<head>
<style>
div {
width: 50px;
height: 50px;
background-color: aqua;
/* 如果要寫多個屬性，用逗號隔開即可 */
/* transition: width 1s ease-in-out .5s,height 1s ease-in-out .5s; */
/* 如果所有的屬性都要過渡，寫 all 即可 */
transition: all 1s ease-in-out .5s;
}
div:hover {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>微信公眾號：Robod</div>
</body>
2D轉換
移動translation
2D移動是2D轉換裏面的一種功能，可以改變元素在頁面中的位置，類似定位。
/*第一個參數是x方向移動的距離，第二個參數是y方向移動的距離，可以是百分比，值可以為0但不能沒有*/
transform: translate(20px,0);
/*也可以分開寫，👆的一行等同於👇兩行*/
transfrom: translateX(20px);
transform: translateY(30px);
translate的優點就是不會影響到其它元素的位置，如果單位不是px而是百分比的話，表示的就是自身元素的百分比，這種移動方式對行內標籤是沒有效果的。
<head>
<style>
div:first-child {
width: 100px;
height: 100px;
background-color: red;
transform: translate(50%,20px);
}
div:last-child {
width: 100px;
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
旋轉rotate
2D旋轉指的是讓元素在二維平面內順時針或者逆時針旋轉。
<!-- rotate中度數的單位是deg，順時針是正數，逆時針是負數 -->
<!-- transfrom: rotate(度數); -->
<head>
<style>
img {
transition: all 1s;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="./images/robod.png" alt="">
</body>
現在是以元素的中心為旋轉點進行旋轉，這也是默認的旋轉點，也可以通過transfrom-origin屬性更改旋轉點。
<!-- 兩個參數分別是x方向和y方向的位置，可以是像素也可以是方位名詞 -->
<!-- transfrom-origin: x y; -->
<head>
<style>
img {
transform-origin: 50px bottom;
transition: all 1s;
}
img:hover {
transform: rotate(90deg);
}
</style>
</head>
<body>
<img src="./images/robod.png" alt="">
</body>
縮放scale
縮放的意思就是可以放大和縮小，可以用scale來設置縮放，這種方式相較於直接修改寬高而言優勢就是不影響其它盒子，和rotate一樣，也可以通過transform-origin屬性來修改縮放中心。
<!-- 第一個參數表示寬縮放為原來的m倍，第二個參數表示高縮放為原來的n倍，如果只填一個參數代表寬高同時縮放為原來的x倍
transform: scale(m,n);
transform: scale(x); -->
<head>
<style>
img {
transition: all 1s;
transform-origin: right bottom;
}
img:hover {
transform: scale(.5);
}
</style>
</head>
<body>
<img src="./images/robod.png" alt="">
<p>微信公眾號：Robod</p>
</body>
上述的幾個轉換方式是可以同時使用的，中間用空格隔開即可
transform: translate() rotate() scale()...需要注意的是，書寫順序會影響轉換的效果，比如先旋轉會改變坐標軸方向，所以在同時有位移和其它屬性的時候，位移要放在最前面。
CSS3 動畫
動畫(animation)是CSS3中具有顛覆性的特徵之一，可以通過設置多個節點來精確控制一個或一組動畫，常用來實現複雜的動畫效果，相比較過渡，動畫可以實現更多變化，更多控制，連續自動播放等效果。
動畫的基本使用
-
動畫序列在學習動畫之前，要先明確動畫序列這個概念👇
- 0%是動畫的開始，100%是動畫的結束（0%~100%代表不同階段的動畫，都可以設置）。這樣的規則就是動畫序列。
- 在
@keyframes中規定某項CSS樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。 - 動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。您可以改變任意多的樣式任意多的次數。
- 請用百分比來規定變化發生的時間，或用關鍵詞 “from” 和 “to” ，等同於0%和100%。
-
1、使用@keyframes定義動畫@keyframes 自定義的動畫名稱 { 0% { xxxxxx； } 100% { xxxxxxx； } } -
2、元素使用動畫給需要使用動畫的元素添加
animation-name(調用動畫)以及animation-duration(持續時間)這兩個屬性。<head> <style> @keyframes robod_animation { 0% { transform: rotate(0) scale(1); } to { transform: rotate(90deg) scale(0.5); } } img { animation-name: robod_animation; animation-duration: 2s; } </style> </head> <body> <img src="./images/robod.png" alt=""> </body>
常用動畫屬性
| 屬性 | 描述 |
|---|---|
| @keyframes | 規定動畫 |
| animation | 所有動畫屬性的簡寫屬性，除了animation-play-state屬性 |
| animation-name | 規定@keyframes動畫的名稱（必須） |
| animation-duration | 規定動畫完成一個周期所花費的秒或毫秒，默認是0（必須） |
| animation-timing-funtion | 規定動畫的速度曲線，默認是 「ease」 |
| animation-delay | 規定動畫何時開始，默認是0 |
| animation-iteration-count | 規定動畫被播放的次數，默認是1，還有infinite(無限循環) |
| animation-direction | 規定動畫是否在下一周期逆向播放，默認是「normal」，alternate逆播放 |
| animation-play-state | 規定動畫是否正在運行或暫停，默認是 「running」，還有 「paused」 |
| animation-fill-mode | 規定動畫結束後狀態，保持forwards，回到起始backwards |
動畫屬性也可以採用簡寫的方式：
animation: 動畫名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 動畫起始或者結束的狀態;
需要注意的是，簡寫屬性裏面不包含animation-play-state
速度曲線
上面提到了一個animation-timing-funtion屬性用來設置動畫的速度曲線，該屬性的值一共有6個：
| 值 | 描述 |
|---|---|
| linear | 動畫從頭到尾的速度是相同的，勻速 |
| ease | 默認，動畫以低速開始，然後加快，在結束前變慢 |
| ease-in | 動畫以低速開始 |
| ease-out | 動畫以低速結束 |
| ease-in-out | 動畫以低速開始和結束 |
| steps() | 指定了時間函數中的間隔數量（步長） |
前面幾個都很好理解，這個步長的意思就是整個操作劃分為多少步，然後一步一步執行，類似於那種一格一格的進度條的感覺，可以做一些有意思的動畫。
<head>
<style>
@keyframes steeeep {
from {
width: 0;
}
to {
width: 160px;
}
}
div {
width: 160px;
overflow: hidden;
white-space: nowrap;
font-size: 10px;
background-color: aqua;
animation: steeeep 2s steps(15) backwards;
}
</style>
</head>
<body>
<div>
歡迎關注微信公眾號：Robod
</div>
</body>
3D轉換
透視 perspective
在了解3D轉換之前首要要明確一個概念——「透視」，電腦屏幕是二維的，我們沒辦法直接看到立體的東西，如果要想看到物體在Z軸上的變化，就得使用透視，透視又稱視距，其實就是3D的東西投影在2D平面的效果，下圖中的d就是透視，當物體不變時，透視越大，在屏幕上看到的就越小，透視越小，在屏幕上看到的就越大，所謂近大遠小。透視的單位是px。
3D移動 translate3d
3D移動和2D移動類似，只不過是多了個Z軸。
/*這三個參數分別代表在xyz軸要移動的距離，z軸一般以px為單位*/
transform: translate3d(x , y , z);
/*也可以分開寫*/
translate: translateX(x);
translate: translateY(y);
translate: translateZ(z);
首先給需要移動的元素的父元素添加透視，在透視固定的情況下，改變translateZ的大小，就會改變元素在屏幕上的大小。
<head>
<style>
body {
perspective: 500px;
}
div {
width: 200px;
height: 200px;
background-color: aquamarine;
margin: 0 auto;
transform: translateZ(100px);
}
</style>
</head>
<body>
<div></div>
</body>
3D旋轉 rotate3d
3D旋轉指可以讓元素在三維平面內沿着x軸，y軸，z軸或者自定義軸進行旋轉。
transform: rotateX(45deg); /*沿x軸正方向旋轉45度*/
transform: rotateY(45deg); /*沿y軸正方向旋轉45度*/
transform: rotateZ(45deg); /*沿z軸正方向旋轉45度*/
transform: rotate3d(1,1,0,45deg); /*沿着x軸與y軸的對角線旋轉45度*/
那麼哪一個方向是旋轉正方向呢？這裡有一個技巧，就是左手準則，左手大拇指指向某一個軸的正方向，手指彎曲的方向就是旋轉的正方向，反之就是反方向。
<head>
<style>
body {
perspective: 500px;
}
img {
transition: all 1s;
}
img:hover:first-child {
transform: rotateX(45deg);
}
img:hover:nth-child(2) {
transform: rotateY(45deg);
}
img:hover:nth-child(3) {
transform: rotateZ(45deg);
}
img:hover:last-child {
transform: rotate3d(1,1,0,45deg);
}
</style>
</head>
<body>
<img src="./images/robod.png" alt="">
<img src="./images/robod.png" alt="">
<img src="./images/robod.png" alt="">
<img src="./images/robod.png" alt="">
</body>
3D呈現 transform-style
3D呈現就是用來控制子元素是否開啟三維立體環境，默認是transform-style: flat(不開啟)，如果想開啟，可以修改為transform-style: preserve-3d。注意：代碼是寫給父元素的，但影響的子元素。
<head>
<style>
body {
perspective: 500px;
}
.box1 {
width: 200px;
height: 200px;
transition: all 2s;
transform-style: preserve-3d; /*和transform-style: flat*/
}
.box2 {
width: 100%;
height: 100%;
background-color: aqua;
transform: rotateX(45deg);
}
.box1:hover {
transform: rotateY(45deg);
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
上面代碼中的例子，先看一下transform-style: flat的效果：
當鼠標移到上面的時候，先是由本來的繞x軸旋轉45度的狀態轉換為普通的平面圖，再由平面圖繞y軸進行旋轉，這顯然不是我們想要的效果。
再來看看transform-style: preserve-3d的效果👇
現在就是三維的轉換效果了，直接由繞x軸旋轉45度的狀態直接再繞y軸旋轉45度。
瀏覽器私有前綴
瀏覽器私有前綴是為了兼容老版本的寫法，比較新的版本的瀏覽器無須忝加。
-moz-：代表 firefox瀏覽器的私有屬性-ms-：代表ie瀏覽器私有屬性-webkit-：代表 safari、chrome私有屬性-o-：代表Opera私有屬性
比如圓角屬性就可以這樣寫👇
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
總結
好了，這就是我這段時間學習HTML5和CSS3所總結出來的一些知識點，一方面是怕我自己以後忘了可以拿來複習使用，另一方面也是希望可以幫助到一起學習的小夥伴們！
碼字不易，可以的話，給我來個
點贊，收藏，關注如果你喜歡我的文章，歡迎關注微信公眾號 『 R o b o d 』
本文已收錄至我的Github倉庫DayDayUP：github.com/RobodLee/DayDayUP，歡迎Star
原文鏈接：//blog.csdn.net/weixin_43461520/article/details/113201713
