目錄
# HTML5
## 一、HTML5簡介
> HTML5是html的最新的標準（版本）
- 瀏覽器支持：ie9+對html5新特性部分支持，新的主流瀏覽器（chrome、火狐\safari）
- 向前向後兼容，語法變化：
- 標籤可以自動閉合
- 屬性值可以省略引號
- 屬性值和屬性名相同，可以省略屬性值
- 引入樣式表link標籤可以省略type
- *增加了語義化標籤、智能表單、音頻視頻（多媒體）、canvas繪圖、svg矢量圖、地理定位、web存儲
- 刪除掉一些標籤
## 二、新增語義化標籤
### 結構化標籤（塊級）
- 1、header標籤
> 定義整個網頁的頭或者是某個模塊的頭部，一般放頂部導航、logo、標題、搜索欄等
- 2、footer標籤
> 定義整個網頁的底部或者是某個模塊的底部，一般放版權信息，聯繫方式，底部導航等。
- 3、main標籤（ie不兼容，不建議用）
> 定義整個頁面的主體部分，建議只使用一次
- 4、article標籤
> 定義頁面中獨立的文章區域：博客，新聞，評論...
- 5、nav標籤
> 定義各種導航：頂部導航，底部導航，側導航，翻頁導航，路徑導航等
- 6、section標籤
> 定義頁面內容的分區或者文章的分節，一般section裏面由標題和內容組成
- 7、aside標籤
> 定義和主題內容相關性不大的內容，比如側邊欄廣告，推薦，側邊欄導航等
- 8、hgroup標籤
> 定義標題組，把主標題和副標題組合在一起
- 9、figure標籤
> 定義文章或者模塊中獨立的圖片、圖表、照片等
> 一個figure可以包含多個圖片
- 10、figcaption 標籤
> 和figure搭配使用，爲圖片提供標題
> 一個figure只能包含一個figcaption標題
### 三、其他標籤
1、time標籤
> 定義時間，行內標籤
```
<p>今天是<time datetime="2020/4/1">愚人節</time></p> //如果不是直接包含的時間字符串，需要用datetime屬性給time標籤定義具體的時間
<p> 雙十一開搶時間<time>2020/11/11 11:11:11</time></p> // 如果time標籤之間寫的是具體的時間，就不需要加datetime屬性
```
2、mark標籤
> 定義帶標記的文本(高亮顯示)，行內標籤
### 四、兼容處理
> 因爲新的語義化標籤在ie低版本中會解析錯誤，樣式佈局不能正常展示
- 解決方法：
- 方法一：
1、通過js創建新增的標籤
```
document.createElement('header');
document.createElement('footer');
document.createElement('nav');
...
```
2、把結構化標籤轉換成塊級
```
header,footer,nav...{
display:block;
}
```
- 方法二：
> 引入html5shiv.js插件 https://www.bootcdn.cn/html5shiv/
```
<!--[if ie]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv-printshiv.js"></script>
<![endif]-->
```
## 五、表單新特性
### 1、新增的表單元素
>1) color類型 ：顏色選取框 <input type="color" name="color">
>2) datetime類型：日期輸入框 <input type="datetime" name="datetime">
>3) datetime-local類型： 本地日期時間輸入框(年/月/日 小時：分鐘)，自帶日曆操作控件，可輸入可選擇，格式比較規範
> <input type="datetime-local" name="datetime-local">
>4) date類型： 日期輸入框（年/月/日），自帶日曆操作控件，可輸入可選擇，格式比較規範
> <input type="date" name="date">
>5) month類型： 月份輸入框（年/月），自帶日曆操作控件，可輸入可選擇，格式比較規範
> <input type="month" name="month">
>6) week類型： 一年中的第n周，自帶日曆操作控件，可輸入可選擇，格式比較規範
> <input type="week" name="week">
>7) time類型：輸入時間（小時：分鐘） ，可以輸入和使用箭頭加減
> <input type="time" name="time">
>8) email類型：輸入郵箱格式的字符串，內置了郵箱格式規則驗證
> <input type="email" name="email">
>9) number 類型：輸入數字，無法輸入數字以外的字符，在移動端自動調出數字鍵盤
> <input type="number " name="number ">
>10) tel類型： 輸入電話, 沒有規則驗證，可以輸入任意字符
> <input type="tel " name="tel">
>11) url類型： 輸入網址格式的字符串，內置了網址格式規則驗證
> <input type="url" name="url">
>12) search類型： 搜索輸入框，自帶快速清空內容的 “×” 號
> <input type="search" name="search">
>13) range類型： 獲得一個數值，在一個範圍內用滑塊去操作
> <input type="range" name="range">
>14) datalist標籤：專門給輸入框提供選項列表
> <input type=" datalist" name=" datalist">
- list屬性用來綁定對應的列表
```
<input type="text" list="list1">
<datalist id="list1">
<option value="AA">aa</option>
<option value="BB">bb</option>
<option value="CC">cc</option>
</datalist>
```
### 2、新增屬性
- 1、list屬性：用來給輸入框綁定對應的列表
- 2、min、max屬性：分別定義number或者range類型的最小值和最大值
- 3、step 屬性：用來定義number或者range類型的加減步長
```
<input type="number" min="0" max="10" step="2">
```
- 4、required 屬性 ： 把表單元素設置位必填項
```
<input type="text" required>
```
- 5、pattern 屬性：用來定義表單輸入的內容的規則
```
<input type="tel" pattern="1[356789][0-9]{9}" name="tel">
```
- 6、placeholder屬性： 給輸入框定義提示佔位符，當輸入內容時消失，輸入框爲空的時候顯示有value就不會顯示
```
<input type="text" placeholder="請輸入。。。">
```
- 7、autofocus 屬性: 設置表單元素自動獲得焦點,一般只能設置一個自動獲得焦點的元素
```
<input type="text" autofocus>
```
- 8、autocomplete 屬性：設置表單元素的自動補全功能，on表示開啓，off表示關閉
```
<input type="text" autocomplete="on">
```
- 9、form屬性： 給表單元素定義所屬的表單域（form），用於把表單元素放在form以外時指定隨哪個表單域一起提交數據
```
<input type="text" form="loginForm">
<form id="loginForm">
</form>
```
- 10、multiple屬性： 設置文件域和下拉列表支持多選
```
<input type="file" multiple>
<select multiple /size="2">
</select>
```
* 注意： 新表單類型和屬性在ie中支持情況不好，並且目前沒有比較好的解決方案，pc端項目避免使用，目前主要是流行在移動端
## 六、多媒體
```
音頻
<audio src="" controls loop muted></audio>
視頻
<video src="" controls loop muted width="" height="" poster=""></video>
```
### 1、音頻 audio
```
<audio src="./videoAudio/hanmai.mp3" controls loop></audio>
```
> 屬性：
- src="資源路徑"： 用來引入音頻文件的地址
- controls : 用來調出控制器（播放暫停、進度、音量）
- loop : 用來設置音頻爲循環播放
- muted: 規定音頻默認靜音
### 2、視頻
```
<video src="./videoAudio/movie.mp4" width="800" controls loop poster="./img/pic.png"></video>
```
>屬性：
- src="資源路徑"： 用來引入視頻文件的地址
- controls : 用來調出控制器（播放暫停、進度、音量、全屏，畫中畫）
- loop : 用來設置視頻爲循環播放
- muted: 規定視頻默認靜音
- width: 規定視頻寬度
- height: 規定視頻高度
- poster: 規定視頻沒有播放時顯示的廣告圖（海報）
### 3、音視頻資源 source標籤
> 爲音頻和視頻提供多種格式的資源文件，瀏覽器會識別第一個能夠支持的視頻格式進行播放
```
<audio controls>
<source src="../0401/videoAudio/nada.wav" type="audio/wav">
<source src="../0401/videoAudio/butterfly.ogg" type="audio/oggg">
<source src="../0401/videoAudio/hanmai.mp3" type="audio/mp3">
您的瀏覽器不支持音頻
</audio>
```
## 七、刪除的標籤(瞭解)
```
font
basefont
center
big
s
u
strike
dir
```
# CSS3
## 一、CSS3簡介
>是CSS的最新版本，在CSS2.1基礎上進行增補與修改。
1、 CSS3新增模塊 （記住）
- 選擇器、邊框屬性、背景屬性、文本效果、2D/3D轉換、動畫、多列、彈性盒佈局、用戶界面
2、瀏覽器兼容情況： ie9+、標準瀏覽器新版本
3、 漸進增強、優雅降級
- 漸進增強： 針對低版本的瀏覽器構建頁面，保證最基本的功能，然後再針對高版本的瀏覽器進行效果和交互的優化，從而達到一個良好的用戶體驗
- 優雅降級：一開始就實現一個良好的體驗和完整的功能，再針對低版本瀏覽器做兼容處理
4、 瀏覽器私有前綴
> 瀏覽器私有前綴是瀏覽器廠商爲了表示對一些css3屬性提前支持，但是屬性尚未成爲標準，如果屬性成爲標準之後，就不需要再加前綴
```
-webkit- : 老版本chrome、safari
-moz- : 火狐瀏覽器
-o-: 歐鵬瀏覽器
-ms- : IE瀏覽器
```
> 自動添加私有前綴的插件 Autoprefixer
> 用法： 編寫.css 文件，然後 F1 -- > Autoprefixer:run
## 二、新增選擇器（權值爲10）
### 1、屬性選擇器
- css2的屬性選擇器
- 1、[attr] : 選擇帶有attr屬性的標籤
- 2、[attr=val]: 選擇attr屬性值等於val的標籤
- 3、[attr~=val]: 選擇attr屬性值詞列表中包含val完整單詞的標籤
```
<div class="box" id="box1" ></div>
<div class="red" flag="1"></div>
<div class="green"></div>
<p class="p1"></p>
<input type="text">
div[id=box1]{ /* 11 */
border: 2px solid blue;
}
div[flag]{
background-color: red;
}
div[class=red]{
border:3px solid yellow
}
input[type=text]{
border: 2px solid red;
}
li[class~=red]{
background-color: turquoise;
}
li[flag~=hello]{
border: 2px solid purple;
}
```
- css3的屬性選擇器
- 1、[attr^=val]: 選擇attr屬性值以val開頭的標籤
- 2、[attr$=val]: 選擇attr屬性值以val結尾的標籤
- 3、[attr*=val]: 選擇attr屬性值裏面包含val字符的標籤
```
a[href^=http]{
color: chartreuse;
}
a[href$=html]{
color: cyan;
}
[class*=box]{
color: red;
font-size: 30px;
}
[class*=red]{
border: 2px solid pink;
}
[class*=e]{
background-color: cyan;
}
<a href="http://www.baidu.com">aaaa</a>
<a href="./1、音視頻資源.html">bbbb</a>
<a href="http://www.ujiuye.com">bbbb</a>
<div class="box redbox">1</div>
<div class="box1 red">2</div>
<div class="box2 aared">3</div>
```
### 2、結構僞類選擇器
- 1、:first-child: 選擇同級元素中的第一個
- 2、:last-child : 選擇同級元素中的最後一個
- 3、:nth-child(n): 選擇同級元素中的第n個
- :nth-child(2n) : 選擇同級元素中第偶數個元素
- :nth-child(2n+1) : 選擇同級元素中第奇數個元素
- 4、:nth-last-child(n) : 選擇同級元素中的倒數第n個
- 5、:first-of-type : 選擇同級同種類型標籤中的第一個
- 6、:last-of-type: 選擇同級同種類型標籤中的最後一個
- 7、:nth-of-type(n) : 選擇同級同種類型標籤中的第n個
- 8、:nth-last-of-type(n): 選擇同級同種類型標籤中的倒數第n個
```
.box span:first-child{}---無空格是找.box下第一個子元素是span
.box span :first-child{}---有空格是找.box 下span裏的第一個子元素
```
### 3、表單狀態僞類選擇器
- :enabled 選擇可用狀態的表單元素
- :disabled 選擇禁用狀態的表單元素
- :checked 選中狀態的單選和複選框
- ::selection 選擇用戶選中的元素部分內容
## 三、新增背景屬性
css2：
background-color
background-image
background-repeat
background-postion
- 1、多背景
```
background-image: url(""),url("");//設置多個背景圖片，順序越靠前，層級越高
background-repeat: no-repeat,repeat; /* 兩個圖片的重複屬性不同 */
background-repeat: no-repeat; /* 兩個圖片的重複屬性相同 */
background-position: right top, center; /* 兩個圖片的定位屬性不同 */
background-position: center; /* 兩個圖片的定位屬性相同 */
```
```
多背景簡寫:
background:url(...) no-repeat center,url(...) repeat-x left bottom,...;
```
- 2、背景尺寸
> background-size
- length : 寬度（500px） 高度（300px） , 一個值表示設置寬度，高度自動
- 百分比：參考盒子的尺寸， 寬度（50%） 高度（100%） , 一個值表示設置寬度，高度自動
- cover : 覆蓋 ,圖片會等比例縮放，直到能夠覆蓋整個盒子，但是有可能圖片無法完全顯示
- contain ： 包含 ，圖片會等比例縮放，直到圖片剛好被完全包含進來，但是有可能盒子沒有完全覆蓋
- 3、背景圖片初始位置
> background-origin
- border-box : 背景圖片從邊框區域開始顯示，並且從邊框開始計算定位
- padding-box :默認值， 背景圖片從內邊距區域開始顯示，並且從內邊距開始計算定位
- content-box: 背景圖片從內容框區域開始顯示，並且從內容框開始計算定位
- 4、背景裁切
> background-clip
- border-box : 默認值，邊框以外背景被裁切
- padding-box : 內邊距以外背景被裁切
- content-box : 內容區以外背景被裁切
>* 新增的背景屬性不能用background屬性簡寫
## 四、漸變
> 漸變不是一個顏色模式，專門用來修飾盒子背景
可以設置給：background、background-image
不能設置給：background-color
- 1、線性漸變
> linear-gradient(direction,color-start,color-stop,color-stop...)
```
background: linear-gradient(to right,red,#ff0 20%,rgb(0,255,0) 50%,blue);
```
- direction : 漸變方向
- to bottom :默認值 ，從上到下漸變
- to top : 從下到上
- to right : 從左到右
- to left : 從右到左
- to top right : 從左下到右上
- to left bottom : 從右上到左下
- angle度數 : 0deg 從下到上 45deng 左下到右上 ...
...
- color-start :起始顏色
- color-stop : 漸變停止的位置
```
重複的線性漸變
repeating-linear-gradient(direction,color-start,color-stop,color-stop);
最後一個顏色值不到百分之百，後面剩餘的空間就會重複前面的漸變效果
background: repeating-linear-gradient(to right,red,yellow 20%);
```
```
多組漸變
background: linear-gradient(red,rgba(255,255,0,0.5)),linear-gradient(to right,blue,green),...;
```
- 2、徑向漸變
> radial-gradient((cx cy),（rx ry),color-start, color-stop...);
> 加上webkit私有前綴才能兼容半徑和圓心的設置
```
background: -webkit-radial-gradient(0% 100%,100% 50%,red,yellow,green);
```
- 圓心位置(cx cy): 水平和垂直座標
- 取值可以是 長度值（100px 100px）/百分比 (100% 50%)/關鍵詞 (left top)
- 半徑（rx ry) : 水平和垂直半徑長度
- 取值可以是：長度值（100px 100px）/百分比 (100% 50%)
```
重複徑向漸變
repeating-radial-gradient((cx cy),(rx ry),color-start, color-stop...)
如果最後一個顏色值不到100%，剩下的空間就會重複前面漸變
```
```
多組徑向漸變
background: radial-gradient(red,rgba(255,255,0,0.5)),radial-gradient(to right,blue,green),...;
```
## 五、用戶界面
1、resize 是否允許用戶縮放元素尺寸
> 需要配合overflow:auto/hidden/scroll屬性，才能生效
```
取值：
none : 不允許用戶縮放
both : 水平和垂直都可以縮放
vertical: 垂直縮放
horizontal: 水平縮放
通常用來取消多行文本域用戶可改變尺寸效果 `textarea{resize:none}
```
2、box-sizing
> 用來規定盒子的盒模型的計算方式
```
content-box（標準盒): 默認值,盒子實際佔位寬 width + 左右padding + 左右border ,三者共同決定
border-box （怪異盒）: 盒子的實際寬只由width屬性決定，添加padding和border會壓縮內容區寬度，而盒子整體大小不變
```
## 六、多列布局
> css3提供的一種佈局方式，能夠快速實現類似於報紙佈局那樣的多列效果
- 1、column-count: 設置多列列數
- 2、column-width: 設置每一列的列寬 ，不方便精準控制列寬和列數，比較少用
- 3、column-gap: 設置兩列之間的間距
- 4、column-rule: 設置兩列之間的分界線 ， 語法同邊框