HTML5
新的特殊內(nèi)容元素
- 增加的標(biāo)簽及描述
<article>-----------定義頁面獨(dú)立的內(nèi)容區(qū)域。
<aside>------------定義頁面的側(cè)邊欄內(nèi)容厌漂。
<bdi>---------------允許您設(shè)置一段文本，使其脫離其父元素的文本方向設(shè)置截驮。
<command>------定義命令按鈕换怖，比如單選按鈕、復(fù)選框或按鈕
<details> ----------用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)
<dialog> -----------定義對(duì)話框每瞒，比如提示框
<summary>--------標(biāo)簽包含 details 元素的標(biāo)題
<figure>-------------規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表纯露、照片剿骨、代碼等等）。
<figcaption>--------定義 <figure> 元素的標(biāo)題
<footer>-------------定義 section 或 document 的頁腳埠褪。
<header> ----------定義了文檔的頭部區(qū)域
<mark> -------------定義帶有記號(hào)的文本浓利。
<meter> ------------定義度量衡。僅用于已知最大和最小值的度量钞速。
<nav> ---------------定義導(dǎo)航鏈接的部分贷掖。
<progress>---------定義任何類型的任務(wù)的進(jìn)度。
<ruby>---------------定義 ruby 注釋（中文注音或字符）渴语。
<rt> ------------------定義字符（中文注音或字符）的解釋或發(fā)音苹威。
<rp> -----------------在 ruby 注釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內(nèi)容驾凶。
<section>-----------定義文檔中的節(jié)（section牙甫、區(qū)段）。
<time>---------------定義日期或時(shí)間调违。
<wbr>----------------規(guī)定在文本中的何處適合添加換行符窟哺。 - 修改或刪除的：hr（直線，語義化變?yōu)榉指罹€）技肩、small（表示文字小且轨，語義化變?yōu)楦綄偌?xì)則）、strong（加粗虚婿，語義化變?yōu)橹攸c(diǎn)強(qiáng)調(diào)）殖告、font被刪除、big被刪除雳锋、
新的表單控件
傳統(tǒng)的表單元素：form 、label 羡洁、input（text玷过、radio、chickbox、button辛蚊、submit粤蝎、reset、password袋马、hidden初澎、file...）
給input的type新屬性：calendar（日歷）、date（日期）虑凛、time（時(shí)間）碑宴、email（郵箱地址）、url桑谍、search延柠、color（調(diào)色板）、tel（電話號(hào)碼）锣披、range（范圍）贞间、number（數(shù)字）。雹仿。增热。
-
表單的新屬性
autocomplete（自動(dòng)補(bǔ)全）
<input type="email" name="email" autocomplete="off" />autofocus（自動(dòng)獲取焦點(diǎn)）
<input type="text" name="user_name" autofocus="autofocus" />list （規(guī)定輸入域的 datalist。datalist 是輸入域的選項(xiàng)列表）
<input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3Schools" value="http://www.w3school.com.cn" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist>- min胧辽、max 和 step 屬性（input 類型規(guī)定限定）
<input type="number" name="points" min="0" max="10" step="3" /> - multiple（email 和 file可選擇多個(gè)值）
<input type="file" name="img" multiple="multiple" /> - pattern（規(guī)定用于驗(yàn)證 input 的正則）
<input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" /> - placeholder（描述輸入域所期待的值）
<input type="search" name="user_search" placeholder="Search W3School" />
用于媒介|播放的 video 和 audio 元素
video 視頻（安卓手機(jī)兼容性有問題：表現(xiàn)在全屏峻仇、自動(dòng)播放等）
-
視頻項(xiàng)目：
<video webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" width="100%" poster="" preload="auto"> <source src=".xxx.mp4" type="video/mp4"> </video>
audio 音頻（微信自動(dòng)播放需要使用自己的API啟動(dòng)）
對(duì)本地離線存儲(chǔ)的更好的支持
-
localStorage（持久計(jì)劃儲(chǔ)存在本地）
- localStorage存在大小限制，一般情況下5MB
- localStorage沒有過期時(shí)間票顾，除非人為刪除
- 方法
（1）localStorage.setItem('id',id); （2）localStorage.getItem('id'); （3）localStorage.removeItem('id'); （4）localStorage.clear()//刪除所有信息
4.一般用于存儲(chǔ)不重要的信息础浮，做頁面之間的通信（A頁面?zhèn)鹘oB頁面值）
-
sessionStorage（回話存儲(chǔ)：當(dāng)前頁面關(guān)閉，存儲(chǔ)的sessionStorage就清除）
- sessionStorage和localStorage除了存儲(chǔ)的時(shí)間不同奠骄，其他不存在區(qū)別
- 關(guān)閉頁面就清空豆同，但是移動(dòng)端跳轉(zhuǎn)頁面，又返回存儲(chǔ)信息還存在含鳞。
本地存儲(chǔ)存在同源策略影锈。
加密一般使用MD5、sdk.js
用于繪畫的 canvas 元素
- 例1：用戶上傳圖片
回鄉(xiāng)看中國 - 例2：生成海報(bào)
黨章電子書
CSS3
選擇器
- E[attr]：只使用屬性名蝉绷，但沒有確定任何屬性值鸭廷；
- E[attr="value"]：指定屬性名，并指定了該屬性的屬性值熔吗；
- E[attr~="value"]：指定屬性名辆床，并且具有屬性值，此屬性值是一個(gè)詞列表桅狠，并且以空格隔開讼载，其中詞列表中包含了一個(gè)value詞轿秧，而且等號(hào)前面的“?”不能不寫；
- E[attr^="value"]：指定了屬性名咨堤，并且有屬性值菇篡，屬性值是以value開頭的；
- E[attr$="value"]：指定了屬性名一喘，并且有屬性值驱还，而且屬性值是以value結(jié)束的；
- E[attr * ="value"]：指定了屬性名凸克，并且有屬性值议蟆，而且屬值中包含了value；
- E[attr|="value"]：指定了屬性名触徐，并且屬性值是value或者以“value-”開頭的值咪鲜；
- :hover用于當(dāng)用戶把鼠標(biāo)移動(dòng)到元素上面時(shí)的效果；
- :active用于用戶點(diǎn)擊元素那一下的效果（正發(fā)生在點(diǎn)的那一下撞鹉，松開鼠標(biāo)左鍵此動(dòng)作也就完成了）
- :focus用于元素成為焦點(diǎn)疟丙，這個(gè)經(jīng)常用在表單元素上。
- :first-child選擇某個(gè)元素的第一個(gè)子元素鸟雏；
- :last-child選擇某個(gè)元素的最后一個(gè)子元素享郊；
- :nth-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素；
- :nth-last-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素孝鹊，從這個(gè)元素的最后一個(gè)子元素開始算炊琉；
- :nth-of-type()選擇指定的元素；
- :nth-last-of-type()選擇指定的元素又活，從元素的最后一個(gè)開始計(jì)算苔咪；
- :first-of-type選擇一個(gè)上級(jí)元素下的第一個(gè)同類子元素；
- :last-of-type選擇一個(gè)上級(jí)元素的最后一個(gè)同類子元素柳骄；
- :only-child選擇的元素是它的父元素的唯一一個(gè)了元素团赏；
- :only-of-type選擇一個(gè)元素是它的上級(jí)元素的唯一一個(gè)相同類型的子元素；
- :empty選擇的元素里面沒有任何內(nèi)容耐薯。
變形
transform:translate(X|Y|Z)//位移
transform:rotate(X|Y|Z)//旋轉(zhuǎn)
transform:scale(X|Y|Z)//縮放
transform:skew(X|Y|Z)//傾斜 單位deg
變形基準(zhǔn)點(diǎn) //默認(rèn)的基準(zhǔn)點(diǎn)是元素中間位置
transform-origin:top center; //中上方也可以用百分比
動(dòng)畫 : 詳轉(zhuǎn)至
其他樣式特性
- 陰影
box-shadow: 10px 10px 5px #888888;
//參數(shù)說明：
//box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需舔清。水平陰影的位置。允許負(fù)值
v-shadow 必需曲初。垂直陰影的位置体谒。允許負(fù)值
blur 可選。模糊距離
spread 可選臼婆。陰影的尺寸抒痒。
color 可選。陰影的顏色颁褂。請(qǐng)參閱 CSS 顏色值评汰。
inset 可選纷捞。將外部陰影 (outset) 改為內(nèi)部陰影。
- background
background-attachment:fixed//背景圖固定定位
background-origin:padding-box//從填充區(qū)開始設(shè)置背景
border-box//從邊框區(qū)開始設(shè)置背景
content-box//從內(nèi)容區(qū)開始設(shè)置背景
background-size:cover//背景鋪滿整個(gè)容器被去，不會(huì)變形
contain//背景完全顯示，不會(huì)變形
- 圓角
border-radius:10px;//
- 灰度（整個(gè)頁面都可以變?yōu)榛疑蔽ǎ糜诓缓玫氖虑榘l(fā)生）
-webkit-filter:gragscale(1)
filter:gragscale(1)
- 超出省略
單行超出顯示省略號(hào)
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行超出顯示省略號(hào)
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
- box-sizing
box-sizing: content-box|border-box|inherit;
//content-box
寬度和高度分別應(yīng)用到元素的內(nèi)容框惨缆。
在寬度和高度之外繪制元素的內(nèi)邊距和邊框。
//border-box
為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制丰捷。
通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度坯墨。
