HTML5 与 CSS3 新属性详解

1. HTML5 新属性HTML5 引入了许多新属性增强了语义化、表单功能和多媒体支持。1.1 语义化属性data-*自定义数据属性用于存储页面或应用私有数据。contenteditable使元素内容可编辑。draggable定义元素是否可拖动。hidden隐藏元素布尔属性。1.2 表单相关属性placeholder输入框的提示文本。required规定输入字段必填。autofocus页面加载时自动聚焦到元素。pattern输入值必须匹配的正则表达式。min / max / step用于数字、日期等输入类型的范围限制。multiple允许文件上传或选择多个值。1.3 多媒体属性controls为音频/视频显示播放控件。autoplay媒体加载后自动播放。loop媒体播放结束后重新开始。preload页面加载时预加载媒体。2. CSS3 新属性CSS3 带来了强大的样式、布局和动画功能。2.1 边框与背景border-radius圆角边框。box-shadow盒子阴影。border-image使用图像作为边框。background-size背景图片尺寸。background-origin背景定位区域。background-clip背景绘制区域。2.2 文本效果text-shadow文本阴影。word-wrap允许长单词换行。word-break指定单词内换行方式。text-overflow文本溢出时显示省略号。2.3 2D/3D 变换transform旋转、缩放、倾斜、平移元素。transition属性变化过渡效果。animation创建关键帧动画。2.4 布局属性flexbox弹性盒子布局。grid网格布局。columns多列布局。2.5 其他重要属性opacity元素透明度。rgba / hsla带透明度的颜色值。calc()动态计算长度值。media媒体查询响应式设计核心。3. 总结HTML5 和 CSS3 的新属性极大地丰富了 Web 开发的可能性使开发者能够创建更语义化、交互性更强、视觉效果更佳的现代网页应用。掌握这些新属性是前端开发者的必备技能。