web前端开发笔记21~45 2022/10/27

最新推荐文章于 2024-06-14 11:01:38 发布

萌木琉璃

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量1.7k

点赞数 1

文章标签：前端 html

本文链接：https://blog.csdn.net/qq_74285138/article/details/127489827

版权

表格表单以及css基础

一、列表嵌套

无序列表是可以进行嵌套的
具体操作

<!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>
</head>
<body>
    <h1>好美味小吃</h1>
    <ul>
        <li>
            小吃类
        </li>
            <ul>
                <li>混沌</li>
                <li>耿汤</li>
                <li>炸蛋</li>
                <li>活珠子</li>
            </ul>
    </ul>
    <ul>
        <li>
            卤味类
        </li>
            <ul>
                <li>秘制花干</li>
                <li>卤蛋</li>
                <li>卤味面筋</li>
                <li>鱿鱼</li>
                <li>卤制大肠</li>
            </ul>
    </ul>
    <ul>
        <li>
            熟食类
        </li>
            <ul>
                <li>北京烤鸭</li>
                <li>叫花鸡</li>
                <li>猪耳朵</li>
                <li>酱鹅肝</li>
            </ul>
    </ul>
    <ul>
        <li>
            主食类
        </li>
            <ul>
                <li>扬州炒饭</li>
                <li>兰州拉面</li>
                <li>东北大米</li>
                <li>天津包子</li>
                <li>红油面皮</li>
            </ul>
    </ul>
    <em>亲，购餐满20元可以配送哦!!!</em>
</body>
</html>

效果图：

二、表格标签

1、表格标签使用

效果类似于Office的Excel
表格标签的基础代码（双标签）

<table>：表格的最外层容器
<tr>：定义表格行
<th>：定义表头
<td>：定义表格单元格内容（不止是文字也可图片img）
<caption>：定义表格标题

注意：它们之间是有嵌套关系的，要符合嵌套规范
3个语义化标签（双标签）

<tHead> 表格头部信息
<tBody> 表格内容或身体部分
<tFood> 表格尾部信息

应用语义化标签时注意缩进

注意：在一个表格中 tHead，tFood 只能出现一次，但tBody可以出现多次

代码实操

<!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>动漫电影2022预计上映详情表</caption>
        <thead>
        <tr>
            <th>动漫名称</th>
            <th>预计开播日期</th>
            <th>预告图片</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>《铃芽户缔》</td>
            <td>2022/11/11</td>
            <td><img src="./铃芽户缔.jpg" alt="" height="350" width="350" title="《铃芽户缔》"></td>
        </tr>
        <tr>
            <td>《关于我转生变成史莱姆这档事：红莲之绊篇》</td>
            <td>2022/11/25</td>
            <td><img src="./红莲之绊.jpg" alt=""  height="350" width="350" title="《关于我转生变成史莱姆这档事：红莲之绊篇》"></td>
        </tr>    
        <tr>
            <td>《名侦探柯南剧场版：万圣节的新娘》</td>
            <td>2022/11/？</td>
            <td><img src="./万圣节的新娘.jpeg" alt="" height="350" width="350" title="《名侦探柯南剧场版：万圣节的新娘》"></td>
        </tr>
        <tr>
            <td>《灌篮高手：剧场版》</td>
            <td>2022/12/3</td>
            <td><img src="./灌篮高手.jpg" alt="" height="350" width="350" title="《灌篮高手：剧场版》"></td>
        </tr>
        </tbody>
        <tfoot></tfoot>
    </table>
</body>
</html>

效果图

2、表格标签属性

表格有以下的属性

<border>：表格边框 值为像素
<cellpadding>：单元格内的空间 值为像素
<cellspacing>：单元格之间 值为像素
这3个属性都是应用于标签<table>中


<rowspan>：合并行 值为想要合并的行数
<colspan>：合并列 值为想要合并的列数
这2个属性应用在标签<td>中


<align>：左右对齐方式 三个值：left、center、right（左、中、右）
<valign>：上下对齐方式 三个值：top、middle、bottom（上、中、下）
这2个属性应用于标签<tr>中

注意：关于行和列的合并
行合并：视图上是上下列合并，或者意思是将几行归为一个列单元格的项目下
列合并：视图上是左右列合并，或者意思是将几列归为一个行单元格的项目下
要求读者要多打代码观察预览网页，熟练掌握表格的属性

三、表单标签

1、input属性(在form标签下)

<form>表单的最外层容器
<input>标签用于收缩用户信息，根据不同的type属性值，展示不同的控件。

input的type属性表
type属性	含义
text	普通的文本输入框
password	密码输入框
checkbox	复选框
radio	单选框
file	上传文件
submit	提交按钮
reset	重置按钮

代码演示

<!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="https://baidu.com">
        <h2>文本框</h2>
        <input type="text" placeholder="请输入内容">
        <h2>密码框</h2>
        <input type="password" placeholder="请输入密码">
        <h2>复选框</h2>
        <input type="checkbox" checked>布鲁斯
        <input type="checkbox" checked>塞巴斯
        <input type="checkbox">安德烈
        <h2>单选框</h2>
        <input type="radio" name="1">xx
        <input type="radio" name="1">xy
        <h2>上传文件</h2>
        <input type="file">
        <h2>提交按钮</h2>
        <input type="submit" >
        <h2>重置按钮</h2>
        <input type="reset">
    </form>
</body>
</html>

说明：1、action=“https://baidu.com” 这是提交的网址（和后端开发有关）
2、placeholder=“文字"这个属性的作用是在文本框或密码框为空时显示文字
3、checked 用于复选框中作为默认选中的选项
4、在单选框中的name=”"name后可随意填写若相同则视为同一组，在同一组单选框的选项中只能选中一个选项
5、另外在提交按钮标签中可以使用属性multiple可以多选文件提交，即可以提交多个文件，若无multiple属性则默认只能提交一个文件

效果：

2、表单其他属性（在form标签下）

1、`<texetarea>` 多行文本框

<textarea></textarea> 多行文本框 属性cols="" 列数 rows="" 行数

2、`<select>、<option>` 下拉菜单

<select>、<option> 下拉菜单
具体操作

<form>
	<select>
		<option>菜单1</option>
		<option>菜单2</option>
		<option>菜单3</option>
		<option>菜单4</option>
	</select>
</form>

<select>有size=""属性填入数字，即出现页面显示的项数
还有属性multiple 即多选菜单通过鼠标滑过或ctrl+鼠标左击来进行多选

<option>中的属性selected 即将该项设为默认选中的项 若无selected属性则把第一项设为默认选中的项
还有属性disabled即禁止选择该项但可以显示该项

用途展示
<form>
	<select>
		<option selected disabled>请选择</option>
		<option>菜单1</option>
		<option>菜单2</option>
		<option>菜单3</option>
		<option>菜单4</option>
	</select>
</form>

3、`<label>` 辅助表单

作用：提升用户体验
具体操作（以单选框为例）

<form>
		<h2>单选框</h2>
        <input type="radio" name="1" id="woman"><label for="woman">xx</label>
        <input type="radio" name="1" id="man"><label for="man">xy</label>
<form>
其中的for属性与单选框的id属性形成映射，即将xx映射到第一个单选框，xy映射到第二个单选框
功能：可以点击xx或xy进行选中，若不使用辅助表单标签则需要点击单选框才可选中，即扩大单选框识别范围

注意表单标签和属性较多需要反复记忆和练习，熟能生巧，熟练掌握其作用

四、表单表格嵌套实例

1、表单不遵循嵌套规范，但表格严格遵循嵌套规范
2、基础代码

<form>
	<table>
	......
	</table>
</form>

实操代码

<!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>
        <table border="1" cellpadding="30" >
            <tbody>
                <tr align="center">
                    <td colspan="2">学生登陆系统</td>
                </tr>
                <tr>
                    <td rowspan="4">登陆页面</td>
                    <td>用户名：<input type="text" placeholder="请输入用户名"></td>
                </tr>
                <tr>
                    <td>&nbsp;密码：<input type="password" placeholder="请输入密码"></td>
                </tr>
                <tr>
                    <td><input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;<!-- 插入特殊符号空格 --><input type="reset"></td>
                </tr>
                <tr>
                    <td><a href="./铃芽户缔.jpg">没有账号？点我注册</a></td>
                </tr>
            </tbody>
        </table>
    </form>
</body>
</html>

效果图

五、div和span标签（双标签）

<div></div> "块"，分割、分区，划分一个区域，并且大部分HTML标签都可以嵌套在<div>中
<span></span> "内联" 可以用来修饰文字的

div和span没有默认的样式，需要配合CSS使用

—图片来自百度

以百度搜索为例，整张图片为一个“块”即div，蓝色框的文字为标题，而紫色框的文字为红色，使用了span标签改变了文字的样式。

六、CSS基础（背景div）

1、CSS语法格式

基本格式：选择器{属性1：值1；属性2：值2} （选择器可以对多个相应标签起作用，也可以通过id形成映射的关系给相同的标签设置不同的样式）

单位：px（像素）【绝对单位】、%（百分比）【相对单位】

基本样式（属性）：width（宽）、height（高）、background-color（背景颜色）

初用css（给多个div设置相同的样式）

<!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; background-color: red;}
    </style>
</head>
<body>
    <div>块标签，第一个CSS格式</div>
    <h2>分割</h2>
    <div>d第二个块</div>
    <h2>分割</h2>
    <div>下一个块</div>
</body>
</html>

效果图

2、CSS注释

格式：/*注释内容*/
快捷键：shift+alt+a 或 ctrl+/

3、内联样式与内部样式（CSS样式的引入方式）

1.内联（行内、行间）样式
方法：在html标签上添加style属性来实现的

直接在div标签上添加样式

2.内部样式
方法：在<style>标签内添加的样式（内部样式的优点，可以复用代码）

在head头文件中加入样式，可以全局控制，即让HTML文件内的相应的所有标签都采用head头文件中添加的样式，但也可以用id映射形成相同标签设置不同样式

演示

<!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: 100px; height: 100px; background-color: red;}
        #div2{width: 250px; height: 250px; background-color: blueviolet;}
    </style>
</head>
<body>
    <div id="div1">块标签，第一个CSS格式</div>
    <h2>分割</h2>
    <div id="div2">d第二个块</div>
    <h2>分割</h2>
    <div id="div1">下一个块</div>
</body>
</html>

效果

4、外部样式

即引入一个单独的CSS文件，例如：颜色样式a.css
方法：利用link标签引入

<link>标签（可以用来引入外部资源）
属性 rel（引入资源的类型）【默认是链接外部样式】  
href（引入外部资源的地址）

代码操作

<!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">
    <link rel="stylesheet" href="./外部样式.css">
    <title>Document</title>
</head>
<body>
    <div>这是一个块</div>
</body>
</html>

保存在外表样式.css文件下的代码

div{width: 30%;  height: 500px; background-color: red;}

效果

外部样式引入的第二种方法

<!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">
    <!-- <link rel="stylesheet" href="./外部样式.css"> -->
    <style>
        @import url(./外部样式.css);
    </style>
    <title>Document</title>
</head>
<body>
    <div>这是一个块</div>
</body>
</html>

即利用@import来进行引入

但不建议使用第二方法，有很多问题

5、关于CSS颜色的表示

英文单词表示法
示例div{width: 30%; height: 500px; background-color: green;}
十六进制表示法
示例div{width: 30%; height: 500px; background-color: #fff000;}
RGB颜色表示法
示例div{width: 30%; height: 500px; background-color: rgb(150, 122, 100);}

<!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">
    <!-- <link rel="stylesheet" href="./外部样式.css"> -->
    <!-- <style>
      
    </style> -->
    <title>Document</title>
</head>
<body>
    <div style="width: 100px;  height: 100px; background-color: #ff0000;">这是一个块</div>
    <div style="width: 200px;  height: 150px; background-color: rgb(0,0,255);" >另一个块</div>
</body>
</html>

6、背景样式

background-color 背景颜色
background-image 背景图片
属性：1、url（背景图片的地址）
2、会默认水平垂直铺满背景图

<div style="background-image: url(./铃芽户缔.jpg) ;">块</div>

background-repeat 背景图片的平铺方式
属性：1、repeat-x X轴铺满背景图
2、repeat-y Y轴铺满背景图
3、no-repeat 都不平铺

<div style="width: 100px;  height: 100px; background-color: rgb(0,0,255); background-image: url(./铃芽户缔.jpg); background-repeat: repeat-x;">块</div>
<h2>分割</h2>
    <div style="width: 100px;  height: 100px; background-color: rgb(0,0,255); background-image: url(./铃芽户缔.jpg); background-repeat: repeat-y;">块</div>
<h2>分割</h2>
    <div style="width: 100px;  height: 100px; background-color: rgb(0,0,255); background-image: url(./铃芽户缔.jpg); background-repeat: no-repeat;">块</div>

background-position 背景图片的位置
格式：background-position: x y ; 其中x和y处填写数值单位px
也可以使用单词对x：left、center、right y：top、center、bottom
也可以使用百分比调整背景图片的位置

<div style="width: 100px;  height: 100px; background-color: rgb(0,0,255); background-image: url(./铃芽户缔.jpg); background-repeat: no-repeat;background-position: 50px 0px ; ">块</div>
    <h2>分割</h2>
<div style="width: 100px;  height: 100px; background-color: rgb(0,0,255); background-image: url(./铃芽户缔.jpg); background-repeat: no-repeat;background-position: 0px 50px ; ">块</div>
<h2>分割</h2>
<div style="width: 100px;  height: 100px; background-color: rgb(0,0,255); background-image: url(./铃芽户缔.jpg); background-repeat: no-repeat;background-position: right bottom ; ">块</div>

background-attachment 背景图片随滚动条的移动方式
格式：background-attachment:scroll; background-attachment:fixed;
两种属性1、scroll：默认值作用：使容器和图片跟随滚动条相反方向移动
背景位置是按照当前元素进行偏移的

2、fixed 作用: 固定图片的位置不随滚动条移动
背景位置是按照浏览器进行偏移的

说明：就是说选择background-attachment的属性会影响到background-position 背景图片的位置标签的判定，意思是若选择scroll 则图片的位置属性设定是按元素（即div标签容器）进行放置是相对与div容器的偏移，而fixed 则是使图片位置相对于浏览器的窗口进行偏移，有可能会使图片偏移到容器之外，从而导致图片消失

7、利用滚动条移动方式实现视觉差网页

代码演示

<!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: 1400px; height: 900px; background-image: url(./万圣节的新娘.jpeg); background-attachment: fixed;}
        #div2{width: 1400px; height: 500px; background-image: url(./红莲之绊.jpg); background-attachment: fixed;}
        #div3{width: 1400px; height: 900px; background-image: url(./灌篮高手.jpg); background-attachment: fixed;}
    </style>
</head>
<body>
    <div id="div1"></div>
  
    <div id="div2"></div>
   
    <div id="div3"></div>
</body>
</html>

效果

8、边框样式

border-style :边框的样式
border-width :边框的大小（px像素）
border-color :边框的颜色（同背景色格式书写）

针对某一条边进行单独设计
border-style属性：

solid：实线
dashed：虚线
dotted：点线
等等有很多

基础代码

<!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: 400px; height: 100px; border-style:solid ; border-color: blue;border-width: 10px;}
        #div2{width: 400px; height: 100px; border-style:dashed ;border-color: #ff0000; border-width: 10px;}
        #div3{width: 400px; height: 100px; border-style:dotted ;border-color: rgb(25,120,110); border-width: 10px;}
    </style>
</head>
<body>
    <div id="div1"></div>
  <h2>分割</h2>
  <div id="div2"></div>
  <h2>分割</h2>
    <div id="div3"></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>
        div{width: 400px; height: 100px; border-right-style:solid ; border-top-style: double; border-bottom-style: dashed;border-left-style: dotted; border-right-color: blue; border-top-color: blueviolet; border-bottom-color: aqua; border-left-color: brown;border-right-width: 20px; border-left-width: 5px; border-top-width: 8px; border-bottom-width: 10px;}
    </style>
</head>
<body>
    <div ></div>

</body>
</html>

效果

9、利用边框实现三角形

当div容器大小为0px时，边框会变成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>
        div{width: 0px; height: 0px; border-right-style:solid ; border-top-style: solid; border-bottom-style: solid;border-left-style: solid; border-right-color: blue; border-top-color: blueviolet; border-bottom-color: aqua; border-left-color: brown;border-right-width: 20px; border-left-width: 20px; border-top-width: 20px; border-bottom-width: 20px;}
    </style>
</head>
<body>
    <div ></div>

</body>
</html>

也就是说只要将其他三个边框颜色改为透明就可以实现三角形
透明颜色：transparent

<!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: 0px; height: 0px; border-right-style:solid ; border-top-style: solid; border-bottom-style: solid;border-left-style: solid; border-right-color: transparent; border-top-color: transparent; border-bottom-color: transparent; border-left-color: brown;border-right-width: 20px; border-left-width: 20px; border-top-width: 20px; border-bottom-width: 20px;}
        body{ background-color: burlywood;}
    </style>
</head>
<body>
    <div ></div>

</body>
</html>

七、CSS基础（文字div）

1、font-family:字体类型

英文字体：Arial,‘Times New Roman’…
中文字体：微软雅黑(微软雅黑)，宋体
注意：中文字体格式可以应用于英文上，反之不可
一般网页中设置多个字体用逗号隔开，目的是让计算机按顺序依次进行识别，即若计算机没有第一种字体则继续向下识别直到计算机拥有的字体
关于字体引号的用法，若字体中含有空格则用引号引起来，例如 ‘Times New Roman’

<!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-family: 宋体;}
    </style>
</head>
<body>
    <div>我们得让花盛开，在骄阳下绚烂的开，在狂风中肆意的开。</div>
    <p>我们得让花盛开，在骄阳下绚烂的开，在狂风中肆意的开。</p>
    <div>We must let the flowers bloom, gorgeous in the sun, and wanton in the wind.</div>
    <p>We must let the flowers bloom, gorgeous in the sun, and wanton in the wind.</p>
</body>
</html>

2、衬线体与非衬线体

图片来源：https://blog.csdn.net/dark_2001/article/details/118802430

3、字体大小粗细样式

字体大小：font-size px 默认是16px

属性取值	字体大小
xx-small	最小
x-small	较小
small	小
medium	正常（默认值）
large	大
x-large	较大
xx-large	最大

字体粗细：font-weight

模式：正常（normal）加粗（ bold）

写法：单词（normal、bold）数值（必须整百，100到500为正常，600到900为加粗）

字体样式：font-style
模式：正常（normal）斜体（italic）
写法：单词

4、字体颜色

color

<!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{color:brown;}
    </style>
</head>
<body>
    <div>我们得让花盛开，在骄阳下绚烂的开，在狂风中肆意的开。</div>
    <p>我们得让花盛开，在骄阳下绚烂的开，在狂风中肆意的开。</p>
    <div>We must let the flowers bloom, gorgeous in the sun, and wanton in the wind.</div>
    <p>We must let the flowers bloom, gorgeous in the sun, and wanton in the wind.</p>
</body>
</html>

八、CSS基础（段落p）

1、段落的文本修饰和大小写

属性： text-decoration：文本装饰

下划线的值：underline
删除线的值：line-through
上划线的值：overline
不添加装饰：none
注：可以给一个段落的文字添加多个文本装饰，值用空格隔开

<html>
    <head>
        <style>
            p{text-decoration: underline line-through overline;}
        </style>
    </head>
    <body>
        <p>我们得让花盛开，在骄阳下绚烂的开，在狂风在肆意的开。花开千万朵，千万朵都是我们。</p>
    </body>
</html>

属性：text-transform：文本大小写（针对英文）
全段落英文大写：lowercase
全段落英文小写：uppercase
只针对首字母大写：capitalize（在一个段落中根据空格识别首字母）

<html>
    <head>
        <style>
            #p1{text-transform:uppercase;}
            #p2{text-transform:lowercase;}
            #p3{text-transform:capitalize;}
        </style>
    </head>
    <body>
        <p id="p1">sadwdwadasdawadklfhjsjkdjksakljd dklajdlawjldja dklfjkldajfklasjdkuwai hjdjvhudcjddhdhhcbbb</p>
        <p id="p2">SAKDAHOWIHDOIASKLJDLASJDIOJAWLDJHADAJHLDHAUHDIAHDHHASIHUISDCKJSDBV AJKDHUAHDHABJAJDJA NJASDFJHDAHFGHSAJDJAH JIASHDSKDJ AKWDJKAJDJSA JSJHHDIUDWHD </p>
        <p id="p3">jkjiwjkk kjhKDIDWJ KJUjsaisxjsa akwdjwiajdias xllllsadowjmxk Kkcjja akcjxkjaoaj LAIDNCJdsjacn</p>
    </body>
</html>

1、段落的文本缩进和对齐

属性：text-indent：文本缩进
首行缩进 em、px为单位
em是一个相对单位，1个em的大小与字体大小相等

属性：text-align：文本对齐方式
值：left（左对齐）
right（右对齐）
center（居中对齐，以中间线对齐）
justify（两端点对齐，即左右对齐，自动调节间距）
默认为左对齐

2、段落的文本行高

属性：line-height：定义行高（一行文字的高度，上边距和下边距是等价关系的）

默认值不是一个固定值随当前字体大小变化

设置方法：数字px 、也可以取比例值（以文字大小为比例例如line-height: 2; 为当前字体大小像素的两倍行高）

3、文本间距和英文折行

属性：letter-spacing：定义字间距（对汉字和英文都有效）

word-spacing：定义词间距（针对英文，指单词，通过空格识别单词）

折行：用于div容器中，设置div容器的宽度，汉字会自动换行，其实对英文和数字也是一样，但如果数字过长或英文单词过长（长的超过容器的宽）就不会换行，会超出div容器

强制折行：（针对英文）一般应用于div容器中

1、word-break: break-all; (非常强烈的折行)

2、word-wrap: break-word; (不是那么强烈的折行，会产生一些空白区域)

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>
        #p1{color: blue;}
        #p2{font-size: 20px; font-family: 宋体; color:red ; font-weight: 800; text-indent: 2em;}
        #p3{font-size: 20px; font-family: 宋体; color:red ; font-weight: 800; text-indent: 2em;}
        #p4{font-family: unset; color: aqua;text-indent: 2em;}
        #p5{font-style: inherit; color: blueviolet; text-indent: 2em;}
        #p6{font-size: large; color: brown; text-align: left;}
        #p7{color: chartreuse; font-family: 隶体;}
    </style>
</head>
<body>
    <h1 align="center">迪亚波罗(Diablo)简介</h1>
    <img src="./原初之黑.jpeg" alt="观看" title="原初之黑" width="200px" height="300px">
    <em>迪亚波罗（原初之黑）是伏濑著作、みっつばー插画、GC NOVELS所属的轻小说《关于我转生变成史莱姆这档事》及其衍生作品中的角色。</em>
    <h2>角色形象</h2>
    <p id="p1">利姆露在不得已的情况下召唤出的恶魔中的一柱，而剩下的两柱不过是其自身叫来的从者而已。本身强的离谱，对利姆露忠心耿耿，不容许他人一丝不敬。</p>
    <h2>角色经历</h2>
    <p id="p2">原初恶魔七个：原初之黑(Noir)——迪亚波罗，原初之白(Blanc)——泰丝塔罗莎，原初之紫(violet)——乌尔缇玛，原初之黄(Jaune)——卡蕾拉。这4人效力于利姆露。原初之红(Rouge)——奇伊·库利姆索恩，魔王之一。原初之绿(Vert)——米萨莉，原初之蓝(Blue)——雷茵，这两人效命于奇伊。
        七个原初恶魔中的原初之黑（迪亚波罗）。在与原初之红（奇伊）的战斗后四处游荡，各地都留下了足迹。
        在外传里和井泽静江交战失败后逃跑（实际是出于对静面具的兴趣而离开，之后在猎杀被恶魔附身的人类士兵）。后来为帮助战斗后魔力尚未恢复的井泽静江脱离险境而把上位魔将奥尔特斯杀死。
        在去看望故去的静小姐时认识了利姆露，之后一直隐蔽的跟在利姆露身边寻找效力的机会。在利姆露进化为魔王的关键时刻被召唤出来，负责抓住战场上最后一名法尔姆斯人【拉森】，为智慧之王（这里迪亚波罗误以为是利姆鲁）提供有关秘法【死者复生】的建议，后被赐名。英文名diablo源自西班牙语，意为恶魔、魔王的意思。
        受到利姆鲁命令处理法尔姆斯王国和拥立尤姆成为国王。在前往法尔姆斯王国过程中，雷西姆和法尔姆斯王以及拉森都向迪亚波罗投诚。迪亚波罗使用计谋攻陷法尔姆斯王国的过程成功一半后，受到七曜长老诬陷，被误认为是杀害雷西姆的犯人，后成功证明自身清白，并消灭出现在法尔姆斯王国的七曜长老的其中3名，最后成功拥立尤姆成为新国王，法尔姆斯王国更名为法鲁梅纳斯王国。
        在魔国联邦开国祭中，担任武斗大会的裁判。</p>
      <p id="p3">魔国联邦开国祭结束后，因想要部下，向利姆鲁请假前往冥界寻找。后来为利姆露带来了原初之白，原初之紫以及原初之黄，还有七百多名上位恶魔，组成了利姆露的王牌“黑色军团”。
        在神圣法皇国混战中，察觉到莱茵以及奇伊的监视而前去对峙，战胜莱茵后向奇伊说明原初3女为何在魔国联邦以及安排邀请奇伊来魔国联邦。后奇伊不请自来到魔国联邦，帮助利姆鲁向奇伊述说利姆鲁的未来规划。
        在帝国战第一阶段胜利结束后被利姆露赐予“魔神王”的称号，并获得十万魂觉醒为魔王，部下威诺姆受其影响获得祝福进化为男爵级恶魔公。并与盖多拉许下约定（植入诱惑改写盖多拉的奥义轮回转胜）：当盖多拉为利姆鲁而死时，可以转生为恶魔族。后盖多拉死去，约定生效，转生为金属性恶魔族（夏尔有插一脚：赋予盖多拉肉体）。
        在帝国战第二阶段前夕，迪亚波罗擅自邀请奇伊来魔国联邦，导致维鲁多拉与维鲁莎多的相遇和利姆鲁被奇伊质问为何魔国有大量的觉醒魔王以及利姆鲁在询问奇伊与帝国的渊源后被奇伊强行要求去对付鲁德拉。利姆鲁帮莱茵和米萨莉觉醒时，强行拉奇伊去听他的炫耀。
        在利姆鲁与被控制的灼热龙和暴风龙作战时，迪亚波罗在一旁观战打酱油，事后被骂。前往帝国方向救助拉普拉斯，对峙费尔德维，双方互放狠话，费尔德维撤退。
        在利姆鲁参加的第二次魔王宴会上，利姆鲁决定让迪亚波罗前往黄金乡支援。在黄金乡受到费尔德维袭击时，负责与扎拉里奥对峙，因费尔德维选择撤退，未果。
        在利姆鲁战胜米迦勒后，迪亚布罗将没恢复意识的莱昂送往魔国联邦。</p>
        <h2>角色能力</h2>
        <h4>基础能力</h4>
        <p id="p4">固有能力：万能感知、多重结界、空间移动、魔王霸气</p>
        <p id="p5">耐性：痛觉无效、物理攻击无效、状态异常无效、精神攻击耐性、圣魔攻击耐性、自然影响耐性
        </p>
        <h4>独有技能</h4>
        <p id="p6">
            大贤士：思考加速、咏唱排除、森罗万象、法则操作
            诱惑者：思念支配、魅惑、劝诱</p>
            <h2>觉醒魔王时期</h2>
           <p id="p7"> 迪亚波罗［ＥＰ：６６６万６６６６］
            种族：魔神·原初七柱──恶魔王
            加护：利姆露的加护
            称号：“魔神王”
            魔法：〈暗黑魔法〉〈元素魔法〉
            能力：究极能力『诱惑之王』（阿撒兹勒)『思考加速·万能感知·魔王霸气·时空间操作·多次元结界·森罗万象·惩罚支配·魅惑支配·诱惑世界』
            抗性：物理攻击无效、状态异常无效、精神攻击无效、自然影响无效、圣魔攻击抗性</p>
</body>
</html>

九、CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。

复合样式 写法（通过空格方式实现）
1、background：red url（） repeat 0 0；
2、border：1px red sold
3、font：
注：font 最少要有2个值 size family 还要保证顺序（针对font）要设多个属性 size 和family 要放最后
注意不要混写（复合样式和单一样式），如果要混写，要先写复合样式再写单一样式，这样样式才不会被覆盖掉

十、CSS选择器

1、ID选择器（映射关系）写法

css：#elem{ }
html：id="elem"

注：

在一个页面中，ID值是唯一的
命名规范，字母 _ - 数字（命名的第一位不能是数字）
命名方式，驼峰式、下划线式、短线式

驼峰写法：searchButton(小驼峰) SearchButton(大驼峰)

短线写法：search-small-button

下划线写法：search_small_button

2、CLASS选择器写法

css：.elem

html: class="elem"

注：和ID的区别：

class选择器是可以复用的（对不同标签）
可以添加多个class样式
多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序
标签+类的写法

可以添加多个class样式示例

<html>
    <head>
        <style>
            .box{background: scroll;}
            .apple{font-size: 30px;}
        </style>
    </head>
    <body>
        <div class="box apple">块</div>
    </body>
</html>

标签+类的写法示例

<html>
    <head>
        <style>
            p.box{background-color:red;}
           
        </style>
    </head>
    <body>
        <div class="box">块</div>
        <div class="box">块</div>
        <p class="box">块</p>
    </body>
</html>