這篇文章將為大家詳細(xì)講解有關(guān)HTML5與CSS3新屬性是什么，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)是一家業(yè)務(wù)范圍包括IDC托管業(yè)務(wù),網(wǎng)頁空間、主機(jī)租用、主機(jī)托管，四川、重慶、廣東電信服務(wù)器租用,四川聯(lián)通機(jī)房服務(wù)器托管，成都網(wǎng)通服務(wù)器托管,成都服務(wù)器租用,業(yè)務(wù)范圍遍及中國大陸、港澳臺以及歐美等多個國家及地區(qū)的互聯(lián)網(wǎng)數(shù)據(jù)服務(wù)公司。

1.結(jié)構(gòu)標(biāo)簽 HTML5最大的變革是標(biāo)簽具有語義化

header 頁面的頭部

nav 導(dǎo)航欄

article 文章的內(nèi)容

section 一個區(qū)塊，與div相似

aside 側(cè)邊欄

footer 頁腳

在HTML5中這些結(jié)構(gòu)標(biāo)簽都可以增加網(wǎng)站的語義化，從而提升搜索引擎對網(wǎng)站的排名

比下拉菜單更加靈活，可以自己寫也可以用下拉菜單中的

datalist --只準(zhǔn)備了數(shù)據(jù)，所以先要有輸入框

注意：

1.input中要設(shè)置list屬性，里面的值要等于對應(yīng)的數(shù)據(jù)datalist的id值，之后才能對應(yīng)起來。

2.option中的value值要刪除，否則無法實(shí)現(xiàn)效果

為了提升用戶體驗(yàn)：新增與表單驗(yàn)證相關(guān)的屬性，省去很多JS驗(yàn)證的繁瑣操作

required屬性就是空判斷

autofocus屬性是自動獲取標(biāo)點(diǎn)

autocomplete屬性設(shè)置為on（默認(rèn)為off）會保存之前提交的內(nèi)容，name值改變，保存的內(nèi)容就改變，它是對應(yīng)著我們提交數(shù)據(jù)所保存的文件夾一樣的地方

郵箱 :type=“email” 限定用戶輸入必須是email類型

網(wǎng)址：type=“url” 限定用戶輸入必須是網(wǎng)址地址類型，必須有http://

數(shù)字：type=“number” 限定用戶輸入必須是數(shù)字類型

類似地：

search 搜索，可在文本框中最后位置出現(xiàn)叉叉，點(diǎn)擊后可以把內(nèi)容清空

datetime-local 詳細(xì)日期時間，讓用戶可以直接通過文本框彈出的時間日期進(jìn)行選擇

week 星期 ; time 時間; date 日期 ; month 月份，作用：讓用戶可以直接通過文本框彈出的內(nèi)容進(jìn)行填寫

range 滑塊操作，調(diào)整大小

寫在body里

cotrols:控制條

autoplay:自動播放

loop:循環(huán)播放

因?yàn)橐纛l標(biāo)簽價值很高，瀏覽器都想以自己為標(biāo)準(zhǔn)，所以W3C聯(lián)盟組織就規(guī)定了瀏覽器對音頻標(biāo)簽的兼容性要求，如果想要主流的瀏覽器都能夠很好地播放音頻，就需要把這首音頻設(shè)置為不同的格式，都加載到頁面中，這樣就可以保證瀏覽器兼容性。

以下這種語法可以保證兼容性

video標(biāo)簽 （會自動生成一大堆代碼） 用法和音頻方法很像

為了兼容性 會引入多個格式

。mp4 .ogv .webm

flash格式 被歷史所淘汰

‘當(dāng)前瀏覽器不支持——·’ 這句自動生成的代碼的作用 ：

只有在瀏覽器無法識別以上視頻的時候才會顯示給用戶看，用戶可以點(diǎn)擊你寫好的鏈接地址，下載視頻，使用自己本地的播放器來查看。

音頻和視頻標(biāo)簽執(zhí)行順序：由上至下，能識別哪一個就直接播放哪一個

//四個角設(shè)置為一樣，圓的弧度

四個角：

border-radius:四個值 :順時針：左上，右上，右下，左下

border-radius:兩個值 ：左上和右下；右上和左下

//f12 檢查 找到div 手動調(diào) 看效果 再寫入代碼

（漸變方向 色值，色值…色值）

方向：to right/left/top/bottom 也可以設(shè)置為角度： 90deg（=right）

色值不平均分，可以設(shè)置百分比：（red 0%,blue 90%,yellow 100%）

外發(fā)光：

控制陰影

控制陰影位置：第一個值：x軸橫向；第二個值：y軸縱向

第三個值：陰影（虛化效果）大小

//f12 檢查 找到div 手動調(diào) 看效果 再寫入代碼

第四個值：陰影顏色

內(nèi)發(fā)光：

//設(shè)置背景圖

紅綠藍(lán)，前邊三個是色素值，要*//f12 檢查 找到div 手動調(diào) 看效果 再寫入代碼* 自己調(diào)

最后一個值：1是完全不透明 ；0是完成透明

在特殊背景下，文字看不清，就要設(shè)置陰影。

與盒子陰影一樣，自己調(diào)整

在 標(biāo)簽名{ }下實(shí)現(xiàn)

旋轉(zhuǎn)：

縮放： //縮小0.3倍

位移： //水平，垂直

（以下div只是一個標(biāo)簽名 舉例用的）

添加鼠標(biāo)懸停后的動畫效果

hover為css樣式的偽類，設(shè)置鼠標(biāo)懸停后的樣式

設(shè)置過渡效果：

在div中添加

all：是hover中所有屬性都變

1s ：第一個時間為動畫的運(yùn)行時間

2s為延時，第二個時間為延時時間

ease: 勻速，這個位置不寫的話默認(rèn)為勻速

ease-in:變加速

ease-out：變減速

注意：

//是錯誤的，變大效果被覆蓋了

正確寫法：

設(shè)置transform時，如果同時設(shè)置兩個屬性的變化，那就必須在每個屬性值之間添加一個空格來進(jìn)行操作

小技巧：

border-radius:50% 可以設(shè)置邊框?yàn)檎龍A形，前提是形狀是正方形

。5s 就是0.5秒 0就可以省略

一種自由度更大的自動以動畫，利用純CSS制作出像Flash一樣的效果。在實(shí)際應(yīng)用中，過渡和轉(zhuǎn)換更適合做元素的交互，而自定義動畫除了做交互還能使網(wǎng)頁具有活力。（不用人去交互，只要刷新頁面就可以）

另一種寫法

在想要做動畫的標(biāo)簽縱設(shè)置animation屬性 animation: name（go） 1s alternate infinite;

延時和運(yùn)動速率也都可以設(shè)置，與過渡屬性中設(shè)置的規(guī)則一樣

關(guān)于“HTML5與CSS3新屬性是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

新聞名稱：HTML5與CSS3新屬性是什么
轉(zhuǎn)載來源：http://aaarwkj.com/article20/goohjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、云服務(wù)器、虛擬主機(jī)、域名注冊、標(biāo)簽優(yōu)化、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)