1.? 結構標記
? <section>? 定義一個區域??????????? ? ? ? ????????? ? <article> 定義獨立的內容
? <aside>? 定義頁面內容之外的內容???????? ? ? ? ?? <nav>定義導航鏈接
? <header> 定義一個頁面或者一個區域的頭部??? <footer>定義一個頁面或者一個區域的底部
? <hgroup> 標簽用于對網頁或區段（section）的標題進行組合
? <figure> 定義一組媒體內容以及它們的標題????? <figcaption> 定義figure元素的標題
例如：一個網頁上中間是廣告和正文組成，那么此時這個整體就可以使用
<section>
?? <div>這邊可以用div來加廣告</div>
?? <article>???
? ? ?? <header>
?????????? <h1>標題</h1>
?????????? <p><time>20:25</time></p>
?????? </header> ?????
?????? <p>今年的<time datetime="2016-09-14">中秋節</time>沒有博餅了<p>
</article>
</section>
<aside>作用是用于網頁兩邊
<nav> 顧名思義就是導航作用的，例如
<nav>
????? <a href="超鏈接的url"? target=“_blank代表點擊超鏈接后是用新頁面跳轉，self是在本頁跳轉”> PHP</a>
???? <a href="javascript=void(0);">JAVA</a>
???? <a href="javascript=void(0);">iOS</a>
</nav>
<figure>
???? <h1>圖片標題</h1>
???? <img scr="../../source/play.png">
</figure>
2. div、section、article區別
? div、section、article，語義是從無到有，逐漸增強。
?div無任何語義，僅僅用作樣式化或者腳本的鉤子，對于一段主體性的內容，則就適用section，而假如這段內容可以脫離上下文，作為完整的獨立存在的一段內容，則就適用article。
? 原則上來說，能適用article的時候，也是可以適用section的，但是實際上，假如使用article更合適，那么就不要使用section。 nav和aside的使用也是如此，這兩個標簽頁是特殊的section在使用nav和aside更適合的情況下，也不要適用section。
3.? audio標記
? audio標簽用于定義聲音，支持MP3音頻。
例：
<audio controls="controls">
?????????? <source src="tian.mp3">
</audio>
4.? video標記
? 用于標記定義視頻
5.? font字體
font的屬性表現只有兩種情況，一種是類似于background：屬性，但是前提是得把字體所有屬性一并寫上去才能有效果，另一種是，需要用的屬性需要一個個單獨寫。如：font-style：normal； font-variant：small-caps等。
字體font的屬性有：
? a. font-style：正常（normal），斜體（italic，比較斜點），oblique（斜體）
? b. font-variant:用于變化字母，原本大寫的字母不變，原本小寫的字母變成大寫，但是此時由小寫變成大寫的這些字母會比原本就大寫的字母小。它的屬性有normal、small-cap，設置文本為小型的大寫字母。
c. font-weight:設置文本字體的粗細。 normal、bold（最粗）、bolder、light。
d. font-size ：設置對象中的字體尺寸。有絕對值（small、large等），相對值（smaller，lager）、length，百分比。
e. font-family ：設置字是什么字體，如：宋體，黑體等等。（注意：有字體是有版權的，注意查詢）
6.? 背景background
??? 屬性有：
??? a.???? background-color? : 設置背景顏色。
??? b.???? background-image : 設置漸變色。
??? c.????? background-repeat :?
?7. 表格table
? table-layout：auto|fixed;?
? 默認是auto:列寬度由單元格內容設定。
? fixed：列寬由表格寬度和列寬度設定。
? 比如table的width為200，而td的width設置為80px，使用fixed時，當td的內容?? 超過了80px后那么第二個td的內容就會疊加在從81px開始。 若使用auto，則它會根據內容的大小來確定第二個td需要放的位置。
border-collapse :設置table的每個cell邊框
separate默認值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。
collapse如果可能，邊框會合并為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。
?caption-side:設置表頭的位置，可以為top、bottom、left、right，設置表頭的標簽為<table><caption>標題</caption></table>
?empty-cells:hide、show（默認），設置表格單元格無內容時是否顯示，這個一般不常用。
?
8. list列表
list-style-type設置列表項標記的類型。例如默認的無序列表的標記類型是實心黑色。這個屬性有參數：
ul.a {list-style-type:circle;} 圓形空心
ul.b {list-style-type:square;} 方塊
ol.c {list-style-type:upper-roman;} 大寫羅馬數字
ol.d {list-style-type:lower-alpha;} 小寫羅馬數字
list-style-position設置在何處放置列表項標記。
list-style-image使用圖像來替換列表項的標記。
list-style: url(地圖路徑)，
9.? CSS盒子模型
margin ： 邊距，例如一個電腦屏幕上放著一個div。此時設置margin即設置div與屏幕的間距。margin有四個屬性，top，right，bottom，left。
boder：邊框，引用上面的例子。border即是div的邊框。
padding：內邊距，如div里邊有正文，則設置這個即是正文距離div內邊距的距離。
10. 背景background
a. background-position：設置背景對象的位置，top，left，top, bottom, center;
b. background-origin: border-box/padding-box/content-box; 默認值：padding-box；
例如：border：20px solide #000；此時邊框的寬度為20；
border-box：設置的背景圖片左邊與邊框重合。即圖片的左邊與邊框的最左邊重合。
padding-box： 設置的背景圖片的左邊與邊框的右邊重合。
content-box: 設置的背景圖片與文本重合。
c. background-clip: 裁剪超出指定的范圍部分，與iOS中的裁剪類似。有屬性：border-box、padding-box；content-box；
例如當你的設置背景圖片的background-origin屬性為border-box。 再設置background-clip為padding-box。那么展示出來的效果就和background-origin為padding-box效果一樣。
d.? background- repeat ：repeat-x/repeat-y/repeat/no-repeat
repeat-x:橫向重復，如一張小圖片，設置了這個屬性，那么效果就是一行全部都是重復了這張圖片。
repeat-y: 縱向重復，如一張小圖片，設置了這個屬性，那么效果就是一例全部都是重復了這張圖片。
repeat: 即整個背景全部橫向和縱向都重復這張圖片。也就是鋪滿屏幕。
no-repeat: 即是不重復。
e.? background-image：漸變色屬性。它有???????????????????????????????????????????????????? linear-gradient(red,blue);，background-image:radial-gradient(red,blue);兩個屬性，linear-gradient 是線性的漸變，radial-gradient是圓圈的漸變。這兩個屬性至少要有賦值兩個顏色。可以有例如：（red，blue）| （red ， blue ， green）|（角度90deg ，red，blue）等。
e.? background-attachment: fixed | scroll | local;設置背景圖片是隨對象滾動還是固定的。scroll是默認值。 fixed 是不隨滾動。
f.? background-size ： auto / cover / contain
auto: 背景圖像的真實大小。
cover：將背景圖像等比例縮放到完全覆蓋容器。背景圖像有可能超出容器。
contain： 將背景圖像等比例縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內。
/*background-image: linear-gradient(red, yellow); 線性漸變*/
/*background-image:linear-gradient(left top, red 100px, yellow 200px); 從左上角開始的線性漸變(注意：需要加瀏覽器前綴,例如：-moz-liner-gradient，-moz-（火狐）、-webkit-（safari）、-0-(Opera)、 -ms-（微軟）) */
/*background-image: -moz-linear-gradient(180deg, black 200px, white 300px); 旋轉180°的線性漸變*/
/*background-image:radial-gradient( #0033cc, #FF0000); 徑向漸變*/
/*background-image: -moz-repeating-linear-gradient(left , #0033cc 100px, #FF0000 150px); 重復線性漸變，使用方向（eg:left,right...）需加瀏覽器前綴，也可使用角度來設定方向，也可使用坐標值*/
/*background-image: -moz-repeating-radial-gradient( 300px 60px, #0033cc 100px, #FF0000 150px); 重復徑向漸變，使用方向（eg:left,right...）需加瀏覽器前綴，也可使用角度來設定方向，也可使用坐標值*/
11. border邊框
border：border-width / border-style / border-color
border-width: 設置邊框寬度。
border-style: 設置邊框的樣式，凹槽，突出，等等
border-color: 設置邊框顏色。
12.?? 文本text
a. text-align: start/end/left/right/center/justify/match-parent/justify-all,默認是start，設置內容的水平方式，如center居中。
b.? text-ident：16px。設置文本首行縮進。
c.? line-height:normal/40px. 設置對象的行高， 與height配合使用，可以設置內容水平垂直居中，如：height = 40px， line-height：= 40px；
e.? word-wrap:?? normal/ break-word.設置是否自動換行。
f. word-break : break-word/break-all/keep-all/normal;? /*word-break: break-all;整段結束后才換行,帶符號*/
/*word-break: keep-all;整個單詞要么在上行要么在下行*/
g. text-decoration:none;設置有無下劃線。
h. text-decortation-style: solid/double/dotted/dashed/wavy;設置線條的樣式，
?solid是實線， double兩條線，dotted點虛線， dashed線虛線，wavy波浪線
i.? text-decoration-corlo: 設置裝飾線條的顏色。
j.? text-shadow:設置陰影。text-shadow:3px 3px 5px;/*參數1：向左右偏移，參數2：向上下偏移? 參數3：模糊度*/
13. 陰影box-shadow
? box-shawod:(參數1：橫向偏移， 參數2：縱向偏移， 參數3：陰影寬度，參數4：陰影模糊度一般不設置，設置該參數會使得這個對象四周都有陰影， 參數5：陰影顏色)
14.?? 圓角邊框
? 方法一：? border-radius：左上角水平半徑（em）??? 右上角水平半徑（em）?? 右下角水平半徑（em）? 左下角水平半徑（em） / 左上角垂直半徑（em） 右上角垂直半徑（em）
右下角垂直半徑（em） 左下角垂直半徑（em）
方法二：border-radius：設置四個角
border-top-left-radius:200px； 設置左上角
border-top-right-radius:200px；右上角
border-bottom-right-radius:200px; 右下角
border-bottom-left-radius:200px; 左下角。
方法三：border-radius=200px； 即四個角的倒圓角度為200px；
拓展：旋轉動畫。
<style>
div:nth-child(1){
background: url(../../../resource/images/6.jpg);
background-size: cover;
border-radius: 200px;
animation: rotation linear 3.6s infinite; // 實現animation方法。 rotation是寫的方法名?? linear是使動畫平緩過渡? 3.6s 是動畫時間，（當然如果設置了一直旋轉就不能設置時間了） infinite 設置一直旋轉。
}
@keyframes rotation{? // 聲明一個旋轉函數
0%{
tramsform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
</style>
?
