HTML5 與CSS3

h5是萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言的第五次重大修改。

它引進了新的功能,包括:

新的解析規則而增強了靈活性,

新屬性,

淘汰了過時的屬性,

離線編輯,

信息傳遞的增強等

新增特性:

語義特性,

本地存儲特性:localStorage,sessionStorage

設備兼容特性,

網頁多媒體特性,

三維、圖形及特效特性,

css特性等

H5提供了一些新的元素和屬性,如:

結構標簽:<header>,<nav>,<footer>,<section>等

組合標簽:<figure><figcaption>,<details><summay>,<datalist><option>等

新增了用于多媒體內容的<audio>和<vidio>元素和標記元素

更多的輸入元素類型值,如本地日期選擇,時間,顏色,數字等

畫布canvas元素,二維、三維繪圖,媒體播放,媒體類型注冊,拖放和跨文檔傳輸等

新增表單類型:email,url,number,range,Date pickers,search,olor顏色的選擇等

CSS及層疊樣式表,在網頁制作時采用層疊樣式表技術,可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。

CSS3是CSS技術的升級版本,CSS3語言開發是朝著模塊化發展的。

他新增了很多屬性,如:

1.box-shadow 陰影效果

值(h-shadow水平陰影,v-shadow垂直陰影,blur模糊值,color顏色,spread尺寸,insert外部內部陰影)

2.border-image 圖片邊框 復合屬性

屬性:sourse圖片路徑,slice圖片剪切位置,width圖片邊框寬度,repeat平鋪,size尺寸,clip背景的繪制區域,origin背景相對什么來定位

3.text-shadow 文字陰影

值(h-shadow水平陰影,v-shadow垂直陰影,blur模糊值,color顏色)

4.word-wrap 自動換行

值:normal默認,break-word長單詞換行,breakall單詞內換行,keepall只有半角空格換行

5.border-radius 圓角邊框

可以單方向設置

6.opacity 不透明度

7.box-sizing 控制盒模型的組成

值:content-box內容寬,border-box包括border、padding、content的寬

8.transition 過渡 復合屬性

值(property屬性,duration時間,function曲線,delay延時)

9.transform 變形

值:translate移動,rotate旋轉,scale縮放,skew傾斜,origin改變定位點

等。

animate動畫:

animation-name:關鍵幀的名稱

animation--timing-function:設置動畫曲線

animation-delay:延遲

animation-direction:動畫播放的方向(normal正常,reverse反向,alternate奇數反向偶數正常,alternate-reverse奇數正常偶數反向)

animation-internation-count:動畫播放次數(值或者infinite連續播放)

CSS3還有很多新增屬性,這里我就不一一介紹了,自己探索才有意思!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,335評論 0 11
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 1,803評論 0 2
  • 1、屬性選擇器:id選擇器 # 通過id 來選擇類名選擇器 . 通過類名來選擇屬性選擇器 ...
    Yuann閱讀 1,657評論 0 7
  • 轉載請聲明 原文鏈接 關注公眾號獲取更多資訊 這篇文章主要總結H5的一些新增的功能以及一些基礎歸納,這里只是一個提...
    前端進階之旅閱讀 9,107評論 22 225
  • 1.HTML5是什么?有哪些新特性?有哪些新增標簽?如何讓低版本的 IE 支持 HTML5新標簽 HTML5是HT...
    饑人谷_有點熱閱讀 528評論 0 0