h5是html的最新版本,是14年由w3c完成標準制定。增強了,瀏覽器的原生功能,減少瀏覽器插件(eg:flash)的應用,提高用戶體驗滿意度,讓開發更加方便。
- h5新增的標籤
新增元素 | 說明 |
---|---|
video | 表示一段視頻並提供播放的用戶界面 |
audio | 表示音頻 |
canvas | 表示位圖區域 |
source | 爲video和audio提供數據源 |
track | 爲video和audio指定字母 |
svg | 定義矢量圖 |
code | 代碼段 |
figure | 和文檔有關的圖例 |
figcaption | 圖例的說明 |
main | |
time | 日期和時間值 |
mark | 高亮的引用文字 |
datalist | 提供給其他控件的預定義選項 |
keygen | 祕鑰對生成器控件 |
output | 計算值 |
progress | 進度條 |
menu | 菜單 |
embed | 嵌入的外部資源 |
menuitem | 用戶可點擊的菜單項 |
menu | 菜單 |
template | |
section | |
nav | |
aside | |
article | |
footer | |
header |
- css3
css3被劃分爲模塊,最重要的幾個模塊包括:選擇器、框模型、背景和邊框、文本效果、2D/3D 轉換、動畫、多列布局、用戶界面
-
選擇器
-
框模型
- 背景和邊框
border-radius、box-shadow、border-image、
background-size:規定背景圖片的尺寸
background-origin:規定背景圖片的定位區域
background-clip:規定背景的繪製區域 - 文本效果(常用)
text-shadow:設置文字陰影
word-wrap:強制換行
word-break
css3提出@font-face規則,規則中定義了font-family、font-weight、font-style、font-stretch、src、unicode-range - 2/3D轉換
transform:向元素應用2/3D轉換
transition:過渡 - 動畫
- @keyframes規則:
animation、animation-name、animation-duration等 - 用戶界面(常用)
box-sizing、resize
css3新增僞類
:nth-child()
:nth-last-child()
:only-child
:last-child
:nth-of-type()
:only-of-type()
:empty
:target 這個僞類允許我們選擇基於URL的元素,如果這個元素有一個識別器(比如跟着一個#),那麼:target會對使用這個ID識別器的元素增加樣式。
:enabled
:disabled
:checked
:not