HTML5新增的元素和特性 · CSS

[TOC] # 1. 文檔類型聲明 HTML5的文檔聲明為`<!DOCTYPE html>`，此外還有HTML4s、XHTML的自行百度。 # 2. 字符設定 ```html <meta http-equiv="charset" content="utf-8">：/* HTML與XHTML中建議這樣去寫 */ ``` ```html <meta charset="utf-8">：/* HTML5的標簽中建議這樣去寫 */ ``` # 3.常用新標簽 w3c 手冊中文官網 : [http://w3school.com.cn/](http://w3school.com.cn/)，或[菜鳥教程](https://www.runoob.com/html/html5-intro.html)網站 * header：定義文檔的頁眉頭部 * nav：定義導航鏈接的部分 * footer：定義文檔或節的頁腳底部 * article：定義文章。 * section：定義文檔中的節（section、區段） * aside：定義其所處內容之外的內容側邊 <br/> * datalist 標簽定義選項列表。請與 input 元素配合使用該元素。 **`html\datalist選項列表.html`** * fieldset 元素可將表單內的相關元素分組和打包，與legend 搭配使用。 **`html\fieldset圍繞表單的邊框.html`** # 4. 新增的input type屬性值 email、tel、url等。 # 5. 常用新屬性用在input標簽等需要輸入的元素中： placeholder、autofocus、multiple、autocomplete、required、accesskey等。 **`作業與特效\表單綜合案例-學生檔案.html`** # 6. 背景縮放(CSS3) 通過background-size設置背景圖片的尺寸，就像我們設置img的尺寸一樣，在移動Web開發中做屏幕適配應用非常廣泛。其參數設置如下： * 可以設置長度單位(px)或百分比（設置百分比時，參照盒子的寬高） * 設置為cover時，會自動調整縮放比例，保證圖片始終填充滿背景區域，如有溢出部分則會被隱藏。我們平時用的cover 最多 * 設置為contain會自動調整縮放比例，保證圖片始終完整顯示在背景區域。 ```css background-image: url('images/gyt.jpg'); background-size: 300px 100px; /* background-size: contain; */ /* background-size: cover; */ ``` # 7.多背景(CSS3) 以逗號分隔可以設置多背景，可用于自適應布局，做法就是用逗號隔開就好了。 * 一個元素可以設置多重背景圖像。 * 每組屬性間使用逗號分隔。 * 如果設置的多重背景圖之間存在著交集（即存在著重疊關系），前面的背景圖會覆蓋在后面的背景圖之上。 * 為了避免背景色將圖像蓋住，背景色通常都定義在最后一組上， ```css background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px , url(test1.jpg) no-repeat scroll 10px 20px/70px 90px , url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa; ``` # 8.凹凸文字 **`html\凹凸文字.html`**