【玩转前端】HTML5和CSS3

快来打我* 2024-04-26 03:16 89阅读 0赞

> ?一个人走得远了，就会忘记自己为了什么而出发，希望你可以不忘初心，不要随波逐流，一直走下去?  
> ? 欢迎关注?点赞?收藏?留言?  
> ? 本文由 [程序喵正在路上][Link 1] 原创，CSDN首发！  
> ? 系列专栏：[HTML5+CSS3+移动端前端][HTML5_CSS3]  
> ? 首发时间：2022年8月17日  
> ✅ 如果觉得博主的文章还不错的话，希望小伙伴们三连支持一下哦

#### 阅读指南 ####

*  学习目标
 *  HTML5的新特性
 *   *  1. 语义化标签
     *  2. 多媒体标签
     *  3. 新增的input类型
     *  4. 新增的表单属性
 *  CSS3的新特性
 *   *  1. 属性选择器
     *  2. 结构伪类选择器
     *  3. 伪元素选择器
     *  4. 伪元素选择器使用场景
     *  5. CSS3盒子模型
     *  6. CSS3图片模糊处理
     *  7. CSS3 calc 函数
     *  8. CSS3过渡（重点）
     *  9. 过渡案例
 *  HTML5和CSS3
 *   *  1. 狭义
     *  2. 广义

## 学习目标 ##

*  掌握 **HTML5** 新增布局和表单标签
 *  掌握 **CSS3** 新增特性

## HTML5的新特性 ##

![在这里插入图片描述][d9045c78442d468291bc51efe4fa97b7.png]

HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等

这些新特性都有兼容性问题，基本是 **IE9+** 以上的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性

### 1. 语义化标签 ###

以前布局，我们基本都用 **div** 来做，**div** 对于搜索引擎来说是没有语义的

**HTML5** 新增了语义化标签：

*  `<header>` ：头部标签
 *  `<nav>` ：导航标签
 *  `<article>` ：内容标签
 *  `<section>` ：定义文档某个区域，可看成一个大的 **div**
 *  `<aside>` ：侧边栏标签
 *  `<footer>` ：尾部标签

<!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>语义化标签</title>
        <style>
            header,
            nav {
         
                width: 800px;
                height: 120px;
                background-color: cyan;
                border-radius: 15px;
                margin: 15px auto;
                padding: 5px;
            }
    
            section {
         
                width: 500px;
                height: 300px;
                border-radius: 15px;
                background-color: skyblue;
                padding: 5px;
            }
        </style>
    </head>
    
    <body>
        <header>头部标签</header>
        <nav>导航栏标签</nav>
        <section>某个区域</section>
    </body>
    
    </html>

![在这里插入图片描述][eb6e0a791dcf46f39f06d128265f7034.png]

**注意：**

*  这种语义化标准主要是针对搜索引擎的
 *  这些新标签页面中可以使用多次
 *  在 **IE9** 中，需要把这些元素转换为块级元素
 *  其实，我们移动端更喜欢使用这些标签

### 2. 多媒体标签 ###

新增的多媒体标签主要包含两个：

1.  音频：`<audio>`
2.  视频：`<video>`

使用它们可以很方便地在页面中嵌入音频和视频，而不再去使用 **flash** 和其他浏览器插件

**视频标签** `<video>`

**HTML5** 在不适用插件的情况下，也可以原生地支持视频格式文件的播放，当然，支持的格式也是有限的

<table> 
 <thead> 
  <tr> 
   <th>浏览器</th> 
   <th>MP4</th> 
   <th>WebM</th> 
   <th>Ogg</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>Internet Explorer</strong></td> 
   <td>YES</td> 
   <td>NO</td> 
   <td>NO</td> 
  </tr> 
  <tr> 
   <td><strong>Chrome</strong></td> 
   <td>YES</td> 
   <td>YES</td> 
   <td>YES</td> 
  </tr> 
  <tr> 
   <td><strong>Firefox</strong></td> 
   <td>YES，从 Firefox 21 版本开始，Linux 系统从 Firefox 30 开始</td> 
   <td>YES</td> 
   <td>YES</td> 
  </tr> 
  <tr> 
   <td><strong>Safari</strong></td> 
   <td>YES</td> 
   <td>NO</td> 
   <td>NO</td> 
  </tr> 
  <tr> 
   <td><strong>Opera</strong></td> 
   <td>YES，从 Opera 25 版本开始</td> 
   <td>YES</td> 
   <td>YES</td> 
  </tr> 
 </tbody> 
</table>

建议使用 **MP4** 格式的视频  
   
**语法：**

考虑到兼容性，可以这样写

<video controls="controls" width="300">
    	<source src="movie.ogg" type="video/ogg" >
    	<source src="movie.mp4" type="video/mp4" >
    	您的浏览器暂不支持 <video> 标签播放视频
    </video>

**常见属性：**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>autoplay</strong></td> 
   <td><strong>autoplay</strong></td> 
   <td>视频就绪自动播放（谷歌浏览器需要添加 <strong>muted</strong> 来解决自动播放问题）</td> 
  </tr> 
  <tr> 
   <td><strong>controls</strong></td> 
   <td><strong>controls</strong></td> 
   <td>向用户显示播放控件</td> 
  </tr> 
  <tr> 
   <td><strong>width</strong></td> 
   <td><strong>pixels</strong>（像素）</td> 
   <td>设置播放器宽度</td> 
  </tr> 
  <tr> 
   <td><strong>height</strong></td> 
   <td><strong>pixels</strong>（像素）</td> 
   <td>设置播放器高度</td> 
  </tr> 
  <tr> 
   <td><strong>loop</strong></td> 
   <td><strong>loop</strong></td> 
   <td>播放完是否继续播放该视频，循环播放</td> 
  </tr> 
  <tr> 
   <td><strong>preload</strong></td> 
   <td><strong>auto</strong>（预先加载视频），<strong>none</strong>（不先加载视频）</td> 
   <td>规定是否预加载视频（如果有了 <strong>autoplay</strong>，就忽略该属性）</td> 
  </tr> 
  <tr> 
   <td><strong>src</strong></td> 
   <td><strong>url</strong></td> 
   <td>视频 <strong>url</strong> 地址</td> 
  </tr> 
  <tr> 
   <td><strong>poster</strong></td> 
   <td><strong>Imgurl</strong></td> 
   <td>加载等待的画面图片</td> 
  </tr> 
  <tr> 
   <td><strong>muted</strong></td> 
   <td><strong>muted</strong></td> 
   <td>静音播放</td> 
  </tr> 
 </tbody> 
</table>

<!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>video标签</title>
        <style>
            video {
         
                width: 100%;
            }
        </style>
    </head>
    
    <body>
        <video src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/mi12sltli3b/video1-2.mp4" autoplay="autoplay"
            muted="muted" controls="controls" loop="loop"></video>
    </body>
    
    </html>

**音频标签** `<audio>`

**HTML5** 在不适用插件的情况下，也可以原生地支持音频格式文件的播放，当然，支持的格式也是有限的

当前 `<audio>` 元素支持三种音频格式：

<table> 
 <thead> 
  <tr> 
   <th>浏览器</th> 
   <th>MP3</th> 
   <th>Wav</th> 
   <th>Ogg</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>Internet Explorer</strong></td> 
   <td>YES</td> 
   <td>NO</td> 
   <td>NO</td> 
  </tr> 
  <tr> 
   <td><strong>Chrome</strong></td> 
   <td>YES</td> 
   <td>YES</td> 
   <td>YES</td> 
  </tr> 
  <tr> 
   <td><strong>Firefox</strong></td> 
   <td>YES</td> 
   <td>YES</td> 
   <td>YES</td> 
  </tr> 
  <tr> 
   <td><strong>Safari</strong></td> 
   <td>YES</td> 
   <td>YES</td> 
   <td>NO</td> 
  </tr> 
  <tr> 
   <td><strong>Opera</strong></td> 
   <td>YES</td> 
   <td>YES</td> 
   <td>YES</td> 
  </tr> 
 </tbody> 
</table>

建议使用 **MP3** 格式的音频

**语法：**

考虑到兼容性，可以这样写

<audio controls="controls" width="300">
    	<source src="music.mp3" type="audio/mpeg" >
    	<source src="music.ogg" type="audio/ogg" >
    	您的浏览器暂不支持 <audio > 标签播放音频
    </audio >

**常见属性：**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>autoplay</strong></td> 
   <td><strong>autoplay</strong></td> 
   <td>音频就绪自动播放</td> 
  </tr> 
  <tr> 
   <td><strong>controls</strong></td> 
   <td><strong>controls</strong></td> 
   <td>向用户显示播放控件</td> 
  </tr> 
  <tr> 
   <td><strong>loop</strong></td> 
   <td><strong>loop</strong></td> 
   <td>播放完是否继续播放该音频，循环播放</td> 
  </tr> 
  <tr> 
   <td><strong>src</strong></td> 
   <td><strong>url</strong></td> 
   <td>音频 <strong>url</strong> 地址</td> 
  </tr> 
 </tbody> 
</table>

<!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>音频标签audio</title>
    </head>
    
    <body>
        <h3>Shadow of the sun</h3>
        <audio
            src="https://webfs.ali.kugou.com/202208151945/861843bcad9089cb46825a6ff2a40868/G242/M09/1B/01/0pQEAF-NTZKAP-HiACOcMEe9M0M964.mp3"
            autoplay="autoplay" controls="controls">
        </audio>
    </body>
    
    </html>

![在这里插入图片描述][a5e6fd4aaf064342a28d84cd012e8110.png]

温馨提示：谷歌浏览器把自动播放禁止了，目前还无法解决，等到学习 **js** 才能解决

**多媒体标签总结**

*  音频标签和视频标签使用方式基本一致
 *  浏览器支持情况不同
 *  谷歌浏览器把视频和音频自动播放禁止了
 *  我们可以给视频标签添加 **muted** 属性来静音播放视频，音频不可以（可以通过 **js** 解决）
 *  视频标签是重点，我们经常设置自动播放，不使用 **controls** 控件、循环和设置大小属性

### 3. 新增的input类型 ###

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>type="email"</strong></td> 
   <td>限制用户输入必须为 <strong>Email</strong> 类型</td> 
  </tr> 
  <tr> 
   <td><strong>type="url"</strong></td> 
   <td>限制用户输入必须为 <strong>URL</strong> 类型</td> 
  </tr> 
  <tr> 
   <td><strong>type="date"</strong></td> 
   <td>限制用户输入必须为日期类型</td> 
  </tr> 
  <tr> 
   <td><strong>type="time"</strong></td> 
   <td>限制用户输入必须为时间类型</td> 
  </tr> 
  <tr> 
   <td><strong>type="month"</strong></td> 
   <td>限制用户输入必须为月类型</td> 
  </tr> 
  <tr> 
   <td><strong>type="week"</strong></td> 
   <td>限制用户输入必须为周类型</td> 
  </tr> 
  <tr> 
   <td><strong>type="number"</strong></td> 
   <td>限制用户输入必须为数字类型</td> 
  </tr> 
  <tr> 
   <td><strong>type="tel"</strong></td> 
   <td>手机号码</td> 
  </tr> 
  <tr> 
   <td><strong>type="search"</strong></td> 
   <td>搜索框</td> 
  </tr> 
  <tr> 
   <td><strong>type="color"</strong></td> 
   <td>生成一个颜色选择表单</td> 
  </tr> 
 </tbody> 
</table>

<!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>新增input表单</title>
    </head>
    
    <body>
        <form action="">
            <ul>
                <li>邮箱：<input type="email"></li>
                <li>网址：<input type="url"></li>
                <li>日期：<input type="date"></li>
                <li>时间：<input type="time"></li>
                <li>数字：<input type="number"></li>
                <li>手机号码：<input type="tel"></li>
                <li>搜索：<input type="search"></li>
                <li>颜色：<input type="color"></li>
                <li><input type="submit" value="提交"></li>
            </ul>
        </form>
    </body>
    
    </html>

效果图：

![在这里插入图片描述][5db92a8850404a2185d7400ff1e76e6c.png]

重点记住：**number、tel、search** 这三个

### 4. 新增的表单属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>required</strong></td> 
   <td><strong>required</strong></td> 
   <td>表单拥有该属性表示其内容不能为空，必填</td> 
  </tr> 
  <tr> 
   <td><strong>placeholder</strong></td> 
   <td>提示文本</td> 
   <td>表单的提示信息，存在默认值将不显示</td> 
  </tr> 
  <tr> 
   <td><strong>autofocus</strong></td> 
   <td><strong>autofocus</strong></td> 
   <td>自动聚焦属性，页面加载完成自动聚焦到指定表单</td> 
  </tr> 
  <tr> 
   <td><strong>autocomplete</strong></td> 
   <td><strong>off / on</strong></td> 
   <td>当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如 <code>autocomplete="on"</code>，关闭 <code>autocomplete="off"</code> 需要放在表单内，同时加上 <strong>name</strong> 属性，同时成功提交</td> 
  </tr> 
  <tr> 
   <td><strong>multiple</strong></td> 
   <td><strong>multiple</strong></td> 
   <td>可以多选文件提交</td> 
  </tr> 
 </tbody> 
</table>

可以通过以下设置方式修改 placeholder 里面的字体颜色：

input::placeholder {
        
    	color: cyan;
    }

<!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>新增表单属性</title>
        <style>
            input::placeholder {
         
                color: cyan;
            }
        </style>
    </head>
    
    <body>
        <form action="">
            <input type="search" name="" id="" required="required" placeholder="请输入搜索内容" autofocus="autofocus"
                autocomplete="off">
            <input type="file" name="" id="" multiple="multiple">
            <input type="submit" value="提交">
        </form>
    </body>
    
    </html>

![在这里插入图片描述][876bc9b94e7c430fa8d38e4649a3ab74.png]

## CSS3的新特性 ##

![在这里插入图片描述][5471c29a4a324442a20b3b27faf61cdd.png]

*  新增的 **CSS3** 特性有兼容性问题，**IE9+** 才支持
 *  移动端支持优于 **PC** 端
 *  不断改进中
 *  应用相对广泛
 *  现阶段主要学习：新增选择器和盒子模型以及其他特性

**CSS3** 给我们新增了选择器，可以更加方便快捷，更加自由地选择目标元素

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

### 1. 属性选择器 ###

属性选择器可以根据元素的特定属性来选择元素，这样就可以不用借助于类或者 id 选择器

<table> 
 <thead> 
  <tr> 
   <th>选择符</th> 
   <th>简介</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>E[att]</code></td> 
   <td>选择具有 <strong>att</strong> 属性的 <strong>E</strong> 元素</td> 
  </tr> 
  <tr> 
   <td><code>E[att="val"]</code></td> 
   <td>选择具有 <strong>att</strong> 属性且属性值等于 <strong>val</strong> 的 <strong>E</strong> 元素</td> 
  </tr> 
  <tr> 
   <td><code>E[att^="val"]</code></td> 
   <td>选择具有 <strong>att</strong> 属性且值以 <strong>val</strong> 开头的 <strong>E</strong> 元素</td> 
  </tr> 
  <tr> 
   <td><code>E[att$="val"]</code></td> 
   <td>选择具有 <strong>att</strong> 属性且值以 <strong>val</strong> 结尾的 <strong>E</strong> 元素</td> 
  </tr> 
  <tr> 
   <td><code>E[att*="val"]</code></td> 
   <td>选择具有 <strong>att</strong> 属性且值中含有 <strong>val</strong> 的 <strong>E</strong> 元素</td> 
  </tr> 
 </tbody> 
</table>

第二个为重点，必须掌握

看一下下面这段代码，你觉得它运行出来会是怎样的结果？

<!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>新增属性选择器</title>
        <style>
            input[value] {
         
                color: cyan;
            }
    
            input[type^="text"] {
         
                color: purple;
            }
    
            div[class^="icon"] {
         
                color: aqua;
            }
    
            section[class$="data"] {
         
                color: greenyellow;
            }
    
            section[class$="ico"] {
         
                color: aqua;
            }
    
            /* 再试试这个 */
            /* section[class*="-"] {
                color: blueviolet;
            } */
        </style>
    </head>
    
    <body>
        
        
    
        
        <input type="text" name="" id="">
        <input type="password" name="" id=""> 
    
        
        <div class="icon1">小图标1</div>
        <div class="icon2">小图标2</div>
        <div class="icon3">小图标3</div>
        <div class="icon4">小图标4</div>
        <div>我是打酱油的</div>
        
        <section class="icon1-data">我是番茄酱</section>
        <section class="icon2-data">我是烧烤酱</section>
        <section class="icon3-ico">那我是谁</section>
    </body>
    
    </html>

### 2. 结构伪类选择器 ###

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素

<table> 
 <thead> 
  <tr> 
   <th>选择符</th> 
   <th>简介</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>E:first-child</code></td> 
   <td>匹配父元素中第一个子元素 <strong>E</strong></td> 
  </tr> 
  <tr> 
   <td><code>E:last-child</code></td> 
   <td>匹配父元素中最后一个 <strong>E</strong> 元素</td> 
  </tr> 
  <tr> 
   <td><code>E:nth-child(n)</code></td> 
   <td>匹配父元素中的第 <strong>n</strong> 个子元素 <strong>E</strong></td> 
  </tr> 
  <tr> 
   <td><code>E:first-of-type</code></td> 
   <td>指定类型 <strong>E</strong> 的第一个</td> 
  </tr> 
  <tr> 
   <td><code>E:last-of-type</code></td> 
   <td>指定类型 <strong>E</strong> 的最后一个</td> 
  </tr> 
  <tr> 
   <td><code>E:nth-of-type(n)</code></td> 
   <td>指定类型 <strong>E</strong> 的第 <strong>n</strong> 个</td> 
  </tr> 
 </tbody> 
</table>

`nth-child(n)` 选择某个父元素的一个或多个特定的子元素

*  **n** 可以是数字、关键字和公式
 *  **n** 如果是数字，就是选择第 **n** 个子元素，里面数字从 **1** 开始

<!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>结构伪类选择器</title>
        <style>
            ul li:first-child {
         
                background-color: cyan;
            }
    
            ul li:last-child {
         
                background-color: red;
            }
    
            ul li:nth-child(5) {
         
                background-color: yellow;
            }
        </style>
    </head>
    
    <body>
        <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>
    </body>
    
    </html>

![在这里插入图片描述][6d8b03588f73427cb3dcddc056628d62.png]

*  **n** 可以是关键字：**even** 偶数、**odd** 奇数
 *  **n** 可以是公式：常见的公式如下（如果 **n** 是公式，则从 **0** 开始计算，但是第 **0** 个元素或者超出了元素的个数会被忽略）

**nth-child 和 nth-of-type 的区别**

**nth-child** 会把所有的盒子都排列序号，执行的时候首先看是选第几个子元素，再看是选哪种元素

**nth-of-type** 会把执行元素的盒子排列序号，执行的时候先看是哪种元素，再看是第几个子元素

**注意**

*  如果是无序列表，我们肯定用 **nth-child** 更多
 *  类选择器、属性选择器、伪类选择器，权重都为 **10**

### 3. 伪元素选择器 ###

伪元素选择器可以帮助我们利用 **CSS** 创建新标签元素，而不需要 **HTML** 标签，从而简化 **HTML** 结构

<table> 
 <thead> 
  <tr> 
   <th>选择符</th> 
   <th>简介</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>::before</td> 
   <td>在元素内部的前面插入内容</td> 
  </tr> 
  <tr> 
   <td>::after</td> 
   <td>在元素内部的后面插入内容</td> 
  </tr> 
 </tbody> 
</table>

注意：

*  **before** 和 **after** 创建一个元素，但是属于行内元素
 *  新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
 *  语法：`element::before{}`
 *  **before** 和 **after** 必须有 **content** 属性
 *  **before** 在父元素内容的前面创建元素，**after** 在父元素内容的后面插入元素
 *  伪元素选择器和标签选择器一样，权重为 **1**

<!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>伪元素选择器</title>
        <style>
            div {
         
                width: 200px;
                height: 200px;
                background-color: cyan;
            }
    
            div::before {
         
                content: '我';
                width: 30px;
                height: 40px;
                background-color: #fff;
            }
    
            div::after {
         
                content: '程序喵';
            }
        </style>
    </head>
    
    <body>
        <div>是</div>
    </body>
    
    </html>

![在这里插入图片描述][e69fcc19dc78494fb0fb7c5bc5a54318.png]

### 4. 伪元素选择器使用场景 ###

**① 伪元素字体图标**

<!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>伪元素字体图标</title>
        <style>
            /* 字体声明 */
            @font-face {
         
                font-family: 'icomoon';
                src: url('fonts/icomoon.eot?q42srk');
                src: url('fonts/icomoon.eot?q42srk#iefix') format('embedded-opentype'),
                    url('fonts/icomoon.ttf?q42srk') format('truetype'),
                    url('fonts/icomoon.woff?q42srk') format('woff'),
                    url('fonts/icomoon.svg?q42srk#icomoon') format('svg');
                font-weight: normal;
                font-style: normal;
                font-display: block;
            }
    
            div {
         
                position: relative;
                width: 200px;
                height: 35px;
                border: 1px solid red;
            }
    
            div::after {
         
                position: absolute;
                top: 10px;
                right: 10px;
                font-family: 'icomoon';
                content: '';
                color: blue;
                font-size: 18px;
            }
        </style>
    </head>
    
    <body>
        <div></div>
    </body>
    
    </html>

![在这里插入图片描述][15c21a37b7f443c1a77dc028db798c3e.png]

**② 遮罩效果**

<!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>遮罩效果</title>
        <style>
            .test {
         
                position: relative;
                width: 630px;
                height: 393px;
                background-color: pink;
                margin: 100px auto;
            }
    
            .test img {
         
                width: 100%;
            }
    
            .test::before {
         
                content: '';
                position: absolute;
                display: none;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, .4) url(../images/arr.png) no-repeat center;
            }
    
            .test:hover::before {
         
                display: block;
            }
        </style>
    </head>
    
    <body>
        <div class="test">
            <img src="../images/bg.png" alt="">
        </div>
    </body>
    
    </html>

当鼠标经过，会出现遮罩效果

![在这里插入图片描述][fb70cfc76a1841ac9a7b4f37176de554.png]

![在这里插入图片描述][e61fdd6fe6f34123a6dc85b985077862.png]

**③ 伪元素清除浮动**

清除浮动：

1.  额外标签法也称为隔墙法，是 **W3C** 推荐的做法
2.  父级添加 **overflow** 属性
3.  父级添加 **after** 伪元素
4.  父级添加双伪元素

后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化

.clearfix:after {
        
    	content: '';
    	display: block;
    	height: 0;
    	clear: both;
    	visibility: hidden;
    }

父级添加双伪元素

.clearfix:before,.clearfix:after {
        
    	content: '';
    	display: table;
    }
    .clearfix:after {
        
    	clear: both;
    }

### 5. CSS3盒子模型 ###

**CSS3** 中可以通过 **box-sizing** 来指定盒模型，有 2 个值：即可指定为 **content-box**、**border-box**，这样我们计算盒子大小的方式就发生了改变

可以分成两种情况：

1.  `box-sizing: content-box` 盒子大小为 `width + padding + border` （以前默认的）
2.  `box-sizing: border-box` 盒子大小为 `width`

如果盒子模型我们改为了 `box-sizing: content-box` ，那 **padding** 和 **border** 就不会撑大盒子了（前提为 **padding** 和 **border** 不会超过 **width** 宽度）

我们以后写 **css** 样式，可以把这个添加到全局中

* {
        
    	margin: 0;
    	padding: 0;
    	box-sizing: border-box;
    }

### 6. CSS3图片模糊处理 ###

**CSS3** 滤镜 **filter**：

**filter**—— **CSS** 属性，将模糊或颜色偏移等图形效果应用于元素

filter: 函数();   例如：filter: blur(5px);  blur模糊处理，数值越大越模糊

<!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>图片模糊处理</title>
        <style>
            img {
         
                width: 50%;
                filter: blur(3px);
            }
    
            /* 鼠标经过时不模糊 */
            img:hover {
         
                filter: blur(0);
            }
        </style>
    </head>
    
    <body>
        <img src="../images/cat.png" alt="">
    </body>
    
    </html>

![在这里插入图片描述][0a6663cd1f3c4367b2911a9adae3384a.gif_pic_center]

### 7. CSS3 calc 函数 ###

**calc()** —— 让你在声明 **CSS** 属性时执行一些计算

width: calc(100%-80px);

括号里可以使用加减乘除来进行计算

### 8. CSS3过渡（重点） ###

过渡（**transition**）是 **CSS3** 中具有颠覆性的特征之一，我们可以在不使用 **Flash** 动画或者 **JavaScript** 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果

过渡动画：是从一个状态渐渐地过渡到另外一个状态

可以让我们页面更好看、更动感十足，虽然低版本浏览器不支持，但是不会影响页面布局

过渡经常和 **:hover** 一起搭配使用  
   
语法：

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

*  属性：想要变化的 **CSS** 属性、宽度、高度、背景颜色、内外边距都可以，如果想要所有的属性都变化过渡，写一个 **all** 就可以
 *  花费时间：单位是秒（必须写单位）比如 **0.5s**
 *  运动曲线：默认是 **ease** （可以省略）
 *  何时开始：单位是秒（必须写单位）可以设置延迟触发的时间，默认是 **0 s**

<!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>过渡效果</title>
        <style>
            div {
         
                width: 100px;
                height: 50px;
                background-color: skyblue;
                /* transition: width 1s ease, height 1s ease; */
    
                /* 下面这种写法更常用，而且方便 */
                transition: all .5s;
            }
    
            div:hover {
         
                width: 200px;
                height: 100px;
                background-color: cyan;
            }
        </style>
    </head>
    
    <body>
        <div></div>
    </body>
    
    </html>

![在这里插入图片描述][94e9a0b0e43140518b9ab4d600baa5e1.gif_pic_center]  
![在这里插入图片描述][722a8defa26a44a4ae3a55176ac7aa58.gif_pic_center]

### 9. 过渡案例 ###

案例目标：利用过渡实现进度条

<!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>进度条</title>
        <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 .8s;
            }
    
            .bar:hover .bar_in {
         
                width: 100%;
            }
        </style>
    </head>
    
    <body>
        <div class="bar">
            <div class="bar_in"></div>
        </div>
    </body>
    
    </html>

![在这里插入图片描述][5faeecec2fca4f6692fd52fcbbb68e2e.gif_pic_center]

## HTML5和CSS3 ##

### 1. 狭义 ###

狭义的 **HTML5** 和 **CSS3** 指的是 **HTML5** 结构标签本身和 **CSS3** 相关样式

### 2. 广义 ###

广义的 **HTML5** 是 **HTML5** 本身 + **CSS3** \+ **JavaScript**，这个集合有时候称为 **HTML5** 和朋友，通常缩写为 **HTML5**。虽然 **HTML5** 的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势

> ![在这里插入图片描述][87954e61fef041eea1329f04debb2abf.png]  
> ? 这次的分享就到这里啦，继续加油哦^^  
> ? 我是[程序喵][Link 1]，陪你一点点进步  
> ? 有出错的地方欢迎在评论区指出来，共同进步，谢谢啦

[Link 1]: https://blog.csdn.net/weixin_62511863?spm=1011.2421.3001.5343
[HTML5_CSS3]: https://blog.csdn.net/weixin_62511863/category_11894920.html?spm=1001.2014.3001.5482
[d9045c78442d468291bc51efe4fa97b7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/4baae437f7084a96ab386a85f279e4e4.png
[eb6e0a791dcf46f39f06d128265f7034.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/92c38a5e3f5e493fa56c1e4c7b6d161a.png
[a5e6fd4aaf064342a28d84cd012e8110.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/8b6337dd6dc24a95be645dab37254773.png
[5db92a8850404a2185d7400ff1e76e6c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/b3d4870f6a1c4fa1b95ebf39b52fa2d7.png
[876bc9b94e7c430fa8d38e4649a3ab74.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/a560538000ca4bc8b7b2de98f9e789a7.png
[5471c29a4a324442a20b3b27faf61cdd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/4d682c918ee04243b56a1c41650e53f2.png
[6d8b03588f73427cb3dcddc056628d62.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/191eaee547c64255a92df34538329140.png
[e69fcc19dc78494fb0fb7c5bc5a54318.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/512b589fcaca42c49bf2d0dcd13cca66.png
[15c21a37b7f443c1a77dc028db798c3e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/81943b4637cf46c7b12e9d99cf5af3ca.png
[fb70cfc76a1841ac9a7b4f37176de554.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/0d5fcdc4883541e189eb7418c8cb7520.png
[e61fdd6fe6f34123a6dc85b985077862.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/50e8dcd5bc0144aebf4d5576507157e7.png
[0a6663cd1f3c4367b2911a9adae3384a.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/d94d4c84e33e41dd8eaa97e305b35286.gif
[94e9a0b0e43140518b9ab4d600baa5e1.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/8da9d7522b784650aa5e7af7eb36c360.gif
[722a8defa26a44a4ae3a55176ac7aa58.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/1bd22ae0379b47168697e488faeb6aa6.gif
[5faeecec2fca4f6692fd52fcbbb68e2e.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/3d0f54bff1334f07859d6f551aecc19c.gif
[87954e61fef041eea1329f04debb2abf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/1b5eac88211b46a7b392d7e0b9fdc336.png