當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

【HTML/CSS】HTML5和CSS3的新特性

發(fā)布時(shí)間：2024/7/5 HTML 26 豆豆

生活随笔收集整理的這篇文章主要介紹了【HTML/CSS】HTML5和CSS3的新特性小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

- - 1 HTML5
  - - 1.1 語(yǔ)義化標(biāo)簽
    - 1.2 畫布canvas
    - 1.3 新增API
    - - 1.3.1 拖拽
      - 1.3.2 地理定位
    - 1.4 音視頻Audio/Video
    - 1.5 Web存儲(chǔ)
    - 1.6 WebWorker
    - 1.7 WebSocket
    - 1.8 新增表單控件
  - 2 CSS3
  - - 2.1 新增屬性
    - 2.2 @font-face
    - 2.3 2D/3D轉(zhuǎn)換
    - 2.4 過(guò)渡
    - 2.5 動(dòng)畫
    - 2.6 媒體查詢
    - 2.7 彈性布局
    - 2.8 用戶界面屬性

1 HTML5

1.1 語(yǔ)義化標(biāo)簽

舉例：header、main、section、aside、footer、nav、dialog、detail、summary

優(yōu)點(diǎn)：有利于開發(fā)人員和搜索引擎理解代碼，有利于代碼的維護(hù)和搜索引擎優(yōu)化

1.2 畫布canvas

canvas標(biāo)簽作為圖像容器，通過(guò)JS繪制圖像

1.3 新增API

1.3.1 拖拽

將元素的draggable屬性設(shè)置為true

在ondragstart綁定事件，使用e.dataTransfer.setData(‘div1’, ev.target.id)保存觸發(fā)拖拽的元素的id

在ondrop綁定事件，使用ev.dataTransfer.getData(“div1”)獲取id，將元素append到目標(biāo)位置

事件：
拖拽元素綁定：
dragstart：拖動(dòng)開始
dragend：拖動(dòng)完成
drag：拖動(dòng)時(shí)
釋放區(qū)綁定：
dragenter：進(jìn)入釋放區(qū)
dragover：在釋放區(qū)移動(dòng)
dragleave：沒有釋放離開釋放區(qū)
drop：在釋放區(qū)放下

<!DOCTYPE HTML> <html> <head> <script type="text/javascript">function allowDrop(ev){ev.preventDefault();}function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));} </script> </head> <body><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)"/> </body> </html>

1.3.2 地理定位

navigator.geolocation.getCurrentPosition(showPosition)
showPosition中定義獲取定位信息的函數(shù)：
獲取經(jīng)緯度：position.coords.latitude、position.coords.longitude

1.4 音視頻Audio/Video

<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">您的瀏覽器不支持 audio 元素。 </audio> <video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">您的瀏覽器不支持Video標(biāo)簽。 </video>

1.5 Web存儲(chǔ)

替代cookie的解決方案：cookie容量小，還會(huì)攜帶在http請(qǐng)求中，增加請(qǐng)求的負(fù)載。

sessionStorage：只能維持當(dāng)前會(huì)話中，關(guān)閉窗口，數(shù)據(jù)就會(huì)刪除

localStorage：可以持久存儲(chǔ)，直到被手動(dòng)刪除

1.6 WebWorker

web worker為單線程的JS提供了多線程的實(shí)現(xiàn)方式，它是在后臺(tái)運(yùn)行的JS，獨(dú)立于其他腳本，不影響頁(yè)面的性能，可以繼續(xù)在頁(yè)面做其他的事，web worker在后臺(tái)運(yùn)行。

1.7 WebSocket

WebSocket中瀏覽器和服務(wù)器只需要做一個(gè)握手的動(dòng)作，就可以形成一條快速的通道，二者之間可以互相傳輸數(shù)據(jù)。客戶端通過(guò)send發(fā)送數(shù)據(jù)，通過(guò)onmessage接收數(shù)據(jù)。

1.8 新增表單控件

input的類型：coloer、date、datetime、email、search、tel、time、url

input新屬性：autocomplete、autofocus、min、max、required

2 CSS3

2.1 新增屬性

border-radius：圓角邊框

border-shadow：邊框陰影、 text-shadow：文字陰影

liner-gradient：線性漸變、radial-gradient：徑向漸變

等等…

2.2 @font-face

自定義字體

2.3 2D/3D轉(zhuǎn)換

transform: translate(x, y)移動(dòng)scale(x,y)縮放
transform: translate3d(x, y, z)scale3d(x,y)縮放rotate3d(x,y,z,angle)旋轉(zhuǎn)

2.4 過(guò)渡

transition

2.5 動(dòng)畫

@keyframes animatoion1 {0%{background: red;}25%{background: yellow;}50%{background: blue;}100%{background: green;} } div {animation-name: animatoion1;animation-duration:5s;animation-timing-function: linear;animation-delay:2s;animation-iteration-count: infinite;animation-direction: alternate;/*是否逆向播放*/animation-play-state: running;/*規(guī)定動(dòng)畫是否正在運(yùn)行或暫停*//* Safari and Chrome: */-webkit-animation-name: animatoion1;-webkit-animation-duration:5s;-webkit-animation-timing-function: linear;-webkit-animation-delay:2s;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;-webkit-animation-play-state: running; }

@keyframes 定義動(dòng)畫名稱

2.6 媒體查詢

@media 可以查詢?cè)O(shè)備的物理像素然后進(jìn)行自適應(yīng)操作

2.7 彈性布局

display: flex

2.8 用戶界面屬性

總結(jié)

以上是生活随笔為你收集整理的【HTML/CSS】HTML5和CSS3的新特性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Android自定义控件入门实践之雷达扫
下一篇： MD5,MD2,SHA加密的实现方式