前端基础-HTML5与CSS3新特性

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

介绍html5和css的新增属性

---

一、HTML新特性

HTML5增加了一些新的标签、新的表单和新的表单属性等

1.1 新增的语义标签

语义化优点：

• 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
• 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
• 方便屏幕阅读器解析，如盲人阅读器根据语义渲染网页
• 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

1.2 新增的多媒体标签

video：尽量用map4格式

属性	功能
autoplay	自动播放
muted	静音播放
controls	显示播放控件
loop	循环播放
poster	加载等待的画面图片

1.3 新增的音频标签

audio：尽量用map3格式
谷歌浏览器把音频和视频的自动播放禁止了

1.4 新增的input类型

属性	说明
email	限制用户输入email类型
date	限制用户输入date类型
search	搜索框
number	显示用户输入数字
color	生成一个颜色选择表单
tel	手机号

1.5 新增的表单属性

属性	说明
required	表单内容不能为空
placeholder	提示文本
autofocus	自动获取焦点
autocomplete	基于之前键入的值，显示出填写的选项，默认打开
multiple	可以多选文件

二、CSS3新特性

2.1 新增选择器

1. 属性选择器
2. 结构伪类选择器
3. 伪元素选择器

2.1.1 属性选择器

语法：E[att]、E[att=“val”]、E[att^=“val”] 、E[att$=“val”] 、E[att*=“val”]
代码示例如下：

    input[value] {
    
    
        color: pink;
    }
    input[value="text"] {
    
    
        color: pink;
    }
    div[class^=icon] {
    
    
        color: red;
    }

类选择器、属性选择器、伪类选择器，权重都是10

2.1.2 结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素

选择符	说明
E:first-child	匹配父元素的第一个子元素
E:last-child	匹配父元素的最后一个子元素
E:nth-child(n)	匹配父元素的第n个子元素

代码示例1

    ul li:first-child {
    
    
        background-color: blueviolet;
    }
    ul li:last-child {
    
    
        background-color:bisque;
    }
    ul li:nth-child(2) {
    
    
        background-color:aqua;
    }

	<ul>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
        <li>第六个</li>
    </ul>

代码示例2

n可以是数字、关键字和公式
关键字可以是：even（偶数）、odd(奇数)，代码示例如下：

    ul li:nth-child(even) {
    
    
        background-color: gray;
    }
    ul li:nth-child(odd) {
    
    
        background-color: ghostwhite;
    }

代码示例3

n也可以是公式：

    /* 从0开始 每次加1，相当于选择了所有孩子 */
    ol li:nth-child(n) {
    
    
        background-color: pink;
    }

<ol>
        <li>第一个孩子</li>
        <li>第二个孩子</li>
        <li>第三个孩子</li>
        <li>第四个孩子</li>
        <li>第五个孩子</li>
        <li>第六个孩子</li>
    </ol>

常见的公式如下：

公式	功能
2n	偶数孩子
2n+1	奇数孩子
5n	5、10、15
n+5	从第5个开始
n-5	前5个

代码示例4

代码示例如下所示：

 ol li:nth-child(n+3) {
    
    
        background-color: pink;
    }

效果如下图所示：

nth-child和nth-of-type具有一定区别：

nth-child：对父元素里所有孩子排序选择，先看第几个孩子，再去看前面的标签是否匹配；
nth-of-type：对父元素中指定子元素进行选择排序，先看标签指定的元素，再回去看是第几个孩子；

nth-child代码示例

1）使用nth-child

    section div:nth-child(1) {
    
    
        background-color: aqua;
    }

    <section>
        <p>p1</p>
        <div>div1</div>
        <div>div2</div>
    </section>

效果图如下：

背景没有颜色这是由于使用nth-child时，由于是先对所有的子元素进行排序，所以第一个元素是p标签，但由于和所选择的div标签匹配不上，所以nth-child失效，没有显示背景颜色。

nth-of-type代码示例

2）使用nth-of-type

    section div:nth-of-type(1) {
    
    
        background-color: aqua;
    }

使用nth-of-type时，可以看到第一个div标签背景颜色改变，这是由于nth-of-type先找到div对应的子元素再进行排序，排序之后修改第一个div子元素的样式，所以第一个div子元素的样式改变了。

2.1.3 伪元素选择器

利用CSS创建新标签元素

伪元素	说明
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

before和after创建的元素是行内元素
语法：element::before{}，必须包含content属性
before和after创建一个元素，但是属于行内元素，新创建的这个元素在文档树中是找不到的，所以称为伪元素。
伪元素和标签选择器一样，权重为1.

2.2 盒子模型

CSS3中可以通过box-sizing来指定盒模型，有两个值：content-box、border-box

• content-box：盒子的大小为width+padding+border；
• border-box：盒子的大小为width；

2.3 其他特性

1. filter：将模糊或者颜色偏移等效果应用于元素
filter：blur(5 px)，（）内数值越大，图片越模糊

2. calc函数
width：calc（100%-80px）
应用场景：子盒子的宽度始终比父盒子小80px

2.4 过渡

transition: 过渡的属性 花费时间 运动曲线 何时开始

1. 属性：想要变化的CSS属性，如果想要所有的属性都变化过渡，写一个all就行；
2. 花费时间：单位是秒；
3. 运动曲线：默认是ease（可省略）
4. 何时开始：单位是秒，可以设置延迟触发时间， 默认是0s（可以省略）

代码示例

代码示例1

<style>
    div {
    
    
        width: 200px;
        height: 100px;
        background-color: aqua;
        transition: width .5s;
    }
    div:hover {
    
    
        width: 400px;
    }
</style>

上述代码可以实现当鼠标放在盒子上时，盒子的宽度有一个平滑的过渡。

代码示例2

如果想要多个属性同时变化时，可以使用逗号进行分割，代码示例如下：

<style>
    div {
    
    
        width: 200px;
        height: 100px;
        background-color: aqua;
        transition: width .5s, height .5s;
    }
    div:hover {
    
    
        width: 400px;
        height: 500px;
    }
</style>

如果想要所有的属性都变化，可以直接使用all，代码示例2：

<style>
    div {
    
    
        width: 200px;
        height: 100px;
        background-color: aqua;
        transition: all .5s;
    }
    div:hover {
    
    
        width: 400px;
        height: 500px;
    }
</style>

综合示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .bar {
      
      
        width: 150px;
        height: 15px;
        border: 1px solid red;
        border-radius: 7px;
        padding: 1px;
    }
    .bar_in {
      
      
        width: 50%;
        height: 100%;
        background-color: red;
        transition: all .5s;
    }
    .bar:hover .bar_in{
      
      
        width: 100%;
    }
</style>
<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>
</html>

效果图如下：

鼠标经过后，进度条会拉满~

---

总结

本文对HTML5与CSS3新特性进行总结