一、HTML 基础概念
什么是 HTML？
HTML 即超文本标记语言，是用于创建网页的标准标记语言。它使用标签来描述网页的结构和内容，通过浏览器解析这些标签，将网页呈现给用户。
HTML 标签
HTML 标签是由尖括号包围的关键词，如 <html>、<body>、<p> 等。每个标签都有特定的含义和用途，例如 <html> 标签定义整个 HTML 文档，<body> 标签定义网页的主体内容。
HTML 元素
HTML 元素由开始标签、内容和结束标签组成。例如 <p>This is a paragraph.</p>，<p> 是开始标签，“This is a paragraph.” 是内容，</p> 是结束标签。
二、准备工作
文本编辑器
选择一个适合的文本编辑器是开始 HTML 网站制作的第一步。常见的文本编辑器有 Notepad++、Sublime Text、Visual Studio Code 等。这些编辑器提供了语法高亮、代码自动补全等功能，有助于提高编写 HTML 代码的效率。
浏览器
安装一个现代浏览器，如 Google Chrome、Mozilla Firefox、Microsoft Edge 等。浏览器用于查看和测试你编写的 HTML 页面。
三、创建第一个 HTML 页面
基本结构
以下是一个简单的 HTML 页面的基本结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>
在这个例子中，<!DOCTYPE html> 声明了文档类型为 HTML5。<html> 标签是整个 HTML 文档的根元素。<head> 标签包含了文档的元数据，如字符编码和页面标题。<body> 标签包含了网页的可见内容。
标题和段落
<h1> 标签用于定义一级标题，<p> 标签用于定义段落。你可以根据需要使用不同级别的标题标签 <h2>、<h3> 等。
保存和查看页面
将上述代码保存为一个以 .html 为后缀的文件，例如 index.html。然后在浏览器中打开这个文件，你就可以看到你的第一个 HTML 页面了。
四、常用 HTML 标签
文本格式标签
<strong>：用于强调文本，通常显示为粗体。
<em>：用于强调文本，通常显示为斜体。
<u>：用于给文本添加下划线。
列表标签
<ul>：无序列表，用于创建一个包含项目符号的列表。
<ol>：有序列表，用于创建一个包含数字序号的列表。
<li>：列表项，用于定义列表中的每个项目。
链接标签
<a>：用于创建链接。属性 href 指定链接的目标地址。例如 <a href="https://www.example.com">Visit Example</a>。
图像标签
<img>：用于在网页中插入图像。属性 src 指定图像的路径，alt 属性提供图像的替代文本，当图像无法显示时显示。例如 <img src="image.jpg" alt="A beautiful image">。
五、CSS 基础（可选）
虽然 HTML 可以定义网页的结构和内容，但要使网页更加美观，通常需要使用 CSS（层叠样式表）。CSS 可以控制网页的布局、颜色、字体等样式。
引入 CSS
可以通过以下三种方式在 HTML 页面中引入 CSS：
内联样式：在 HTML 标签中使用 style 属性直接定义样式。例如 <p style="color: blue;">This is a blue paragraph.</p>。
内部样式表：在 HTML 文件的 <head> 部分使用 <style> 标签定义样式。例如：
<head>
<style>
p {
color: blue;
}
</style>
</head>
外部样式表：将 CSS 代码保存为一个单独的 .css 文件，然后在 HTML 文件的 <head> 部分使用 <link> 标签引入。例如：
<head>
<link rel="stylesheet" href="styles.css">
</head>
选择器和属性
CSS 使用选择器来选择要应用样式的 HTML 元素。常见的选择器有标签选择器、类选择器、ID 选择器等。属性用于定义元素的样式，如 color（颜色）、font-size（字体大小）、margin（外边距）等。
六、学习资源和进一步学习
在线教程
有许多免费的在线教程可以帮助你学习 HTML 和 CSS，如 W3Schools、MDN Web Docs 等。
书籍
可以购买一些关于 HTML 和 CSS 的书籍，如《HTML & CSS 设计与构建网站》等。
实践和项目
通过实践和完成一些小项目来巩固所学知识，例如制作一个个人博客、一个简单的电子商务网站等。
总之，HTML 网站制作是一个有趣且富有创造性的过程。通过掌握 HTML 的基础知识和不断实践，你可以创建出功能丰富、美观的网站。希望这篇入门指南能为你开启 HTML 网站制作的精彩之旅。
