02-HTML5属性变化

时间:2020-01-18
本文章向大家介绍02-HTML5属性变化,主要包括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>

$flag 上一页 下一页