input新增的标签 — email、url、tel、number

电子邮件input类型

语法:

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

image.png

统一资源定位符input类型

语法:

  1. <input type="url" name="email"/>

电话类型input类型

语法:

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

image.png

数字input类型

语法:

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

image.pngimage.png
Date Pickers Input类型
image.png

Date:选取年月日

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

image.png
Month:选取月,日

  1. <input type="month">

image.png
week:选取周,年

  1. <input type="week">

image.png
Time:选取时间(小时和分钟)

  1. <input type="time">

image.png
iphone:12小时制
安卓端:24小时制

DateTime:选取时间(UTC时间 — 年,月,日,时分秒的时间)
DateTime针对iPhone的ios10之后不再兼容,而且安卓系统对其也不再兼容;

  1. <input type="datetime">

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

DateTime-local:选取时间(UTC时间 — 年,月,日,时分秒的时间)

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

image.png

Input新增类型 — range,search,color

  1. //Range范围input类型 -- 默认值 0到100
  2. <input type="range" name="">
  3. //search搜索input类型
  4. <input type="search" name="">
  5. //color颜色input类型
  6. <input type="color" name="">

image.png
image.pngimage.png

表单新增属性

  1. aotocomplete — form或者input域自动完成的效果

    1. <form aotocomplete="on"></form>
    2. ps:autocomplete适用于form标签,以及以下类型input类型:
    3. text,search,telephone,email,password,datapickers,range,color
  2. autofocus属性 — 在规定在页面加载时,域自动获得焦点

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

    适用于所有input标签的类型

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

适用于:input类型的email和file

  1. placeholder属性 — 提示功能,描述的是输入域所期待的值

    适用于text,search,url,telephone,email,password
    image.png

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

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

image.png
注释:
1、base标签表示在网页中出现类似需要编辑超链接的时候,不再需要编写头部:http://localhost/
因为base标签里的href就是将网页所有连接以base作为开头
2、再切新增的target属性的设置将会把网页中的所有超链接的打开方式设置为新开一个窗口
image.png

script标签

1、用于定义客户端脚本的,比如JavaScript
2、通过src链接外部的脚本文件
image.png

OL标签属性

1、ol有序列表 — start(起始值) — reversed(倒序排列)

image.png