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">