html5的新特性：（主要包括语义化标签和实用性标签）

weixin_30604651

墨衍会员 · AI 创作全网分发码龄11年

关注

转载最新推荐文章于 2026-03-04 10:56:13 发布 195 阅读 AI 写同款· GEO 优化 ›

html5的新特性：（主要包括语义化标签和实用性标签）　

header 特指头部；
footer 特指底部；　
article 代表文档，页面式应用程序中独立的，完整的可以被外部引用的内容；
section 对页面上的内容进行分块，对文章分段；
aside 定义侧栏标签；
mark 用来标记内容；
video 视频标签；
audio 音频标签；
canvas 画布标签；
localStorage.setItem() 浏览器保存数据；
localStorage.setItem() 　　浏览器保存数据；
localStorage.getItem() 　　浏览器得到数据；
localStorage.removeItem() 　　浏览器删除数据；
localStorage.removeItem() 　　浏览器清除数据；

　　　　css3的新特性：（主要包括选择器类型和动画效果）

a[class^="a"]　获取class名以a开头的，例如aNews；
:first-of-type　　某元素的第一个元素；
:last-of-type　　某元素的最后一个元素；
:nth-of-type(3) 代表某元素的第3个子元素；
:only-child　　　只作用于只有一个子元素的元素；
:disabled　　　　作用于禁用的input标签；
:enabled　　　　作用于可用的input标签；
:checked　　　　表示选中的input标签；
::selection 表示选中的标签；
:before 在元素之前；
:after　　　　　　在元素之后；
border-radius 设置圆角，值可以为px，%；
box-shadow 设置阴影，值有6个，分别代表（X轴偏移量，Y轴偏移量，阴影模糊半径，阴影扩散半径，阴影颜色，投影发方式）；
border-image 为元素设置图片边框；
background或background-image 渐变，属性有两种，linear-gradient线性渐变，radial-gradient径向渐变，属性值可以有多个，分别为(20deg,color1，color2)表示角度，和渐变颜色1，渐变颜色2，其中线性渐变的角度可以为to left和to right；
@media 媒体查询，可以针对不同浏览器类型定义不同样式；
transition 持续时间，一般和动画或2D效果一起用；
-transform 2D效果；属性值有
1. skew(20deg,20deg)　　斜切效果，有两个值分别表示X,Y轴斜切度；
2. scale(2) 放大倍数；
3. translate(100px,20px) 移动，两个值分别为X,Y轴移动距离；
-webkit/-moz/-filter：滤镜效果，如有多个值用空格隔开；
1. invert(0.5) 反色；
2. saturate(0.5) 饱和度；
3. sepia(0.5) 旧照片；
4. opacity(0.5) 透明度；
5. grayscale(0.5) 灰度；
6. brighess(0.2) 亮度；
7. blur(3px) 模糊度；
8. hue-rotate(20deg) 色相；
9. contrast(0.6) 对比度；