html5 button autofocus 属性介绍及应用

在HTML5的世界里，我们可以轻松地控制页面元素的焦点行为。当页面加载时，我们希望某些控件自动获得焦点，这时候就要用到autofocus属性了。想象一下这样一个场景：一个简洁的输入框，一个点击即能触发动作的按钮，或者一个可编辑的文本区域，它们在页面加载完毕后立刻获得焦点，等待用户交互。

这个autofocus属性，它的使用非常简单直观。只需要在相应的元素标签中，如``、``或``中，添加`autofocus="autofocus"`属性即可。比如这样：</p> <p>```html</p> <p><input autofocus="autofocus" /></p> <p><button autofocus="autofocus">Hi!</button></p> <p><textarea autofocus="autofocus">

```

关于浏览器支持方面，大部分现代浏览器都完美支持这个属性，如Firefox 4+、Safari 5+、Chrome 6+、Opera 11+以及IE 10。一些旧版本浏览器或特定平台，如Android 2.3和Safari Mobile 5-，可能不支持此功能。

让我们通过一个实例来更直观地理解这个属性。下面是一个简单的按钮，当页面加载时，它会立刻获得焦点：

```html

点击这里

```

你可以亲自试一试，体验一下这个按钮在页面加载完毕后立刻获得焦点的效果。这就是autofocus属性的魅力所在。

在HTML的发展过程中，HTML5引入了许多新的属性，其中就包括这个autofocus属性。与旧版HTML相比，HTML5的autofocus属性使我们能够更加精细地控制页面元素的交互行为。而HTML4.01与HTML5之间的差异则体现在这些新属性的引入上，如这里的autofocus和接下来要介绍的autoplay属性。这些新属性为网页开发者提供了更多创新和优化的可能性。