HTML5与CSS3有哪些新特性

HTML5的新特性

语义化标签：HTML5引入了许多新的语义化标签，如<header>、<nav>、<article>、<section>、<aside>和<footer>等。这些标签有助于更清晰地描述网页的结构和内容，提高可读性和搜索引擎优化。

表单增强：HTML5为表单元素引入了许多新属性和类型，如placeholder、required、pattern、autofocus等，以及如email、url、number、range、date等输入类型。这使得表单验证和交互变得更加简单和强大。

视频和音频支持：HTML5提供了内置的视频和音频支持，如<video>和<audio>元素，以及与之相关的API。这使得在网页中播放音频和视频变得更加简单，无需依赖外部插件。

Canvas绘图：HTML5引入了<canvas>元素，允许通过javascript进行二维绘图。

离线存储：HTML5提供了离线存储功能，如Web Storage（包括localStorage和sessionStorage）和IndexedDB API。这些功能可以使Web应用在离线状态下仍然可用，提高用户体验。

地理定位：HTML5的Geolocation API允许Web应用获取用户的地理位置信息（需用户授权）。这有助于实现基于位置的服务和功能，如导航、附近搜索等。

拖放支持：HTML5的Drag and Drop API使得在网页中实现拖放操作变得更加简单。通过编写适当的事件处理函数，可以实现丰富的拖放交互和功能。

CSS3的新特性

边框圆角（border-radius）：CSS3增加了边框圆角属性，可以轻松地将元素的角设置为圆角。

阴影（box-shadow）：CSS3允许开发者为元素添加阴影效果，从而增加元素的视觉层次感。

渐变（gradients）：CSS3支持线性渐变和径向渐变，使得开发者可以在元素上创建平滑的色彩过渡效果。

动画（animations）和过渡（transitions）：CSS3支持关键帧动画和过渡效果，使得开发者可以在网页上创建复杂的动态效果。

文字装饰（text-decoration）：CSS3增加了新的文字装饰属性，如text-shadow和text-overflow，可以创建更丰富的文本效果。

多列布局（multicolumn layouts）：CSS3允许开发者将文本分布在多列中，类似于传统的报纸排版。

弹性盒子布局（flexbox）：CSS3引入了弹性盒子布局模型，可以轻松地对元素进行对齐、方向和顺序等布局调整。

网格布局（grid layout）：CSS3提供了网格布局模型，使得开发者可以更方便地将元素排列成复杂的二维网格。