Html部分

E[attr]-------------------存在attr屬性即可

E[attr=val]--------------- 屬性值完全等於val

E[attr*=val]-------------- 屬性值裏包含val字符並且在“任意”位置

E[attr^=val]---------------屬性值裏包含val字符並且在“開始”位置

E[attr$=val]------------- -- 屬性值裏包含val字符並且在“結束”位置

E:first-child----------------其父元素的第1個子元素且這個子元素必須是E

E:last-child-----------------

E:nth-child(n)-------------- 其父元素的第n個子元素，且子元素必須是E

E:nth-last-child(n)--------- 其父元素的第n個子元素(倒數),子元素可以不是E

E:nth-of-type(n)------------ 同一父元素的第n個E元素

E::first-letter{ }------------文本的第一個字母或字

E::first-line{ }--------------文本第一行

E::selection{ }---------------可改鼠標變選中文本的樣式

E::before和E::after{ }-----在E元素內部的開始位置和結束位創 建一個元素，該元素為行內元素，

且必須要結合content屬性使用。

E{opacity}-----------------------只能針對整個盒子設置透明度，子盒子及內容會繼承父盒子的透明度

E{visibility:hidden}------------隱藏，原來位置會被保留

E{display:none}---------------隱藏，原來位置不會被保留

E{text-indent}-----------------首行縮進

以下三項必須同時使用：

text-overflow:clip/ellipsis--------------用來設置是否使用一個省略標記（...）標示對象內文本的溢出

white-space:nowrap---------定義強制文本在一行內顯示

overflow:hidden---------------溢出內容為隱藏

text-shadow: X Y B color--------------可以用來設置文本的陰影效果。X軸，Y軸，B模糊度，顏色

border-radius:上左，上右，下右，下----------邊框圓角，四個圓角值都設置為寬度或者高度的一半

顯示一個圓，設置為50%，顯示一個橢圓（寬高不一樣時）

box-shadow：X,Y,B,color----------------------------邊框陰影

E: linear-gradient( to 方向，起始色，結束色)----- 線性漸變指沿著某條直線朝一個方向產生漸變效果

E: radial-gradient( to 方向，起始色，結束色)---徑向漸變指從一個中心點開始沿著四周產生漸變效果

<nav> ------------------------------------------------------------導航

<header>---------------------------------------------------------頁眉

<footer>------------------------------------------------------------頁腳

<section>------------------------------------------------------------區塊

<article>---------------------------------------------------------------文章

<progress min=”0” max=”100” value=”70”>------------------進度條

<d e t a i l s>--------------------------------------------------------文檔細節

<aside>---------------------------------------------------------側邊欄

<summary>----------------------------------------標題

<time>----------------------------------------------------日期,時間

<dialog>-------------------------------------------------對話框

<input type="email">-------------------------輸入郵箱格式

<input type="tel">-------------------------------輸入手機號碼格式

<input type="url">-----------------------------------輸入url格式

<input type="number">-----------------------------輸入數字格式

<input type="search">--------------------------------搜索框（體現語義化）

<input type="range">------------------------------------自由拖動滑塊

<input type="color">--------------------------------------拾色器

<input type="time">---------------------------------時間

<input type="date">-------------------------------年、月、日

<input type="datetime">-----------------------------

<input type="month">----------------------------年、月

<input type="week">-----------------------------第。。年。。周

<datalist>-----------------------------------------------數據列表

<keygen>--------------------------------------------生成加密字符串

<output>---------------------------------------------------輸出結果

<meter min=”0” mix=”100” value=”66”>------------------度量器

<input type="text" placeholder="請輸入用戶名">----------占位符

<input type="text" autofocus>-----------------------------------自動獲得焦點

<input type="file" multiple>-------------------------------------多文件上傳

<input type="text" required>-------------------------------必填項

<audio>--------------------------------------------------插入音頻文件

autoplay---------------------------------------------------自動播放支持.mp3 .wav .ogg三種格式

controls------------------------------------是否顯示默認播放控件

<audio controls loop>

<source src="URL">

</audio>

<video>--------------------------------------插入電影，用法同上 .mp4 .ogg .webm

Loop---------------------------------------循環播放

Width-----height--------------------------設置視頻播放器的寬度---高度

Controls-------------------------------------播放控件按鈕

position:relative;----------------------------- 相對定位

position:absolute;----------------------------- 絕對定位，絕對定位脫標

position:fixed;---------------------------------- 固定定位

left:50%; margin-left:負的寬度的一半-----------------浮動元素居中

z-index-------------------------------------------------表示誰壓著誰。數值大的壓蓋住數值小的，沒有單位

solid------------------------------------------------實線

dashed---------------------------------------------線形虛線

dotted-------------------------------------------------虛線

border------------------border-width border-style border-color

display: inline;-----------------------轉換為行內元素

display:block；------------------------轉換為塊級元素

text-decoration:-------------------------定義文本修飾

underline----------------------下劃線

overline--------------------上劃線

line-throught--------------刪除線

float-------------------------浮動 投標、貼邊、字圍、收縮。

clear:both---------------------浮動的清除，盒子之間的margin會失效

a:link------------------------------正常，未訪問過的鏈接

a:visited---------------------------用戶已訪問過的鏈接

a:hover----------------------------當用戶鼠標放在鏈接上時 懸停

a:active------------------------------鏈接被點擊的那一刻

background-repeat:no-repeat;--------------- 不重復

background-repeat:repeat-x;-------------------- 橫向重復

background-repeat:repeat-y;------------------------- 縱向重復

letter-spacing：------------------------------------------字間距，字符與字符之間的空白

word-sapce：---------------------------------單詞間距，定義英文單詞之間的間距，對中文字符無效

<link rel="stylesheet" href="URL" type="text/css">-----------CSS外部引入

<link rel="shortcuticon" href="url">--------------------網頁頭部小圖標

<meta name="Description" content=” 內容”>--------------搜索顯示的頁面描述

<meta name="Keywords" content="詞”>------------------關鍵字 告訴搜索引擎網頁是幹嘛的

&nbsp;-----------------------------------------------------------空格

&lt;------------------------------------------------------------------小於

&gt;-----------------------------------------------------------------大於

&quot;-------------------------------------------------------------------引號

disc------------------------------------------------------------圓點列表

circle------------------------------------------------------------圓圈列表

square-----------------------------------------------------------正方形列表

rowspan---------------------------------------------------------跨行

colspan--------------------------------------------------------------跨列

<input type="text">------------------------------------------文本框

<input type="password">------------------------------------密碼框

<input type="radio">------------------------------------------單選框

<input type="checkbox">-------------------------------------多選框

<input type="submit" value="提交">-----------------------提交按鈕

<form name="input" action="html_form_action.php" method="get">

Username: <input type="text" name="user">

<input type="submit" value="Submit">

</form>

<input type="button" value="Hello world!">---------------按鈕

<textarea rows="10" cols=" 30">-------------------文本域

<input type="reset" value="重置">-----------------重置按鈕

<form action="">

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option> 下拉列表

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

</form>

Transform------------------向元素應用 2D 或 3D 轉換

Transform:rotate(Xdeg)-----------------------------旋轉

Transform:skew(Xdeg,Ydeg)------------------------------扭曲

Transform:scale(X,Y)-----------------------------------縮放倍數

Transform：translate( Xpx,Ypx)-----------------------位移

Perspective: （500） px;-----------------------------添加透視投影矩陣效果（3D效果必須用）

perspective-origin:（X,Y）--------------------設置3D元素的基點位置

transform-style: preserve-3d------------------呈現出3D效果

transform:rotate3d(1, 1, 1, 360deg)--------------3D效果圖360度旋轉

transform-origin: left；-------------------------------以左邊為軸

transform-origin: right；------------------------------以右邊為軸

transform-origin: top；---------------------------------以頂邊為軸

transform-origin: bottom；-----------------------------以底邊為軸

（ 按順序寫 ）

animation:名字 持續時間 延遲時間 播放效果 結尾效果 --------------------動畫效果

@keyframes 名字{ }-----------------------結合上面的使用

infinite-------------------------------------無限次播放

linear--------------------------------------------恒速

animation-name------------------------------設置動畫序列名稱

animation-duration-----------------------------動畫持續時間

animation-delay-------------------------------動畫延時時間

animation-timing-function----------------------動畫執行速度

動畫執行速度：

ease---------------------------------------------由快到慢

ease-in------------------------------------------越來越快

ease-out------------------------------------越來越慢

ease-in-out------------------------------------先加速再減速

animation-play-state-------------------------動畫播放狀態，running(默認)、paused(暫停)等

animation-direction-------------------------動畫逆播，alternate等

其主要有兩個值：normal、alternate

1、normal是默認值，如果設置為normal時，動畫的每次循環都是向前播放；

2、另一個值是alternate，他的作用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。

animation-fill-mode-----------------------------動畫執行完畢後狀態，forwards、backwards等

opacity-------------------------------------------------------透明度（0---1）

<marquee>--------------------------------------------------走馬燈效果

direction----------------------------------------------------定義移動方向

behavior：“”“”---------------------------------------------------定義運動的形式

slide--------------------------------------------運動一次就停下

alternate---------------------------------來回運動

scroll-------------------------------單向循環運動

alternate----------------------------------------------------

loop-----------------------------------------------------運動幾次

scrollamount-------------------------------------------移動的速度

scrolldelay-----------------------------------------------延時移動

delay--------------------------------------延時

圖像映射

<img src=”URL” usemap=”#映射名稱”>

<map name=” 映射名稱” id=“映射名稱”>

<area shap=”circle” cords=”坐標” href=“url”>圓形區域

<area shap=”rect” cords=”坐標” href=“url”>矩形區域

</map>

坐標定義： 圓：圓心坐標加上半徑（0,0,5）

矩形：左上角 加右下角（0,0,5,5）

頁面的分割

<frameset rows="19%,*"frameboder="2">--------------rows 上下分割

<frame name="top" src="top.html" noresize/>

<frameset cols="20%,*" frameboder="2">------------cols 左右分割

<frame name="left" src="left.html" noresoze/>

<frame name="right" src="right.html" noresize/>

</frameset>

</frameset>

frameset不能喝body同時使用

noresize-------------------------------讓頁面不變形

frameboder----------------------------frame 的border

Html部分