HTML 基础知识入门

前言

HTML（超文本标记语言）是构建网页的基础语言。本文将介绍 HTML 的基本概念、常用标签及其结构，帮助初学者快速入门。

1. HTML 基本结构

一个标准的 HTML 文档包含以下基本结构：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a simple HTML document.</p>
</body>
</html>

<!DOCTYPE html>：声明文档类型，告诉浏览器使用 HTML5 标准。
<html>：根元素，包含整个 HTML 文档。
<head>：包含文档的元数据，如字符集、标题和样式表。
<body>：包含网页的内容，如文本、图片和链接。

2. 常用 HTML 标签

标题标签

HTML 提供了六个级别的标题标签，分别是 <h1> 到 <h6>，其中 <h1> 是最高级别的标题。

1
2
3


<h1>Main Title</h1>
<h2>Sub Title</h2>
<h3>Section Title</h3>

段落标签

段落使用 <p> 标签表示。

1
2


<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

链接标签

链接使用 <a> 标签，href 属性指定链接地址。

1

<a href="https://www.example.com">Visit Example.com</a>

图片标签

图片使用 <img> 标签，src 属性指定图片路径，alt 属性提供替代文本。

1

<img src="image.jpg" alt="Description of image">

列表标签

HTML 支持有序列表和无序列表。

有序列表使用 <ol> 标签，列表项使用 <li> 标签。

1
2
3
4


<ol>
    <li>First item</li>
    <li>Second item</li>
</ol>

无序列表使用 <ul> 标签。

1
2
3
4


<ul>
    <li>First item</li>
    <li>Second item</li>
</ul>

表格标签

表格使用 <table> 标签，表头使用 <th>，表行使用 <tr>，表格数据使用 <td>。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Alice</td>  
        <td>30</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>25</td>
    </tr>
</table>

3. HTML 属性

HTML 标签可以包含属性，用于提供额外的信息或配置。例如：

1
2


<a href="https://www.example.com" target="_blank">Open in new tab</a>
<img src="image.jpg" alt="Description" width="600" height="400">

href：指定链接地址。
target：指定链接打开方式，如 _blank 表示在新标签页打开。
width 和 height：指定图片的宽度和高度。
alt：提供图片的替代文本。

4. HTML 注释

HTML 注释使用  包围，浏览器不会渲染注释内容。

1
2


<!-- This is a comment -->
<p>This is visible content.</p>

5. 总结

本文介绍了 HTML 的基本结构、常用标签及其属性。掌握这些基础知识后，您可以开始创建简单的网页，并逐步深入学习更高级的 HTML 和前端技术。继续探索 HTML5 新特性，如多媒体标签（<video>、<audio>）和表单标签（<form>、<input>），将帮助您构建更丰富的网页内容。