HTML5基础——17、HTML5新特性-优快云博客

大家好，我是阿赵。继续学习H5。
学习了很久H5，其实都是在学习HTML的标签结构和CSS样式表。那么H5和普通的HTML有什么区别？

一、兼容性问题

HTML5比起之前版本的HTML，多了不少特效和功能。但这些新的东西在旧的浏览器是不支持的。
IE：从IE9开始才支持
Chrome：从版本14开始支持
Firfox：从版本4开始支持
Safari：从版本5.1开始支持
现在主流的浏览器都是支持HTML5了，不过一些特殊的旧设备需要注意测试一下兼容性问题。

二、新增语义化标签

在之前的学习中，我们一般都是用div或者span之类典型的盒子进行布局。这样做虽然也没有问题，但整个网页的结构会显得比较的混乱。
HTML5新增了一些语义化的标签，这些标签没有什么实际的效果，或者可以理解成都是大号的盒子，但可以起到规范性的作用，可以让网页的结构变得清晰，也可以让搜索引擎比较明确的知道某个部分的结构的内容分类。

1、 `<header>`

用于页面的头部区域，通常包括网站的标志、导航链接等的内容就可以固定放在header标签里面。

2、 `<nav>`

专门为导航菜单设置，通常网页的导航链接可以放在里面。

3、 `<article>`

用于页面中的主要内容，比如文章、报道等

4、 `<section>`

通常用于划分不同的内容部分，增加层次感

5、 `<aside>`

通常用于侧边栏内容，为用户提供辅助信息

6、 `<footer>`

页面的页脚部分，通常位于章节末尾或者根节点元素的底部

三、新增多媒体标签

1、音频

音频可以使用audio标签播放，比如

<audio src="https://www.runoob.com/try/demo_source/horse.mp3" controls></audio>

显示如下：
在这里插入图片描述

支持的音频格式：mp3、wav、ogg等，其中mp3基本上全部浏览器都能支持。
属性：
autoplay：自动播放
controls：显示控件
loop：循环播放
src：声音文件的url
所有标签都加上去，会变成这样：

<audio src="https://www.runoob.com/try/demo_source/horse.mp3" controls loop autoplay></audio>

这样一开始声音就会播放，并且会循环播放。不过需要注意的是，现在很多浏览器会禁止音频自动播放。

2、视频

可以使用video标签来播放视频。
比如：

<video src="https://www.w3schools.com/html/mov_bbb.mp4" controls></video>

显示如下：
在这里插入图片描述

video标签的属性有：
autoplay：自动播放
controls：显示播放空间
width/height：指定显示视频的宽高，使用px或者百分比
loop：循环播放
preload：预加载可以选择：
1. auto：预加载
2. none：不预加载
如果有autoplay，则忽略这个属性
src：视频的地址
poster：图片url，用于家长等待时的画面图片
muted：静音播放
需要注意的是，由于很多浏览器禁止了声音的自动播放，所以如果视频想自动播放autoplay，则需要先muted静音，才能正常自动播放。

四、新增input类型

之前学习过输入类型，比如：

<input type="text" name="name" value="阿赵">

这里的type=”text”就是指定了输入的类型是文本。
HTML5新增了一些用户的输入类型：

1、 email

<input type="email" name="email" value="">

这里限制了输入的内容必须为电子邮箱地址，如果格式不符合，会提示错误。
在这里插入图片描述

2、 url

<input type="url" name="url" value="">

这里限制输入的内容必须为网址，如果格式不符合，会提示错误
在这里插入图片描述

3、 date

<input type="date" name="date">

这里会出现一个日期选择框：
在这里插入图片描述

4、 time

 <input type="time" name="time" value="13:30">

显示时间输入：
在这里插入图片描述

点击可以打开时间选择框
在这里插入图片描述

5、 month

<input type="month" name="month" value="2025-06">

会出现月份输入：
在这里插入图片描述

点开会出现月份选择框
在这里插入图片描述

6、 week

<input type="week" name="week" value="2025-W01">

这里选择的是某一年的第几周
在这里插入图片描述

可以打开周选择框：
在这里插入图片描述

7、 number

<input type="number" name="number" value="1">

这里限制了输入的内容一定是数字，如果输入不是数字的，将不能输进去
在这里插入图片描述

8、 tel

<input type="tel" name="tel" value="1234567890">

这里本意是限制输入的是电话号码的，但似乎并没有发现什么限制

9、 search

<input type="search" name="search" value="Search">

显示一个查询输入框，后面会有一个小叉，可以把输入的内容清除
在这里插入图片描述

10、 color

<input type="color" name="color" value="#000000">

这里会出现一个颜色选择框：
在这里插入图片描述

在这里插入图片描述

五、新增表单属性

1、 required

要求输入的内容不能为空，比如：

<input type="text" name="name" value="" required>

这时候如果不输入该项内容就提交表单，会提示：
在这里插入图片描述

2、 placeholder

提示信息，比如：

<input type="text" name="name" placeholder="阿赵">

这时候会显示：
在这里插入图片描述

注意，如果这个输入项有默认值，则不会显示提示内容，比如：

<input type="text" name="name" value="abc" placeholder="阿赵">

这时候会显示：
在这里插入图片描述

3、 autofocus

自动聚焦到该项，比如

 <form action="www.baidu.com" method="get">
    姓名：<input type="text" name="name"><br>
    年龄：<input type="text" name="age"><br>
    性别：<input type="text" name="sex" autofocus><br>
    submit: <input type="submit" name="submit" value="Submit">
  </form>

在这里表单有3个输入项，然后在性别的输入性里面加速autofocus，那么在打开表单的时候，就会自动把输入焦点停留在性别这里：
在这里插入图片描述

注意，如果同时有多项设置了autofocus，比如：

  <form action="www.baidu.com" method="get">
    姓名：<input type="text" name="name"><br>
    年龄：<input type="text" name="age" autofocus><br>
    性别：<input type="text" name="sex" autofocus><br>
    submit: <input type="submit" name="submit" value="Submit">
  </form>

那么焦点将会出现在前面一个设置了autofocus的项：
在这里插入图片描述

4、 autocomplete

默认显示以前输入过的内容，可以用off/on作为开关，默认是打开的
在这里插入图片描述

这里我之前输入过的name的项就被记录下来了。前提是必须加上name属性字段，并且成功提交过。
如果不想记录，可以：

<input type="text" name="name" autocomplete="off">

这样就不会再有记录的提示了：
在这里插入图片描述

5、 multiple

可以多选文件提交

<input type="file" name="mulfile" multiple>

在这里插入图片描述

六、 CSS新特性

CSS的新特性有兼容性的问题，需要IE9+才支持。移动端的支持会优于PC端。

1、新增选择器

1. 属性选择器

使用方式 input[value]
选择input里面有value属性的对象

(1)选择属性名称相等

input[type="text"] {
  border: 2px solid yellow;
}

这里选择了所有type是text的input项，结果是：
在这里插入图片描述

这3项都被选中改变了样式和颜色。

(2)选择以某些字母开头

input[type^="s"] {
  border: 2px solid yellow;
}

这时候的意思是，input里面属性值以字母s开头的所有项，所以submit被选中了
在这里插入图片描述

(3)选择以某些字母结尾

input[type$="e"] {
  border: 2px solid yellow;
}

这里的意思是选择以字母e结束的属性，所以file就被选中了：
在这里插入图片描述

(4)选择包含某些字母：

input[type*="e"] {
  border: 2px solid yellow;
}

这里表达的是input属性里面包含字母e的属性，所以text和file都被选中了：
在这里插入图片描述

2. 结构伪类选择器

举个例子：

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>

现在ul里面有很多个li
显示如下：
在这里插入图片描述

(1) 选择第一个孩子

ul li:first-child {
  color: green
}

从ul包含的所有li里面，选择第一个，显示如下：
在这里插入图片描述

(2) 选择最后一个孩子

ul li:last-child {
  color: green
}

从ul包含的所有li里面，选择最后一个，显示如下：
在这里插入图片描述

(3) 选择第n个孩子

ul li:nth-child(3) {
  color: green
}

这里选择了第3个孩子：
在这里插入图片描述

(4) 指定类型的第一个孩子

接下来的几个例子都和类型有关，所以改一下例子：

<body>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
  </ul>
</body>

现在的显示是：
在这里插入图片描述

然后写一个指定类型第一个孩子

span:first-of-type {
  color: blue
}

于是现在的显示是：
在这里插入图片描述

可以看到，在各自父级下的第一个span被选中了。

(5) 指定类型的最后一个孩子

span:last-of-type {
  color: blue
}

现在显示是：
在这里插入图片描述

可以看到，各自父级下的最后一个span被选中了。

(6) 制定类型的第n个孩子

span:nth-of-type(2) {
  color: blue
}

现在的显示是：
在这里插入图片描述

可以看到，各自父级下的第2个span被选中了。

这里先来做个总结。

(1)写在谁后面

如果是first-child类的，那么关心的是父级，所以需要在某个父级下面做选择，写在某个父级后面。如果是of-type类，则不关心谁是父级，它关心的是类型，所以需要写在类型的后面。

(2) nth-child

nth-child(n)，这个n可以是数字、关键字或者公式。
数字：第几个
关键字：even：偶数，odd：奇数
公式：
2n:偶数
2n+1：奇数
5n：5、10、15……
n+5：从第5个开始，包含第5个
-n+5：前5个，包含第5个

(3) nth-of-type(n)

nth-of-type是先看类型，再看序号
nth-child(n)是先看序号n，再看类型

3. 伪元素选择器

之前有使用过的：

(1) ::before

在元素内部前面插入内容

(2) ::after

在元素内容后面插入内容

2、盒子模型

之前盒子已经学习过

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      transition: background-color 0.5s ease;
    }
  </style>
</head>

<body>
  <div></div>
</body>