HTML5頁面佈局前提

1、語義元素概述

一、header：（能夠容許多個）。

二、footer：章節的末尾部分（能夠容許多個）。

三、nav：構建導航，顯示導航連接。

四、aside：定義一個頁面的區域，裝載非正文類的內容，如廣告側邊欄等。

五、article：用來顯示一塊獨立的文章內容。

六、section：定義爲文檔中的節，如每一章節等。

七、hgroup：定義爲對網頁或區段的標題元素進行組合，如H1~H6。

八、audio：音頻內容。

九、canvas：畫布功能。

十、video：視頻內容。

...等元素。

2、本地存儲

    本地儲存的兩種存儲類型API接口：sessionStorage和localStorage。

    sessionStorage：在會話期間內有效。   localStorage：存儲在本地，而且永久儲存，除非對其執行刪除。

3、部分表單屬性

    1.placeholder：做用於文本框處於未輸入狀態和內容爲空時的提示內容。

    2.autofocus：指定控件自動獲取焦點。

    3.required：必填屬性。

    4.tel：供用戶舒服電話號碼的文本框。

4、部分選擇器

    1.before：在某個元素以前插入內容，通常用於清除浮動。

        語法：content:"內容";(必須添加這個)

    2.after：在某個元素以後插入內容。

        語法：content:"內容";(必須添加這個)

    3.first-child:指定元素列表中的第一個元素的樣式

    4.last-child:指定元素列表中的最後一個元素的樣式

    5.nth-child 和 nth-last-child:指定某個元素的樣式或者從後起某個元素的樣式。

5、陰影

    1.box-shadow：讓元素具備陰影效果

        語法：box-shadow:  x y z color;(X軸偏移量，Y軸偏移量，發散程度，顏色)

    2.text-shadow：設置文本內容的陰影效果或模糊效果

        語法：text-shadow：x y z color;(X軸偏移量，Y軸偏移量，發散程度，顏色)

6、背景

    1.background-size：設置背景圖像的大小

    2.background：

        (1)設置多重背景:background: url(img1.png) no-repeat top center,

                                                    url(img2.png) no-repeat top center;

        (2)設置漸變色:background: linear-gradient(to left, #f80 10%, #ff0 100%);

    3.圓角邊框：border-radius: 0 0 0 0;

7、適應移動設備

    1.viewport：容許開發者建立一個虛擬窗口，並自定義其窗口的大小或縮放功能。

        語法:<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />

        解釋：虛擬寬度width爲窗口寬度，初始縮放比例大小爲1倍，同事不容許用戶使用手動縮放功能。

    2.media：（媒體查詢）

        語法：(在全部media前面加上一個@)

                (1)media screen and (max-width:600px){...}(屏幕像素小於600px執行)

                (2)media screen and (min-width:600px){...}(屏幕像素大於600px執行)

                (3)media screen and (min-width:600px) and (max-width:760px){...}(屏幕像素大小在600px~700px執行)