美文网首页
HTML进阶知识点--HTML5属性变化

HTML进阶知识点--HTML5属性变化

作者: 梦幽辰 | 来源:发表于2019-12-22 15:11 被阅读0次

input标签type属性新增属性值

属性值 作用
tel 手机端不同
email 手机端键盘出现@
number 出现按钮,可以加减
url 手机端键盘出现.com
Date 选取日、月、年
Month 选取月、年
Week 选取周和年 <font color="red">不实用</font>
Time 选取时间(小时和分钟)
Datatime 选取时间、日、月、年(UTC时间) <font color="red">不实用</font>
Datatime-local 选取时间、日、月、年(本地时间)
range 一个可拉伸的进度条(pc端)
search 搜索框(pc端)
color 颜色选择框(pc端)

表单新增属性

autocomplete属性

form 或 input 域应该拥有自动完成功能

<form autocomplete="on"></form>

注意:autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text、search、url、telephone、email、password、datepickers、range、color

autofocus属性

  • 规定在页面加载时,域自动地获取焦点

  • autofocus 属性适用于所有 <input> 标签的类型

语法:

<input autofocus="autofocus>

multiple属性

规定输入域中可选择多个值

PS:multiple 属性适用于以下类型的 <input> 标签:email 和 file

<input type="file" multiple="multiple">

placeholder属性

提供一种提示(hint),描述输入框所期待的值

PS:适用于 <input> 标签 type 属性值为:text、search、url、tel、email、password

required属性

规定必须在提交之前填写输入域(不能为空)

<input type="text" required="required">

减少前端开发人员写表单验证的压力

PS:适用于 <input> 标签 type 属性值为:text、search、url、tel、email、password、datepickers、number、checkbox、radio、file

链接新增属性

  1. <link> 的sizes

  2. <base> 的target

    • base 标签如果设置了 target 属性,就可以控制整个页面所有超链接的跳转方式
  3. <a> 标签

    • media = ""(表示对设备进行优化,handheld 对“手持”设备进行支持,tv 对“电视”设备进行支持

    • hreflang = "zh"(设置语言,这里设置语言是中文)

    • rel = "external"(设置超链接的引用,这里超链接为外部链接)

其他属性

script

  • defer:规定当页面已完成加载后,才会执行脚本

  • async:规定一旦脚本可用,将会异步执行

ol

属性 作用
start 起始值
reversed 倒序排列

html

manifest = "cache.manifest"(定义页面离线应用文件)(引号中内容cache可更改)

<html manifest="cache.manifest">

style

scoped:内嵌CSS

可以写在html文件的任意位置

<style scoped>
    ...
</style>

相关文章

网友评论

      本文标题:HTML进阶知识点--HTML5属性变化

      本文链接:https://www.haomeiwen.com/subject/qlpinctx.html