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
  解决视频播放的问题