3、HTML5与CSS3：前端开发的革新力量

HTML5与CSS3：前端开发的革新力量

1. HTML5原生特性概述

HTML5的一大优势在于它能反映现实世界的需求，并为这些需求提供优雅的解决方案。那些开发者不常用或浏览器厂商未广泛采用的特性会逐渐从规范中移除；而开发者反复尝试解决常见问题，会促使新特性被提出并添加到规范中。随着新建议被纳入规范，浏览器厂商会实现这些新特性，最终浏览器功能得到扩展，开发者无需手动编写复杂代码。

1.1 占位符字段示例

以占位符字段为例，它是HTML表单输入框中的文本，可替代单独的标签。输入框为空时，其中的文本描述期望输入的数据（如名字或电子邮件地址）；用户开始输入时，占位符文本消失，显示用户的实际输入。

在HTML5之前，实现此效果需要大量样板JavaScript代码，示例如下：

<style>
.hint-on { color: #ddd; }
.hint-off { color: #333; }
</style>
<input type="text" name="firstName" value="First Name" class="hint-on"
       onblur="if (this.value == '') {
                 this.className='hint-on';
                 this.value='First Name';
               }"
       onfocus="if (this.value == 'First Name') {