HTML5与CSS3新特性探索：圆角、阴影、自定义字体与文本换行

"本文将揭秘HTML5和CSS3的相关知识点，包括CSS3中的圆角、阴影、自定义字体和文本换行等新特性，以及HTML5的发展历程、浏览器支持情况和技术概览。" 在HTML5中，CSS3引入了一系列增强网页表现的新特性，使得网页设计更加丰富和动态。 1. **圆角**： CSS3允许我们为元素添加圆角，通过`border-radius`属性可以轻松实现。例如，`border-radius: 3px`将所有边角设置为3像素的圆角。为了兼容旧版本的浏览器，可以使用非标准的前缀 `-moz-border-radius-topleft` 和 `-webkit-border-top-left-radius` 等。 2. **阴影效果**： `box-shadow`属性用于为元素添加盒阴影，如`box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5)`会在元素四周创建一个5像素宽的阴影，颜色为半透明黑色。此外，`text-shadow`属性则可以为文本添加阴影，例如`text-shadow: 2px 2px #444, 3px 3px #555`可以创建两种不同位置和颜色的文本阴影。 3. **自定义字体**： 使用`@font-face`规则，开发者可以引入自定义字体到网页中。例如： ```css @font-face{ font-family: Adam; src: url(adam.ttf); } p { font-family: Adam, serif; } ``` 这将定义一个名为“Adam”的自定义字体，并在段落中应用。 4. **文本换行**： `word-wrap`属性控制文本是否可以在单词内部换行。`word-wrap: normal`表示正常换行，而`word-wrap: break-word`则允许长单词在必要时换行。 HTML5作为网页标准的最新版本，自2007年以来不断发展，强调内容与表现分离，提供了更多的语义化元素和新的API。HTML5的一些重要特征包括： - **HTML5新增和移除的元素**：新增了如`<header>`, `<footer>`, `<article>`, `<section>`等语义化元素，同时移除了某些过时的元素，如`<frameset>`等。 - **HTML5基本布局**：引入了`<nav>`, `<aside>`, `<figure>`, `<figcaption>`等元素，帮助构建更清晰的页面结构。 - **HTML5对表单的支持**：增强了表单处理，如`<input type="date">`, `<input type="email">`等新输入类型，以及`required`、`pattern`等属性，提供了更好的验证和用户体验。 - **离线存储**：`localStorage`和`sessionStorage`允许浏览器缓存数据，即使在网络断开时也能访问。 - **多媒体支持**：`<video>`和`<audio>`元素可以直接在网页内嵌入视频和音频内容，无需依赖Flash等第三方插件。 - **Geolocation API**：允许获取用户的位置信息，为地理位置相关的服务提供便利。 - **Web Workers**：支持后台处理，提高网页性能。 - **Canvas和SVG**：提供了图形绘制的能力，用于动态或交互式图形。 HTML5得到了现代浏览器的广泛支持，如Opera 9.5+、Safari 3.1+、Firefox 3.1+以及Internet Explorer 8.0+等，这些浏览器支持HTML5的多项特性，使得开发者可以充分利用这些新功能来提升网页体验。