第2次课后练习

wangcancan6

已于 2023-11-17 17:26:21 修改

阅读量59

点赞数

文章标签： linux 运维服务器

于 2023-11-12 17:55:50 首次发布

本文链接：https://blog.csdn.net/wangcancan6/article/details/134362302

版权

2023.11.10日今天练习了表单的相关内容

1、form标签：

需要把所有表单标签放在form标签内部

form标签具有属性：name属性：给表单命名

method属性：一个是get（安全性较差）、一个是post

action属性：指定表单数据提交到哪一个地址进行处理

target属性：指定窗口的打开方式

enctype属性：指定表单数据提交的编码方式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>form标签</title>
    </head>
    <body>
        <form>
            <input type="text" value="这是一个单行文本框"/><br/>
            <textarea>这是一个多行文本框</textarea><br/>
            <select>
                <option>HTML</option>
                <option>CSS</option>
                <option>JavaScript</option>
            </select>
        </form>
    </body>
</html>

2、input标签：自闭合标签

type属性：text：单行文本框

password：密码文本框

radio：单选框

checkbox：多选框

button/submit/reset：按钮

file：文件上传

3、单行文本框text：

value属性：设置单行文本框中默认的文本

size属性：定义单行文本框的长度

maxlength：定义单行文本框最多输入字符个数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>单行文本框text</title>
    </head>
    <body>
        <form>
            姓名：<input type="text" value="helicopter"/><br/>
            姓名：<input type="text" /><br/><br/>
            姓名：<input type="text" size="10"/><br/>
            姓名：<input type="text" size="20"/><br/><br/>
            姓名：<input type="text" maxlength="5"/><br/>
            姓名：<input type="text" />
            </form>
    </body>
</html>

4、密码文本框password：

value属性：定义密码文本框的默认值

size属性：定义密码文本框的长度

maxlength属性：定义密码文本框的最大输入字符个数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>密码文本框password</title>
    </head>
    <body>
        <form>
            密码：<input type="password" value="1234"/><br/>
            密码：<input type="password" /><br/><br/>
            密码：<input type="password" size="10"/><br/>
            密码：<input type="password" /><br/><br/>
            密码：<input type="password" maxlength="5"/><br/>
            密码：<input type="password" /><br/>
        </form>
    </body>
</html>

5、单选框radio：

name属性：必带，给单选框radio命名，同一个组一个名字

value属性：必带，显示选项

checked属性：一开始默认选择

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>单选框radio</title>
    </head>
    <body>
        <form method="post">
            性别：
            <input type="radio" name="gender" value="男" checked/>男
            <input type="radio" name="gender" value="女"/>女<br/>
            年龄：
            <input type="radio" name="age" value="80" checked/>80
            <input type="radio" name="age" value="90"/>90
            <input type="radio" name="age" value="00"/>00
        </form>
    </body>
</html>

6、复选框checkbox：

name属性：必带，给复选框命名，同一个组一个名字

value属性：必带，显示选项

checked属性：一开始默认选择

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>复选框checkbox</title>
    </head>
    <body>
        <form method="post">
            你喜欢的水果：<br/>
            <input type="checkbox" name="fruit" value="苹果" checked/>苹果
            <input type="checkbox" name="fruit" value="香蕉"/>香蕉
            <input type="checkbox" name="fruit" value="西瓜" checked/>西瓜
            <input type="checkbox" name="fruit" value="梨子"/>梨子
        </form>
    </body>
</html>

7、普通按钮button：

一般情况下配合JavaScript来进行各种操作

value:按钮上的文字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>普通按钮button</title>
        <script>
            window.onload=function(){
                var oBth=document.getElementsByTagName("input");
                oBth[0].onclick=function(){
                    alert("I love HTML!");
                };
            }
        </script>
    </head>
    <body>
        <form method="post">
            <input type="button" value="表白"/>
        </form>
    </body>
</html>

8、提交按钮submit：

一般用来给服务器提交数据

value:按钮上的文字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>提交按钮submit</title>
    </head>
    <body>
        <form method="post">
            <input type="submit" value="提交按钮"/><br/>
            <input type="button" value="普通按钮"/>
        </form>
    </body>
</html>

9、重置按钮reset：

value：按钮上的文字

只能重置当年表单内的数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>重置按钮reset</title>
    </head>
    <body>
        <form method="post">
            账号：
            <input type="text"/><br/>
            密码：
            <input type="password"/><br/>
            <input type="reset" value="重置"/><br/>
        </form>
            昵称：
            <input type="text"/><br/>
    </body>
</html>

10、文件上传file：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>文件上传file</title>
    </head>
    <body>
        <form method="post">
            <input type="file"/>
        </form>
    </body>
</html>

11、多行文本框textarea：

多行文本框中的默认内容实在标签对的内部设置的不是在value属性中设置的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>多行文本框textarea</title>
    </head>
    <body>
        <form method="post">
            个人简介：<br/>
            <textarea row="30" cols="50" value="">请你介绍一下自己</textarea>
        </form>
    </body>
</html>

12、下拉列表select：

multiple：设置下拉列表可以选择多项

size：设置下拉列表显示几个列表项

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>下拉列表select</title>
    </head>
    <body>
        <form method="post">
            <select multiple size="5">
                <option>HTML</option>
                <option>CSS</option>
                <option>JavaScript</option>
                <option>Vue.js</option>
                <option>HTML5</option>
                <option>CSS3</option>
            </select>
        </form>
    </body>
</html>

13、option标签：

value：取值

selected：默认是否被选中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>option标签</title>
    </head>
    <body>
        <form method="post">
            <select>
                <option value="HTML">HTML</option>
                <option value="CSS">CSS</option>
                <option value="jQuery"selected>jQuery</option>
                <option value="JavaScript">JavaScript</option>
                <option value="Vue.js">Vue.js</option>
                <option value="HTML5">HTML5</option>
                <option value="CSS3">CSS3</option>
            </select>
        </form>
    </body>
</html>

知识点：

1、form标签：表单内容都要放在form标签中，name属性、method属性、action属性（指定表单提数据提交到哪一个地址中）、target属性、enctype（指定表单数据提交的编码方式）

2、 input标签：自闭合标签，text、password、radio、checkbox、button、submit、reset、file都放在input标签中

3、单行文本框text：value属性（默认值）、size、maxlength

4、密码文本框password：value、size、maxlength

5、单选框radio、复选框checkbox：必带name属性，同一组一个名字，value显示选项文字、checked表示默认已选中

6、按钮：普通按钮button通过JavaScript编码实现、提交按钮submit、重置按钮reset，value表示按钮文字

7、多行文本框textarea：要规定rows、cols，默认内容在标签对的内部设置

8、下拉列表select：必须和option标签配合使用，multiple属性表示可以多选、size属性规定可见选项数，不可低于4

9、option标签：selected属性表示默认是否选中、value属性取值

2023.11.11日今天练习了框架的相关知识以及CSS的有关内容

1、iframe标签：

在当前页面再嵌入另外一个页面

src是必选的、width和height用来定义框架的大小

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>iframe标签</title>
    </head>
    <body>
        <iframe src="http://www.lvyestudy.com" width="200" height="150"></iframe>
        <iframe src="http://www.ptpress.com.cn" width="200" height="150"></iframe>
    </body>
</html>

2、CSS引入方式：

外部样式引用：在HTML中使用link标签来引用CSS文件

内部样式引用：把CSS代码放在style标签内，style标签放在head标签内部

行内样式引用：行内样式的CSS在标签style中实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>CSS引入方式</title>
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
        <style type="text/css">
            div{color:red;}
        </style>
    </head>
    <body>
        <div>绿叶，给你初恋般的感觉</div>
        <div>绿叶，给你初恋般的感觉</div>
        <div>绿叶，给你初恋般的感觉</div>
        <div style="color:green;">绿叶，给你初恋般的感觉</div>
    </body>
</html>

3、id属性和class属性：

id属性：唯一性，在一个页面中的相同id只能出现一次

class属性：为同一个页面的相同元素或不同元素设置相同的class，然后使class的元素具有相同的CSS样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>id属性和class属性</title>
    </head>
    <body>
        <div id="content">存在即合理</div>
        <p id="name">存在即合理</p>
        <div class="content">存在即合理</div>
        <p class="content">存在即合理</p>
    </body>
</html>

4、元素选择器：

选中相同的元素，然后对相同的元素定义同一个CSS样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>元素选择器</title>
        <style type="text/css">
            div{color:red;}
        </style>
    </head>
    <body>
        <div>绿叶学习网</div>
        <p>绿叶学习网</p>
        <span>绿叶学习网</span>
        <div>绿叶学习网</div>
    </body>
</html>

5、id选择器：

为元素设置一个id属性，然后针对设置了这个id的元素定义CSS样式（在id前要加#）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>id选择器</title>
        <style type="text/css">
            #lvye{color:red;}
        </style>
    </head>
    <body>
        <div>绿叶学习网</div>
        <div id="lvye">绿叶学习网</div>
        <div>绿叶学习网</div>
    </body>
</html>

6、class选择器：

可以对相同的元素或者不同的元素定义相同的class属性，然后对拥有同一个class的元素进行CSS样式操作（class前要加.）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>class选择器</title>
        <style type="text/css">
            .lv{color:red;}
        </style>
    </head>
    <body>
        <div>绿叶学习网</div>
        <div class="lv">绿叶学习网</div>
        <p class="lv">绿叶学习网</p>
    </body>
</html>

7、后代选择器father：

选择元素内部中某一元素的所有元素，包括子元素和其他后代元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>后代选择器</title>
        <style type="text/css">
            #father1{color:red;}
        </style>
    </head>
    <body>
        <div id="father1">
            <div>绿叶学习网</div>
            <div>绿叶学习网</div>
        </div>
        <div id="father2">
            <div>绿叶学习网</div>
            <div>绿叶学习网</div>
        </div>
    </body>
</html>

8、群组选择器：

同时对几个选择器进行相同的操作（要加，）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>群组选择器</title>
        <style type="text/css">
            h3,div,p,span{color:red;}
            #lvye,.lv{color:green;}
        </style>
    </head>
    <body>
        <h3>绿叶学习网</h3>
        <div>绿叶学习网</div>
        <p>绿叶学习网</p>
        <span>绿叶学习网</span>
        <div id="lvye">绿叶学习网</div>
        <p class="lv">绿叶学习网</p>
    </body>
</html>

知识点：

1、iframe框架：必带src，可以定义width、height来确定框架的大小

2、CSS引入方式：可以使用link标签外部引入CSS文件、或者在head内部或者行内使用style标签

3、CSS选择器：id选择器加#、class选择器加.、群组选择器加，、元素选择器

2023.11.12日今天练习了CSS中字体样式部分的知识

1、字体类型font-family：

可以指定多种字体，使用多个字体时，将按从左到右的顺序排列，并且以，隔开。如果字体类型只有一个英文单词，则不需要加上双引号；如果字体类型是多个英文单词或者是中文的，则需要加上双引号

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>字体类型font-family</title>
        <style type="text/css">
            #div1{font-family:Arial;}
            #div2{font-family:"Times New Roman";}
            #div3{font-family:"微软雅黑";}
        </style>
    </head>
    <body>
        <div id="div1">Arial</div>
        <div id="div2">Times New Roman</div>
        <div id="div3">微软雅黑</div>
    </body>
</html>

2、字体大小font-size：

字体大小一般采用px单位，或者small、medium、large

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>字体大小font-size</title>
        <style type="text/css">
            #p1{font-size:10px;}
            #p2{font-size:15px;}
            #p3{font-size:20px;}
        </style>
    </head>
    <body>
        <p id="p1">字体大小为10px</p>
        <p id="p2">字体大小为15px</p>
        <p id="p3">字体大小为20px</p>
    </body>
</html>

3、字体粗细font-weight：

font-weight一般取值为关键字，数值范围为100-900，lighter（100）、normal（400）、bold（700）、bolder（900）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>字体粗细font-weight</title>
        <style type="text/css">
            #id1{font-weight:100;}
            #id2{font-weight:400;}
            #id3{font-weight:700;}
            #id4{font-weight:900;}
            #p1{font-weight:lighter;}
            #p2{font-weight:normal;}
            #p3{font-weight:bold;}
            #p4{font-weight:bolder;}
        </style>
    </head>
    <body>
        <p id="id1">字体粗细为：100</p>
        <p id="id2">字体粗细为：400</p>
        <p id="id3">字体粗细为：700</p>
        <p id="id4">字体粗细为：900</p>
        <p id="p1">字体粗细为：lighter</p>
        <p id="p2">字体粗细为：normal</p>
        <p id="p3">字体粗细为：bold</p>
        <p id="p4">字体粗细为：bolder</p>
    </body>
</html>

4、字体风格font-style：

normal为正常，italic、oblique都是斜体

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>字体风格font-style</title>
        <style type="text/css">
            #p1{font-style:normal;}
            #p2{font-style:italic;}
            #p3{font-style:oblique;}
        </style>
    </head>
    <body>
        <p id="p1">字体样式为：normal</p>
        <p id="p2">字体样式为：italic</p>
        <p id="p3">字体样式为：oblique</p>
    </body>
</html>

5、字体颜色color：

一种取值为关键字、另一种取值为十六进制RGB值#FF0000为红色、#00FF00为绿色、#0000FF为蓝色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>字体颜色color</title>
        <style type="text/css">
            #p1{color:red;}
            #p2{color:gray;}
            #p3{color:orange;}
            #id1{color:#03FCA1;}
            #id2{color:#048C02;}
            #id3{color: #CE0592;}
        </style>
    </head>
    <body>
        <p id="p1">字体颜色为：red</p>
        <p id="p2">字体颜色为：gray</p>
        <p id="p3">字体颜色为：orange</p>
        <p id="id1">字体颜色为：#03FCA1</p>
        <p id="id2">字体颜色为：#48C02</p>
        <p id="id3">字体颜色为：#CE0592</p>
    </body>
</html>

6、CSS注释：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>CSS注释</title>
        <style type="text/css">
            /*这是注释*/
            p{color:pink;}
        </style>
    </head>
    <body>
        <!--这是注释-->
        <P>记忆之所以美，是因为有实现的参照</P>
    </body>
</html>

知识点：

1、字体类型font-family：可以指定多种字体，将按从左到右顺序排列，并且以，隔开

2、字体大小font-size：关键字定义、数值px定义

3、字体粗细font-weight：数值100-900、关键字lighter、normal、bold、bolder

4、字体风格font-style：normal、oblique、italic

5、字体颜色color：关键字定义、十六进制RGB值

6、CSS注释：/* */

2023.11.13日今天练习了CSS的文本样式内容

1、首行缩进text-indent：

中文段落一般要缩进两个字符的空间，text-indent的值应该是font-size的两倍

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>首行缩进text-indent</title>
        <style type="text/css">
            p{
                font-size:14px;
                text-indent:28px;
            }
        </style>
    </head>
    <body>
        <h3>爱莲说</h3>
        <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
        <p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣。</p>
    </body>
</html>

2、水平对齐text-align：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>水平对齐text-align</title>
        <style type="text/css">
            #p1{text-align:left;}
            #p2{text-align:center;}
            #p3{text-align:right;}
        </style>
    </head>
    <body>
        <p id="p1"><strong>左对齐</strong>:好好学习，天天向上。</p>
        <p id="p2"><strong>居中对齐</strong>:好好学习，天天向上。</p>
        <p id="p3"><strong>右对齐</strong>:好好学习，天天向上。</p>
    </body>
</html>

3、文本修饰text-decoration：

none：去除下划线

underline：下划线

line-through：中划线

overline：顶划线

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>文本修饰text-decoration</title>
        <style type="text/css">
            #p1{text-decoration:underline;}
            #p2{text-decoration:line-through;}
            #p3{text-decoration:overline;}
            a{text-decoration:none;}
        </style>
    </head>
    <body>
        <p id="p1">这是下划线效果</p>
        <p id="p2">这是删除线效果</p>
        <p id="p3">这是顶划线效果</p>
        <a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>
    </body>
</html>

4、大小写text-transform：

none：无转换

uppercase：转换为大写

lowercase：转换为小写

capitalize：只将每个英文单词的首字母转化为大写

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>大小写text-transform</title>
        <style type="text/css">
            #p1{text-transform:uppercase;}
            #p2{text-transform:lowercase;}
            #p3{text-transform:capitalize;}
        </style>
    </head>
    <body>
        <p id="p1">rome was't build in a day.</p>
        <p id="p2">rome was't build in a day.</p>
        <p id="p3">rome was't build in a day.</p>
    </body>
</html>

5、行高line-height：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>行高line-height</title>
        <style type="text/css">
            #p1{line-height:15px;}
            #p2{line-height:20px;}
            #p3{line-height:25px;}
        </style>
    </head>
    <body>
        <p id="p1">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
        <hr/>
        <p id="p2">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
        <hr/>
        <p id="p3">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
    </body>
</html>

6、字间距letter-spacing：

每一个英文字母也被当做一个字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>字间距letter-spacing</title>
        <style type="text/css">
            #p1{letter-spacing:0px;}
            #p2{letter-spacing:3px;}
            #p3{letter-spacing:5px;}
        </style>
    </head>
    <body>
        <p id="p1">Rome was't built in a day.罗马不是一天建成的。</p>
        <p id="p2">Rome was't built in a day.罗马不是一天建成的。</p>
        <p id="p3">Rome was't built in a day.罗马不是一天建成的。</p>
    </body>
</html>

7、词间距word-spacing：

一般值针对英文单词而言

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>词间距word-spacing</title>
        <style type="text/css">
            #p1{word-spacing:0px;}
            #p2{word-spacing:3px;}
            #p3{word-spacing:5px;}
        </style>
    </head>
    <body>
        <p id="p1">Rome was't built in a day.罗马不是一天建成的。</p>
        <p id="p2">Rome was't built in a day.罗马不是一天建成的。</p>
        <p id="p3">Rome was't built in a day.罗马不是一天建成的。</p>
    </body>
</html>

知识点：

1、首行缩进text-indent：一般是font-size的两倍

2、水平对齐text-align：left左对齐、center居中对齐、right右对齐

3、文本修饰text-decoration：none删除超链接下划线、underline下划线、line-through删除线、overline顶划线

4、大小写text-transform：none无转换、uppercase转换为大写、lowercase转换为小写、capitalize只将每个英文单词首字母转换为大写

5、行高line-height：两行之间的距离

6、字间距lette-spacing、词间距word-spacing：字间距一个英文字母算一个字，词间距一个英文单词算一个字

2023.11.14日今天练习了边框样式和列表样式的相关内容

1、边框的整体样式border：

想要定义一个边框样式，必须要同时设置border-width、border-style、border-color这三个属性才会有效果

可以简写为div{border: 1px solid red;}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>边框的整体样式</title>
        <style type="text/css">
            #div1{
                border-width:1px;
                border-style:dashed;
                border-color:red;
            }
            #div2{border:1px solid red;}
            img{
                border-width:2px;
                border-style:solid;
                border-color:red;
            }
        </style>
    </head>
    <body>
        <div id="div1">绿叶学习网，给你初恋般的感觉</div>
        <div id="div2">绿叶学习网，给你初恋般的感觉</div>
        <img src="../绱犳潗/img/huawei.jpg">
    </body>
</html>

2、局部样式：

只对某一条边进行单独设置，上边框border-top、下边框borde-botton、左边框border-left、右边框border-right

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>局部样式</title>
        <style type="text/css">
            div{
                width:100px;
                height:60px;
                border-top:2px solid red;
                border-right:2px solid yellow;
                border-bottom:2px solid blue;
                border-left:none;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

3、定义列表项符号list-style-type：

decimal阿拉伯数字1、2、3；lower-roman小写罗马数字i、ii、iii；upper-roman大写罗马数字I、II、III；lower-alpha小写英文字母a、b、c；upper-alpha大写英文字母A、B、C；disc实心圆；circle空心圆；square正方形；none去除列表符号

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>列表项符号list-style-type</title>
        <style type="text/css">
            #ol1{list-style-type:lower-roman;}
            #ul1{list-style-type:circle;}
            #ol2,#ul2{list-style-type:none;}
        </style>
    </head>
    <body>
        <h3>有序列表</h3>
        <ol id="ol1">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ol>
        <h3>无序列表</h3>
        <ul id="ul1">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
        <h3>有序列表</h3>
        <ol id="ol2">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ol>
        <h3>无序列表</h3>
        <ul id="ul2">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </body>
</html>

4、列表项图片list-style-image：

使用图片来代替列表项符号

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>列表项图片list-style-image</title>
        <style type="text/css">
            ul{list-style-image:url(../绱犳潗/img/alibaba.jpg);}
        </style>
    </head>
    <body>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </body>
</html>

知识点：

1、边框的整体样式border：要定义一个边框样式必须要定义border-width、border-style、border-color；none无样式、dashed虚线、solid实线

2、局部样式：border-top上边框、border-bottom下边框、border-left左边框、border-right右边框

3、列表项符号list-style-type：decimal阿拉伯数字、lower-roman小写罗马数字、upper-roman大写罗马数字、lower-alpha小写英文字母、upper-alpha大写英文字母、none去除列表项符号

4、列表项图片list-style-image：url（图片路径）

2023.11.15日今天练习了表格样式和图片样式的相关内容

1、表格标题位置caption-side：

top：标题在顶部

bottom：标题在底部

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>表格标题位置caption-side</title>
        <style type="text/css">
            table,th,td,{border:1px solid silver;}
            table{caption-side:bottom;}
        </style>
    </head>
    <body>
        <table>
            <caption>表格标题</caption>
            <!--表头-->
            <thead>
                <tr>
                    <th>表头单元格1</th>
                    <th>表头单元格2</th>
                </tr>
            </thead>
            <!--表身-->
            <tbody>
                <tr>
                    <td>表行单元格1</td>
                    <td>表行单元格2</td>
                </tr>
                <tr>
                    <td>表行单元格3</td>
                    <td>表行单元格4</td>
                </tr>
            </tbody>
            <!--表脚-->
            <tfoot>
                <tr>
                    <td>表行单元格5</td>
                    <td>表行单元格6</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

2、表格边框合并border-collapse：

separate：边框分开

collapse：边框合并

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>表格边框合并border-collapse</title>
        <style type="text/css">
            table,th,td{border:1px solid silver;}
            table{border-collapse:collapse;}
        </style>
    </head>
    <body>
        <table>
            <caption>表格标题</caption>
            <!--表头-->
            <thead>
                <tr>
                    <th>表头单元格1</th>
                    <th>表头单元格2</th>
                </tr>
            </thead>
            <!--表身-->
            <tbody>
                <tr>
                    <td>表行单元格1</td>
                    <td>表行单元格2</td>
                </tr>
                <tr>
                    <td>表行单元格3</td>
                    <td>表行单元格4</td>
                </tr>
            </tbody>
            <!--表脚-->
            <tfoot>
                <tr>
                    <td>表行单元格5</td>
                    <td>表行单元格6</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

3、表格边框间距border-spacing：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>表格边框间距border-spacing</title>
        <style type="text/css">
            table,th,td{border:1px solid silver;}
            table{border-spacing:8px;}
        </style>
    </head>
    <body>
        <table>
            <caption>表格标题</caption>
            <!--表头-->
            <thead>
                <tr>
                    <th>表头单元格1</th>
                    <th>表头单元格2</th>
                </tr>
            </thead>
            <!--表身-->
            <tbody>
                <tr>
                    <td>表行单元格1</td>
                    <td>表行单元格2</td>
                </tr>
                <tr>
                    <td>表行单元格3</td>
                    <td>表行单元格4</td>
                </tr>
            </tbody>
            <!--表脚-->
            <tfoot>
                <tr>
                    <td>表行单元格5</td>
                    <td>表行单元格6</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

4、图片大小：

用width、height来定义

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>图片大小</title>
        <style type="text/css">
            img{
                width:60px;
                height:60px;
            }
        </style>
    </head>
    <body>
        <img src="../绱犳潗/img/huawei.jpg" alt="HUAWEI"/>
    </body>
</html>

5、图片边框border：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>图片边框border</title>
        <style type="text/css">
            img{
                width:100px;
                height:100px;
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <img src="../绱犳潗/img/huawei.jpg" alt="HUAWEI"/>
    </body>
</html>

6、图片水平对齐text-align：

left：左对齐、center：居中对齐、right：右对齐

图片大小不能大于块元素div大小

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>图片水平对齐text-align</title>
        <style type="text/css">
            div{
                width:300px;
                height:80px;
                border:1px solid silver;
            }
            .div1{text-align:left;}
            .div2{text-align:center;}
            .div3{text-align:right;}
            img{width:60px;height:60px;}
        </style>
    </head>
    <body>
        <div class="div1">
            <img src="../绱犳潗/img/huawei.jpg" alt="HUAWEI"/>
        </div>
        <div class="div2">
            <img src="../绱犳潗/img/huawei.jpg" alt="HUAWEI"/>
        </div>
        <div class="div3">
            <img src="../绱犳潗/img/huawei.jpg" alt="HUAWEI"/>
        </div>
    </body>
</html>

7、图片垂直对齐vertical-align：

top：顶部对齐、middle：中部对齐、baseline：基线对齐、bottom：底部对齐

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>图片垂直对齐</title>
        <style type="text/css">
            img{width:60px;height:60px;}
            #img1{vertical-align:top;}
            #img2{vertical-align:middle;}
            #img3{vertical-align:baseline;}
            #img4{vertical-align:bottom;}
        </style>
    </head>
    <body>
        绿叶学习网<img id="img1" src="../绱犳潗/img/huawei.jpg"/>绿叶学习网(top)
        <hr/>
        绿叶学习网<img id="img2" src="../绱犳潗/img/huawei.jpg"/>绿叶学习网(middle)
        <hr/>
        绿叶学习网<img id="img3" src="../绱犳潗/img/huawei.jpg"/>绿叶学习网(baseline)
        <hr/>
        绿叶学习网<img id="img4" src="../绱犳潗/img/huawei.jpg"/>绿叶学习网(bottom)
    </body>
</html>

8、文字环绕float：

left：向左浮动、right：向右浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>文字环绕float</title>
        <style type="text/css">
            img{
                width:15px;
                height:15px;
                float:left;
            }
            p{
                font-family:"微软雅黑";
                font-size:12px;
            }
        </style>
    </head>
    <body>
        <img src="../绱犳潗/img/huawei.jpg" alt="HUAWEI"/>
        <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣。</p>
    </body>
</html>

知识点：

1、表格标题样式caption-side：定义表格标题位置

2、表格边框合并border-collapse

3、表格边框间距border-spacing

4、图片大小：有width、height定义

5、图片边框border

6、图片对齐：text-align水平对齐、vertical-align垂直对齐

7、文字环绕float

2023.11.16日今天练习了背景样式和超链接样式的相关内容

1、背景颜色background-color：

background-color是用来定义元素背景颜色的、color是来定义元素文本颜色的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>背景颜色background-color</title>
        <style type="text/css">
            div{
                width:100px;
                height:60px;
            }
            #div1{background-color:hotpink;}
            #div2{background-color: #87CEFA;}
        </style>
    </head>
    <body>
        <div id="div1">背景颜色为hotpink</div>
        <div id="div2">背景颜色为#87CEFA</div>
    </body>
</html>

2、背景图片样式background-image：

用background-image来为元素定义背景图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>背景图片样式background-image</title>
        <style type="text/css">
                        div{
                width:250px;
                height:170px;
                background-image:url(../绱犳潗/img/10.jpg);
            }
        </style>
    </head>
    <body>
        <div>文本</div>
    </body>
</html>

3、背景图片重复background-repeat：

repeat：水平方向和垂直方向上同时平铺、repeat-x：只在水平方向上平铺、repeat-y：只在垂直方向上平铺、no-repeat：不平铺

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>背景图片重复background-repeat</title>
        <style type="text/css">
            div{
                width:600px;
                height:300px;
                border:1px solid silver;
                background-image:url(../绱犳潗/img/alibaba.jpg);
            }
            #div2{background-repeat:repeat-x;}
            #div3{background-repeat:repeat-y;}
            #div4{background-repeat:no-repeat;}
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="div4"></div>
    </body>
</html>

4、背景图片位置background-position：

background-position是表示背景图片相对于该元素左上角的水平方向和垂直方向的距离

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>背景图片位置background-position</title>
        <style type="text/css">
            div{
                width:300px;
                height:200px;
                border:1px solid silver;
                background-image:url(../绱犳潗/img/alibaba.jpg);
                background-repeat:no-repeat;
                background-position:40px 20px;
            }
            #div2{
                width:300px;
                height:200px;
                border:1px solid silver;
                background-image:url(../绱犳潗/img/alibaba.jpg);
                background-repeat:no-repeat;
                background-position:right center;
            }
        </style>
    </head>
    <body>
        <div id="div1">文本</div>
        <div id="div2">文本</div>
    </body>
</html>

5、背景图片固定background-attachment：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>背景图片固定background-attachment</title>
        <style type="text/css">
            div{
                width:160px;
                height:1200px;
                border:1px solid silver;
                background-image:url(../绱犳潗/img/huawei.jpg);
                background-repeat:no-repeat;
                background-attachment:fixed;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

6、超链接伪类：

link：定义超链接未访问的样式

visited：定义超链接访问过后的样式

hover：定义鼠标经过超链接时的样式

active：定义鼠标单机激活时的样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>超链接伪类</title>
        <style type="text/css">
            a{text-decoration:none;}
            a:link{color:red;}
            a:visited{color:purple;}
            a:hover{color:yellow;}
            a:active{color:blue;}
        </style>
    </head>
    <body>
        <a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>
    </body>
</html>

7、hover类：

hover伪类可以定义任何一个元素再鼠标经过时的样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>hover类</title>
        <style type="text/css">
            div{
                width:100px;
                height:30px;
                line-height:30px;
                text-align:center;
                color:white;
                background-color:lightskyblue;
            }
            div:hover{
                background-color:hotpink;
            }
            img:hover{
                border:2px solid red;
            }
        </style>
    </head>
    <body>
        <div>绿叶学习网</div>
        <img src="../绱犳潗/img/alibaba.jpg"/>
    </body>
</html>

8、鼠标样式cursor：

default默认值、pointer手指、text竖杠、crosshair加号、wait加载中、help问号、move四箭头移动、e-resize/w-resize左右箭头、ne-resize/sw-resize东北箭头、nw-resize/se-resize西北箭头、n-resize/s-resize南北箭头

自定义样式cursor：url（），xxx；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>鼠标样式</title>
        <style type="text/css">
            div{
                width:100px;
                height:30px;
                line-height:30px;
                text-align:center;
                background-color:hotpink;
                color:white;
                font-size:14px;
            }
            #div_default{cursor:default;}
            #div_pointer{cursor:pointer;}
            #div_text{cursor:url(../绱犳潗/img/huawei.jpg),text;}
        </style>
    </head>
    <body>
        <div id="div_default">鼠标默认样式</div>
        <div id="div_pointer">鼠标手状样式</div>
        <div id="div_text">鼠标自定义竖杠样式</div>
    </body>
</html>