html新增

多媒體標籤

視訊

<video>
    <source src="" type="video/mp4">
    <!--屬性：autoplay= "autoplay";(自動播放)
             controls= "control";(顯示播放控制元件)
             loop= "loop";(迴圈播放)
             preload= "auto|none";(預載入)
             src= "";(視訊地址)
             psoter: "";(載入等待圖片地址)
             muted= "muted";(靜音播放)
-->
</video>
 

音訊

<audio src="">
<!--屬性參考video-->

input新增

<input type=""></input>
<!--type新增屬性值：
    email(限制必須輸入email型別)
    url(限制必須輸入url型別)
    date(限制必須輸入日期型別)
    time(限制必須輸入時間型別)
    month(限制必須輸入月型別)
    week(限制必須輸入周型別)
    number(限制必須輸入數字型別)
    tel(手機號碼)
    search(搜尋框)
    color(生成顏色選擇表單)
)
-->
 

新增表單屬性

required= "required";(表單內容不為空，必填)
placeholder= "";
autofocus= "autofocus";(自動聚焦，頁面載入完成自動聚焦到指定表單)
autocomplete= "off|on";(使用者鍵入時，基於之前鍵入過的值，應該顯示出在欄位中填寫的選項)
multiple= "multiple";(可多檔案提交)

css新增

屬性選擇器

/*標籤[屬性]{}，選擇具有相同屬性該類所有標籤*/
input[value]{}


/*標籤[屬性="val"]{}，選擇屬性值等於val的該類所有標籤*/
input[type="text"]{}

/*標籤[屬性^="val"{}，選擇屬性頭等於val的該類所有標籤*/
input[class^="**"]{}

/*標籤[屬性$="val"{}，選擇屬性值尾等於val的該類所有標籤*/
input[class&="**"]{}

/*標籤[屬性*="val"{}，選擇屬性值包含val的該類所有標籤*/
input[class*="**"]{}

/*權重(優先順序)與類選擇器、偽類選擇器同級*/
 

結構偽類選擇器

/*E:first-child{},匹配父元素中第一個子元素*/
div:first-child{}

/*E:last-child{},匹配父元素中最後一個子元素*/
div:last-child{}

/*E:first-child(n){},匹配父元素中第n個子元素*/
div:nth-child(n){}
/*n可為數字、公式和關鍵字(even(偶數)|odd(奇數))*/
/*nth-child會把所有孩子排列序號*/

/*E:nth-of-type(n),只把指定元素排列序號*/
div:nth-of-type(n){}

div:first-of-type{}
div:last-of-type(n){}
/*權重(優先順序)與類選擇器、偽類選擇器、屬性選擇器同級*/

偽元素選擇器

/*放到div盒子裡面的前面*/
div::before{
    content: "";
    /*必須寫*/
}
/*放到div盒子裡面的前面*/
/**/
/*放到div盒子裡面的後面*/
div::after{
    content: "";
    /*必須寫*/
}
/**/
/**/
/*權重與標籤選擇器同級*/

偽元素清除浮動

.clearfix::after{
    content: "";
    /*偽元素必寫*/
    display: block;
    /*插入元素必須是塊級*/
    height: 0;
    /*不要看見這個元素*/
    clear: both;
    /*核心程式碼清除浮動*/
    visibility: hidden;
    /*不要看見這個元素*/
}

css3盒子模型

box-sizing: content-box|border-box;
/*content-box(預設，padding、border會撐大盒子
  border-box(padding、border不撐大盒子))*/

css濾鏡

filter: blur(5px);
/*blur模糊處理，數值越大越模糊*/
/*https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter*/

計算盒子寬度

width: calc(100% + 30px);

過渡(常和hover配套使用)

/*transiton:要過渡的屬性 花費時間 運動曲線 何時開始*/
div:hover{
    transition: width 1s ease 0s; 
}