HTML与CSS学习总结

一、HTML总结

1 概念

HTML是HyperText Markup Language的简称，中文名称：超文本标记语言，它是一种用于创建网页的

标准标记语言。

标记语言是由标签构成的语言。<标签名称>例如html，xml；标记语言不是编程语言。

HTML 运行在浏览器上，由浏览器来解析。

2快速入门

1.html文档的后缀名

.html和.htm两种都可以，没有区别。我一般习惯使用.html，个人习惯不同而已。

2.标签的分类

围堵标签：有开始标签和结束标签。eg:<html></html>
自闭和标签：开始标签和结束标签都在一个标签中<br/>

3.标签可以嵌套，但格式一定要正确

 正确案例：<p><a></a></p>错误案例：<p><a></p></a>

4.标签的属性

标签的内部是可以定义属性的，属性由键值对组成，值需要用双引号引进来，多个属性可以用空格隔开。

 <标签名称 属性名1="属性值" 属性名2="属性值"></标签名称> <p id="p1" name="p1"></p>

5.html标签不区分大小写，但是推荐全小写

3 HTML文档的基本结构

HTML文档也叫web页面

3.1基本结构

<!-- 声明当前文档是html5文档 -->
<!DOCTYPE html>
<!-- html,根元素 ，围堵标签-->
<html><!--head,头元素：作用： 1、用于指定HTML文章中的一些元数据，例如元数据 meta：定义页面的编码格式title:定义页面的标题2、引入外部的资源文件--未来讲解 --> <head><meta charset="utf-8" /> <title>这是我的第一个HTML页面</title> </head> <!--body，主体：浏览器显示的内容都将在这里编写格式化代码的快捷键：ctrl+shift+f（英文状态下使用） --><body>hello html 这是我的第一个HTML页面 </body>
</html>

3.1HTML的注释

语法：
HTML注释以<!-- 开头 ，以-->结尾。
注释的部分浏览器不解析，注释是为了给程序员看，更好的了解html代码
<!--这里编写HTML注释， 可以是一行，也可以是多行
-->

4HTML常用标签

HTML中的标签有很多，再此我只列举比较常用的标签。其他标签若需要，请咨询查询。

4.1文本标签

4.1.1标题标签 h1-h6:字体逐渐缩小

一般用在文章的标题上。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fy06FfNd-1657112616288)(HTML与CSS学习总结.assets/标题.png)]

4.1.2段落标签

一般用在正文

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gTLowZQt-1657112616290)(HTML与CSS学习总结.assets/Snipaste_2022-06-28_22-08-02.png)]

4.1.3换行标签

一般用在段落中强制换行。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xOdb3VOp-1657112616291)(HTML与CSS学习总结.assets/Snipaste_2022-06-28_22-14-55.png)]

4.1.4水平线标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wUzQNsZv-1657112616292)(HTML与CSS学习总结.assets/1.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tmHl9P6K-1657112616293)(HTML与CSS学习总结.assets/2.png)]

4.1.5标签范围

一般在大段内容中，为了突出部分内容的时候使用的标签；很少独立使用，一般嵌套在其他的标签中使

用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DJYD44zv-1657112616293)(HTML与CSS学习总结.assets/3.png)]

PS：不是因为有了范围标签，局部内容的样式才有变化；是为了改变局部内容样子，我们才通过范围标

签包裹，然后修改它的样式。

4.2图片标签

4.2.1基本属性

<!--img 显示图片常用属性: src: 指定图片的路径路径分类:相对路径:推荐使用例如: <img src=" img/cat.jpg" />表示与当前文件同级的img文件夹下的cat.jpg图片../表示上一级目录<img src=" ../img/cat.jpg" />表示与当前文件上一级目录中的img文件夹下的cat. jpg图片绝对路径:不推荐使用一般都是以盘符开头，例如: C: \Users\W-In\Pictures\imagetitle:作用1:鼠标悬浮在图片上的时候显示的文字2:当图片因为各种原因无法正常显示的时候，应该显示图片的位置显示title中的文字alt:与title作用相同，但是有些浏觉器不支持该属性，所以我们一般使用title属性width和height:宽度和高度，设置之后图片可能会失真<img src="img/cat. jpg" title=" 服不服?”width=" 240px" height= ”200px"/>-->

4.3列表标签

一般用在导航上

4.3.1无序列表与有序列表

<body><!--列表标签:分为有序标签、无序标签ul--1i:无序列表，li标签可以有多 个;推荐u中只有li标签，如果想嵌套,建议套在li中ol--1i: 有序列表，与无序列表功能一样，只是默认的样式不同;可以与无序列表相互替换(以后可以通过样式将两者调整成一样)--><ul><li>一</li><li>二</li><li>三</li></ul><ol><li>一</li><li>二</li><li>三</li></ol>
</body>

4.4布局标签层div

一般就是做容器，盛放其他标签的，将其他标签组合在一起用来布局。

4.5标签分类

html标签可以分为块状元素和行级元素两类。

块状元素：一般都是新起一行，可以容纳行内元素和其他块级元素；

行级元素：一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素。

PS:区分的简单方法：是否独占一行。

块状元素和行内元素的区别：

1、块级元素会独占一行，其宽度自动填满其父元素宽度；

行内元素会排列到同一行里，其宽度随元素的内容变化而变化。

2、块级元素可以设置宽高；行内元素设置宽高无效。

3、块级元素可以设置margin，padding属性；行内元素的水平方向的padding会有边距效果，但是竖

直方向的padding没有效果。（此处的属性稍后介绍）

我们上面已经讲过的标签中归类一下：

属于块状元素的：

标题标签 h1-h6,

段落标签 p ,

水平线标签 hr,

有序列表标签 ol–li，

无序列表标签 ul–li，

定义描述标签 dl-dt-dd，

容器标签 div：

属于行级元素的：

范围标签：span

图像标签：img

5超链接

超链接标签一般有两个作用：1、用来实现页面间的跳转 2、实现锚链接功能

5.1页面间的跳转

<!--a:超链接，作用:跳转到其他资源属性: href="目标资源路径" //路径推荐相对路径target="打开资源的位置"默认值:_ self ---在当前页面打开常用值: blank---在新页面打开资源
-->
<<a href="baidu.html" target=" _blank" >点击我试试</a>

5.2锚链接

当一个页面长度超过一屏的时候，想迅速跳转到指定位置，例如大家经常浏览网页的时候，滑动超过一屏，右下角经常会出现返回顶部连接，这个就是锚链接实现的。这个定位可以实现本页面间的锚链接也可以实现不同页面间的锚链接。

6 表格标签

规则表格

<!--table:定义表格常用属性: height:高度width:宽度border:边框cellpadding:内容与单元格之间的距离cellspacing:单元格和单元格之间的距离
-->
<table border="1" cellpadding="0" cellspacing="0" width="90%" height=" 200px"><!--tr:定义行常用属性:align:文本水平方向上的对齐方式，有三个职值，默认1eft-左对齐center -居中对齐right-右对齐--><tr><!--th和td标签都用来定义单元格，th:一般用来定义表头单元格，即做标题的那一行中的单元格td:- -般用来定义非表头单元格，即除了标题正文内容的单元格但是没有严格的限制常用属性:valign:文本垂直方向上的对齐方式，top- 顶部对齐bottom-底部对齐middle-垂直居中--><th align="center">序 号</th><th>商品名称</th><th>价格</th></tr><tr><td>1</td><td valign="top"><img src=" img/a . png" /></td><td>125</td></tr><tr><td>2</td><td valign="bottom" >Kitty饼干</td><td>96.0</td></tr>
</table>

7 表单！！！

概念：用于采集用户输入的数据。用于和服务器进行交互。

表单项元素中的一些属性：

id:元素的唯一表示， 不重复
name:表单项元素的名称，很重要--提交数据到服务器之后，服务器获取数据通过该名称
value:表单项元素的值，服务器获取数据通过name获取到的就是value
type:表示表单项元素的呈现形式
class :表示样式名称
readonly:表示只读，用户只能看不能改
disabled:表示禁用，该元素不能改而且背景是灰色

7.1 文本框

<!--input:表单元素，其中的type属性的值不同，会出现不同的表现形式文本框: type="text" , text也是input的默认值id:表示元素的唯一标识， 不推荐重复name:表单元素的名称，很重要，未来提交数据到服务器的时候，服务器端通过name获取valueplaceholder:文本框中显示的提示文字，用户输入自己内容的时候提示文字自动消失
--><input type="text" id="userName" name="userName" placeholder=" 请输入用户名"/><br/>

7.2 密码框

<!--密码框: type="password",用户输入内容之后显示的是黑色实心圆，而不是明文显示内容required: 表示用户必须填写此内容，如果没有填写，提交表单的时候失败并给出提示
-->
<input type="password" id="pas sword" name="password" required/><br/>

7.3 单选按钮

<!--单选按钮: type="radio"单选按钮都是成组出现，name相同的才表示一组，同组当中的按钮都互斥value:服务器通过name获取到的值就是valuechecked:表示默认选中;值可以省略，直接写一个属性名，也可以写checked=" checked"，
-->
性别: <input type="radio" name="gender" value="男" checked="checked"/>男<input type="radio" name="gender" value="女"/>女<input type="radio" name=" gender" value="未知" />未知<br/>
婚姻状态: <input type="radio" name="statu" value="1"/>已婚<input type="radio" name="statu" value="0" checked/>未婚<br/>

7.4 复选框

<!--复选框: type=" checkbox"复选框都是成组出现，name相同的才表示-组，同组当中的复选框可以选多个value:服务器通过name获取到的值就是valuechecked:表示默认选中，值可以省略，直接写-个属性名，也可以写checked="checked",
-->
爱好: <input type="checkbox" name="hobby" value="swim" />游泳<input type=" checkbox" name="hobby" value="NBA" />NBA<input type="checkbox" name="hobby" value="movie" />电影<input type=" checkbox" name="hobby" value="music" />音乐<br/>

7.5 文件域

<!--文件域:文件上传type="file"表单中如果有文件上传，表单中最好有enctype="multipart/form-datamultip1e属性:表示可以同时上传多个文件
-->
头像: <input type="file" name= "headImg" multiple="multiple"/><br/>

7.6 日期-h5中的新特性

<!--日期-h5新特性:type="date"表示年日type="datetime-local"表示既有年又有时间
-->
生日: <input type="datetime-local" name="birthday"/><br/>

7.7 隐藏域

<!--
隐藏域: type="hidden"页面上看不到任何效果
作用:隐藏一些用户不关心但是 程序员小哥哥小姐姐需要的值
-->
隐藏域: <input type="hidden" name= "userId" value="1001"/><br/>

7.8 下拉选择框

<!--下拉列表框: select中写nameoption: select中的所有选项，其中value表示下拉列表中被选中的项的对应值其中selected表示默认选中
--><select name="month"><option value="1" >1</option><option value="2">2</option><option value="3" selected="selected">3</option><option value="4" >4</option></select><br />

7.9 文本域

<!--textarea:文本域cols:指定列数，每一行有多少个字符vrows:默认多少行。readonly:表示只读，内容不可修改disabled:表示不可用，样式呈现灰色
-->
协议: <textarea rows="15" cols="50" readonly="readonly" disabled="disabled">水泊梁山英雄会注册会员条款说明:1、必须遵守.......2、...............</textarea><br />

7.10 按钮

<!--value:按钮上的文字type="submit":提交按钮，提交到form的action的指 定路径type="image":等价于提交按钮，只是没有value属性， 多了一个src="按钮的图片”type="reset" :清空表单中的所有用户输入，回到默认原始状态，相当于刷新了页面type= "button":普通按钮，没有任何功能，只是有按钮的长相而已
-->
<input type="submit" value="注册" id="regBtn" />
<input type="image" src="img/submit.gif" id="regBtn2" />
<input type="reset" value="重置"id="reset" />
<input type="button" value="普通按钮"id="btn" />

button标签可以与input实现的按钮相互替换。

<input type="submit" value="注册" />
<input type="reset" value="重置" />
<input type="button" value="按钮" />
<!--button标签与上面的input表示按钮的三个可互换
-->
<button type="submit">注册</button>
<button type="reset">重置</button>
<button type="button">按钮</button>

7.11 标签

<!--label:指定输入项的文字描述信息注意: label的for属性一般会和 input的id属性值对应。如果对应了，则点击1abe1区域，会让input输入框获取焦点。
-->
<label for="userName">用户名: </label>
<input id="userName" />

7.12 以上内容综合效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hEpIQJQG-1657112616295)(HTML与CSS学习总结.assets/image-20220630122325942.png)]

二、CSS总结

1、 CSS的概念

层叠样式表(英文全称：Cascading Style Sheets)

层叠：多个样式可以作用在同一个html的元素上，同时生效

是一种用来表现HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

样式定，义如何显示HTML元素
样式通常存储在样式表中
把样式添加到HTML 4.0中,是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在CSS文件中
多个样式定义可层叠为一一个

CSS很像化妆，通过不同的CSS将同样的HTML内容打造为不同的呈现结果。

所以，前端程序员相互表白的时候可以说：you are the CSS to my HTML.

2、 CSS的优势

功能强大
将内容展示和样式控制分离
降低耦合度、解耦
让分工协作更容易
提高开发效率

3、 CSS的使用：CSS与html结合使用

根据定义CSS的位置不同，分为行内样式、内部样式和外部样式。

3.1 行内样式

也称为内联样式

直接在标签中编写样式，通过使用标签内部的style属性

一般在测试的时候使用居多：
语法： <html标签 style="样式1：值1;样式2：值2;....样式N：值N;">hello my css</html标签>
案例：
<div style="color: red;">hello my css</div>

弊端：只能对当前的标签生效，没有做到内容和样式相分离，耦合度太高。

3.2 内部样式

定义在head标签内，通过style标签，该标签内容就是CSS代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"> <title>内部样式</title> <style> div{color: red; } </style> </head> <body><div>hello my css</div> </body>
</html>

3.3 外部样式

1、提前定义css资源文件

2、在head标签内，定义link标签引入外部样式文件。

lina.css文件，放在与html页面同级的css文件夹中：
div {color: red;
}html页面中的引入
<!DOCTYPE html>
<html><head><meta charset="UTF-8"> <title>外部样式</title> <link rel="stylesheet" href="css/lina.css" /> </head> <body><div>hello my css</div> </body>
</html>

作用域的范围:外部样式表>内部样式表>行内样式表

**优先级：外部样式表<内部样式表<行内样式表; **

同样的样式作用在同一个标签身上：就近原则；不同样式作用在同一个标签身上:叠加生效

4、 CSS语法

基本格式：由两个主要的部分构成：选择器，以及一条或多条声明:

选择器 { 属性1:值1; 属性2:值2; ...
}
选择器:筛选具有相似特征的元素
属性和属性值之间用冒号分割，不同的属性之间用分号隔开。

5、 CSS注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束

/*这是CSS的注释*/
div {color: red; /*文字颜色是红色*/
}

6、基本选择器：筛选具有相似特征的元素

6.1 id选择器

选择具有相同id属性值的元素，建议html页面中的id值唯一

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

PS： ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

虽然多个元素可以使用同一个id选择器控制样式，但是不推荐。如果需要同样的样式对多个标签生效，使用class选择器。

6.2 class选择器

选择具有相同的class属性值的元素。

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示

6.3 元素选择器/标签选择器

选择具有相同标签名称的元素。

定义选择器语法：标签名称{}；PS：标签名称必须是html提供好的标签。

使用标签选择器：自动使用在所有的同名的标签上

7 优先级

7.1 选择器的优先级

ID选择器 > 类选择器 > 标签选择器

当多个选择器作用在同一个标签上的时候，如果属性冲突，看优先级；如果不冲突，样式叠加生效。

7.2 样式表的优先级

行内样式 > 内部样式 >外部样式

同样，三个样式表中都有内容作用在同一个html标签的时候，如果属性冲突，看优先级；如果不冲突，

样式叠加生效。

8 CSS常用样式

8.1 color:字体颜色

跟颜色相关的取值分3种：

1、颜色的单词 red blue…

2、rgb(红，绿，蓝)三色的取值范围是0-255 rgb(255,0,0)

rgba（红，绿，蓝,透明度），透明度取值：0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)

3、#值1值2值3 ：值的范式是00-FF 十六进制数字组成的例如：#FF0000

8.2 width height:宽高

PS：只有块状元素可以设置宽高，行级元素设置不生效。

取值方式有2种：

1：数值绝对数字单位是像素PX

2：百分比：占据父元素的比例

8.3 背景样式

<sty1e>/*类选择器:作用在具有相同class属性的标签上*/. bg[{/*背景色*/background-color: cornflowerblue;/*背景图片:背景图片小于标签的宽高的时候，默认平铺*/background- image: ur1( img/ submit.gif);/*背景平铺方式:不设置的时候默认xy轴同时平铺repeat-x:横轴平铺repeat-y :纵轴平铺repeat :xy同时平铺no-repeat:不平铺*/background-repeat :no-repeat;/*背景位置: 第一个参数: X轴上的偏移距离:整数向右移动，负数向左移动第二个参数: y轴上的便宜距离:正数向下便宜，负数向上便宜*/background-position: 30px 20px;}
</style>

8.4 文本样式

div{/*所有的块状元素都有宽和高的属性;行级元素没有高宽*/width: 500px;height: 400px;/*背景样式:建议少用缩写形式*/background: tan url( img/youhui. png) no-repeat 10px 10px;/*字体*/font-size: 18px;font-family: "微软雅黑";font-weight: bold ;/*字体缩写:粗细大小样式*/font:bold 24px "微软雅黑";/*文本样式*//*划线位置: line . through--中划线underline-下划线 none-.没有划线*/text-decoration: underline ;/*文本的水平对齐方式: left right center*/text-align: center;/*文本的垂直对齐方式:没有单个属性可以设置垂直对齐;一般单行的时候使用高度等于行高设置垂直居中:多行未来使用盒子模型: */line -height: 400px;/*文字之间的间隙*/letter-spacing: 10px;
}

8.5 列表样式

li{background-color: lemonchiffon;/*列表祥式:常用取值: none-无样式square-正方形circle-空心 圆decimal-数字*/list-style-type:decimal;/*列表祥式为自定义图片*/list-style-image: ur1(img/b.png);/*列表的祥式放置的位置*/list-style-position:outside;/*列表样式缩写:上面三个的缩写*/list-style: square ur1(img/b.png) inside;/*常用的列表样式*/list-style: none;
}

8.6 边框样式

.border{/* 边框宽度*/border-width: 2px;/*边框颜色*/border-color: red;/*边框样式: solid-实线dotted-点线dashed-虛线*/border-style: dashed; /*边框缩写:样式颜色宽度*/border: solid green 5px;/ *边框可以分为4个方向分别设置*/border-top: dashed black 4px;border- bottom: dashed darkblue 4px;border-left: dashed fuchsia 4px;border-right: dashed #FFOOFF 4px;/*没有边框*/border: none;/ *常用的细边框样式*/border: solid 1px #ccc;
}

9 复合选择器

由两个或多个基础选择器，通过不同方式组合而成的。

可以更准确更精细的选择目标元素标签。

9.1 全局选择器

语法：* {} 一般去掉标签的一些默认效果的时候使用，或者整站通用效果时使用。但是不推荐，一般将

* 替换为常用标签的名称，并用逗号分隔，其实就是使用并集选择器。

/*整个网站的通用的样式*/
/*所有的页面都需要去除所有的元素本身的默认样式*/
*{margin: 0;padding: 0;font : normal 14px" 微软雅黑" ;color:#333;
}

9.2 并集选择器

并集选择器（CSS选择器分组）是各个选择器通过 , 连接而成的，通常用于集体声明。

语法：选择器1，选择器2，…选择器N{}

意思是多个选择器都是通用的样式。任何形式的选择器（包括标签选择器、class类选择器id选择器

等），都可以作为并集选择器的一部分。

div,p,ul,ol,dl,dt{margin:0;padding:0;
}

9.3 交集选择器

条件：交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。

语法：h3.class{ color:red; }

其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，例如div.list。

交集选择器是并且的意思。即…又…的意思。

例如： table.bg 选择的是： 类名为 .bg 的 表格标签，但用的相对来说比较少。

9.4 后代选择器

概念：后代选择器又称为包含选择器。

作用：用来选择元素或元素组的子孙后代。

其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙

子。

格式：父级 子级{属性:属性值;属性:属性值;}

语法：.class h3{color:red;font-size:16px;}

当标签发生嵌套时，内层标签就成为外层标签的后代。

子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

9.5 子元素选择器

作用：子元素选择器只能选择作为某元素**子元素****(亲儿子)**的元素。

其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接。

语法：.class>h3{color:red;font-size:14px;}

比如： .demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。

9.6 实现代码

<! DOCTYPE html>
<html><head><meta charset="UTF-8"><title>复合选择器</title><style>/*全，局选择器:一-般去掉标签的一些默认效果的时候使用，或者整站通用效果时使用。但是不推荐，*/*{color: #333;/*定义全局文字颜色， 统- -色彩基调*/}/*并集选择器:通常用于集体声明替换全局选择器;*/div,p, d1dt, dd{/*去掉浏览器的默认样式*/margin: 0;padding: 0;color: #333;/*定义 全局文字颜色，统一色彩基调*//*交集选择器*/1i. myli{co1or: red;}/*后代选择器*/ul li{font-size: 28px;}.myUL li{font-family: "微软雅黑";}/*子元素选择器*/.demo>h3{color: red;}</style></head><body><ul><li>123456</li><li class="myli">123456</li><li>789</li><li>789<a href="">点击我试试</a></li><li class="myUL"><ul><li>11111</li><li class="myli">22222</li><li>33333</li><li>4444<a href="">点击我试试</a></li></ul></li></ul><ol><li>111111</li><li>222222</li><li>333333</li><li>444444</li></ol><div class="demo">div1<h3>将进酒</h3><ul><li><h3>将进酒-----520</h3></li></ul></div></body>
</html>

9.7 伪类选择器

伪类选择器：和类选择器相区别类选择器是一个点比如 .demo {} 而我们的伪类用 2个点就是冒号比

如 :link{} 。

作用：用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，

比如可以选择第1个，第n个元

素。

因为伪类选择器很多，比如链接伪类，结构伪类等等。我们这里先给大家讲解链接伪类选择器。

a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 鼠标移动到链接上*/
a:active /* 选定的链接 */

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><tit1e>伪类选择器</tit1e><style>/*伪类选择器*/a:link{color: red;/*默认颜色 是红色*/}a:visited{color: blue;/*访问过的页面是蓝色*/ }a:hover{color:green;/*color: green;/*鼠标悬浮是绿色*/font-size: 28px;}a:active{color: go1d;/*按 下鼠标不放手是金色*/font-family: "微软雅黑";}</style></head><body><a href="03-常用样式.html" target="_ blank">常用样式</a><a href="04-盒子模型1. htm1" target="- b1ank">盒子模型</a><a href="05-综合练习.htm1" target="_ blank">综合练习</a></body></head>
</html>

注意

写的时候，他们的顺序尽量不要颠倒按照 lvha(四类的首字母) 的顺序。否则可能引起错误。
因为叫链接伪类，所以都是利用交集选择器 a:link a:hover
因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
实际开发中，我们很少写全四个状态，一般我们写法如下：

a { /* a是标签选择器 所有的链接*/font-weight: 700;font-size: 16px;co1or: gray;
}a:hover { /* :hover 是链接伪类选择器鼠标经过*/co1or: red; /*鼠标经过的时候， 由原来的灰色变成了红色*/
}

9.8 复合选择器对比

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 p .one
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是> .nav>p
交集选择器	选择两个标签交集的部分	既是又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover 实

学习心得

我觉得html以及css的知识点是比较琐碎的，在学习的过程中，死记硬背概念知识点是远远不够的，要多加联系多加尝试。只有在练习的过程中，才能使学到的知识内化于心。可能在刚开始我们制作的网页都比较素，不是很美观，但只要我们持续输出，持续练习，最后都可以随心所欲的制作出我们心中最美观的网页。