當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2024/7/5 HTML 32 豆豆

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

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

1 HTML5

1.1 語義化標簽

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

優點：有利于開發人員和搜索引擎理解代碼，有利于代碼的維護和搜索引擎優化

1.2 畫布canvas

canvas標簽作為圖像容器，通過JS繪制圖像

1.3 新增API

1.3.1 拖拽

將元素的draggable屬性設置為true

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

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

事件：
拖拽元素綁定：
dragstart：拖動開始
dragend：拖動完成
drag：拖動時
釋放區綁定：
dragenter：進入釋放區
dragover：在釋放區移動
dragleave：沒有釋放離開釋放區
drop：在釋放區放下

<!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中定義獲取定位信息的函數：
獲取經緯度：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標簽。 </video>

1.5 Web存儲

替代cookie的解決方案：cookie容量小，還會攜帶在http請求中，增加請求的負載。

sessionStorage：只能維持當前會話中，關閉窗口，數據就會刪除

localStorage：可以持久存儲，直到被手動刪除

1.6 WebWorker

web worker為單線程的JS提供了多線程的實現方式，它是在后臺運行的JS，獨立于其他腳本，不影響頁面的性能，可以繼續在頁面做其他的事，web worker在后臺運行。

1.7 WebSocket

WebSocket中瀏覽器和服務器只需要做一個握手的動作，就可以形成一條快速的通道，二者之間可以互相傳輸數據。客戶端通過send發送數據，通過onmessage接收數據。

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轉換

transform: translate(x, y)移動scale(x,y)縮放
transform: translate3d(x, y, z)scale3d(x,y)縮放rotate3d(x,y,z,angle)旋轉

2.4 過渡

transition

2.5 動畫

@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;/*規定動畫是否正在運行或暫停*//* 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 定義動畫名稱

2.6 媒體查詢

@media 可以查詢設備的物理像素然后進行自適應操作

2.7 彈性布局

display: flex

2.8 用戶界面屬性

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Android自定义控件入门实践之雷达扫
下一篇：【HTML/CSS】display相关属