目录
一、HTML 基础
1. HTML 简介
HTML（HyperText Markup Language）即超文本标记语言，是用于创建网页的标准标记语言。它通过各种标签来描述网页的结构和内容，浏览器会根据这些标签来渲染网页。
2. HTML 基本结构
一个基本的 HTML 文档结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 这里放置网页的可见内容 -->
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html><!DOCTYPE html>：声明文档类型为 HTML5。<html>：根标签，包含整个 HTML 文档。<head>：包含文档的元数据，如字符编码、页面标题等。<meta charset="UTF-8">：设置字符编码为 UTF - 8。<title>：定义页面的标题，显示在浏览器的标签栏上。<body>：包含网页的可见内容，如文本、图像、链接等。
3. 常用 HTML 标签
- 标题标签：
<h1>-<h6>，用于定义不同级别的标题，<h1>级别最高，字体最大。 - 段落标签：
<p>，用于定义段落。 - 链接标签：
<a>，用于创建超链接，例如<a href="https://www.example.com">这是一个链接</a>。 - 图像标签：
<img>，用于插入图像，例如<img src="image.jpg" alt="图片描述">。
二、CSS 基础
1. CSS 简介
CSS（Cascading Style Sheets）即层叠样式表，用于控制 HTML 文档的外观和布局。它可以将内容与样式分离，使网页的设计更加灵活和易于维护。
2. CSS 引入方式
- 内联样式：直接在 HTML 标签中使用
style属性，例如<p style="color: red;">这是一个红色段落</p>。 - 内部样式表：在 HTML 文件的
<head>标签中使用<style>标签定义样式，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部样式表示例</title>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>这是一个蓝色段落</p>
</body>
</html>- 外部样式表：将 CSS 代码放在一个独立的
.css文件中，然后在 HTML 文件的<head>标签中使用<link>标签引入，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部样式表示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>这是一个应用了外部样式的段落</p>
</body>
</html> 在 styles.css 文件中可以这样定义样式：
p {
color: green;
}3. 常用 CSS 选择器
- 元素选择器：通过元素名称选择元素，例如
p选择所有的<p>标签。 - 类选择器：通过元素的
class属性选择元素，类名前面加.，例如.my - class选择所有class属性为my - class的元素。 - ID 选择器：通过元素的
id属性选择元素，ID 名前面加#，例如#my - id选择id属性为my - id的元素。
4. 常用 CSS 属性
- 颜色属性：
color用于设置文本颜色，background - color用于设置背景颜色。 - 字体属性：
font - size用于设置字体大小，font - family用于设置字体族。 - 边框属性：
border用于设置元素的边框，例如border: 1px solid black表示 1 像素宽的黑色实线边框。
通过今天对 HTML 和 CSS 基础知识的学习，你已经迈出了前端开发的第一步。后续可以通过不断实践来加深对这些知识的理解和掌握。