到

、

、和<img src="/static/imghwm/default1.png" data-src="example.jpg" class="lazy" alt="如何启动基本HTML代码？" >等标签。

引言

当你初次接触网页开发时，HTML 是你必须掌握的第一门语言。它不仅是构建网页的基础，也是你进入前端世界的敲门砖。在本文中，我们将从零开始，带你一步步了解如何编写基本的 HTML 代码。阅读完这篇文章，你将学会如何创建一个简单的网页，并且对 HTML 的基本结构和标签有初步的认识。

当我们谈到如何开始编写基本的 HTML 代码时，首先需要理解 HTML 的基本结构和常用标签。这不仅仅是技术上的学习，更是一种对网页构建的艺术探索。

HTML，全称为 HyperText Markup Language，即超文本标记语言，它是用来描述网页结构的一种标记语言。HTML 通过一系列的标签来定义网页的各个部分，如标题、段落、链接等。开始编写 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>My First Web Page</title>
</head>
<body>
    <h1 id="Welcome-to-My-Web-Page">Welcome to My Web Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

这是一个非常简单的 HTML 文档，它包含了所有基本的元素： 声明文档类型，<code> 标签包裹整个文档，包含了元数据和标题，则包含了网页可见内容。

HTML 文档的基本结构

HTML 文档的基本结构包括以下几个部分：

：这是文档类型声明，告诉浏览器这是一个 HTML5 文档。
：这是 HTML 文档的根元素，所有的 HTML 元素都包含在其中。
：包含了网页的元数据，如字符编码、视口设置和标题。
：包含了网页的可见内容，如标题、段落等。

常用 HTML 标签

在编写 HTML 代码时，你会经常使用到一些基本标签：

<h1></h1> 到 <h6></h6>：用于定义标题，<h1></h1> 是最高级别的标题，<h6></h6> 是最低级别的。
<p></p>：用于定义段落。
<a></a>：用于创建超链接。
<img src="/static/imghwm/default1.png" data-src="example.jpg" class="lazy" alt="如何启动基本HTML代码？" >：用于嵌入图像。

创建你的第一个网页

现在，让我们来创建一个更复杂一点的网页，展示一下如何使用这些标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1 id="Welcome-to-My-Web-Page">Welcome to My Web Page</h1>
    <p>This is a paragraph of text. You can add as much text as you want here.</p>
    <h2 id="About-Me">About Me</h2>
    <p>I am a web developer learning HTML.</p>
    <a href="https://www.example.com">Visit Example.com</a>
    <img src="/static/imghwm/default1.png"  data-src="example.jpg"  class="lazy" alt="An example image">
</body>
</html>

在这个例子中，我们添加了更多的内容，包括一个二级标题、一个链接和一张图片。注意<a></a>标签的href属性用于指定链接的目标URL，而<img alt="如何启动基本HTML代码？" >标签的src属性用于指定图像的源文件，alt属性则用于提供图像的替代文本。