02-HTML5属性变化 - 码农教程

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>

原文地址：https://www.cnblogs.com/mingliangge/p/12207622.html