Html5與CSS3新特性

2021-10-11 16:32:25 字數 1614 閱讀 5753

新增的語義化標籤

新增的多**標籤

: 音訊標籤

"檔案位址"

>

<

/video>

"檔案位址"

>

<

/audio>

屬性

屬性屬性值

描述autoplay

autoplay

control

control

loop

loop

muted

muted

新增的input表單type型別

新增的表單屬性新增屬性選擇器

權重為10,注意權重問題

[屬性值=" "]

選擇以…開頭:^div[class^=icon]

選擇以…結尾:$div[class$=icon]

選擇包括… :*div[class*=icon]

新增結構偽類選擇器

權重為10

根據文件結構來選擇元素,常用於根據父級選擇器的子元素

e:nth-child(n)

first-child 選擇第乙個子元素

last-child 選擇最後乙個子元素

e:nth-of-type(n)

first-of-type 指定型別e的第乙個

last-of-type 指定型別e的最後乙個

兩者區別

e:nth-child(n)對父元素裡面的孩子排序選擇(序號固定)先找到n在和e匹配

e:nth-of-type(n)對父元素裡面指定的子元素進行排序,先去匹配e再去找第n個孩子

偽元素選擇器

權重為1、雙冒號

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

::after 在元素的後面插入內容

css3盒子模型

box-sizing:border-box

css3中通過box-sizing來指定盒子模型(不會撐大盒子)

css3濾鏡filter

將模糊或顏色偏移等圖形效果應用於元素

filter() 函式

filter

:blur

(5px)

calc() 函式

宣告css屬性值時執行一些計算

width

:calc

(100% - 30px)

注意:進行加減乘除計算左右兩邊要有空格

css3過渡 transition

從乙個狀態變化到另乙個狀態

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

注意:誰做過渡給誰加,多個屬性之間用逗號分隔

html5和css3新特性

1易用簡潔 指令碼和連線無需type html5新增加的一些標籤和特性如下 1.無需寫type,指令碼和連線 2.新增加標籤標記元素mark高亮顯示 audio video 如下figure input新增屬性 placeholder required autofocus 新增正規表示式在input...

html5新屬性和css3新屬性

新增屬性 audio autoplay,controls,loop video autoplay,controls,loop,width,heigth 部分 如下 您的瀏覽器版本太低 二 css3新屬性 1 結構偽類選擇器 frist child,last child,nth child,nth l...

HTML5與CSS3基礎(五)

16表單 16.1輸入和元素 16.2建立表單 每個表單都已form開始標籤開始,以form結束標籤結束。兩個標籤之間是組成表單的說明標籤 控制項和按鈕,每乙個控制項都有乙個name屬性,用於在提交表單時對資料進行識別。form開始標籤可以有一些屬性,其中最重要的就是action和method ac...