十个冷门的HTML属性


来自五一节回不了家的万物之恋。

1. contenteditable 网页内容可编辑

使用 contenteditable属性可以使网页上的内容可编辑,效果展示类似与 input 输入框。这是一个全局属性,也就是说对所有的 HTML 元素(标签)都是通用的,

<p contenteditable='true'>
	可编辑的内容
</p>

contenteditable

2. spellcheck 拼写检查

spellcheck 属性指定是否可以检查元素的拼写错误。可以对元素中的文本、可编辑元素中的文本或者输入元素中的文本(密码格式除外)进行拼写检查。效果展示和我们在使用 word之类的编辑类软件自带的识别是一样的,会将错误的部分使用红色波浪线标出。

<p contenteditable='true' spellcheck="true">
	这是一段可以编辑的文字
</p>

<input type="text" spellcheck="true" value="输入你想要检测的文本" />

spellcheck

注意: 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>

download

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"/>

accept

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>

translate

6. poster 视频封面图

poster 属性可用在视频下载或用户播放视频之前显示一张指定的图像(也就是我们熟知的封面图)。

 <video controls src="image/c.mp4" poster="image/a.jpg" width="300"></video>

poster

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>

pattern

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>

autocomplete

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 />

这里是万物之恋,以后也请多多关照了!

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值