# HTML 5

### 对 H5 的理解

H5 是对前端新技术的总称，包含了老生常谈的 HTML5、CSS3、ES6，以及其他各种帮助提升前端开发质量的开源技术。具有跨平台、更新快，免安装等优势。

### 目前哪些浏览器支持 HTML5

目前最新版本的主流浏览器都支持 HTML 5，包括 chrome、firefox、opera，IE 等，其中支持度最高的是 chrome 和 firefox。

### 知道哪些 HTML 标签

文本标签：div，p，span，br，hr，pre，「strong，b」粗体，「em，i」斜体，small 使用小一号字体

列表标签：ol，ul，li，「dl，dd，dt」术语列表

图像标签：img，figure，picture

链接标签：a，link，script，noscript

多媒体标签：video，audio，track，source，embed，object，param

iframe 标签

表格标签：table，caption 表格标题，thead，tbody，tfoot，col，colgroup，tr，th，td

表单标签：form，label，input，button，select，option，textarea，progress

### 知道哪些 HTML 5 新特性

#### 语义化标签

header，footer，nav，time，article，aside，mark，summary，details，section

HTML5 语义化标签预览：<https://codepen.io/yaozhibo/pen/mdVBOpJ>

#### 新表单类型

* `<input type="email" />`:grinning: email 地址输入域
* `<input type="number" />`  数字输入域
* `<input type="url" />` URL 地址输入域
* `<input type="range" />` range 类型显示为滑动条，默认 value 值为 1 ～ 100 的限定范围，可以通过 min 和 max 来自定义范围
* `<input type="search" />` 用于搜索域
* `<input type="color" />`  用于定义颜色
* `<input type="tel" />` 用于电话号码
* `<input type="date" />` 时间选择器

#### HTML5 新增的表单属性

* `placehoder` 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
* `required` 属性，是一个 boolean 属性。要求填写的输入域不能为空
* `pattern` 属性，描述了一个正则表达式用于验证`<input>` 元素的值。
* `min` 和 `max` 属性，设置元素最小值与最大值。
* `step` 属性，为输入域规定合法的数字间隔。
* `height` 和 `width` 属性，用于 image 类型的 `<input>` 标签的图像高度和宽度。
* `autofocus` 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
* `multiple` 属性 ，是一个 boolean 属性。规定`<input>` 元素中可选择多个值。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yyaozhibo.gitbook.io/qian-duan-xue-xi/interview/itw-zhun-bei/html-5.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.