HTML5的标签语义化和表单

标签的语义化

优点：对浏览器seo有好处

常用布局

<header></header>
<nav></nav>
<section>
    <aside></aside>
    <article></article>
</section>
<footer></footer>

注意点：兼容性问题IE8以下不支持html5和css3

解决方法：引入一个文件html5shiv.js

引入方式

<!--[if lte ie8]>
<script src="html5shiv.js"></script>
<![endif]-->

//条件注释只能ie能够识别

表单

html5新增表单有

• email
• color
• url
• number
• range
• search
• tel
• time
• date
• month
• week

input和datalist的配合使用

    <input type="text" list="car" />
    <datalist id="car>
       <option></option>
    </datalist>

keygen生成加密字符串

keygen元素的作用是一种验证用户的可靠方法

定义：密钥生成器，提交表单时，生成两个键，一个是公钥，一个是密钥，私钥存

储于客户端，公钥被发送到服务器，公钥可用于之后的验证用户的客户端证书

output标签

定义：标签内容在表单提交时，不当做数据提交

meter标签

定义：表示度量器，不建议做进度条

属性：

• value
• max
• min
• high
• low

progress标签

定义：进度条
属性：
- value
- max
- min

HTML5新增的一些属性

• placeholder：提示文字
• autofocus：自动获取焦点
• autocomplete=”on/off”：自动提示
• required：必填否则表单提交不了
• multiple：多选
• novalidate：关闭默认的验证功能，是form标签中的属性

表单事件

oninput

用户输入内容时触发，可用于移动端输入

oninvalid

验证不通过时触发
setCustomValidity() ——可以使界面更加友好