传统布局与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">
