===========HTML總結============
****************************第一章****************************
HTML基本結構介紹
<!DOCTYPE html> ----約束HTML文檔結構，檢驗是否符合相關web標準，同時告訴瀏覽器，使用哪種規範來解釋這個文檔中的代碼。
<html> －－－HTML部分
<head lang="en"> －－－頭部部分
<meta charset="UTF-8"> －－－描述網頁的摘要信息，包括文檔類型、字符編碼信息
<title></title> －－－描述網頁的標題
</head>
<body>
－－－主體部分 我們自己寫的一些標簽
</body>
</html> 在html中標簽都是成對出現的
要符合w3c標準，(World Wide Web Consortium),萬維網聯盟。
標題標簽
從<h1> ~ <h6> 代表標題標簽，字體從大到小，自帶換行
段落標簽
<p></p> 代表段落標簽，自帶換行
換行標簽
<br/> 換行標簽
水平標簽
<hr/> 水平標簽，就是一條分割線
字體樣式標簽
<strong>字體加粗</strong> 帶有語義化的標簽，它有強調、加強語氣的作用。
<em>斜體</em>
註釋和特殊符號
<!-- 註釋內容 --> 不想給別人看的，只想自己看
空格
大於號 >
小於號 <
引號 "
版權符號 ©
高 height
寬 width
圖像標簽
常見的圖像格式
1.JPG格式 JPG格式采用的有損壓縮，會造成圖像畫面失真，不過壓縮體積較小，而且比較清晰，所以比較適合在網頁中應用。
2.GIF格式 GIF格式圖像在網頁中使用最廣泛、最普遍的一種圖像格式，GIF格式支持透明色，使得GIF格式在網頁的背景和一些多層特效的顯示上用的非常多；還支持動畫，
3.BMP格式 BMP格式圖像在Windows操作系統中使用得比較多，它不支持文件壓縮，也不適用於web網頁。
4.PNG格式 PNG格式是20世紀90年代中期開發的圖像文件存儲格式，它兼有GIF格式和JPG格式的優勢，同時具備GIF格式不具備的特性。流式網絡圖形格式。PNG是一種新興的文本圖像格式。
<img src="圖片地址" alt="圖像的替代文字" title="鼠標懸停提示的文字" width="寬度" height="高度">
超鏈接標簽
<a href="連接地址的路經" target="目標窗口位置">連接文本或圖像</a>
頁面間鏈接接
錨鏈接
<a name="標記名">目標位置</a> 設置乙位置 例：標記名 頂部
<a href="#標記名">當前位置</a> 設置甲位置連接路徑 回到頂部
行內元素和塊元素
塊元特性：無論內容多少，該元素獨占一行 比如：<h1>~<h6>、p
行內元素特性：內容撐開寬度，左右都是行內元素的可以排一行 比如： a、img、strong、em標簽
****************************第二章****************************
列表
1.無序列表
<ul> (1)沒有順序，每個<li>標簽獨占一行(塊元素)
<li>第一項</li> (2)默認<li>標簽項前面有個實心小圓點
<li>第二項</li> (3)一般用於無序類型的列表，
</ul>
2.有序列表
<ol> (1)有序列表，
<li>第一項</li> (2)默認<li>標簽項前面有順序標記
<li>第二項</li> (3)一般用於排序有序列表
</ol>
3.定義列表 例如：<dl>
<dl>
<dt>標題一</dt> (1)沒有順序， <dt>水果</dt>
<dd>第一項</dd> (2)默認沒有標記 <dd>蘋果</dd>
<dd>第二項</dd> <dd>香蕉</dd>
<dt>標題二</dt> <dd>壓力</dd>
<dd>第一項</dd> <dl>
<dd>第二項</dd>
</dl>
表格
<table border="1"> border 設置表格邊框寬度
<tr>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
</tr>
</table>
colspan="橫向跨的單元格數"
rowspan="縱向跨的單元格數"
video 視頻元素
第一種：
<video src="" controls />
第二種：
<video controls>
<source src="" type="video/webm" />
<source src="" type="video/mp4" />
</video>
有倆種取值：
contreols : 提供播放，暫停和音量控件，還可以設置寬度和高度
autoplay : 不需要與用戶進行任何交互，就可以讓視屏加載完成自動播放
audio 音頻元素
【同上】
語義化結構元素
header 頭部
section 主題部分
footer 底部
article 獨立的文章內容
aside 相關類輔助內容
nav 導航類輔助內容
內聯框架<iframe>的用法
<iframe src="引用頁面" nmae="框架表示名" />
可以結合“a"標簽的target屬性使用
<a href="fisrt.html" target="mainFrame" >顯示</a>
<iframe name="mainFrame" src="fisrt.html" />
****************************第三章****************************
表單標簽及表單屬性
<form method="post/get" action="提交的地址" >
<p>姓名：<input name="name" type="text" /> </p>
<p>密碼：<input name="password" type="password" /> </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填"/>
<p>
</form>
單選按鈕
<input name="gen" type="radio" value="男" checked/>男 checked 默認選擇
<input name="gen" type="radio" value="女" />女
復選框
<input type="checkbox" name="interest" value="sports" checked/>運動
<input type="checkbox" name="interest" value="talk" />聊天
<input type="checkbox" name="interest" value="play" />玩遊戲
列表框
<select name="指定列表名稱" size="行數" >
<option valus="可選項的值" selected="selected"></option> selected 默認選中的值
<option valus="可選項的值" ></option>
</select>
多行文本域
<textarea name="textarea" cols="顯示的列數" rows="顯示的行數" >
文本內容
</textarea>
文件上傳
<form action="#" method="post" enctype="multipart/form-data" >
<p><input type="file" name="files" /><br/>
<input type="submit" name="upload" value="上傳" />
</form>
表單驗證
placeholder 屬性用於為input類型的文本框提交一種提示，這種提示可以描述文本框期待用戶輸入何種內容，在輸入為空是顯示。
required 屬性用於規定文本框內容不能為空，否則不允許用戶提交表單。
pattern 屬性用於驗證 input 類型文本框中用戶輸入的內容是否與自定義的正則表達式相匹配。
****************************第四章****************************
第四章 初識CSS3
行內樣式
<h1 style="color:red;">style屬性的應用</h1>
內部樣式
把css代碼寫在<head>的<style>標簽中，語html在同一個內容位於同一個HTML文件中
<style type="text/css"></style>
外部樣式
<link href="style.css" rel="stylesheet" type="text/css" /> 鏈接外部樣式表 先將外部css加載到網頁中
<style>
@import url("css/commom.css") 導入外部樣式表 後加載外部css到網頁中
</style>
央視優先級
行內樣式 > 內部樣式 > 外部樣式 遵循 “就近原則”
CSS3的選擇器
1.標簽選擇器
一個Html頁面是由很多的標簽組成，如<h1>~<h6>、<p> 、<img>等，css 標簽選擇器就是用來聲明這些標簽的。每一種標簽都可以作為相應的標簽選擇器的名稱。
2.類選擇器
<標簽名 class="類名稱">標簽內容</標簽名> .類名稱
3.id選擇器
<標簽名 id="類名稱">標簽內容</標簽名> #類名稱
三種基本選擇器的優先級
id選擇器 > class選擇器 > 標簽選擇器
CSS3的高級選擇器
line-height 行間距
text-indent 每個段落縮進
層次選擇器
E F 後代選擇器
E>F 子選擇器
E+F 相鄰兄弟選擇器
E~F 通用兄弟選擇器
結構偽類選擇器語法
E:first-child 鎖定父元素的第一個子元素
E:last-child 鎖定父元素的最後一個子元素
E F:nth-child(n) 適合用於隔行變色，關鍵字位even，odd
E:first-of-type 選擇父元素內具有指定類型的第一個E元素
E:last-of-type 選擇父元素內具有指定類型的最後一個E元素
E F:nth-of-child(n) 指定父元素內具有指定類型的第n各子元素
屬性選擇器的語法
E[attr] 選擇匹配具有屬性attr的E元素
E[attr=val] 選擇匹配具有屬性attr的E元素,並且屬性值位val(其中val區分大小寫)
E[attr=^val] 以val開頭的任意字符串
E[attr$=val] 以val結尾的任意字符串
E[attr*=val] val與attr屬性值任意位置相匹配
****************************第五章****************************
CSS3美化網頁元素
字體樣式
常用的字體屬性、含義及用法
font-family 設置字體類型 font-family："隸屬" 可以同時聲明多種，中間用“,”分離 瀏覽器會優先讀取英文字體
font-size 設置字體大小 font-size：12px;
font-style 設置字體風格 font-style：italic; 有三個值： normal italic oblique
font-weight 設置字體風格 font-weight：bold; normal=400 默認值，定義標準的字體； bold=700 粗體字體； bolder 更粗的字體； lighter 更細的字體； 從100到900
font 在一個聲明中設置所有字體屬性 font:italic bold 36px "宋體"；
排版網頁文本
常用的文本屬性、含義及用法
color 設置文本顏色
text-align 設置元素水平對齊方式
text-indent 設置首行文本的縮進
line-height 設置文本的行高‘
text-decoration 設置文本的裝飾 上(overline)、下(underline)、刪除線(line-through) 無下劃線(none)
垂直對齊方式
vertical-align:middle 圖片文本垂直居中
文本陰影
text-shadow:color x軸位移（x-offset) y軸位移（y-offset）模糊半徑（blur-radius）
(1)color : 陰影顏色
(2)x-offset ：指定陰影水平移量，正在右邊，反之，在左邊
(3)y-offset : 垂直移量，正在底部，反之在上邊
(4)blur-radius : 模糊半徑，值越大陰影模糊的範圍越大
設置超鏈接和列表樣式
超鏈接偽類
a:like 單擊訪問前的超鏈接樣式
a:visited 單及訪問後的超鏈接樣式
a:hover 鼠標懸浮其上的超鏈接樣式
a:active 單擊未釋放的超鏈接樣式
列表樣式
list-style-type
none 無標記符號
dise 實心圓，默認類型
circle 空心圓
square 實心正方形
decimal 數字
背景
background-color 背景顏色
background-image 導入圖片地址
background-repeat 該屬性控制平鋪的方式
(1) repeat : 沿水平和垂直兩個方向平鋪
(2) no-repeat : 不平鋪，即背景圖像只顯示一次
(3) repeat-x : 只沿水平方向平鋪
(4) repeat-y : 只沿垂直方向平鋪
background-position 設置背景圖像出現的位置
0px 0px (默認，表示從左上角出現背景圖像，無偏移)
30px 40px (正向偏移，圖像向下和向右移動)
-50px -60px (反方向偏移，圖像向左和向右移動)
30% 50% (垂直方向居中，圖像向上和向左移動)
還可以使用關鍵詞表示背景的位置，水平方向的關鍵詞有left、center、right,垂直方向的關鍵詞有top、center、bottom
可以簡寫，如：
background :#C00 url("img/bg_flower.gif") 205px 10px no-repeat;
background-size 背景尺寸
auto 沒有任何變化 圖片保持原尺寸
120px 60px 設置固定尺寸
200px 80% 還可以使用0% ~ 100%
cover 背景圖片放大填充整個標簽
contain 背景圖片保持本身的寬高比例
css3漸變
IE瀏覽器是Trident內核，加前綴 -ms-
Firefox瀏覽器是Mozila內核，加前綴 -moz-
Chrome瀏覽器是Webkit內核，加前綴 -webkit-
Opera瀏覽器是Blink內核，加前綴 -o-
Safari瀏覽器是Webkit內核,加前綴 -webkit-
background:linear-gradient(position,color,color,...)
to bottom:從底部到頂部
to left: 從左邊到右邊
to right:從左邊到右邊
to top left : 從右下方到左上方
to top right ：從下方到又上方
to bottom left : 從右上方到左下方
to bottom right ：從早上方到右下邊
****************************第六章****************************
第六章 盒子模型
margin (外邊距) padding(內邊距)
border-color 邊框顏色
border-width 邊框的粗細程度
border-style 邊框的樣式 solid(實線) dotted(點線) dashed(虛線) double(雙線)
內盒的總尺寸 = border + padding + 內容寬/高
外盒的總尺寸 = border+ padding + margin + 內容寬/高
box-sizing:border-box 實現最終效果和通過盒子模型尺寸計算公式設置完成的效果是一樣的。
content-box : 默認值，盒子的高度或寬度 = border+padding+(margin)+width/height。
border-box:盒子的寬度或高度等於元素內容的寬度或高度。 內容的寬度或高度 = 盒子寬度度或高度-border-padding
inherit:此值使元素繼承父元素的盒子模型模式。
border-radius 制作圖形效果 可以使用 20px 或 20%
box-shadow 盒子陰影 加inset 是設置內部陰影
margin : 0px auto; 讓盒子居中顯示
****************************第七章****************************
第七章 浮動
display屬性的常用值
block 塊級元素的默認值，元素會被顯示為塊級元素，該元素前後會帶有換行符
inline 行內元素的默認值，元素會被顯示為行內元素，該元素前後沒有換行符
inline-block 行內塊元素，元素既具有行內元素的特性，也具有塊元素的特性
none 設置元素不會被顯示 看不見了
float屬性
left 元素向左浮動
right 元素向右浮動
none 默認值，元素不浮動，並會顯示在其文本中出現的位置
clear屬性
left 在左側不允許浮動元素
right 在右側不允許浮動元素
both 在左、右兩側不允許浮動元素
none 默認值，允許浮動元素出現在兩側
解決父級邊框塌陷的方法
1.浮動元素後面添加空div
2.設置父元素的高度
3.父級添加 overflow
visible 默認值，內容不會被修剪，會呈現在盒子之外
hidden 內容會被修剪，並且其余內容是不可見的
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余內容
auto 如果內容別修剪，則瀏覽器會顯示滾動條以便查看其余的內容
****************************第八章****************************
position 屬性
static : 默認值，沒有定位，元素按照標準文檔流進行布局
relative : 相對定位，
使用相對定位的盒子位置以標準文檔流的排版方式為基礎，然後使盒子相對與它在原本的標準位置偏移指定位置。
相對定位的盒子仍在標準文檔流中，其後盒子仍以標準文檔流方式對待它。
總結：設置相對定位的盒子會相對它原來的位置，通過指定偏移，到達新的位置，但仍在標準文檔流中，
它對父級盒子和相鄰的盒子都沒有任何的影響。原來的位置會被保留下來。
absolute ：絕對定位，
盒子的位置以包含它的盒子為基礎進行偏移。絕對定位的盒子從標準文檔流中脫離。
這意味著它們對其後的其他盒子的定位沒有影響，對於其他盒子來說就好像這個盒子不存在一樣。
可以結合相對定位一起使用。
fixed : 固定定位，
它和絕對定位類似，只是以瀏覽器窗口為標準進行定位，也就是當拖動瀏覽器窗口的滾動條時，依然保持對象位置不變。
z-index : 用於調整元素定位時重疊層的上下位置。取值為0和1.
opacity:X X值為0~1，值越小越透明
filter:alpha(opacity=X) X值為0~100，值越小越透明
****************************第九章****************************
CSS3變形
transform:
translate(x,y)：平移函數，基於坐標重新定位元素的位置
scale(x,y) 或 scale(x) 縮放函數，可以使任意元素對象尺寸發生變化
rotate(adeg) 旋轉 為正數正時針旋轉 為負數時逆時針旋轉
skew(xdeg,ydeg) 或 skewX(xdeg) 、skewY(ydeg) 按指定元素水平傾斜角度
CSS3過濾
transition
transition-property ：指定過濾或動態模擬的CSS屬性
transition-duration ：指定完成過濾所需要的時間
transition-timing-function : 指定過渡函數
ease : 元素樣式從初始狀態過渡到終止狀態時速度由快到慢，逐漸變慢(默認值)
linear : 元素樣式從初始狀態過渡到終止狀態時恒速(均速運動)
ease-in : 元素樣式從初始狀態過渡到終止狀態時速度越來越快(漸顯效果)
ease-out : 元素樣式從初始狀態過渡到終止狀態時速度越來越慢(漸顯效果)
ease-in-out : 元素樣式從初始狀態過渡到終止狀態時速度先加速再減速(漸顯漸隱效果)
transition-delay : 指定過渡開始出現的延遲時間
===========HTML總結============