豚鼠努力学习前端第二周

最新推荐文章于 2024-08-03 20:32:29 发布

落兰殇

最新推荐文章于 2024-08-03 20:32:29 发布

阅读量423

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/xiongyifeifei/article/details/127498832

版权

一、第一部分

1.嵌套列表

嵌套列表部分主要是讲列表之间的相互嵌套。
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>Document</title>
</head>
<body>
  <ul>
    <li>
        河南省
        <ul>
            <li>固始县</li>
    <li>    <li>商城县</li>
            <li>光山县</li>
    <li>  
       江苏省
            <li>南京市</li>
            <li>扬州市</li>
            <li>
                这是一个嵌套测试
               <ul>
                 <li>这是一个嵌套测试</li>
               </ul> 

            </li>
        </ul>
    </li>
  </ul>
</body>
</html>

请添加图片描述

<!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>
<body>
    <dl>
        <dt>这是一个嵌套测试</dt>
        <dd>这是一个嵌套
            <dl>
                <dt>嵌套测试</dt>
                <dd>这是嵌套</dd>
            </dl>
        </dd>
    </dl>
</body>
</html>

请添加图片描述

2.表格标签

表格标签的主要内容是讲建立表格所需的标签与注意事项
1.表格标签：

<table> 表格的最外层容器
<tr> 定义表格行
<th> 定义表头
<td> 定义表格单元
<caption> 定义表格标题

2.语义化标签：

<tHead> <tBody> <tFood>

要注意thead，tfood标签只能出现一次，tbody可以出现多次
**3…注意事项：**表格标签之间是有嵌套关系的，要符合嵌套规范。
实操效果

<!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>
<body>
    <table>
        <caption>豚鼠简介</caption>
        <thead>
             <tr>
            <th>豚鼠身长</th>
            <th>豚鼠年龄</th>
            <th>豚鼠图片</th>
             </tr>
        </thead>
        <tbody>
        <tr>
            <td>成年20cm</td>
            <td>一般4年</td>
            <td><img src= "./图片/u=3168461089,1543121833&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto.webp"alt="tunshu"width="30"height="30"></td>
        </tr>
            <tr>
                <td>最大30cm左右</td>
                <td>最大14年</td>
                <td><img src="./图片/u=4213204805,3844754271&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto.webp" alt="tunshu"width="30"height="30"></td>

            </tr>
        </tbody>
  
        
    </table>
</body>
</html>

请添加图片描述

3.表格属性

表格属性的主要内容是介绍编写表格时一写相关的属性及其内涵。
1.部分属性：

border 表格边框
cellpadding 单元格内的空间
cellspacing 单元格之间的空间
rowspan 合并行
colspan 合并列
align （left，center，right）左右对齐方式
valign （top，middle，bottom）上下对齐方式

东西较多的部分需要我们不断记忆
实操效果

<body>
    
    <table border="1"cellpadding="20"cellspacing="20">
    <thead>
        <tr>
             <caption>豚鼠简介</caption>
             <th >豚鼠身长</th>
             <th colspan="2">豚鼠年龄</th>
             <th >豚鼠图片</th>

        </tr>
    </thead>
    <tbody>   
        <tr align ="right">
        <tr align="left">
            <td rowspan="2">成年20cm</td>
            <td>这是rowspan测试</td>
            <td>一般4年</td>
            <td><img src= "./图片/u=3168461089,1543121833&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto.webp"alt="tunshu"width="30"height="30"></td>
        </tr>
        <tr>
            
            <td align="right" valign="bottom">最大14年</td>
            <td>这是一个测试</td>
            <td><img src="./图片/u=4213204805,3844754271&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto.webp" alt="tunshu"width="30"height="30"></td>

        </tr>
        <tr>
            <td rowspan="2" align="left" valign="bottom">成年20cm</td>
            <td>这是rowspan测试</td>
            <td>一般4年</td>
            <td><img src= "./图片/u=3168461089,1543121833&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto.webp"alt="tunshu"width="30"height="30"></td>

        </tr>
        <tr>
            <td>最大14年</td>
            <td>这是一个测试</td>
            <td><img src="./图片/u=4213204805,3844754271&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto.webp" alt="tunshu"width="30"height="30"></td>
        </tr>
    </tbody>  
        
    </table>
</body>
</html>

请添加图片描述

4.表格input标签

表单input部分主要介绍制作表单所需的一些属性，标签及其含义。
1.标签：

<form> 表单的最外层容器
<input>标签用于收集用户信息，根据不同的type属性值，展示不同的控件，如输入框，密码框，复选框等。

2.type属性：

text 普通文本输入框
password 密码输入框
checkbook 复选框
radio 单选框
file 上传文件
submit 提交按钮
reset 重置按钮
以及用来收集提交的 action 属性（不属于type属性）

3.其他属性：

checked 打开，可决定选框能被选中
disabled 禁止，可决定选框不可被选中
name 将代码进行分组，同一组的单选框才能生效

实操效果

<!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>
<body>
    <form action="./收集"></form>
    <h2>输入框：</h2>
    <input type="text">
    <h2>密码：</h2>
    <input type="password">
    <h2>复选框</h2>
    <img src="./图片/u=747372530,1954748238&fm=253&fmt=auto&app=138&f=JPEG.webp" alt=""width="100" height="100">
    <input type="checkbox" disabled>大力士豚鼠
    <img src="./图片/u=951045188,132001830&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto.webp" alt=""width="100"height="100">
    <input type="checkbox" checked>眼镜豚鼠
    <h2>单选框</h2>
    <img src="./图片/u=4213204805,3844754271&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto.webp" alt=""width="100"height="100">
    <input type="radio" name="tunshu">白豚鼠
    <img src="./图片/u=341896359,1030018502&fm=253&fmt=auto&app=120&f=JPEG.webp" alt=""width="100"height="100">
    <input type="radio" name="tunshu">棕黑豚鼠
    <h2>提交与重置按钮</h2>
    <input type="submit">
    <input type="reset">
    
</body>
</html>

请添加图片描述

5.表单相关标签

表单相关标签主要介绍制作表单需要的标签与其效果。
1.表单标签:

<textarea>（属性：cols：行长 row：列长） 多行文本文框
<select>（属性：multiply：多选 size多个显示）,<option> 下拉菜单
<label> 辅助表单

实操效果

<!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>
<body>
    <form action="../收集/"></form>
    <select>
        <option>1</option>
        <option>2</option>
    </select>
    <select multiple>
        <option>一只</option>
        <option>两只</option>
    </select>
    <textarea cols="30" rows="10">商品备注</textarea>
    <input type="radio"name= "gong" id="公"><label for="公">公</label>
    <input type="radio" name="gong" id="母"><label for="母">母</label>
</body>
</html>

请添加图片描述

6.表格表单组合实例

表单与表格部分主要讲解表单与表格的复合使用，直接以示例说明。

实操效果

<!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>
<body>
   <form action="">
      <table>
         <tr >
         <td>豚鼠体重：</td>
         <td align="left"><input type="text"></td>
         </tr>
         <tr>
            <td>豚鼠大小：</td>
            <td align="left"><input type="text"></td>
         </tr>
         <tr>
            <td>豚鼠饭量：</td>
            <td align="left"><input type="text"></td>
         </tr>
         <tr>
            <td>性别：</td>
            <td><input type="radio"name="1组" id="公">公<label for="公"></label></td>
            <td><input type="radio"name="1组" id="母">母<label for="母"></label></td>
         </tr>
         <tr>
            <td>生日：</td>
            <td><select>
              <option>请选择</option>
               <td><h4>年</h4></td>
            </select> </td>
            <td><select>
               <option>..</option>
               <td><h4>月</h4></td>
            </select></td>
            <td><select>
               <option>..</option>
               <td><h4>日</h4></td>
            </select></td>
         </tr>
         <td><a href="#" type="blue">为什么填写豚鼠的生日？</a></td>
         <tr>
            <td>因为你是：</td>
            <td><select>
               <option >铲屎官</option>
            </select></td>
            <td>(要爱你的鼠鼠，非常重要)</td>
         </tr>
         <tr>
            <td><img src="./图片/u=4001392495,2383125954&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto.webp" alt=""width="30"height="30">属鼠</td>
            <td><a href="#" type="blue">看不清楚鼠鼠吗？那换一张.</a></td>
         </tr>
         <tr>
            <td>验证码：</td>
            <td><input type="text"></td>
         </tr>
         <tr>
            <td><a href="#" type="green">立即注册</a></td>
         </tr>
       </table>
   </form> 
</body>
</html>

请添加图片描述

一、第二部分

1.div与span

div与span部分主要讲解两者用法为下面学习css做铺垫。
1.div（块）： div全称divsion，“分割，分区”的意思，div标签用来划分一个区域，相当于一块区域容器，可以容纳段落，标题，表格，图像等各种网页元素。即HTML中大多数的标签都可以嵌套在div中，div中还可以嵌套多层div，用来将网页分割成独立的，不同的部分，来实现网页的规划和布局。
2.span（内联）： 用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行。

简单来说div用来划分区域，span用来修饰，如图：
实操效果

<!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>
<body>
    <div style="border:1px red solid;">
        <h2><a href="#">这是买豚鼠粮的链接 <span style ="color:aqua">豚鼠很喜欢吃青菜和黄瓜</span></a></h2>-千万不要忘了带鼠鼠出去走走哦<a href="#"><img src="./图片/u=535928010,2631249042&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto.webp" alt=""width="30"height="30"></a>
        <p>为什么鼠鼠代谢这么快啊？？做铲屎官真的好难啊！！！！！！！！</p>
    </div>
</body>
</html>

请添加图片描述

2.CSS语法格式

CSS语法格式主要介绍css的写法和语法格式。
1.格式： 选择器{属性1：值1；属性2：值2}
2.单位： px（像素 pixel），%（百分比根据当前容器进行选择）
请添加图片描述
3.基本样式： width，height，background
4.标签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>
    <style>
        div{width:66px;height:66xpx;border:1px blue solid;}
        span{width:55px;height: 55px;background:green ;}
    </style>
</head>
<body>
   <div>蓝色豚鼠</div>
   <span>green豚鼠</span>
    
</body>
</html>

请添加图片描述

3.内联样式与内部样式

内联样式与内部样式部分主要讲内联样式与内部样式的区别与好处
1.内联（行内，行间）样式： 在html标签上添加style属性来实现。
2.内部样式： 在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>
    <style>
       /*  div{width: 100px;height: 100px;border:2px red solid;} */(注释部分去掉注释为上图)
    </style>

</head>
<body>
    <div style=" width:200px; height:200px; border:2px red solid;">这是一只数字豚鼠</div>
    <div>这是另外一只数字豚鼠</div>
</body>
</html>

请添加图片描述

4.外部样式及其两种写法

外部样式及其两种写法主要介绍css引用外部资源的两种方法。
1.方式一 引入一个单独的css文件，如：name.css
　　　通过link标签引入外部资源，rel属性指定资源与页面的关系，herf属性引入资源地址。
** 2.方式二** 通过@import方式引入外部样式（有很多问题，不建议使用。）

实操效果

<!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>
    <link rel="stylesheet" href="./外部样式链接.css">
</head>
<body>
    <div>这是一个区块测试</div>
    <div>这是一个区块测试</div>
</body>
<body>
    <div>这是另一个区块</div>
</body>
</html>

<!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>
<style>
    @import url('./外部样式链接.css');
</style>
</head>
<body>
    <div>这是一个区块测试</div>
    <div>这是一个区块测试</div>
</body>
<body>
    <div>这是另一个区块</div>
</body>
</html>

效果是一样的

6.CSS颜色表示法

css颜色表示法主要内容讲解cs表示颜色的三种方式。
1.单词表示法： red blue green yellow
2.十六进制表示法： #000000 #ffff
3.rgb三原色表示法： rgb（255，255，255）；取值范围0~255
**4.软件辅助：**FEhelp必须在网络环境下可以提取颜色，ps吸色功能可以得到rgb与16进制颜色
请添加图片描述

<!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>
    <style>
        div{background-color: aqua; width:"500" ;height:"500" ;}
        div{background-color: rgb(0, 0, 0); width:"500" ;height:"500"  ;}
        div{background-color: #00000000 ; width:"500" ;height:"500" ;}
    </style>
</head>
<body>
    <div>这只是一个区块 却被附加了三个颜色</div>
</body>
</html>

请添加图片描述

可见，一个区块不能附加多个颜色，这个区块好惨，不过删掉两个就好了。

一、第三部分

1.背景样式

背景样式部分主要介绍css中背景样式的几个属性
1.几个属性：

background-color 背景颜色
background-image（url：背景地址 默认x，y都会铺满） 背景图片
background-repeat（x,y,都进行平铺，默认值，on-repeat都不平铺） 背景图片的平铺方式
background-position （number：px，%，x：left，center，right，y：top，center，bottom）背景图片的位置
background-attachment （scroll：默认值 按照当前位置进行偏移，fixed：背景位置是按照浏览器进行偏移）背景图片随滚动条的移动方式

实操效果

<!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>
   <style>
 body{height:2000px;}
 div{width:600px;height:600px;background-color: aqua;
    background-image: url(./图片/u=341896359\,1030018502&fm=253&fmt=auto&app=120&f=JPEG.webp);
     background-repeat: no-repeat;
     background-position: 10px 10px;
     background-attachment: fixed;

 }
   </style>
</head>

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

请添加图片描述

2.背景实现视觉差效果

背景实现视觉差效果部分主要讲解利用background属性实现视觉差效果。
该部分直接以实操效果演示。

实操效果

<!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>
    <style>
        #div1{width: 800px;height: 800px;background-image:url(./图片/u=1964263683\,1233031811&fm=253&fmt=auto&app=138&f=PNG.webp) ;background-attachme;}
        #div2{width: 800px;height: 800px;background-image:url(./图片/u=747372530\,1954748238&fm=253&fmt=auto&app=138&f=JPEG.webp);background-attachment: fixed;}
        #div3{width:800px;height:800px; background-image: url(./图片/u=951045188\,132001830&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto.webp);background-attachment: fixed;}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

请添加图片描述

3.边框样式

边框样式部分主要讲如何对边框进行修饰及其对应属性。
1.边框属性：

border-style 边框样式
solid 实线 dashed 虚线 dotted 点线
dorder-width 边框大小
px ... 
bprder-color 边框颜色
 red #f00 ...

边框也可以针对某一天边进行单独设置：border-left（left，right，top，bottom）-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>
   <style>
       div{border-right-color:red ; border-left-color:green; border-top-color:blue ;border-bottom-color:black ;}
       div{border-style:dashed}
       div{border-width:500px}
   </style>
</head>
<body>
   <div><img src="./图片/u=4213204805,3844754271&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto.webp" alt=""width="500"height="500"></div>
</body>
</html>

请添加图片描述

4.边框实现三角形

边框实现三角形主要讲解如何利用边框制成三角形。
1.所需值： transparent
**2. 原理：**边框像素为零时会呈现三角形，边框的顶端并不是长方形，如图：
请添加图片描述

实操效果

 <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{background-color: aqua;}
        div{width: 0px;height: 0px;
            border-right-color:red ;
            border-right-width: 30px;
            border-right-style:solid ;
            border-left-color:transparent ;
            border-left-width: 30px;
            border-left-style:solid ;
            border-top-color:transparent;
            border-top-width: 30px;
            border-top-style:solid ;
        }

    </style>
</head>
<body>
    <div></div>
</body>
</html>

请添加图片描述

5.famil字体类型

family字体类型的主要内容是讲解css字体类型对应代码，以及部分注意事项。
1.属性： font-family
　　　英文字体：Arial,‘Times New Roman’
　　　中文字体：微软雅黑（‘Microsoft YaHei’），宋体(SimSun)
2.注意事项： 1.多个字体设置的目的：能够适应更多的设备
　　　　　　2.引号添加的目的：部分字体中含有空格，添加字体代表他们是一个整体。

实操效果

!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>
    <style>
        #div1{font-family: 华文云朵,宋体; }
        #div2{font-family: 'Time New Roman'; }
    </style>
</head>
<body>
    <div id="div1">这是一段文字</div>
    <div id="div2">zhe shi ying weng</div>
</body>
</html>

请添加图片描述

6.字体大小粗细样式

字体大小粗细样式的内容主要是介绍字体大小的值与属性。
1.属性与值：

font-size 字体大小 默认：16px 
写法：normal (px)（xx-small/large x-small/large small large）
font-weight 字体粗细 模式: normal（正常） bold（加粗)
写法：单词（bold） | number（100 200 ....900 100到500都是正常，600到900都是加粗）
font-style 字体样式 模式 normal（正常） italic（斜体，不能让没有倾斜属性的字体进行倾斜操作）oblique(斜体，让没有倾斜属性的字体也进行倾斜操作)
；等等

实操效果

 !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>
    <style>
        div{font-size: 20px;font-weight: 900;font-style: italic;}
         p{font-size: 10px;font-weight: normal;font-style: normal;}
    </style>
</head>
<body>
    <div>这是豚鼠介绍</div>
    <p>13232425352535464(这是鼠语,你看不懂)</p>
    <img src="./图片/u=1963146097,3181523564&fm=253&fmt=auto&app=120&f=JPEG.webp" alt="看看图片就算了吧"width="200"height="200">
</body>
</html>

7.文本修饰与文本大小写

文本修饰与文本大小写部分内容主要讲解利用代码规范文本大小写。
1.文本属性： text-transform
2.大小写值： 小写：underline
　　　　　　大写：uppercase
　　　　　　只针对首字母大写：capitalize

<!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>
    <style>
        #div1{text-decoration: underline overline;}
        #div2{text-transform: capitalize;}
        #div3{text-transform:lowercase ;}
        #div4{text-transform: uppercase;}
    </style>
</head>
<body>
    <div id="div1">
        <p>尽管我们手中空无一物 </p>
    </div>
    <div id="div2">abc</div>
    <div id="div3">abc</div>
    <div id="div4">abc</div>
</body>
</html>

请添加图片描述

8.文本缩进与文本对齐

文本缩进与对齐内容主要讲解文本缩进与对齐所需代码及其写入方法。
1.缩进属性： text-indent 首行缩进
em单位：相对单位，1em跟字体大小相同，可以用 font-size规定字体大小。
2.对齐属性： text-align （left，right，center，justify）

实操效果

<!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>
    <style>
       #div1{text-indent:2em; font-size:16px ;}
       #div2{text-align: center;}
    </style>
</head>
<body>
   <div id="div1">大豚鼠欺负小豚鼠了，教训一下</div> 
   <div id="div2">大豚鼠胆小还爱欺负小豚鼠，太坏了</div>
</body>
</html>

请添加图片描述

9.文本的行高

文本的行高内容主要是讲解如何规定段落之间的行高。
**1.什么是行高：**一行文字上下的高度，
　　　默认行高：不是固定值，而是变化的，根据当前字体的大小在不断变化。
　　　取值：number（px）| scale（比例值，跟文字大小成比例的）
2.行高属性： line-height（定义行高），且一行文字的上边距等于上一行文字的下边距

实操效果

<!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>
    <style>
        div{line-height:50px ;}
        p{line-height: 50%;font-size:100px}
    </style>
</head>
<body>
    <div>这是像素豚鼠</div>
    <div>这是像素豚鼠</div>
    <p>这是比例豚鼠</p>
    <p>这是比例豚鼠</p>
</body>
</html>

请添加图片描述

10.文本间距与英文折行

文本间距与英文折行部分内容主要文本间距如何控制以及如何控制折行效果
1.间距属性： lettrt-spacing 定义字间距
　　　　　　word-spacing 定义字符间距
2.英文和数字不自动折行的问题： 1.word-break：break-all（非常强烈的折行）
　　　　　　　　　　　　　　　2.word-wrap: break-word (不是那么强烈的折行，会有一些空白)

实操效果

<!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>
    <style>
       #div2{width:300px;height: 300px;border:1px solid;letter-spacing: 2px;word-break:break-all ;}
        #div1{width: 300px;height:300px;border:1px solid;letter-spacing: 2px;word-break:break-all ;}
        #div3{width: 300px;height:300px;border:1px solid;letter-spacing: 2px;word-wrap:break-word ;}
        
    </style>
</head>
<body>
    <div id="div1">tunshutunshutunshutunshutunshutunshutunshutunshutunshutunshutunshutunshutunshutunshutunshutunshutunshutunshutunshutunshutunshutunshutunshutunshutunshutunshutunshutunshutunshutunshutunshu</div>
    <div id="div2">豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚鼠豚

请添加图片描述

不折行输入过长的区域会超出div区域

11.文本与段落实现个人简介

文本与段落实现个人简介部分主要对前面所学内容进行总结和实操。

实操效果

<!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>
    <style>
        div{width: 850px;}
        h1{color: brown;text-align: center;}
        h2{color: rgb(219, 219, 21);}
        #id1{font-style:italic ;font-weight: bold; color: rgb(255, 0, 200);line-height: 30px;text-indent:2em ;}
        #id2{font-style:italic ; line-height: 30px; color:red ;text-decoration:underline;}
        #id3{font-style:italic ;line-height: 30px; color: rgb(85, 0, 255);font-weight: bold;letter-spacing: 5px;}
    </style>
</head>
<body>
    <div>
        <h1>豚鼠的简介</h1>
        <h2>基本信息</h2>
        <p id="id1">豚鼠(学名:Cavia porcellus)又名天竺鼠。豚鼠是无尾啮齿动物,身体紧凑短粗，头大颈短，它们具有小的花瓣状耳朵,位于头顶的两侧，具有小三角形嘴。四肢短小，作为选择育种的结果,存在20种不同表型的毛发颜色,并且存在13种不同的表型毛发质地和长度.</p>
        <h2>生存环境与习性</h2>
        <p id="id2">温带陆生夜行性动物,取食叶子,根和块茎,水果,花卉。具有社会性,可群居。圈养寿命平均为8年。繁殖活跃的豚鼠通常寿命较短,约为3~5年。</p>
        <h2>生产现状</h2>
        <p id="id3">在野外已经灭绝，作为宠物分布在世界各地。未列入《濒危物种红色名录》。</p>
    </div>
</body>
</html>

请添加图片描述

12.CSS复合样式

css复合样式部分主要讲解把css语法合并进行简化处理
1.注意事项： 复合的写法，是通过空格的方式实现的，复合写法有的是不需要关系顺序的，例如：background ，border；有的是需要关系顺序的，例如：font
2.标签复写形式： 1.background： red url（）repeat 0 0
　　　　　　　　2.border: 1px red solid
　　　　　　　　3.font: 最少要两个值
　　　　　　　　weight style size family √
　　　　　　　　style weight size famliy √
　　　　　　　　wieght style size/line-height family √
注：如果非要混写的话，那么要先写复合样式，再写单一样式，这样样式才不会被覆盖掉。

实操效果

<!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>
    <style>
        div{width:1000px;height:1000px ;
            background: rgb(126, 212, 28) url(./图片/u=1963146097\,3181523564&fm=253&fmt=auto&app=120&f=JPEG.webp )no-repeat center;
            background-size: 300px 300px;
        font: bold  italic 20px/100px 宋体;
          border-right:dashed 3px rgb(34, 172, 177);
        }
    </style>
</head>
<body>
    <div>这是一段文字</div>
</body>
</html>

请添加图片描述

13.ID选择器与CLASS选择器及其注意事项

ID选择器与CLASS选择器及其注意事项部分主要讲解css中id与class的作用与使用方法
1.ID选择器： css：#elem{}
　　　　　　html: id=“elem”
注：1. 一个页面中，id值是唯一的。
　　2. 命名规范，字母-_数字（命名的第一位不能是数字）
　　3. 命名方式，驼峰式，下划线式，短线式
2. CLASS选择器： css：elem{}
　　　　　　　　　html：class=“elem”
注：1. class选择器是可以复用的。
　　2. 可以添加多个class样式。
　　3. 多个样式的时候，样式的优先级根据css决定，而不是class属性中的顺序。
　　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>Document</title>
    <style>
      #div1{background:red center;width: 100px;height: 100px;}
      .div2{background:blue left;;width: 100px;height: 100px}
      p.div3{background:aquamarine;width: 100px;height: 100px}

    </style>
</head>
<body>
    <div id="div1">这是一只数字豚鼠</div>
    <div class="div2">这是一只胖豚鼠</div>
    <div class="div3">这是一只div豚鼠</div>
    <p class="div3">这是一只笨豚鼠</p>
    <P class="div3">这也是一只笨豚鼠</P>
    

</body>
</html>

请添加图片描述