html5 新增标签和特性
文档类型设定
-
document
-
HTML:
-
XHTML:
-
HTML5
-
字符设定
-
<meta http-equiv="charset" content="utf-8">：HTML与XHTML中建议这样去写
-
<meta charset="utf-8">：HTML5的标签中建议这样去写
常用新标签
-
header：定义文档的页眉
-
nav：定义导航链接的部分
-
footer：定义文档或节的页脚
-
article：标签规定独立的自包含内容
-
section：定义文档中的节（section、区段）
-
aside：定义其所处内容之外的内容
常用新属性
| 属性**** | 用法**** | 含义**** |
|---|---|---|
| placeholder**** | <input type="text" placeholder="请输入用户名"> | 占位符提供可描述输入字段预期值的提示信息 |
| autofocus**** | <input type="text" autofocus> | 规定当页面加载时 input 元素应该自动获得焦点 |
| multiple**** | <input type="file" multiple> | 多文件上传 |
| autocomplete**** | <input type="text" autocomplete="off"> | 规定表单是否应该启用自动完成功能 |
| required**** | <input type="text" required> | 必填项 |
| accesskey**** | <input type="text" accesskey="s"> | 规定激活（使元素获得焦点）元素的快捷键 |
新增的type属性值：
| 类型**** | 使用示例**** | 含义**** |
|---|---|---|
| email**** | <input type="email"> | 输入邮箱格式 |
| tel**** | <input type="tel"> | 输入手机号码格式 |
| url**** | <input type="url"> | 输入url格式 |
| number**** | <input type="number"> | 输入数字格式 |
| search**** | <input type="search"> | 搜索框（体现语义化） |
| range**** | <input type="range"> | 自由拖动滑块 |
| time**** | <input type="time"> | |
| date**** | <input type="date"> | |
| datetime**** | <input type="datetime"> | |
| month**** | <input type="month"> | |
| week**** | <input type="week"> |
综合案例
<form action="">
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br>
<label for="userPhone">手机号码:</label>
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
<label for="email">邮箱地址:</label>
<input type="email" required name="email" id="email"><br>
<label for="collage">所属学院:</label>
<input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br>
<datalist id="cList">
<option value="前端与移动开发学院"></option>
<option value="java学院"></option>
<option value="c++学院"></option>
</datalist><br>
<label for="score">入学成绩:</label>
<input type="number" max="100" min="0" value="0" id="score"><br>
<label for="level">基础水平:</label>
<meter id="level" max="100" min="0" low="59" high="90"></meter><br>
<label for="inTime">入学日期:</label>
<input type="date" id="inTime" name="inTime"><br>
<label for="leaveTime">毕业日期:</label>
<input type="date" id="leaveTime" name="leaveTime"><br>
<input type="submit">
</