H5和CSS3新增屬性

2021-10-07 16:11:26 字數 2680 閱讀 8263

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

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

頭部標籤

導航標籤

內容標籤

定義文件某個區域

大號的div

側邊欄標籤

尾部標籤

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

2 這些標籤頁面中可以使用多次

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

4 其實 我們移動端更喜歡使用這些標籤

5 html5 還增加了很多其他的標籤,我們後面在慢慢學

1.2 html5 新增的多**標籤

input 型別

type=「email」

urldate 日期

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 奇數

5nn+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。

後倆可以省略

口訣 誰做過渡給誰加。

H5新增標籤 css3新增屬性

一 新增標籤 1 css3新增屬性之border color 為邊框設定多種顏色 p這裡說一下題外話,需要注意 border width 屬性如果單獨使用的話是不會起作用的。請首先使用 border style 屬性來設定邊框。2 css3新增屬性之border image 邊框 css3的bord...

H5和CSS3新增內容總結

css3選擇器有哪些?答 屬性選擇器 偽類選擇器 偽元素選擇器。css3新特性有哪些?答 1.顏色 新增rgba,hsla模式 文字陰影 text shadow 邊框 圓角 border radius 邊框陰影 box shadow 盒子模型 box sizing 背景 background siz...

h5 新增屬性

預設提示內容 placeholder 多輸入,多提交 multiple 支援乙個域中多輸入,逗號隔開,一般配合郵箱和url型別使用 自動獲取焦點,頁面載入,自動獲取焦點游標 autofocus 防止空提交 required 允許輸入的最小字元數和最大字元數 minlength 允許輸入的最小字元長度...