H5和CSS3新增屬性

新的标簽 一些新的表單 和表單屬性

這些新特性都有相容性問題 基本都是 ie9 版本

1

以前布局我們都是用 div 做的 div 對于我們搜尋引擎來說是麼樣語義的；

頭部标簽 導航标簽 内容标簽 定義文檔某個區域 大号的div 側邊欄标簽 尾部标簽

1 這些語義化标準主要是針對搜素引擎的

2 這些标簽頁面中可以使用多次

3 在 ie9 中 ，需要把這些元素轉化為塊級元素

4 其實 我們移動端更喜歡使用這些标簽

5 html5 還增加了很多其他的标簽，我們後面在慢慢學

1.2 HTML5 新增的多媒體标簽

1 音頻：

2 視訊 controls 播放控件。

不再使用 Flash

1 視訊 盡量放 mp4

屬性 值

autoplay autoplay 自動播放 谷歌浏覽器把這個給警用了 解決 muted

controls controls 向使用者顯示播放控件

width px 寬

height px 高

loop loop 循環播放

preload auto 規定是否預加載視訊 如果有了 autoplay 就忽略該屬性

none

src url 視訊的 URL 位址

poster imgurl 加載等待的畫面圖檔

muted muted 靜音播放

2 音頻： 盡量 mp3 格式

autoplay autoplay 自動播放

controls controls 音頻控件

loop loop 循環播放

src url 音頻的 url 位址

input 類型

type=“email”

url

date 日期

time 時間

month 月

week 周

number 數字

tel 電話

search 搜尋

color 顔色選擇表單

重點記住三個 number tel search 這三個

新增的表單屬性

required required 表單内容必須不為空。必填

placeholder 提示文本 表單的提示資訊。

autofocus autofocus 自動聚焦屬性

autocomplete off/on 第一次輸入被送出過 下一次不需要。 預設就是打開的

multiple multiple 可多選檔案送出

css新增
           

也是有相容性問題 ie9 支援 移動端好于我們的 pc 端

新增的選擇器

1 屬性選擇器

根本元素特定的屬性選擇元素

1 不借助類或者 id 來選擇

E[att]{} 選擇元素

E[att=“val”]{} 選擇屬性的一個值。

E[att^=“val”] 開頭

E[att$=“val”] 結尾

E[att*=“val”] 任意的意思

注意 類選擇器 屬性選擇器 僞類選擇器 權重都是 10

2 結構僞類選擇器

主要根據我們的文檔結構來選擇元素，常用于根據父級選擇器裡面的子元素。

E:first-child 父元素第一個子元素

E:last-child 父元素最後一個子元素

E:nth-child(n) 父元素第 n 個子元素。

n 可以是數字，關鍵字和公式

n 如果是數字，就是選擇第 n 個子元素，裡面數字從 0 開始 依次增加。

n 可以是關鍵字 ：even 偶數，odd 奇數。

公式

2n 偶數

2n+1 奇數

5n

n+5 從第五個開始

-n+5 前 5 個

E:first-of-type 指定類型第一的第 n 個

E:last-of-type 指定類型最後一個的第 n 個

E:nth-of-type 指定類型 E 的第 n 個

注意：nth——child 對父元素裡面的所有孩子排序選擇（序号是固定的）先找到第 n 個孩子，然後看看是否和 e 比對。

nth-of-type 指定的。

3 僞元素選擇器

可用 css 來建立一個标簽元素，而不需要 html 标簽，進而簡化 HTML 結構

::before 在元素内部的前面插入内容

::after 在元素内部的後面插入内容

注意 before 和 after 通過 css 建立一個元素

新建立的這個元素在文檔中是找不到的，是以我們稱為僞元素

文法 element::before{}; 屬于行内元素

before 和 after 必須有我們 content 屬性

before 在父元素内容的前面建立元素，after 在父元素内容的後面插入元素

僞元素選擇器和标簽選擇器一樣，權重為 1；

僞元素清除浮動

css3盒子模型
           

css3 可以通過 box-sizing 來指定我們盒子模型 有兩個值，content-box，border-box，這樣我們計算盒子

大小的方式就發生了改變。

預設 content-box 盒子上的寬=padding+boder+width4

box-sizing：border-box 盒子大小 width

這個屬性可以使我們的盒子不會撐大我們的盒子了

css 的其他特性

1 圖檔變模糊

css3 濾鏡 filter

filter：函數() 例如 filter:blur(5px) 數值越大越模糊

2 計算盒子寬度 width:calc 函數

width：calc（100%-80px）

括号裡面可以使用 + -* /來計算

css過渡  重點
           

過渡動畫 一個狀态慢慢過渡另一個狀态 動感十足

transition:要過渡的屬性 花費時間 運動曲線 何時開始

1 屬性 想要變化的 css 屬性 寬度 和高度 背景顔色 内外邊距 都可以 ,如果想要所有的屬性都變化

過渡,寫一個 all 就可以

2 花費時間 機關是秒 比如 0.5s

3 運動曲線 :預設是 ease

4 何時開始:機關是秒 可以設定延遲觸發的時間 預設是 0s。

後倆可以省略

口訣 誰做過渡給誰加。