HTML5與CSS3新屬性是什么

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

　　1.結構標簽 HTML5最大的變革是標簽具有語義化

　　header 頁面的頭部

　　nav 導航欄

　　article 文章的內容

　　section 一個區塊，與div相似

　　aside 側邊欄

　　footer 頁腳

　　在HTML5中這些結構標簽都可以增加網站的語義化，從而提升搜索引擎對網站的排名

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

　　datalist --只準備了數據，所以先要有輸入框

　　注意：

　　1.input中要設置list屬性，里面的值要等于對應的數據datalist的id值，之后才能對應起來。

　　2.option中的value值要刪除，否則無法實現效果

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

　　required屬性就是空判斷

　　autofocus屬性是自動獲取標點

　　autocomplete屬性設置為on（默認為off）會保存之前提交的內容，name值改變，保存的內容就改變，它是對應著我們提交數據所保存的文件夾一樣的地方

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

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

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

　　類似地：

　　search 搜索，可在文本框中最后位置出現叉叉，點擊后可以把內容清空

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

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

　　range 滑塊操作，調整大小

　　寫在body里

　　cotrols:控制條

　　autoplay:自動播放

　　loop:循環播放

　　因為音頻標簽價值很高，瀏覽器都想以自己為標準，所以W3C聯盟組織就規定了瀏覽器對音頻標簽的兼容性要求，如果想要主流的瀏覽器都能夠很好地播放音頻，就需要把這首音頻設置為不同的格式，都加載到頁面中，這樣就可以保證瀏覽器兼容性。

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

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

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

　　。mp4 .ogv .webm

　　flash格式 被歷史所淘汰

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

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

　　音頻和視頻標簽執行順序：由上至下，能識別哪一個就直接播放哪一個

　　//四個角設置為一樣，圓的弧度

　　四個角：

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

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

　　//f12 檢查 找到div 手動調 看效果 再寫入代碼

　?。u變方向 色值，色值…色值）

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

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

　　外發光：

　　控制陰影

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

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

　　//f12 檢查 找到div 手動調 看效果 再寫入代碼

　　第四個值：陰影顏色

　　內發光：

　　//設置背景圖

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

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

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

　　與盒子陰影一樣，自己調整

　　在 標簽名{ }下實現

　　旋轉：

　　縮放： //縮小0.3倍

　　位移： //水平，垂直

　?。ㄒ韵耫iv只是一個標簽名 舉例用的）

　　添加鼠標懸停后的動畫效果

　　hover為css樣式的偽類，設置鼠標懸停后的樣式

　　設置過渡效果：

　　在div中添加

　　all：是hover中所有屬性都變

　　1s ：第一個時間為動畫的運行時間

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

　　ease: 勻速，這個位置不寫的話默認為勻速

　　ease-in:變加速

　　ease-out：變減速

　　注意：

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

　　正確寫法：

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

　　小技巧：

　　border-radius:50% 可以設置邊框為正圓形，前提是形狀是正方形

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

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

　　另一種寫法

　　在想要做動畫的標簽縱設置animation屬性 animation: name（go） 1s alternate infinite;

　　延時和運動速率也都可以設置，與過渡屬性中設置的規則一樣

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