HTML常用标签详解：构建网页的基础-CSDN博客

本文链接：https://blog.csdn.net/2401_88004468/article/details/143346050

在当今数字化时代，网页已经成为我们获取信息、交流互动的重要平台。而HTML（超文本标记语言，HyperText Markup Language）作为网页构建的基础语言，扮演着至关重要的角色。通过一系列标签，HTML能够定义网页的结构和内容。本文将介绍一些HTML中常用的标签，帮助初学者快速上手，同时也为有一定基础的开发者提供一份参考。

1. `<!DOCTYPE html>`

一切从声明开始。<!DOCTYPE html>位于HTML文档的最顶部，用于告诉浏览器当前文档使用的是HTML5标准。这是一个非常重要的标签，因为它确保了浏览器以标准模式渲染页面。

2. `<html>`

<html>标签是HTML文档的根元素，所有其他元素都是其子元素。它包含了整个网页的内容，通常与</html>标签一起使用，形成文档的开头和结尾。

<!DOCTYPE html>  
<html>  
</html>

3. `<head>`

<head>标签内包含了文档的元数据（meta-data），如标题、字符集声明、样式表链接、脚本引用等。虽然这部分内容不会直接显示在网页上，但对于网页的显示和功能至关重要。

<head>  
    <title>我的网页</title>  
    <meta charset="UTF-8">  
    <link rel="stylesheet" href="styles.css">  
</head>

4. `<title>`

<title>标签定义了网页的标题，这个标题会显示在浏览器的标签页上。它不仅有助于用户识别当前页面，也是搜索引擎优化（SEO）的一部分。

<title>我的网页</title>

5. `<meta>`

<meta>标签提供了关于HTML文档的元数据，如字符集、作者信息、页面描述等。<meta charset="UTF-8">是最常见的用法之一，指定了文档使用的字符编码。

<meta charset="UTF-8">

6. `<link>`

<link>标签用于链接外部资源，最常见的是CSS样式表。它告诉浏览器去加载并应用指定的样式表。

6. <link>
<link>标签用于链接外部资源，最常见的是CSS样式表。它告诉浏览器去加载并应用指定的样式表。

7. `<body>`

<body>标签包含了网页的主体内容，即用户会在浏览器中看到的内容。所有可见的文本、图像、链接等都应放在<body>标签内。

<body>  
    <h1>欢迎来到我的网页</h1>  
    <p>这是一个段落。</p>  
</body>

8. 文本格式化标签

<h1>到<h6>：定义标题，<h1>是最高级别的标题，<h6>是最低级别的标题。
<p>：定义段落。
<strong>和<b>：使文本加粗，<strong>表示重要性，而<b>仅表示视觉上的加粗。
<em>和<i>：使文本斜体，<em>表示强调，<i>表示斜体效果。
<u>：为文本添加下划线。
<br>：换行符，用于在文本中插入换行。

<hr>：水平线，用于分隔内容。

8. 文本格式化标签
<h1>到<h6>：定义标题，<h1>是最高级别的标题，<h6>是最低级别的标题。
<p>：定义段落。
<strong>和<b>：使文本加粗，<strong>表示重要性，而<b>仅表示视觉上的加粗。
<em>和<i>：使文本斜体，<em>表示强调，<i>表示斜体效果。
<u>：为文本添加下划线。
<br>：换行符，用于在文本中插入换行。
<hr>：水平线，用于分隔内容。

9. 列表标签

<ul>：无序列表（Unordered List）。
<ol>：有序列表（Ordered List）。

<li>：列表项（List Item），用于<ul>和<ol>内部。

<ul>  
    <li>苹果</li>  
    <li>香蕉</li>  
    <li>橙子</li>  
</ul>  
  
<ol>  
    <li>第一步</li>  
    <li>第二步</li>  
    <li>第三步</li>  
</ol>

10. 链接和图像

<a>：锚标签，用于创建超链接。
<img>：图像标签，用于嵌入图像。

<a href="https://www.example.com">访问示例网站</a>  
  
<img src="image.jpg" alt="描述图像的文字">

11. 表格标签

<table>：定义表格。
<tr>：表格行（Table Row）。
<td>：表格单元格（Table Data）。
<th>：表格头部单元格（Table Header），通常用于定义列标题。

11. 表格标签
<table>：定义表格。
<tr>：表格行（Table Row）。
<td>：表格单元格（Table Data）。
<th>：表格头部单元格（Table Header），通常用于定义列标题。

12. 表单标签

<form>：定义表单，用于用户输入。
<input>：输入控件，可以是文本、密码、按钮等。
<label>：为表单控件定义标签。
<textarea>：多行文本输入控件。
<button>：按钮控件。

<select>和<option>：下拉菜单。

<form action="/submit" method="post">  
    <label for="name">姓名：</label>  
    <input type="text" id="name" name="name">  
      
    <label for="age">年龄：</label>  
    <input type="number" id="age" name="age">  
      
    <button type="submit">提交</button>  
</form>