🎯链接伪类选择器：
🥏涉及知识点:
1.<!DOCTYPE html> 声明了文档类型为HTML，告诉浏览器使用HTML解析器来解析该页面。
2.<html lang="en"> 标签定义了整个HTML文档的开始和结束。
3.<head> 标签内包含了一些元数据和引用的外部资源。
1.<meta charset="UTF-8"> 设置字符集为UTF-8，确保页面能正确地显示各种语言的字符。
2.<meta http-equiv="X-UA-Compatible" content="IE=edge"> 通过X-UA-Compatible元标签设置兼容模式，使页面在IE浏览器中以最高版本的模式渲染。
3.<meta name="viewport" content="width=device-width, initial-scale=1.0"> 设置视口的宽度和初始缩放比例，使页面在移动设备上呈现良好的可视效果。
4.<title>Document</title> 设置页面标题为 "Document"。
4.<style> 标签用来定义页面的样式。
1.li 选择器定义了列表项的样式。设置了宽度、字体、内边距、外边距、背景颜色、文本居中对齐以及圆角等样式属性。
2.a:link、a:visited、a:hover、a:active 分别定义了链接在不同状态下的样式。设置了颜色属性，用来改变链接的颜色。
5.<body> 标签内包含了网页的主体内容。
1.<ul> 标签定义了一个无序列表。
2.<li> 标签定义了列表项。
3.<a> 标签定义了一个链接，通过 href 属性指定链接的目标地址。
每个列表项都包含一个链接，点击链接时会跳转到相应的目标位置（由 href 属性指定）。整体效果是一个简单的导航菜单，点击菜单项后可以快速跳转到页面内的指定位置。
请注意，这只是一个静态的HTML页面，没有具体的内容和跳转目标。如果需要实际内容和功能，请在相应的 href 属性中填写正确的目标地址。
💻代码展示:
html <!DOCTYPE html> <!-- 声明文档类型为 HTML --> <html lang="en"> <!-- 标识网页的语言为英语 --> <head> <meta charset="UTF-8"> <!-- 设置字符集为 UTF-8，使网页能正确地显示各种语言的字符 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 设置兼容模式为 IE 浏览器当前最新版本 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置网页在移动端设备上的缩放比例为 1:1 --> <title>Document</title> <!-- 设置网页标题为 "Document" --> <style> <!-- 在 head 标签中添加样式 --> li{ <!-- 设置 li 标签的样式 --> width: 170px; <!-- 设置宽度为 170 像素 --> font: 30px "隶书"; <!-- 设置字体大小为 30 像素，字体为 "隶书" --> padding: 5px; <!-- 设置内边距为 5 像素 --> margin: 10px; <!-- 设置外边距为 10 像素 --> background-color: lightgray; <!-- 设置背景颜色为浅灰色 --> list-style: none; <!-- 取消列表样式 --> text-align: center; <!-- 设置文本居中对齐 --> border-radius: 5px; <!-- 设置圆角半径为 5 像素 --> } a:link{ <!-- 设置链接的样式 --> color: blue; <!-- 设置链接颜色为蓝色 --> } a:visited{ <!-- 设置已访问链接的样式 --> color: red; <!-- 设置已访问链接颜色为红色 --> } a:hover{ <!-- 设置鼠标悬停在链接上的样式 --> color: yellow; <!-- 设置链接颜色为黄色 --> } a:active{ <!-- 设置链接被点击时的样式 --> color: green; <!-- 设置链接颜色为绿色 --> } </style> </head> <body> <ul> <!-- 定义一个无序列表 --> <li><a href="#1">学校概况</a></li> <!-- 添加一个列表项，其中包含一个链接，链接地址为 #1 --> <li><a href="#2">院校设置</a></li> <!-- 添加一个列表项，其中包含一个链接，链接地址为 #2 --> <li><a href="#3">教育教学</a></li> <!-- 添加一个列表项，其中包含一个链接，链接地址为 #3 --> <li><a href="#4">科学研究</a></li> <!-- 添加一个列表项，其中包含一个链接，链接地址为 #4 --> <li><a href="#5">招生就业</a></li> <!-- 添加一个列表项，其中包含一个链接，链接地址为 #5 --> <li><a href="#6">合作交流</a></li> <!-- 添加一个列表项，其中包含一个链接，链接地址为 #6 --> <li><a href="#7">诚聘英才</a></li> <!-- 添加一个列表项，其中包含一个链接，链接地址为 #7 --> <li><a href="#8">智慧校园</a></li> <!-- 添加一个列表项，其中包含一个链接，链接地址为 #8 --> </ul> </body> </html>
🥽实现效果：
【基于HTML5的网页设计及应用】——链接伪类选择器
🎯伪元素选择器：
🥏涉及知识点:
1.DOCTYPE声明 (<!DOCTYPE html>)：指定文档类型为HTML。
2.HTML元素 (<html>)：整个HTML文档的根元素。
3.head元素 (<head>)：包含了关于文档的元信息，如字符集、浏览器兼容性等。
4.meta元素：用于设置文档的元信息，如字符集（<meta charset="UTF-8">）和视口（<meta name="viewport" content="width=device-width, initial-scale=1.0">）。
5.title元素 (<title>)：定义了文档的标题，显示在浏览器的标题栏或标签页上。
6.style元素 (<style>)：内联样式表，用于定义CSS样式。
7.li元素 (<li>)：无序列表项，代表每个菜单项。
8..a元素 (<a>)：超链接，用于创建可点击的链接。
9.ul元素 (<ul>)：无序列表，包含多个菜单项。
10.body元素 (<body>)：文档的主体内容。
CSS样式部分定义了列表项和链接在不同状态下的样式，包括宽度、字体、背景颜色、内边距、外边距等。鼠标悬停时，列表项的背景颜色会变成skyblue，并出现红色的三角形。链接的颜色在不同状态下也有所变化。
💻代码展示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 设置字符集为UTF-8 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 设置兼容模式，使页面在IE浏览器中以最高版本的模式渲染 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口的宽度和初始缩放比例 --> <title>Document</title> <!-- 设置页面标题为 "Document" --> <style> li{ /* 列表项样式 */ width: 170px; /* 设置宽度 */ font: 30px "隶书"; /* 设置字体 */ padding: 5px; /* 设置内边距 */ margin: 10px; /* 设置外边距 */ background-color: lightgray; /* 设置背景颜色 */ list-style: none; /* 移除默认的列表样式 */ text-align: center; /* 文本居中对齐 */ border-radius: 5px; /* 设置圆角边框 */ } li:hover{ /* 鼠标悬停在列表项上的样式 */ background-color: skyblue; /* 改变背景颜色 */ } a:link{ /* 未访问链接的样式 */ color: blue; /* 设置颜色为蓝色 */ } a:visited{ /* 已访问链接的样式 */ color: red; /* 设置颜色为红色 */ } a:hover{ /* 鼠标悬停在链接上的样式 */ color: yellow; /* 设置颜色为黄色 */ } a:active{ /* 链接被点击时的样式 */ color: green; /* 设置颜色为绿色 */ } li:hover::before{ /* 鼠标悬停在列表项上时的伪元素样式（红色三角形，出现在文本之前） */ content:''; /* 清空内容 */ display:inline-block; /* 将元素显示为内联块级元素 */ width:0px; /* 设置宽度为0 */ height:0px; /* 设置高度为0 */ border-style:solid; /* 设置边框样式为实线 */ border-width:10px; /* 设置边框宽度为10px */ border-color: transparent transparent transparent red; /* 设置边框颜色为透明、透明、透明、红色 */ } li:hover::after{ /* 鼠标悬停在列表项上时的伪元素样式（红色三角形，出现在文本之后） */ content:''; /* 清空内容 */ display:inline-block; /* 将元素显示为内联块级元素 */ width:0px; /* 设置宽度为0 */ height:0px; /* 设置高度为0 */ border-style:solid; /* 设置边框样式为实线 */ border-width:10px; /* 设置边框宽度为10px */ border-color:transparent red transparent transparent; /* 设置边框颜色为透明、红色、透明、透明 */ } ul a{text-align: center;} /* 设置链接文本居中对齐 */ </style> </head> <body> <ul> <!-- 无序列表 --> <li><a href="#1">学校概况</a></li> <!-- 列表项1，链接目标为ID为 "1" 的元素 --> <li><a href="#2">院校设置</a></li> <!-- 列表项2，链接目标为ID为 "2" 的元素 --> <li><a href="#3">教育教学</a></li> <!-- 列表项3，链接目标为ID为 "3" 的元素 --> <li><a href="#4">科学研究</a></li> <!-- 列表项4，链接目标为ID为 "4" 的元素 --> <li><a href="#5">招生就业</a></li> <!-- 列表项5，链接目标为ID为 "5" 的元素 --> <li><a href="#6">合作交流</a></li> <!-- 列表项6，链接目标为ID为 "6" 的元素 --> <li><a href="#7">诚聘英才</a></li> <!-- 列表项7，链接目标为ID为 "7" 的元素 --> <li><a href="#8">智慧校园</a></li> <!-- 列表项8，链接目标为ID为 "8" 的元素 --> </ul> </body> </html>
🥽实现效果：
