一、登录的作业讲解

二、复习

三、盒模型相关属性补充

1) width宽度

min-width 最小宽度
max-width 最大宽度

2) height高度

min-height 最小高度
max-height 最大高度

3) border 边框的设置

border-width:边框宽度
border-style:边框样式
- solid 实现
- dashed 虚线
- dotted 点线
border-color：边框颜色
合写：border：border-width border-style border-color

1、边框的宽度：border-width

可能的值

值	描述
thin	定义细的边框。
medium	默认。定义中等的边框。
thick	定义粗的边框。
length	允许您自定义边框的宽度。
inherit	规定应该从父元素继承边框宽度。

2、指定边框的样式：border-style

属性值

值	描述
none	定义无边框。
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

3、边框的颜色：border-color

border 复合属性

div{
   border:1px solid green;
}

4) 边框画三角形

<style>
    *{
        margin:0;padding:0;
    }
    .box{
        border:50px solid darkcyan;
        border-color: transparent   transparent lightblue transparent;
        width:0;
    }
</style>
<div class="box"></div>

四、浮动

1、浮动的来历

正常页面流：
- 在css中，是存在流的概念的，正常情况下，页面总是由左至右，由上至下布局，我们把这种情况称作为正常页面流
- 但是，在很多情况下，正常页面流有很多效果实现不了，所以需要一些手段来破坏流，而浮动（float）就是破坏流的一种手段
浮动的来历：
- float设计的初始想法仅仅是为了做文字环绕图片
- 在目前开发中，很多的元素都是一个个的float堆叠起来的，但是这种布局及其容易崩溃
- 只要高度和宽度发生一点变化，页面都可能发生错乱

2、浮动

float属性：
- 左浮动（left）：让元素沿着容器左侧放置
- 右浮动（right）：让元素沿着容器右侧放置
- none：不浮动
  3、浮动的特点
脱离正常文档流（不占位置）
左浮动，右浮动的方向针对的是父级
正常文档流中，宽度是可继承的，但是一旦浮动，宽度不能再继承父级的，而是由自身内容大小决定。
行内元素本来写宽、高是不起作用的，但是一旦设置浮动，设置宽、高也可以起作用。

4、脱离文档流
设置浮动的元素会脱离文档流，浮动的元素，并不属于文档中的普通流，元素漂浮于普通流之上，像浮云一样，但能够左右浮动。
由于浮动这种特性，导致本属于普通流的元素设置浮动后，如果父级不存在其他普通流元素，父级的高度就会为0，如果父级存在其他普通流的元素，父级的高度也会受影响

5、清除浮动
浮动的概念：让元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者是上一个浮动元素或者是上一个不浮动兄弟元素就停下来
高度塌陷：
- 浮动元素以后，脱离父级内容区域，父级没有内容撑开自身的高度
- 父级的兄弟元素是按照父级的位置进行布局的，所以页面会乱掉
清除浮动：清除浮动不是不让元素浮动，而是清除浮动对父级带来的影响
清除浮动的方法：
1. 给浮动元素的父级设置高度height（不推荐使用）缺点：很多情况下高度都是不缺定的所有不适用
2. 以浮制浮，给浮动元素的父元素设置浮动，原理是开启BFC（不推荐使用）缺点：只有在父级需要浮动的时候，可以这么清除，否则父级的浮动会影响布局
3. br清除浮动：在浮动元素的后边书写一个br。br中书写clear属性，值为both缺点：增加不必要的元素，不符合样式与结构相分离的要求
4. clear清浮动法：给浮动元素的下边添加一个块元素，书写样式clear:both；缺点：增加额外的结构，不符合语义化标准
5. after伪元素清浮动（推荐）可以给所有浮动元素的父级一个 clearFix的类名当一个元素需要清除浮动的时候直接设置clearFix类名即可
6. overflow：hidden；给父级设置，原理也是开启BFC（可以使用）优点：简单快捷；缺点：元素超出的时候，会隐藏超出部分
```
.clearFix:after {
/*  必须拥有content属性 内容为空  */
content: "";
/*   必须块标签才能清浮动  */
display: block;
/* 高度为0 不占用空间 */
height: 0;
/* 清除浮动 */
clear: both;
}

.clearFix {
/* //兼容ie */
*zoom: 1;
}
```
  6、浮动练习
  
  练习2

五、补充HTML5

1、HTML5新标签

header标签

一般用来定义网页的头部
可能包含一些标题元素，也可能包含其他元素，比如logo、搜索框、作者信息等等
完整的网页或者是完整的块（网页的一个独立区域）是头部、内容、尾部组成的（并不是强制）
整个页面没有header限制个数，可以使用多个 ```javascript <!DOCTYPE html>

你看我像不像logo

news my tiyu

<a name="AY4uZ"></a>
### footer标签

1. footer标签代表一个网页或者章节内容的底部区域
1. footer通常包含章节的作者，版权数据和文章的其他链接
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>footer</title>
</head>
<body>
    <div>
        <!--头部区域-->
        <header>
            <h1>你看我像不像logo</h1>
            <nav>
                <a href="###">news</a>
                <a href="###">my</a>
                <a href="###">tiyu</a>
            </nav>
        </header>
        <!--内容区域-->

        <!--底部区域-->
        <footer>
            <div>
                <h3>友情链接</h3>
                <a href="###">百度</a>
                <a href="###">阿里巴巴</a>
                <a href="###">阿里妈妈</a>
            </div>
        </footer>
    </div>
</body>
</html>

nav标签

元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。
导航部分的常见示例是菜单，目录和索引
并不是所有的导航都需要用nav标签，只是当前页面中比较重要的热门的可以使用nav，比如在底部导航，就没有必要加入链接
一个网页可能会有多个导航，比如整个网页的导航，也可以是某一块区域的导航 ```javascript <!DOCTYPE html>

你看我像不像logo

news my tiyu tiyu tiyu tiyu

友情链接
百度阿里巴巴阿里妈妈

<a name="WnmtD"></a>
### section标签

1. section是html中一个独立的区域（主要针对网页分块），没有其他语义，一般会包含一个独立的标题
1. 假设有一个效果，上边是nav导航栏，导航栏一般对应一个区域，用来显示这个导航到的内容，这个区域我们就可以使用section
1. section主要是对网页进行分块，也可以对网页中的某块内容进行分块
1. 其实和div没有什么区别（个人更喜欢用div）
<a name="d3u04"></a>
### article标签

1. 代表文档、页面、或程序中，可以独立的完整的被外部引用的内容
1. 比如一篇博客、一篇文章、一段用户的评论、一个日历插件，或者是其他独立内容
<a name="TMpw6"></a>
### aside元素

1. 表示一个和其余页面内容几乎无关的区域
1. 被认为是独立于内容的一部分，并且可以拆出来而不会使整体收到影响，通常表现为侧边栏
1. 这个里边的内容和其他元素内容关联性不强
<a name="U6Hut"></a>
### figure元素

1. 代表一块独立的内容，是一个独立的引用单元
1. 这个标签在主文中用来引用 图片、插画、表格、代码段等等信息
1. 一般会在figure元素中插入figcaption元素（标题元素），将figcaption代表的标题与figure内容相关联
1. 如果是单独一张图片 或者 单独的表格等等，那么直接使用相应的标签即可，如果存在图片和标题，那么请使用figure标签
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>figure</title>
</head>
<body>
    <figure>
        <figcaption>海贼王的图片</figcaption>
        <img src="../images/05.jpg" alt="" width="300">
    </figure>
</body>
</html>

还有mark元素、time元素、datalist元素、progress等，不一一介绍了，感兴趣可以自行了解。

2、HTML5表单的新类型

type旧类型：
- text：文本框
- password：密码框
- radio：单选框
- checkbox：多选框
- button：按钮
- reset：重置按钮
- submit：提交按钮
type新类型
1. color：用来引入或者打开指定颜色的控件
2. date：日期的控件（年月日）
3. week：日期的控件（年周）（火狐不支持）
4. month：日期的控件（年月）（火狐不支持）
5. email：编辑email的字段自带验证，但是验证不完整，一般还是自己书写在移动端上有相对应的自动弹出键盘包含 @ .com 等按键
6. number：用来输入数字的控件多了一个上下的按键，可以增加和降低数字大小
7. search：用来搜索框，当用户输入内容后，在末尾有一个删除按钮，单击可以删除输入好的文字
8. tel：电话号码输入框
9. url：url地址 ```javascript <!DOCTYPE html>
  
  请选择你喜欢的颜色：
  请选择你的出生日期：
  请输入当前的周数：
  请输入你几月生日：
  请输入您的邮箱地址：
  请选择您购买的数量：
  请在本框中进行检索：
  请输入您的电话号码：
  请输入你的个人博客的网址：

<a name="IkDSc"></a>
## 3、音视频

- 视频基本标签用法 ：
   - **<video width=" " height="" src=""> </video>**
   - src 属性：指定播放文件的URL。
   - width、height属性：
      - 设置媒体元素的大小，单位为像素；
      - 省略该属性，则使用播放源文件的大小；
      - 仅设置宽度值，将根据播放源文件的长宽比例自动生成一个与之对应的高度值。
- 音频基本格式 ：
   - **<audio src="" controls> </audio>**
   - src 属性：指定播放文件的URL。
   - 其他和视频一样。

![image.png](https://cdn.nlark.com/yuque/0/2021/png/21621156/1638519189714-976f607f-e268-43da-8c96-97927d9a27f6.png#clientId=ua8a7b603-616b-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=375&id=u39f7d282&margin=%5Bobject%20Object%5D&name=image.png&originHeight=854&originWidth=1930&originalType=binary&ratio=1&rotation=0&showTitle=false&size=174437&status=done&style=none&taskId=u6f7800e8-8e20-4154-8a59-2fe408b6d15&title=&width=848)
<a name="dW9eO"></a>
# 六、补充CSS3
<a name="GqT8S"></a>
## 1、css3选择器：

- E:first-child  匹配父元素的第一个子元素E。 
- E:last-child  匹配父元素的最后一个子元素E。 
- E:nth-child(n)  匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。 
- E:nth-last-child(n)  匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。 
- E:first-of-type  匹配同类型中的第一个同级兄弟元素E 
- E:nth-of-type(n)  匹配同类型中的第n个同级兄弟元素E 
- E:nth-last-of-type(n)  匹配同类型中的倒数第n个同级兄弟元素E
- E:nth-child(2n)  偶数项
- E:nth-child(2n+1)  奇数项
- E:nth-child(even)  偶数项
- E:nth-child(odd)  奇数项
```javascript
<style>
    /* 父元素的第一个子元素li  第一个子元素必须是这个li  不然无法选中 */
    li:first-child {
      background-color: blue;
    }

    li:last-child {
      background-color: blue;
    }
  </style>
</head>

<body>
  <ul>
    <!-- <p>111</p> -->
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</body>

2、a标签的4个伪类

四个伪类
- link：当有链接属性时
- visited:当连接被访问过以后
- hover：当连接被鼠标悬浮的时候
- active:当连接在激活状态的时候
位置不能互换这4个选择器优先级是一样的。顺序改变就可能后边覆盖前边的比如visited写在最后，那么当连接被访问过后，访问过后的颜色就会覆盖hover和active
记忆：爱恨法则 love-hate
hover适用于多数其他元素，并且伪元素也可以使用 ```javascript <!DOCTYPE html>

link 当有链接属性时 visited 当连接被访问过之后 hover 当连接被鼠标悬浮的时候 active:当连接在激活状态的时候

同时设置4个伪类

<a name="vCDuP"></a>
## 3、常用伪元素

- 伪元素可以理解为“虚假的元素”，他们虽然会在内容元素的前后插入额外的元素，但并不会在文档中生成，在文档的源代码当中并不能够找到它们。
- 虽然在结构上是虚假元素，但是在表现上和普通元素没有什么区别，能为它们添加任何样式，比如改变文字颜色、添加背景、调整字体大小等等

- 伪元素必须拥有content属性 ，才能生效，伪元素默认是一个行内元素，伪元素对其他属性基本都是支持的
```javascript
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    li::after {
      content: "";
      display: block;
      width: 100px;
      height: 2px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</body>

</html>

4、圆角边框

CSS3 圆角边框（IE9.0以前版本不支持）：
- border-radius:5px 15px 20px 25px ;
- border-radius:20px / 10px ;

border-radius：50%；能做一个圆

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: lightskyblue;
      /* 左上角 */
      border-top-left-radius: 10px;
      /* 右上角 */
      border-top-right-radius: 20px;
      /* 右下角 */
      border-bottom-right-radius: 30px;
      /* 左下角 */
      border-bottom-left-radius: 40px;
      /* 等价于 */
      border-radius: 10px 20px 30px 40px;
    }
  </style>
</head>

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

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: lightskyblue;
      /* 左上、右上、右下、左下 */
      border-radius: 10px 20px 30px 40px;
      /* 左上、右上左下、右下 */
      border-radius: 30px 80px 60px;
      /* 左上右下、右上左下 */
      border-radius: 30px 80px;
      /* 4个角一致 */
      border-radius: 80px;
    }
  </style>
</head>

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

</html>

作业

默写

1、input 7+7
2、单词
3、如何文字水平居中
4、如何文字垂直居中
5、块级如何水平居中
6、浮动的特点
7、音视频标签的几个主要属性

2022-03HTML CSS

day06