input 新增属性
- datepickers
- <input type="email" name="">// 手机端会有 @xxx.com 输入提示
- <input type="url" name=""> // 手机端会有. com 输入提示
- <input type="tel" name="">// 安卓手机端会出现简洁的九宫格数字输入
- <input type="number" name="">// 手机端会出现简洁的九宫格数字输入 (只能输入数字或者简单的运算符号)
- <input type="date" name=""> // 手机端会出现 年 月 日 的选择
- <input type="month" name="">// 手机端会出现 年 月的选择
- <input type="week" name="">// 手机端会出现 年 周 的选择, iPhone 已不支持
- <input type="time" name="">// 手机端会出现 时 分 的选择
- <input type="datetime" name="">//// 手机端会出现 年 月 日 时 分 的选择,(很多手机已不兼容, pc 端也如此)
- <input type="datetime-local" name="">// 手机端会出现 月 日 周 时 分 的选择
range 摇杆选择
<input type="range" name=""min="1″ max="10″> // 摇杆选择, 默认最大 100
search 搜索框
<input type="search" name=""> // 文本输入框后面多了一个叉
color 颜色选择框
<input type="color" name=""> // 点击按钮会出现颜色选择器
表单新增属性
autocomplete 属性 (表单自动填充)
- <form action="xxx.php" autocomplete="on">
- // 表单根据历史记录, 自动填充
- <input type="text" name="">
- <input type="number" name="" autocomplete="off">
- // 该输入框取消自动填充
- <input type="submit" name="">
- </form>
- //autocomplete 适用于 input 的: text,search,url,telephone,email,password,datepickers,range,color
autofocus 属性 (页面加载后, 该输入框自动获得焦点)
- <form action="xxx.php">
- <input type="text" name="" autofocus="autofocus">
- // 页面加载时光标自动进入输入框
- <input type="number" name="">
- <input type="submit" name="">
- </form>
- //autofocus 适用于所有 input
multiple 属性 (按 ctrl 可以选择多个值)
- <form action="xxx.php">
- <input type="file" multiple="multiple">
- // 按住 ctrl 键可以选择多个文件
- <input type="email" multiple="multiple">
- // 一个邮箱结束后 用逗号隔开 还可以输入另外一个邮箱
- <input type="submit" name="">
- </form>
placeholder 属性 (输入框提示信息)
<input type="search" placeholder="输入框提示信息">
required 属性 (输入框不按照规则输入, 无法提交)
- <input type="text" required="required">
- // 对输入框进行判断, 必须有内容
- <input type="email" required="required">
- // 对邮箱判断, 必须符合邮箱规则
适用于 input 的: text,search,url,telephone,email,password,date pickers,number,checkbox,radio,file
链接属性
- sizes(为了在不同屏幕上, 网站图标都保持清晰)
- <link rel="icon" type="image/png" href="xxx.png" sizes="16*16">
target 属性 (控制是否打开新窗口)
- <base href="http://localhost/" target="_blank">
- //base 写在 head 里面 //base 里面的 href 表示, 页面每一个超链接前面都添加 localhost //base 里面的
- target 表示, 页面每一个超链接都打开新窗口
a 标签的 media 属性 (表示该链接要对某种设备进行支持, 如 handheld/tv)
<a href="xxx.com" media="handheld"></a> // 表示该链接要对手持设备进行支持
a 标签的 hreflang 属性 (表示该链接到的页面, 是 xx 的编码方式)
<a href="xxx.com" hreflang="hk"></a>
a 标签的 rel 属性 (表示该链接的类型, 是什么类型)
<a href="xxx.com" rel="external"></a> // 表示链接的引用是个外部链接
defer 属性 (script 加载完不执行, 等待页面加载完之后再执行)
- <script defer type="text/javascript" src="er.js">
- </script>
- // 加载完整个网页再执行 (目前暂不支持高版本浏览器) // 只能用于 src, 该属性都会使网页加载变成 双线程, 速度大大提高. //
- 只有 Internet Explorer 支持 defer 属性.
async 属性 (加载后直接执行)
- <script async type="text/javascript" src="yi.js">
- </script>
- // 直接加载执行, 异步执行 // 只能用于 src, 该属性都会使网页加载变成 双线程, 速度大大提高.
start 属性 和 reversed 属性 (有序列表)
scoped 属性 (页面任何一个地方都可以写 style)
<style scoped> 样式可以写进 body 的任何一个地方, 不仅仅是 head </style>
来源: http://www.bubuko.com/infodetail-3386698.html