css3新增属性（css3新增属性display）

转载至浮游本尊

本文原链接：HTML5和CSS3的新特性-CSDN博客

在这篇博文中，我们将全面深入地探索 HTML5 和 CSS3 的新增特性。这些特性不仅为前端开发带来了新的可能性，也极大地提升了用户体验和网页性能。

CSS3 新增特性

1. Flexbox 布局

Flexbox，也称为灵活盒子布局，通过简单的设置可以解决许多传统布局方案难以解决的问题，如垂直居中和等宽布局。

2. Grid 布局

CSS Grid 布局是一个二维的布局系统，可以同时处理行和列，让设计复杂的响应式布局变得简单直观。

3. 过渡和动画

CSS3 的过渡和动画功能为网页元素的状态变化提供了平滑的视觉效果。

4. 阴影和圆角

5. 属性选择器

CSS3 扩展了更多的属性选择器，如、和等，提高了选择器的灵活性。

6. 颜色扩展

RGBA、HSLA颜色模式允许加入透明度，创造更丰富的颜色层次。

7. 文字阴影

增强文本的可读性和元素的立体感。

8. 渐变（Gradients）

无需使用图片即可实现复杂的色彩过渡。

9. 多背景图片

为单一元素设置多重背景图片。

HTML5 新增特性

1. 语义化标签

标签如 , , , , 和使结构更清晰，有助于搜索引擎优化和屏幕阅读器的识别。

<header></header> 
<footer></footer> 
<nav></nav> 
<time></time> 
<article></article> 
<aside></aside> 
<mark></mark> 
<summary></summary> 
<details></details> 
<section></section>

2. 新表单类型

HTML5 引入了多种新的表单输入类型，如 email, date, time, url, search, 等，提高了表单的可用性和功能性。

<input type="email" /> 
<input type="number" /> 
<input type="url" /> 
<input type="range" /> 
<input type="search" /> 
<input type="color" /> 
<input type="tel" /> 
<input type="date" />

HTML5 新增的表单属性

placeholder 属性：简短的提示在用户输入值前会显示在输入域上。
required 属性：要求填写的输入域不能为空。
pattern 属性：描述了一个正则表达式用于验证 <input> 元素的值。
min 和 max 属性：设置元素最小值与最大值。
step 属性：为输入域规定合法的数字间隔。
height 和 width 属性：用于 image 类型的 <input> 标签的图像高度和宽度。
autofocus 属性：规定在页面加载时，域自动地获得焦点。
multiple 属性：规定 <input> 元素中可选择多个值。

3. 视频和音频

和标签简化了音视频的嵌入，无需额外插件。

目前支持的音频格式有: MP3, Wav, 和 Ogg。

注意：video 播放视频时请注意转换一下视频的格式，转换为 AVC(H264)，不转换的话容易出现有声音而没有视频的现象，浏览器将支持第一个识别的文件类型：(MP4, WebM, 和 Ogg)。

4. Canvas 绘图

Canvas 元素使得动态绘图和图形处理变得更加容易。

Canvas API 提供了丰富的绘图功能，包括路径绘制、文本绘制、图像操作等。

5. 地理定位

HTML5 提供了对象，可以获取用户的地理位置信息。

6. Web 存储

HTML5 提供了和两种本地存储方式，可以在客户端保存数据。的数据没有时间限制，而的数据在页面会话结束时会被清除（例如关闭浏览器标签页）。

7. Web Workers

Web Workers 允许在后台运行 JavaScript，可以提高前端应用的性能和响应能力。

8. SVG 图形

SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，可以通过代码或图形编辑器创建复杂的图形和动画。

结论

HTML5 和 CSS3 的引入，为前端开发带来了许多新的功能和改进，使得网页设计和交互变得更加灵活和强大。开发者可以利用这些新特性，更好地实现复杂的设计和用户需求。