H5 学习整理

1. 语义标签

     nav 导航   header头部  footer底部  main主体  article文章  aside主体内容之外

    注意：行级元素在设置宽高是无效的；在ie9里面把所有的语义标签解析为行级元素，如果想装换为行级元素设置 display：                 block，ie8完全不支持语义标签，不支持H5，解决方法： ①手动创建标签，默认创建为行级元素                                 document.createElement("header") header{display:block} ② 引入文件 <script src="../js/html5shiv.min.js"></script>

 标签新添加属性：placeholder 提示信息 ；autofocus 自动获取焦点；autocomplete=“on/off” 自动完成（前提：①必须提交过②当前添加的autocomplete的标签必须有name属性）；required 不允许为空 ；pattern=‘^(\+86)?1\d{10}’ 校验 （* 任意个；？0个或1个；+ 一个或多个）

---

2. 报一个input标签嵌入到form里

<form id="MyForm">//id
 用户名：<input type="text" name="username"/>
        <input type="submit" value="提交"/>
</form>
密码：<input type="password" name="userpwd" form="MyForm">//form与form的id对应上

密码可以挂到form里面

3.可以输入的下拉框

//firefox 不支持 一般别用
<input type="text" list="subjects">
<datalist>
 <option value="Java" label="有前景">Java</option>//label属于辅助
</datalist>

4.keygen 加密（图解：）

 

使用：

<form action="">
 用户名：<input type="text" name="username"/><br>
 密 码：<input type="password" name="username"/>
 <keygen></keygen>
<input type="submit" value="提交"/>
</form>

 output 显示输出信息<output>显示信息</output>

5.oninput / onvalid / onkeyup

 oninput:监听当前指定元素内容的改变，只要内容改变就会触发

 onkeyup：键盘弹起的时候触发，每弹起一次触发一次

 onvalid：验证不通过的时候触发

6.进度条progress

<progress></progress>//max value min high low 属性