H5提纲布局

传统布局与HTML5布局和H5新语义标签

传统网页布局

<!-- 头部 -->
    <div class="header">
         <ul class="nav"></ul>
    </div>

<!-- 主体部分 -->
  <div class="main">
<!-- 文章 -->
      <div class="article"></div>
<!-- 侧边栏 -->
      <div class="aside"></div>
  </div>

<!-- 底部 -->
      <div class="footer"></div>

H5 经典网页布局

!-- 头部 -->
     <header>
       <ul class="nav"></ul>
     </header>
<!-- 主体部分 -->
  <div class="main">
<!-- 文章 -->
    <article></article>
<!-- 侧边栏 -->
    <aside></aside>
  </div>
<!-- 底部 -->
    <footer></footer>

H5新语义标签

<nav> 表示导航
<header> 表示页眉
<footer> 表示页脚
<section> 表示区块
<article> 表示文章 如文章、评论、帖子、博客
<aside> 表示侧边栏 如文章的侧栏
<figure> 表示媒介内容分组 与 ul > li 做个比较
<mark> 表示标记 (带用“UI”，不怎么用)
<progress> 表示进度 (带用“UI”，不怎么用)
<time> 表示日期

输入类型 (表单类型，表单元素，表单属性,表单事件.)

1.email 输入email格式
2.tel 手机号码
3.url 只能输入url格式
4.number 只能输入数字
5.search 搜索框
6.range 范围 滑动条
7.color 拾色器
8.time 时间
9.date 日期 不是绝对的
--datetime 时间日期
month 月份
week 星期
（部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用）

表单元素（标签）

<datalist> 数据列表   与input 配合使用
 <input type=”text” list=”data”>
 <datalist id=”data”>
 <option>男</option>
 <option>女</option>
 <option>不详</option> 
 </datalist>

表单属性

• placeholder 占位符
• autofocus 获取焦点
• multiple 文件上传多选或多个邮箱地址
• autocomplete 自动完成，用于表单元素，也可用于表单自身(on/off)
• form 指定表单项属于哪个form，处理复杂表单时会需要
• novalidate 关闭验证，可用于<form>标签
• required 必填项
• pattern 正则表达式 验证表单
• 手机号:<input type="tel" name="tel" required="required" pattern="^(+86)?13,5,8$">
• 表单重写没有提及，自行验证，共包含
  应用于提交按钮上，如：<input type="submit" formaction="xxx.php">