通过这篇文章,学习HTML5新增了哪些新特性及使用方法。
语义化标签
<header>
定义 section 或 page 的页眉<footer>
定义 section 或 page 的页脚<section>
定义 section<article>
定义文章<aside>
定义页面内容之外的内容<nav>
定义导航链接<canvas>
定义图形<audio>
定义声音<video>
定义视频<source>
定义媒介源<details>
定义元素的细节<summary>
为 details 元素定义可见的标题这里是标题
- 明细1
- 明细2
1
2
3
4
5
6
7<details>
<summary>这里是标题</summary>
<ul>
<li>明细1</li>
<li>明细2</li>
</ul>
</details><figcaption>
定义 figure 元素的标题<figure>
定义媒介内容的分组,以及它们的标题Blog头像 1
2
3
4<figure style="margin:0;">
<img src="https://blog.maxmeng.top/images/avatar.jpg" width="350" height="234" />
<figcaption>Blog头像</figcaption>
</figure><mark>
定义有记号的文本
自带黄色背景的mark标签1
<mark>自带黄色背景的mark标签</mark>
<meter>
定义预定义范围内的度量十分之三 1
<meter value="3" min="0" max="10">十分之三</meter>
<progress>
定义任何类型的任务的进度
1
<progress value="22" max="100"></progress>
<time>
定义日期/时间我们在每天早上 开始工作
1
<p>我们在每天早上 <time>9:00</time> 开始工作</p>
表单增强
input新增的type类型
number 数字
url 网址
email 邮箱
color 颜色选择框
date 日期选择框(yyyy-mm-dd)
time 时间选择框(hh:mm)
range 滑块
search 搜索
week 周
month 月
新属性
autocomplete
是否保存用户输入值默认为on,关闭提示选择offautofocus
自动获取焦点required
必填项目pattern
正则验证 pattern=”\d{1,5}”placeholder
输入框提示信息