HTML HTML5基础(1)
目录
一、HTML5简介
1、HTML5优势
2、HTML5兼容性
二、新增语义化标签
1.新增布局标签
2.新增状态标签
2.1 meter标签
2.2progress标签
3.新增列表标签
4.新增文本标签
4.1文本注音
4.2 文本标记
三、新增表单功能
1.表单控件新增属性
2.input新增属性
3.form标签新增属性
一、HTML5简介
1、HTML5优势
(1).针对 JavaScript ，新增了很多可操作的接口。
(2).新增了一些语义化标签、全局属性。
(3).新增了多媒体标签，可以很好的替代 flash 。
(4).更加侧重语义化，对于 SEO 更友好。
(5).可移植性好，可以大量应用在移动设备上。
2、HTML5兼容性
支持Chrome、Safari、Opera、Firefox等主流浏览器。
二、新增语义化标签
1.新增布局标签
| 标签名 | 语义 | 单/双标签 |
| header | 整个页面，或部分区域的头部 | 双 |
| footer | 整个页面，或部分区域的底部 | 双 |
| nav | 导航 | 双 |
| article | 文章、帖子、杂志、新闻、博客、评论等 | 双 |
| aside | 侧边栏 | 双 |
| main | 文档的主要内容（WHATWG 没有语义，IE 不支持）几乎不用 | 双 |
| hgroup | 包裹连续的标签，如文章主标题、副标题的组合(W3C将其删除) | 双 |
关于article 和 section ：
1. article 里面可以有很多个 section 。
2. section 强调的是分段或块，如果你想将一块内容分成几段的时候，可使用 section 元素。
3. article 比 section 更强调独立性，一块内容如果比较独立、比较完整，应该使用 article 元素。
2.新增状态标签
2.1 meter标签
- 语义：定义一直范围内的标量测量。也被称为 gauge （尺度），双标签，例如：电量、磁盘用量等。
- 常用属性如下：
| 属性 | 值 | 描述 |
| high | 数值 | 规定高值 |
| low | 数值 | 规定低值 |
| max | 数值 | 规定最大值 |
| min | 数值 | 规定最小值 |
| optimum | 数值 | 规定最优质 |
| value | 数值 | 规定当前值 |
2.2progress标签
- 语义：显示某个任务完成的进度指示器，一般用于表示进度条，双标签，例如：工作完成进度等。
- 常用属性如下：
| 属性 | 值 | 描述 |
| max | 数值 | 规定目标值 |
| value | 数值 | 规定当前值 |
3.新增列表标签
| 标签名 | 语义 | 单/双标签 |
| datalist | 用于搜索框的关键字提示 | 双 |
| details | 用于展示问题和答案 | 双 |
| summary | 写在 details 的里面 | 双 |
<input type="text" list="mydata"><datalist id="mydata"><option value="周杰伦"></option><option value="周冬雨"></option><option value="周星驰"></option></datalist> <details><summary>如何走上人生巅峰?</summary><p>一步一步走呗</p></details>4.新增文本标签
4.1文本注音
| 标签名 | 语义 | 单/双标签 |
| ruby | 包裹需要注音的文字 | 双 |
| rt | 写注音，rt 标签写在 ruby 的里面 | 双 |
<ruby><span>魑 魅 魍 魉</span><rt>chi mei wang liang</rt></ruby>4.2 文本标记
| 标签名 | 语义 | 单/双标签 |
| mark | 标记 | 双 |
注意：W3C 建议 mark 用于标记搜索结果中的关键字
三、新增表单功能
1.表单控件新增属性
| 属性名 | 功能 |
| placeholder | 提示文字(注意：不是默认值，value 是默认值），适用于文字输入类的表单控件） |
| required | 表示该输入项必填，适用于除按钮外其他表单控件 |
| autofocus | 自动获取焦点，适用于所有表单控件 |
| autocomplete | 自动完成，可以设置为 on 或 off ，适用于文字输入类的表单控件。 注意：密码输入框、多行输入框不可用。 |
| pattern | 填写正则表达式，适用于文本输入类表单控件。 注意：多行输入不可用，且空的输入框不会验证，往往与 required 配合 |
2.input新增属性
| 属性名 | 功能 |
| 邮箱类型的输入框，表单提交时会验证格式，输入为空则不验证格式 | |
| url | url 类型的输入框，表单提交时会验证格式，输入框为空则不验证格式 |
| number | 数字类型的输入框，表单提交时会验证格式，输入为空则不严重格式 |
| search | 搜索类型的输入框，表单提交时不会验证格式 |
| tel | 电话类型的输入框，表单提交时不会验证格式，在移动端使用时，会唤起数字键盘 |
| range | 范围选择框，默认值为 50 ，表单提交时不会验证格式 |
| color | 颜色选择框，默认值为黑色，表单提交时不会验证格式 |
| date | 日期选择框，默认值为空，表单提交时不会验证格式 |
| month | 月份选择框，默认值为空，表单提交时不会验证格式 |
| week | 周选择框，默认值为空，表单提交时不会验证格式 |
| time | 时间选择框，默认值为空，表单提交时不会验证格式 |
| datetime-local | 日期+时间选择框，默认值为空，表单提交时不会验证格式 |
3.form标签新增属性
| 属性名 | 功能 |
| novalidate | 如果给 form 标签设置了该属性，标签提交的时候不再进行验证 |