语义化标签

1. 尽量减少使用无意义标签，如span和div
2. 尽量不使用标签本身的CSS属性，如b、font、s
3. 需要强调的部分，使用strong、em
4. 表格搭建时，使用<thead>表格头部</thead>、<tbody>表格主体</tbody>、<tfoot>表格尾部</tfoot>
5. 列表搭建时，使用<ul>无序列表</ul>、<ol>有序列表</ol>、<dl>定义列表</dl>

• section：划分网页，表示页面中的一个内容区块，比如章节、页眉、页脚或页面其它部分。可以和h1，h2，h3...等其他标签结合使用，表示文档结构。
• hgroup：对整个页面/页面中的一个内容区块的标题进行组合。
• header：一个内容区块或整个页面的头部部分。
• footer：整个页面或页面区块的尾部。
• nav：页面中导航连接的部分。
• article：独立于内容其余部分的完整独立内容块。article元素专门为摘要设计。
• aside：表示article标签内容之外的，与article标签内容相关的辅助信息，aside元素被用于无关内容。
  • 应该与主内容分开的内容
  • aside元素中的内容可以被独立开来而不会影响文档或section中主内容的含义
  • 可以用在主要内容相关的引用，如侧边栏、广告、nav元素组等
  • aside的内容如果被删除，剩下的内容仍然很合理
• figure：表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元（figure元素经常用于图片）
• figcaption：
  • 一个图例的说明
  • figure元素的一个标题或相关解释
  • 使用figcaption时，最好是figure块的第一个或最后一个元素

新增标签的兼容问题

• HTML5语义化标签在IE6-8下，默认当成行内元素展示。
• 通过引入js解决IE9以下新增标签的兼容问题

Forms

• 新增input元素的种类：

  • search：搜索输入框
  • tel：电话号码输入框
  • url：输入URL地址
  • email：邮件输入框
  • number：数字输入框
  • rang：特定范围内的数值选择器
  • color：颜色选择器 只在Opera和Blackberry浏览器
  • datetime：显示完整日期和时间 UTC标准时间
  • datetime-local：显示完整日期和时间
  • time：显示时间
  • month：显示月份
  • week：显示周

• 表单新特性：

  • placeholder：输入框占位符，用作输入提示
  • autocomplete：是否保存用户输入值，默认为on，关闭为off
  • autofocus：自动聚焦
  • required：此项必填，不能为空
  • pattern：正则验证 pattern="\d{1,5}"
  • form：加上form属性，表单元素可以放在页面的任意位置
  • formnovalidate/novalidate：
    • 表示不需要验证表单，直接提交（novalidate用户form标签）
    • formnovalidate用于submit类型的提交按钮

• 表单验证

  • validity对象，通过下面的valid可以查看验证是否通过
    • oText.addEventListener("invalid"fn1,false);
    • valid：验证不通过时返回false
    • valueMissing：输入值为空时
    • typeMismatch：控件值与预期类型不匹配
    • patternMismatch：输入值不满足pattern正则
    • customError：不符合自定义验证
      • setCustomValidity();自定义验证