小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
HTML
HTML是个缩写形式，其全称为Hyper Text Markup Language,翻译成中文的含义为超文本标记语 言。HTML不是一门编程语言，而是一门标记语言。
- 超文本:就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
- 标记语言:是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的脑文字编码。与文本相关的其他信息(包括例如文本的结构和表示信息等)与原来的文本结合在一起，但是使用标记进行标识。
结构
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 指定当前HTML页面的编码格式 -->
<meta charset="UTF-8">
<!-- 指定当前HTML页面的视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度一下，你就知道</title>
</head>
<body>
19级启嘉班
</body>
</html>
CSS
层叠样式表（Cascading Style Sheet，简称：CSS）是为网页添加样式的代码。
css的引用：
内联样式：
内联样式: 通过HTML元素的style属性进行设置
语法结构: 与HTML元素的属性的语法结构相同
style="CSS语法结构"
- 缺点: 只对当前元素有效, 导致CSS代码可能出现冗余
<body>
<p style="color: lightcoral;">19级</p>
<p>18级</p>
</body>
内嵌样式：
内嵌样式表: 通过style元素进行设置
-
旧版本: 设置type属性值为"text/css"
-
语法结构:
CSS语法结构
- 优点: 相对于内联样式
通过CSS选择器定位HTML页面中一个或一类元素
-
缺点: 将CSS代码嵌入到HTML页面中,只能对当前HTML页面有效
-
编码的风格不符合编码原则中的低耦合
-
导致CSS代码可能出现冗余
<style>
p {
color: lightcoral;
}
</style>
外联样式：
外联样式表:
1.创建一个CSS文件,用来存储CSS样式内容
2.在HTML页面中通过<link>元素引入外部指定的CSS文件
<link>元素:
-
作用: 用来引入HTML页面外部的资源
-
属性:
-
rel属性: 用来设置外部资源与当前HTML页面的关系
-
href属性: 用来设置引入外部资源的路径(相对路径和绝对路径)
优点: 相对于内嵌样式表和内联样式
-
将CSS样式与HTML页面进行分离(低耦合)
-
不会出现内嵌样式表或内联样式产生的代码冗余
缺点: 可能对HTML页面的加载造成负担,导致性能下降
相对路径:目标文件相对于当前文件的路径(推荐)
绝对路径:目标文件相对于根目录的路径
<link rel="stylesheet" href="style.css">
css选择器
选择器有许多不同的类型。上面只介绍了元素选择器，用来选择 HTML 文档中给定的元素。但是选择操作可以更加具体。
下面是一些常用的选择器类型：
\
