HTML 基础 (快速入门)详细步骤和示例

[创建基本的 HTML 文件](#创建基本的 HTML 文件)

HTML（超文本标记语言）是构建网页的基础技术，以下是 HTML 基础的详细步骤和示例：

创建基本的 HTML 文件

步骤一：新建文件
- 在本地计算机上选择一个合适的文件夹，用于存放 HTML 文件。在该文件夹内，使用文本编辑器（如 Notepad++、Sublime Text、Visual Studio Code 等）创建一个新的文本文件。
步骤二：命名文件
- 将文件保存为以.html为后缀的文件名，例如index.html。这个文件名就是你网页的文件名，后续可以通过浏览器访问这个文件来查看网页效果。
步骤三：编写基本结构
- 在文本编辑器中，输入以下 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>标签内，添加以下代码来创建标题和段落：

html 复制代码

<body>
    <h1>欢迎来到我的HTML页面</h1>
    <p>这是一个简单的HTML页面示例，展示了HTML的基本用法。</p>
</body>

<h1>标签：表示一级标题，HTML 还提供了<h2>到<h6>等不同级别的标题标签，用于表示文档中的不同层次结构。
<p>标签：用于定义段落，其中的文本会在浏览器中以段落的形式显示。
步骤五：添加列表
- 可以在页面中添加无序列表或有序列表，示例代码如下：

html 复制代码

<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 样式来控制其样式和布局。示例代码如下：

html 复制代码

<body>
    <div id="header">
        <h1>我的网站标题</h1>
    </div>
    <div class="content">
        <p>这里是页面的主要内容区域。</p>
    </div>
    <div id="footer">
        <p>版权所有 &copy; 2025</p>
    </div>
</body>

步骤七：添加链接
- 使用<a>标签来创建链接，示例代码如下：

html 复制代码

<body>
    <p>这是一个简单的HTML页面示例，展示了HTML的基本用法。</p>

    <p>访问 <a href="https://www.example.com">示例网站</a> 了解更多信息。</p>
</body>

<a>标签的href属性指定了链接的目标地址，用户点击链接时，浏览器会跳转到该地址。还可以使用target="_blank"属性让链接在新窗口中打开。

以上就是 HTML 基础的一些主要步骤和示例，通过不断学习和实践，可以创建出更复杂、更美观的网页。