十个冷门的HTML属性
来自五一节回不了家的万物之恋。
1. contenteditable 网页内容可编辑
使用 contenteditable属性可以使网页上的内容可编辑,效果展示类似与 input 输入框。这是一个全局属性,也就是说对所有的 HTML 元素(标签)都是通用的,
<p contenteditable='true'>
可编辑的内容
</p>
2. spellcheck 拼写检查
spellcheck 属性指定是否可以检查元素的拼写错误。可以对元素中的文本、可编辑元素中的文本或者输入元素中的文本(密码格式除外)进行拼写检查。效果展示和我们在使用 word之类的编辑类软件自带的识别是一样的,会将错误的部分使用红色波浪线标出。
<p contenteditable='true' spellcheck="true">
这是一段可以编辑的文字
</p>
<input type="text" spellcheck="true" value="输入你想要检测的文本" />
注意: Internet Explorer 9 及更早 IE 版本不支持 spellcheck 属性。
3. download 资源下载
download 属性可以告诉浏览器下载指定的 URL 资源,而不是将页面导航到它。(下载属性仅适用于同源 URL,遵循同源策略的原则)
<a href="/image/a.jpg" download="/image/a.png">
<img src="/image/a.jpg" alt="图片下载" width="200">
</a>
4. accept 上传文件
input 标签的 accept 属性指定用户可以上场的文件类型(前提是 input 的输入类型为 file),可以指定一个或者多个文件类型(使用逗号分隔)作为其值。指定的可以是一种类型(例如:视频 video、音频 audio等),也可以是具体的文件后缀(例如:.jpg,.jpeg,.png等)。
<!-- 音频文件 -->
<label for="audio">
点击上传音频文件
</label>
<input type="file" id="audio" accept="audio/*"/>
<!-- 视频文件 -->
<label for="video">
点击上传视频文件
</label>
<input type="file" id="video" accept="video/*"/>
<!-- 图片图像 -->
<label for="image">
点击上传图片图像
</label>
<input type="file" id="image" accept="image/*"/>
<!-- pdf文件 -->
<label for="pdf">
点击上传pdf文件
</label>
<input type="file" id="pdf" accept=".pdf"/>
5. translate 翻译指定
translate属性,告诉浏览器在页面进行本地化语言翻译时,该元素内的文本内容是否被是被翻译,它具有两个值”是 yes“、”否 no“。
<span>这句不会翻译</span>
<p translate="no">
This is the last rose of summer
</p>
<span>这句会翻译</span>
<p translate="yes">
This is the last rose of summer
</p>
6. poster 视频封面图
poster 属性可用在视频下载或用户播放视频之前显示一张指定的图像(也就是我们熟知的封面图)。
<video controls src="image/c.mp4" poster="image/a.jpg" width="300"></video>
7. inputmode 键盘选择
inputmode 属性,指示浏览器在用户对 input(输入框) 或者 textarea(文本框)进行输入时显示那个键盘,该属性接受各种值。
<!-- none -->
<input type="text" inputmode="none"/>
<!-- numeric -->
<input type="text" inputmode="numeric"/>
<!-- tel -->
<input type="text" inputmode="tel"/>
<!-- decimal -->
<input type="text" inputmode="decimal"/>
<!-- email -->
<input type="text" inputmode="email"/>
<!-- url -->
<input type="text" inputmode="url"/>
<!-- search -->
<input type="text" inputmode="search"/>
适用在移动端开发,或者可调用虚拟键盘的场景。
8. pattern 添加正则表达式
pattern 模式属性允许开发者在 input 输入框或者 textarea 文本框上设置一个正则表达式,届时该元素的值将根据正则表达式进行验证。可以将模式属性与多种输入类型一起使用,例如:文本、日期、搜索、URL、电话、电子邮件和密码等。
<form action="">
<input type="text" name="username" id="username" pattern="[A-Za-z0-9]">
<button type="submit">提交</button>
</form>
9. autocomplete 自动获取完成
autocomplete 属性指定浏览器是否根据用户输入自动补全(根据表单输入框的 name 来获取曾经的输入历史)。可以将 autocomplete 直接使用在 form 元素上,也可以直接使用在 input 输入框上,适配多种输入类型。一般有两个值:off 关闭,on 开启。
<form action="" method="get" autocomplete="on">
First name:<input type="text" name="name"><br>
E-mail: <input type="email" name="email"><br>
<input type="submit">
</form>
10. multiple 多种输入
multiple 属性规定允许用户输入到 元素的多个值,但只适用于email 和 file 类型。multiple 属性意味着多选状态,所以针对用户而言,最好的使用场景是 select 多选框。
<select name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="file" name="image" multiple />
这里是万物之恋,以后也请多多关照了!