- Vue 3移动Web开发与性能调优实战
- 吕鸣
- 2802字
- 2024-12-27 22:46:38
2.9 HTML 5新增的标签属性
HTML 5新增了不少的标签属性，大多数都是基于<input>标签的属性。作为HTML 5页面中一个与用户交互的重要入口，<input>标签基本上在每个网页的页面中都会被用到。除了新增的<input>标签的属性外，还有新增的<script>标签的async和defer属性（在HTML 4.0.1中提出，在HTML 5中完善），这些属性也是比较重要的。下面我们来一一讲解。
2.9.1 <input>的type属性
在HTML 5中，为<input>标签新增了一些type属性值，用来丰富文本框的类型，如示例代码2-9-1所示。
示例代码2-9-1 <input>的type属性
上面的代码展示了HTML 5中新增的几种type类型，将这段演示代码在PC端的Chrome浏览器来运行一下（Chrome浏览器使用本书开头指定的版本，即至少70版本以上），即可看到每种type的显示效果，如图2-7所示。
图2-7 HTML 5新增<input>的type类型
由于移动端有不同的iOS和Android平台，以及不同的WebView内核，因此<input>输入框元素在移动端浏览器中的表现就比较多元化一些，下面列举几个可以明显看出区别的类型。
· 在iOS中使用type="date"，显示的结果如图2-8所示。
· 在iOS中使用input type="tel"，显示的结果如图2-9所示。
图2-8 在iOS中使用input type="date"的显示结果
图2-9 在iOS中使用input type="tel"的显示结果
如果<input>是一个日期的类型，那么它会自动调用手机端的时间选择器；如果<input>是电话类型，那么当调用键盘时，会自动转换成数字键盘，并且无法输入数字之外的字符。关于移动端<input>各种type的效果，笔者建议读者拿起手机来真实体验一下，可以在手机端执行示例代码2-9-1来加深印象。
2.9.2 <input>文件上传功能
在HTML 5之前，可以使用<input type="file">来实现文件或者图片的上传，在HTML 5中使用<input>标签在移动Web端会调用相册面板，在PC端则会打开文件选择窗口，同时HTML 5在<input>标签上扩展了一些属性来丰富上传功能：
· accept：限制上传文件的类型，image/png和image/gif表示只能上传图片类型，并且扩展名是png或gif；image/*表示任何图片类型的文件。当然，accept属性也支持.xx，表示扩展名标识的限制，例如accept=".pdf,.doc"。
· multiple：设置是否支持同时选择多个文件，选择支持后，files将会得到一个数组。例如在移动Web端调用相册面板时，可以进行多选。
· capture：该属性可以调用系统默认相机、摄像机和录音功能，同时还有其他取值：
■ capture="camera"表示相机。
■ capture="camcorder"表示摄像机。
■ capture="microphone"表示录音。
需要注意的是，在移动Web端给<input>标签设置了capture属性后，当<input>被单击之后，将会直接调用对应的模块，而不会让用户选择。设置了capture属性之后，multiple也将会被忽略。<input>的文件上传如示例代码2-9-2所示。
示例代码2-9-2 <input>的文件上传
建议读者尝试在手机端体验这段代码的真实效果，在iOS手机端体验的效果如图2-10和图2-11所示。
图2-10 在iOS中使用multiple后的效果
图2-11 在iOS中选择完成后的效果
在真实体验后会发现，capture="microphone"这个属性在移动端的支持度并不是很好，例如iOS 12版本的Safari浏览器就不支持该属性设置的选项。
在获取了相关的文件之后，怎么获取所上传的文件呢？我们可以给<input>绑定一个onchange事件，以便在代码中获取对应的文件数据，如示例代码2-9-3所示。
示例代码2-9-3 JavaScript获取<input>数据
2.9.3 <input>其他新增属性
1．autocomplete属性
autocomplete属性规定表单或输入字段是否应该自动完成。在启用自动完成之后，浏览器会基于用户之前的输入值自动填写。在默认情况下，大多数浏览器都启用这项功能。需要注意的是，autocomplete属性适用于这些<input>类型：text、search、url、tel、email、password、datepickers、range以及color，如示例代码2-9-4所示。
示例代码2-9-4 autocomplete属性
Name: <input type="text" name="name" autocomplete="on"><br />
E-mail: <input type="email" name="email" autocomplete="off"><br />
2．autofocus属性
autofocus属性是布尔类型的属性。如果设置该属性，那么当页面加载时<input>元素应该自动获得焦点，如示例代码2-9-5所示。
示例代码2-9-5 autofocus属性
Name:<input type="text" name="name" autofocus>
这里需要注意，对于布尔类型的属性，HTML 5规范规定：元素的布尔类型属性如果有值，就是true，如果没有值，就是false。因此，在声明布尔类型属性时不用赋值，autofocus等同于autofocus="true"或者autofocus="xxx"。
3．min和max属性
min和max属性规定<input>标签的最小值和最大值。min和max属性适用的输入类型：number、range、date、month、time以及week，如示例代码2-9-6所示。
示例代码2-9-6 min和max属性
<!--只能输入1980-01-01之前的日期:-->
<input type="date" name="beforeday" max="1979-12-31">
<!--只能输入2000-01-01之后的日期:-->
<input type="date" name="afterday" min="2000-01-02">
<!--只能输入1-5(包括1和5)数字的:-->
<input type="number" name="range" min="1" max="5">
4．pattern属性
pattern属性用于检查<input>标签内容值的正则表达式。适用于以下输入类型：text、search、url、tel、email和password。例如，只能包含3个字母的输入内容（无数字或特殊字符），如示例代码2-9-7所示。
示例代码2-9-7 pattern属性
<input type="text" name="code" pattern="[A-Za-z]{3}" title="Three letter code">
5．placeholder属性
placeholder属性用以描述输入字段预期值的提示（样本值或有关格式的简短描述），该提示会在用户输入值之前显示在输入字段中，在输入任何值后自动消失。
在HTML 5之前，实现一个输入框的placeholder需要借助CSS和JavaScript来实现，现在有了HTML 5，一个placeholder属性即可实现效果，减少了重复性的开发工作。目前placeholder属性适用于以下输入类型：text、search、url、tel、email以及password，如示例代码2-9-8所示。
示例代码2-9-8 placeholder属性
Name:<input type="text" name="name" placeholder="请输入名字">
6．required属性
required属性是布尔类型的属性。如果设置这个属性，那么规定在提交表单之前必须填写输入字段。required属性适用于以下输入类型：text、search、url、tel、email、password、number、checkbox、radio和file，如示例代码2-9-9所示。
示例代码2-9-9 required属性
Username: <input type="text" name="usrname" required>
对于所有的内容限制类属性，例如pattern、max、min和required等，如果输入的值非法，那么当此<input>放在表单<form>中作为表单元素提交时，会有错误提示信息，如图2-12所示。或者当鼠标移到非法元素上时，也会有错误提示信息，如图2-13所示。
图2-12 错误提示信息（1）
图2-13 错误提示信息（2）
2.9.4 <script>的async和defer属性
在讲解<script>的async和defer属性之前，我们首先需要了解一下浏览器渲染页面的原理，如图2-14所示。
图2-14 浏览器渲染页面的原理
在图2-14的左半部分，当浏览器获得HTML页面内容进行解析并渲染时，就会出现阻塞问题，下面来详细解释一下：
· 当浏览器获得服务端返回的HTML页面内容时，总是会从上往下解析并渲染页面。
· 一般的HTML页面，一些样式文件（CSS）和脚本文件（JavaScript）会放在头部<head>标签中被导入。
· 当浏览器解析到头部的CSS和JavaScript标签时，如果遇到的是外部链接，就会下载这些资源。
· 暂不提外部CSS资源，这里我们只说JavaScript外部资源，即当浏览器遇到外部的<script src="xx.js">时，就会暂停解析后面的HTML页面内容，先发起请求获取当前页面内容，而后解析获取的页面内容并执行。
· 所以，<script>标签就会阻塞正常的HTML页面内容的解析和渲染，尤其当<script>标签导入的外部内容很大时，这种阻塞问题就更加明显，将会导致HTML页面加载变慢，白屏时间变长。
为了解决<script>阻塞页面解析和渲染的问题，HTML 5引入了<script>标签的defer和async属性。这两个属性都是布尔类型的属性。
1．defer属性
当浏览器遇到设置了引入外部资源（注意只针对外部资源）<script src="xx.js" defer>的标签时，就不再阻止解析，会另外并行去下载对应的文件，当下载完成之后也不会立刻执行，而是等到整个HTML页面解析完成后再执行。如果页面有多个<script src="xx.js" defer />，就会按照定义的顺序执行，这一点很重要，如示例代码2-9-10所示。
示例代码2-9-10 defer属性
<head>
<script type="text/javascript" src="abc.js" defer></script>
<script type="text/javascript" src="efg.js" defer></script>
</head>
2．async属性
async属性和defer属性类似，都用于改变处理脚本的行为。与defer属性相同的是，async属性只适用于外部资源，并告诉浏览器立即下载文件。但与defer属性不同的是，标记为async属性的脚本并不保证按照定义它们的先后顺序执行，如示例代码2-9-11所示。
示例代码2-9-11 async属性
<head>
<script type="text/javascript" src="abc.js" async></script>
<script type="text/javascript" src="efg.js" async></script>
</head>
在上面的代码中，如果efg.js文件比abc.js文件先下载完成，那么efg.js文件会在abc.js文件之前执行，因此确保两者之间互不依赖这一点非常重要。指定async属性的目的是不让页面等待两个脚本文件下载和执行，从而异步加载页面的其他内容，因此建议在指定async属性的脚本内容中不要有修改DOM的逻辑。
同时，如果感觉这两个属性并不需要设置，或者并不需要延迟加载，那么最优的方法就是老老实实将外部资源的<script>放在页面底部，例如在</body>标签上面，这样就不会影响HTML页面的解析和渲染。