day071、iframe是HTML中的一个标签，用于在网页中嵌入另一个独立的HTML页面。通过使用iframe，你可以

1、iframe是HTML中的一个标签，用于在网页中嵌入另一个独立的HTML页面。通过使用iframe，你可以在一个网页中显示另一个网页的内容，就好像在一个窗口中打开了另一个网页一样。
适用场景：I、嵌入其他网站的内容：比如在自己的网页中嵌入YouTube视频、Google地图等。II、分割页面内容：可以使用iframe将页面分割成多个部分，每个部分显示不同的内容。III、嵌入广告：一些广告商会提供iframe代码，用于在网页中显示他们的广告内容。
注意点：I、安全性：由于iframe可以加载其他网页的内容，因此需要注意被嵌入页面的安全性，以防止恶意代码的注入。II、响应式设计：在使用iframe时需要考虑被嵌入页面的响应式设计，确保在不同设备上都能够正常显示。III、SEO：搜索引擎可能不会将iframe中的内容视为当前页面的内容，这可能会影响搜索引擎优化（SEO）。
2、伪元素：页面中不是真实存在的元素，一共有四个：I、::before(在。。。之前)。II、::after(在。。。之后)。III、::first-letter(设置第一个词的样式)。IV、::first-line(设置第一行的样式)

/* 语法： 选择器::after{ css样式 } */
/* 需求：在当前页面中的div后面添加一句话 */
/* 注意：伪元素是行内元素 */
.box::after{
    /* content ： 添加的内容 */
    content: '我是div后面添加的内容';
    width: 50px;
    height: 50px;
    background-color: blue;
    /* 类型转换 */
    display: block;
}

/* 在当前div的前面添加图片 */
.div::before{
    content: url();
    width: 50px;
    height: 50px;
    background-color: yellow;
}

3、利用伪元素清除浮动，那么一定是把清除浮动添加给浮动元素的父元素

 /* 利用伪元素清除浮动，在大盒子里面 */
.box::after{
    content: '';
    /* 转为块元素 */
    display: block;
    clear: both;
}

4、清除浮动的方法
I、给受影响的元素添加clear：both
II、利用伪元素
III、给所有有浮动的盒子套一个大盒子，大盒子给宽高。
IV、所有有浮动的盒子下面加一个盒子，给宽高为0，并且clear：both
5、HTML5新增标签，更加具有语义化

<header></header>
<nav></nav>
<footer></footer>
<main></main>
<section></section>  块、区域
<article></article>  文章
<aside></aside>
<button></button>
<mark>高亮效果</mark>
<video src=""></video>   视频
<audio src=""></audio>   音频
<embed src="" type="">   多媒体标签，可以播放音频或视频
<!-- figure和figcaption一起使用 -->
<figure>
    <figcaption>标题</figcaption>
    <section>普通的标签</section>
</figure>

6、优雅降级：优雅降级是指在设计网页或应用程序时，首先针对最新的浏览器或设备使用最新的技术和功能，然后逐步向下兼容旧版本的浏览器或设备，以确保在各种环境下都能够提供基本的功能和良好的用户体验。这种方法的目标是让网页或应用程序在不支持最新技术的旧版本浏览器上仍然能够正常工作，尽管可能会失去一些高级功能或样式。在实践中，优雅降级意味着首先使用一些新的CSS属性、HTML元素或JavaScript功能来增强用户体验，然后通过一些技术手段（如CSS hack、媒体查询、JavaScript polyfill等）来确保在旧版本浏览器上也能够提供基本的功能和样式。这样可以使得网页或应用程序在各种浏览器和设备上都能够正常工作，同时也能够充分利用新技术带来的好处。。
7、渐进增强是一种网页设计和开发的理念，与优雅降级相对。它强调的是首先确保网页在所有浏览器和设备上都能够基本正常地工作，然后再逐步增加对新技术和功能的支持，以提升用户体验。在实践中，渐进增强意味着首先使用一些基本的HTML、CSS和JavaScript来构建网页的核心功能，确保这些功能在各种浏览器和设备上都能够正常工作。然后，通过使用一些新的CSS属性、HTML5元素或JavaScript功能来增强用户体验，但这些增强功能不是网页的核心部分，而是作为一种额外的提升。渐进增强的目标是确保网页在各种环境下都能够提供基本的功能和良好的用户体验，同时通过使用新技术来提升用户体验，但并不依赖于这些新技术。这种方法强调的是以核心内容为基础，逐步增加对新技术和功能的支持，以适应不断变化的浏览器和设备环境。
8、video、audio、embed

<!-- 视频标签 video 行内块标签 可以设置宽高 -->
<!-- 视频的格式：mp4、ogg、webm、avi -->
<!-- 控制器 controls -->
<!-- 循环播放 loop -->
<!-- 自动播放 autoplay。注意：视频自动播放，得跟静音一起使用muted -->
<video src="./video.mp4" controls loop autoplay muted></video>

9、

<!-- 表单新增的标签属性 -->
<form action="" method="get">
    <!-- placeholder 提示文本 -->
    <!-- required 必填项 -->
    <!-- autofocus 自动获取焦点，一个页面只能有一个 -->
    <!-- multiple 多选 -->
    <!-- autocomplete 自动完成验证，与name搭配使用 -->
    <!-- 正则验证 pattern="正则表达式"  -->
    用户名：<input type="text" placeholder="请输入用户名" required>
    邮箱：<input type="email" autofocus>
    上传文件：<input type="file" multiple>
    <!-- autocomplete是带有提示信息的功能，想要有效果，需要与name属性一起使用 -->
    自动完成验证：<input type="text" autocomplete="on" name="usersss">
    正则验证（前后端通用的）：<input type="text" pattern="^1[3456789]\d{9}$">
</form>

10、datalist标签

<!-- h5新增一个数据列表 datalist -->
<!-- datalist标签用于提供输入框的预定义选项列表，当用户在输入框中输入内容时，浏览器会显示与输入内容匹配的选项列表，用户可以从中选择，这个元素通常与input元素中的list属性一起使用 -->
<input type="text" list="mylist">
<datalist id="mylist">
    <!-- 此时option里面的内容不用管 -->
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
</datalist>

11、label标签

<!-- label 增大可选范围 -->
<input type="radio" name="sex" id="xing"><label for="xing">男</label>   
<input type="radio" name="sex" id="bie"><label for="bie">女</label>

12、css3新增的选择器：层级选择器、属性选择器、伪类选择器

<!-- 层级选择器 -->
<!-- +  选择器1+选择器2{} 含义：在选择器1后面紧挨着的选择器2获取的标签 -->
.li3+li{}
<!-- ~  选择器1~选择器2{} 含义：在选择器1后面的所有的选择器2获取的标签-->
.li3~li{}

属性选择器：属性选择器.png 伪类选择器： I、结构性伪类选择器：结构性伪类选择器.png II、否定伪类选择器

/* 否定伪类选择器 :not(选择器){css样式} */
li:not(:nth-child(3)){}
li:not(.li3){}

III、目标伪类选择器 :target{css样式}
IV、UI状态伪类选择器

<!-- 给input设置样式 -->
<!-- :enabled 可用状态 -->
<!-- :disabled 不可用状态 -->
<!-- :checked 选中状态 -->
<!-- ::selection 修改默认选中的状态 -->

V、动态伪类选择器（:link:visited:hover:active:focus(针对表单，光标选中的状态)）
13、阴影：盒子阴影、文字阴影
盒子阴影（内阴影和外阴影都不占位置）：

/* 盒子阴影：在水平方向上的阴影 在垂直方向上的阴影 模糊度 阴影大小 颜色 内阴影*/
box-shadow: 5px 10px 15px 20px #333 inset;

文字阴影：

/* 文字阴影:沿x轴平移 沿y轴平移 模糊度 颜色 */
text-shadow: 5px 5px 10px #333;

14、圆角属性：

.box{
       width: 200px;
       height: 200px;
       background-color: red;
       /* 四个值：左上 右上 右下 左下 */
       border-radius: 20px 30px 40px 50px;
       /* 只要圆角的属性值大于等于50%，那么图形就是圆形 */
       border-radius: 50%;
       /* 左上角 */
       border-top-left-radius: 10px;
       /* 右上角 */
       border-top-right-radius: 50px;
       /* 左下角 */
       border-bottom-left-radius: 10px;
       /* 右下角 */
       border-bottom-right-radius: 20px;
    }

15、背景属性

.box{
    /* 背景原点:background-origin,属性值有border-box、padding-box、content-box */
    /* border-box: 从边框区域的左上角开始*/
    /* padding-box:背景图片的定位区域从内边距框的左上角开始 */
    /* content-box:从内容框的左上角开始,从内容区域开始的 */
    background-origin: content-box;
    /* 背景的裁切 */
    /* background-clip, 属性值有border-box、padding-box、content-box */
    background-clip: border-box;
    /* 背景图尺寸 cover、contain */
    /* cover：扩展到足够大，覆盖全部区域。特点：不变形，容易显示不全，放大到完全覆盖盒子 */
    /* contain：扩展到宽或者高覆盖全部区域，不变形，容易有空白区域 */
    background-size: cover;
}