目录
创建基本的 HTML 文件
添加内容到页面
页面布局与链接
HTML（超文本标记语言）是构建网页的基础技术，以下是 HTML 基础的详细步骤和示例：
创建基本的 HTML 文件
- 步骤一：新建文件
- 在本地计算机上选择一个合适的文件夹，用于存放 HTML 文件。在该文件夹内，使用文本编辑器（如 Notepad++、Sublime Text、Visual Studio Code 等）创建一个新的文本文件。
- 步骤二：命名文件
- 将文件保存为以
.html为后缀的文件名，例如index.html。这个文件名就是你网页的文件名，后续可以通过浏览器访问这个文件来查看网页效果。
- 将文件保存为以
- 步骤三：编写基本结构
- 在文本编辑器中，输入以下 HTML 基本结构代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个HTML页面</title>
</head>
<body></body>
</html>
<!DOCTYPE html>：这是 HTML5 的文档类型声明，告诉浏览器该文件是一个 HTML5 文档。<html>标签：是 HTML 文档的根标签，所有其他 HTML 元素都包含在这个标签内。lang="en"属性指定了文档的语言为英语，也可以根据实际情况设置为zh-CN等其他语言代码。<head>标签：包含了关于 HTML 文档的元信息，如文档标题、字符编码、样式表链接等。这些信息不会直接显示在网页内容中，但对网页的正确显示和功能起着重要作用。<meta charset="UTF-8">：指定了文档的字符编码为 UTF-8，这样可以支持各种语言和特殊字符的正确显示。<meta name="viewport" content="width=device-width, initial-scale=1.0">：用于设置网页的视口，确保网页在不同设备上能够正确适配和显示。<title>标签：定义了网页的标题，显示在浏览器的标题栏或标签页上。
添加内容到页面
- 步骤四：添加标题和段落
- 在
<body>标签内，添加以下代码来创建标题和段落：
- 在
<body><h1>欢迎来到我的HTML页面</h1><p>这是一个简单的HTML页面示例，展示了HTML的基本用法。</p>
</body>
<h1>标签：表示一级标题，HTML 还提供了<h2>到<h6>等不同级别的标题标签，用于表示文档中的不同层次结构。<p>标签：用于定义段落，其中的文本会在浏览器中以段落的形式显示。- 步骤五：添加列表
- 可以在页面中添加无序列表或有序列表，示例代码如下：
<body><h1>欢迎来到我的HTML页面</h1><p>这是一个简单的HTML页面示例，展示了HTML的基本用法。</p><h2>水果列表</h2><ul><li>苹果</li><li>香蕉</li><li>橙子</li></ul><h2>数字列表</h2><ol><li>1</li><li>2</li><li>3</li></ol>
</body>
<ul>标签：表示无序列表，其中的每个列表项使用<li>标签表示，在浏览器中会以项目符号的形式显示。<ol>标签：表示有序列表，列表项会按照数字顺序进行编号。
页面布局与链接
- 步骤六：使用 div 进行布局
<div>标签是一个常用的块级元素，用于对页面内容进行分组和布局。可以为<div>标签添加class或id属性，以便通过 CSS 样式来控制其样式和布局。示例代码如下：
<body><div id="header"><h1>我的网站标题</h1></div><div class="content"><p>这里是页面的主要内容区域。</p></div><div id="footer"><p>版权所有 © 2025</p></div>
</body>
- 步骤七：添加链接
- 使用
<a>标签来创建链接，示例代码如下：
- 使用
<body><p>这是一个简单的HTML页面示例，展示了HTML的基本用法。</p><p>访问 <a href="https://www.example.com">示例网站</a> 了解更多信息。</p>
</body>
<a>标签的href属性指定了链接的目标地址，用户点击链接时，浏览器会跳转到该地址。还可以使用target="_blank"属性让链接在新窗口中打开。
以上就是 HTML 基础的一些主要步骤和示例，通过不断学习和实践，可以创建出更复杂、更美观的网页。
