H5 新增内容总结【一】
语义化标签
语义化标签优点
1)提高可访问性;2)SEO;3)结构清晰,利于维护
包括
header(头部),main(主体),footer(页底)
nav(导航),aside(侧边),article(独立内容)
section(~div),figure(独立内容:上图下文;figcaption标题)
hgroup(标题组合),mark(高亮)
dialog(对话框,必须配合open属性)
embed(加载插件标签)
form表单类型
- email类型
该类型会自动要求输入的地址格式正确,否则浏览器不允许提交 - url类型
是用来专门输入url地址的输入框 - number类型
是用来专门输入数字的文本框,在提交时会检测其中内容是否为数字 - range类型
只允许输入一段范围内数值的文本框。以滑动条的形式展示数字,通过拖动滑块实现数字的改变 - tel类型:
用来输入电话号码的专用文本框。tel类型的文本框通常用来验证固定的电话和手机号码。如果只将input元素的类型设置为tel,并不会达到验证电话的效果,它必须和pattern属性一起使用。 - color类型:
用来选取颜色的,它提供一个颜色选取器用来选取。 - search类型
search类型是一种专门用来输入搜索关键词的文本框.
不同于普通类型的文本框在于,当用户开始输入时,输入框的右边会出现一个用于清除内容的图标,单机可以快速清除。
新增日期与时间类型 - date类型
以日历的形式方便用户输入 - time类型
是一种专门用来输入时间的文本框,并且在提交时会对输入时间的有效性进行检查 - datetime类型
是一种专门用来输入UTC日期和时间的文本框,它不仅可以显示年月日,还可以显示具体时间。
设置datetime类型完成后,在提交时会对用户输入或选择的日期和时间进行有效性检测 - datetime-local类型
是用来专门输入本地日期和时间的文本框,并且在提交时会进行检测 - month类型
专门用来输入月份的文本框,提交时会进行检查 - week类型
是一种专门用来输入周的文本框,并且在提交会进行检查
表单元素
datalist
实现可以输入的select,使用方法类似于select
<input name="s_key" list="s_key_list"/>
<datalist id="s_key_list">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
</datalist>
output
output元素用于不同类型的输出,例如,计算结果或者脚本的其他结果。
output元素必须写在表单内部,或者说为其添加form属性。
output元素的值一般由js来控制
<form action="">
<div >
身高<input class="tall" type="text">
</div>
<div>
体重<input class="weight" type="text" name="" id="">
</div>
<input class="test" type="button" value="点击测试">
<output id="result"></output>
</form>
Keygen
用于表单的密钥生成器字段,作用是提供一种验证用户的可靠方法。
optgroup
optgruop元素在html4已经存在,在HTML5进行了拓展。
该元素定义选项组,使用该元素允许用户组合选项。当使用一个长的选项列表式,对相关的选项进行组合会使处理更加容易。
<select name="" id="">
<optgroup label="按类型">
<option value="">音乐</option>
<option value="">电器</option>
</optgroup>
<optgroup label="按价格">
<option value="">0-50</option>
<option value="">51-80</option>
</optgroup>
<optgroup label="按作者国籍">
<option value="">中国</option>
<option value="">美国</option>
</optgroup>
</select>
表单属性
- required
规定是否为必填项,自动验证;应用input,textarea - placeholder
占位,用户输入时进行提示;应用input,textarea - autofocus
自动获取焦点;应用input,button,select,textarea
一个页面仅一个控件可有此属性 - list
配合datalist数据列表标签,指定一个数据列表,作为下拉提示单;应用:input - multiple
多文件上传,上email地址;应用:input(email,file) - pattern
规定用于验证input域的模式:正则表达式;应用:input - autocomplete
设置自动提示补全;应用:部分输入框和form - novalidate
form取消表单验证;应用form表单 - formnovalidate
提交按钮取消表单验证;应用input提交按钮
表单事件
- oninput
监听当前指定元素内容的改变:只要内容改变(添加内容,删除内容),就会触发这个事件 - onkeyup
键盘弹起的时候触发:每一个键的弹起都会触发一次 - oninvalid
当验证不通过时触发
document.getElementById("userName").oninput = function() {
//
}
document.getElementById("userName").onkeyup = function() {
//
}
document.getElementById("userName").oninvalid = function() {
//
}
多媒体标签
- embed
用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径,可以是相对路径或绝对路径 - audio
解决音频播放的问题 - video
解决视频播放的问题