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属性 (有序列表)
<ol start="10"> //从第10条开始显示 <li>1</li> <li>2</li> <li>3</li> ...... </ol> <ol reversed="reversed"> //列表倒序显示 <li>1</li> <li>2</li> <li>3</li> ...... </ol>
mainifest="cache.mainifest" (电脑离线的时候加载网页)
<html mainifest="cache.mainifest"> //默认保存index.html , index.css , index.js
scoped属性 (页面任何一个地方都可以写style)
<style scoped> 样式可以写进body的任何一个地方,不仅仅是head </style>