【HTML】之基本标签的使用详解

news2024/11/28 20:48:45

HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础。它不是一种编程语言，而是一种标记语言，用于描述网页的内容和结构。本文将带你了解HTML的基础知识，并通过详细的代码示例和中文注释进行讲解。

本文使用软件：VS Code

1. HTML文档的基本结构

每个HTML文档都遵循一定的结构：

<!DOCTYPE html>  <!-- 声明文档类型为HTML5 -->
<html lang="zh-CN"> <!-- 根元素，lang属性指定语言为中文 -->
<head>
  <meta charset="UTF-8"> <!-- 设置字符编码为UTF-8，支持中文 -->
  <title>我的第一个网页</title> <!-- 设置网页标题，显示在浏览器标签页 -->
</head>
<body>
  <!-- 网页的可见内容放在这里 -->
  <h1>这是一个一级标题</h1>
  <p>这是一个段落。</p>
</body>
</html>

运行：

<!DOCTYPE html>：声明文档类型为HTML5，这是必须的，它告诉浏览器如何解析HTML文档。

<html>：HTML文档的根元素，所有其他元素都包含在其中。lang属性指定文档的语言，方便搜索引擎和屏幕阅读器理解。
<head>：包含关于HTML文档的元信息，例如字符编码、标题、样式表链接等。这些信息不会直接显示在网页上。
<meta charset="UTF-8">：设置字符编码为UTF-8，确保能够正确显示各种语言的字符，包括中文。
<title>：设置网页标题，显示在浏览器标签页或窗口标题栏中。
<body>：包含网页的可见内容，例如文本、图像、视频等。

2. 常用HTML标签

2.1 标题标签

<h1>到<h6> 用于定义不同级别的标题，<h1> 表示最重要的标题，<h6> 表示最不重要的标题。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

运行：

2.2 段落标签

<p> 用于定义段落。

<p>这是一个段落。浏览器会自动在段落前后添加空白。</p>

运行：

2.3 换行标签

<br> 用于插入换行符。

<p>这是一行文字。<br>这是另一行文字。</p>

运行：

2.4 链接标签

<a> 用于创建超链接，href 属性指定链接的目标地址。

<a href="https://www.example.com">点击访问示例网站</a>

运行：

2.5 图像标签

<img> 用于插入图像，src 属性指定图像的URL，alt 属性提供替代文本，当图像无法显示时显示。

<img src="image.jpg" alt="这是一张图片">

运行：

2.6 列表标签

无序列表：<ul> 和 <li>

<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>

运行：

有序列表：<ol> 和 <li>

<ol>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ol>

运行：

2.7 div 和 span 标签

<div>：块级元素，用于组织文档结构，通常用于CSS样式设置。
<span>：内联元素，用于对一小段文本进行样式设置。

<div style="background-color:lightblue;">
  这是一个div，它会占据一行。 <span style="color:red;">这是一个span，它只包裹着文字。</span>
</div>

运行：

2.8 表格标签

<table>、<tr>、<th>、<td> 用于创建表格。

<table>
  <tr>  <!-- 表格行 -->
    <th>表头 1</th> <!-- 表头单元格 -->
    <th>表头 2</th>
  </tr>
  <tr>
    <td>数据 1</td> <!-- 表格数据单元格 -->
    <td>数据 2</td>
  </tr>
</table>

运行：