HTML5属性变化 学习打卡

课程目标

• input表单扩充
• 表单属性
• 链接属性
• 其他属性

input新增的标签

电子邮件input类型

<input type="email" name="email"/>

电话类型input类型

<input type="tel" name="tel"/>

数字input类型

<input type="number" name="number"/>

Date Pickers Input类型

Date：选取年月日

<input type="date" id="date" name="date">

Month：选取月，日

<input type="month">

week：选取周，年

<input type="week">

Time：选取时间（小时和分钟）

<input type="time">

iphone:12小时制
安卓端：24小时制

DateTime：选取时间（UTC时间 – 年，月，日，时分秒的时间）

DateTime针对iPhone的ios10之后不再兼容，而且安卓系统对其也不再兼容；

<input type="datetime">

UTC：指的是协调世界时间，又称世界统一时间，世界标准时间，国际协调时间

DateTime-local:选取时间（UTC时间 – 年，月，日，时分秒的时间）

<input type="datetime-local" name="">

Input新增类型 – range，search，color

//Range范围input类型  --  默认值  0到100
<input type="range" name="">
//search搜索input类型
<input type="search" name="">
//color颜色input类型
<input type="color" name="">

表单新增属性

aotocomplete – form或者input域自动完成的效果

<form aotocomplete="on"></form>
ps:autocomplete适用于form标签，以及以下类型input类型：
text,search,telephone,email,password,datapickers,range,color

autofocus属性 – 在规定在页面加载时，域自动获得焦点

<input type="text" name="text" autofocus="autofocus">
<input type="email" name="email" autocomplete="off" autofocus="autofocus">

适用于所有input标签的类型

multiple属性 – 规定在输入域中可以选择多个值

适用于：input类型的email和file

placeholder属性 – 提示功能，描述的是输入域所期待的值

适用于text，search，url，telephone，email，password

required属性 – 规定在提交之前填写输入域（不能为空） – 后期使用JavaScript验证 – 此时可以减少程序员的压力

适用于text，search，url，telephone，email，password,datapickers，number，checkbox，radio，file
注意：hidden不适用 – 隐藏域

其他标签

链接标签属性

<link rel=”icon” href=”icon.gif” type=”image/gif” sizes=”32*32”>

Sizes:根据不同分辨率引用不同的sizes

Targe属性

Base一般写在head标签中
http://192.1313.3414/demo/index.html
http://192.1313.3414/demo/login.html

<base href=”http://192.1313.3414/demo” target=”_blank”/>

超链接

1、media=”” handheld:手持端 tv:电视设备 后台根据media的值可以判断事手持端还是pc端还是tv端
2、hreflang=”” zh:设置的语言事中文 en：英文
3、rel=”external” (设置超链接的引用，这里的链接为外部链接)

script标签

1、用于定义客户端的文本 JavaScript
2、包裹脚本 src属性指向外部脚本文件
用于图像的制作以及表单验证 动态内容的改变

其他的属性

1、defer：规定当前页面已完成加载后，才会执行的脚本

2、async：规定一旦脚本可用，则会异步执行
演示顺序：先执行defer 后发现async几乎和其余内容同时执行

Ol里面的有序列表

1、start – 起始值
2、Reversed – 倒序排列

Html和style属性

Html：manifest=”cache.manifest” (定义页面离线应用文件)

思维导图