https://www.w3school.com.cn/html5/att_input_type.asp
标记5的为新增的

目标

新增input输入类型(掌握)
文件和多媒体(掌握)
新增加的表单属性（了解）
新增的表单元素（datalist）

html5新增表单类型

13个

search：圆角文本框 safari浏览器和Chrome浏览器输入后带删除标志
email：邮箱 -带验证 @
url：网址 -带验证 http:// https:// ftp://
number：数字-带验证包含小数点
tel：电话 -不带验证，移动端打开数字键盘
range：滑动条
color：颜色可以选
时间|日期
time：时间
date：日期
datetime:日期加时间（大多数浏览器不支持，safari支持）
datetime-local：本地日期加时间（大多数浏览器支持,用它）
month:月
week：年份和周数

其中：number|range和时间|日期类型的支持以下属性设置：
min-最小值
max-最大值
step-步长
value-默认值
time默认时分，step=1时显示秒
例子：

<form>
搜索：<input type="search" name="search1"/><br>
请输入E-mail地址: <input type="email" name="user_email"/><br>
请输入网址: <input type="url" name="user_email"/><br />
请输入数值：<input type= "number" name="number" step="5" min= "1" max="20" value="0"/><br />
请输入电话号码：<input type= "tel"  name= "tel1" ><br />
请输入数值(滑动条）：<input type= "range"  name= "range1" min= "1" max= "30" ><br />
请选择一种颜色<input type="color"  name="color1" ><br />
请选择或输入时间: <input type="time" name="time1"/><br />
请选择或输入时间: <input type="time" name="time2" step ="2" value="13:20:00" /><br />
请输入日期：<input  type="date" name="date1"><br />
请输入月份：<input type="month" name="month1"/><br />
请输入年份和周数：<input type="week" name="week1"/><br />
<input type="submit" value="提交" />
</form>

其他：
file：可用于附件上传
image：图片显示类似img

附件<input type="file"/>
image:<input type="image" name="image1" src="../../images/1.jpg" width="200" height="200"><br />

[<input type="image"> 和 <img> 用法区别]

会发生表单提交两次的现象，经常会造成表单元素被重复提交，数据库被写入异常！！
原因：：HTML 中 image的描述是“创建一个图像控件，该控件单击后将导致表单立即被提交。”。
请尽量少用<input type="image">以免造成不必要的异常！！！

video audio

<body>
    视频：<video src="../video/2.mp4" autoplay controls ></video><br>
    音频：<audio src="../video/2.mp4" autoplay controls loop ></audio>
</body>

image.png

表单元素

<datalist> 掌握:可以选择，也可以输入,缺点是firefox里不支持value

            Webpage: <input type="url" list="url_list" name="link" />
            <datalist id="url_list">
                <option label="W3School" value="http://www.W3School.com.cn" />
                <option label="Google" value="http://www.google.com" />
                <option label="Microsoft" value="http://www.microsoft.com" />
            </datalist>

<keygen> 新标准中已废弃，浏览器支持不好
<output> 了解-浏览器支持不好

表单属性

<form>新属性：
autocomplete
novalidate

<input>新属性：
placeholder() :提示
autofocus():自动获取焦点
autocomplete()：必须曾经提交过，必须有name属性 autocomplete="on|off"
required()：必须输入
pattern (regexp)()：正则验证 pattern="^(+86)?1\d{10}$"
multiple():file时多文件 email时多邮箱用逗号分隔 a@a.com ,b@b.com
min 与 max()
step()
form(*):表单元素属于哪个form，有表单的id绑定，利于排版

form的这些不常用，建议了解。
formaction
formenctype

form 默认：enctype="application/x-www-form-urlencoded"    普通文本类型，可以带文件

form表单里如果想上传文件（表单里有input type=file）那么 enctype="multipart/form-data"
formmethod（get/post）
formnovalidate
formtarget (在哪儿打开)

height 与 width
list ：配合datalist用

新增表单事件

这些事件，未来会与js配合使用

oninput:内容改变时触发
onkeyup:键盘弹起时触发
oninvalid:验证不通过时触发

<body>
    <form id="form1">
        手机号：<input id="mobile" type="text" pattern="^1\d{10}$" >
        <input type="submit"  value="提交" />
    </form>
    <script type="text/javascript">
        document.getElementById("mobile").oninvalid=function(){
            //改变默认提示信息
            this.setCustomValidity("请输入手机号");
        }
    </script>
</body>

进度条

progress:有max value属性
meter:度量器 high:高值 low：低值 max min value:当前值

    <progress max="100" value="60"></progress><br>
    高<meter high="80" low="30" max="100" value="90"></meter><br>
    中<meter high="80" low="30" max="100" value="40"></meter><br>
    低<meter high="80" low="30" max="100" value="20"></meter><br>

image.png

语义元素

详见结构标签

https://www.runoob.com/html/html5-semantic-elements.html
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

h5新增加和废弃的标签

https://www.cnblogs.com/yjxFive/p/9145577.html

filedset

组合表单中的相关元素：

<form>
<fieldset>
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>
</form>

第8章html5新增input标签(1)