一、HTML 基础
HTML（超文本标记语言）是构建网页的基础。
-
基本结构
-
一个基本的 HTML 页面结构如下：
-
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
-
<!DOCTYPE html>是 HTML5 的文档类型声明。 -
<html>标签是整个页面的根标签，lang="en"表示页面语言为英语。 -
<head>标签内包含了页面的元信息，如<meta charset="UTF-8">定义了字符编码，<title>标签定义了页面标题。 -
<body>标签内包含了页面的可见内容，如<h1>是一级标题标签。
-
常用标签
-
文本标签
-
<p>标签用于段落：
-
-
html
<p>这是一个段落。</p>
<strong>和<em>标签分别用于加粗和斜体：
html
<p><strong>这是加粗的文字</strong>，<em>这是斜体的文字</em></p>
-
列表标签
-
无序列表使用
<ul>和<li>标签：
-
html
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
- 有序列表使用
<ol>和<li>标签：
html
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>
-
链接标签
-
<a>标签用于创建链接：
-
html
<a href="https://www.example.com">访问示例网站</a>
-
图像标签
<img>标签用于插入图像：
html
<img src="image.jpg" alt="这是一幅图">
-
其中
src属性指定图像的来源，alt属性是图像的替代文本。
二、CSS 基础
CSS（层叠样式表）用于控制网页的样式。
-
内联样式
-
可以直接在 HTML 标签内定义样式，例如：
-
html
<h1 style="color: red; font - size: 24px;">红色的大标题</h1>
-
内部样式表
-
在
<head>标签内使用<style>标签定义样式：
-
html
<head>
<meta charset="UTF-8">
<title>My Page</title>
<style>
p {
color: blue;
}
</style>
</head>
-
上述代码将使页面中的所有
<p>标签内的文字颜色为蓝色。
-
外部样式表
- 创建一个
.css文件，例如styles.css：
- 创建一个
css
body {
background - color: lightgray;
}
-
在 HTML 页面中通过
<link>标签引入外部样式表：
html
<head>
<meta charset="UTF-8">
<title>My Page</title>
<link rel="stylesheet" href="styles.css">
</head>
- 这将使页面的背景颜色变为浅灰色。
