HTML基础标签全解析

原创于 2025-12-29 22:04:33 发布 · 743 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端专栏收录该内容

2 篇文章

订阅专栏

HTML标签-基础

文章目录

HTML标签-基础
@[toc]
`<!DOCTYPE>`
`<html>`
`<title>`
`<body>`
`<h1> to <h6>`
`<p>`
`<br>`
`<hr>`
``

`<!DOCTYPE>`

<!DOCTYPE> 是 HTML 中用于声明文档类型的标签。它通常出现在 HTML 文档的第一行，用于告诉浏览器当前页面采用的是哪种 HTML 版本。

常见用法：

<!DOCTYPE html>

这表示该文档使用的是 HTML5 标准。

在 HTML5 之前，每个 HTML 或 XHTML 版本都有很长很复杂的 DOCTYPE 声明，例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

作用：

帮助浏览器以正确的模式解析和渲染页面。
如果没有声明或声明错误，浏览器可能会以兼容模式解析页面，导致样式和脚本出现问题。

总结：
<!DOCTYPE> 不是一个 HTML 标签，而是一个声明，用于定义 HTML 文档的类型和规范版本。

`<html>`

<html> 标签用于定义一个 HTML 文档的根元素，是所有其他 HTML 标签的父级标签。所有网页内容都应该写在 <html>...</html> 标签之间。

作用：

标志文档开始和结束
页面最外层必须有 <html> 标签，用来告诉浏览器：这里是 HTML 文档。
包含所有网页内容
里面通常包含两个主要部分：
- <head>：文档头部，放元数据、标题、样式等。
- <body>：文档主体，放具体内容（文本、图片、表格等）。

示例：

基础-1

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>示例页面</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>这是我的第一个HTML页面。</p>
</body>
</html>

总结：

<html> 是所有 HTML 内容的根标签，必须有且只能有一个。
规范写法建议加上 <!DOCTYPE html> 声明，保证 HTML5 标准渲染。
一般会加上语言属性，如 <html lang="zh-CN">，表示中文页面。

`<title>`

<title> 标签用于定义网页的标题，显示在浏览器的标题栏或标签页上。它必须放在 <head> 标签内部。

作用：

浏览器标题栏显示
<title> 标签中的内容会显示在浏览器窗口的上方标签栏（或标题栏），方便用户辨认页面。
搜索引擎优化（SEO）
网页的 <title> 是搜索引擎重点抓取的信息之一，合理的标题有助于网页在搜索结果中获得更好的排名。

示例：

基础-2

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>我的第一个HTML页面</title>
</head>
<body>
<h1>欢迎访问我的网页</h1>
</body>
</html>

在浏览器中打开这个页面时，标签栏会显示“我的第一个HTML页面”。

注意事项：

<title> 标签必须放在 <head> 标签内，且每个页面只能有一个 <title>。
内容要简洁明了，突出网页主题，建议控制在30字符以内。
可以结合 SEO 优化关键词，让网页更容易被搜索到。

总结：

<title> 标签用于设置网页的标题，是用户和搜索引擎了解网页内容的第一窗口。正确使用有助于提升用户体验和搜索排名。

`<body>`

<body> 标签用于定义网页的主体内容，也就是用户在浏览器中实际可见的部分。所有页面的文本、图片、表格、列表、表单等内容都应该写在 <body>...</body> 标签之间。

作用：

网页的主要内容区域
<body> 标签包裹着网页中所有可见的内容，比如标题、段落、图片、链接、表格、视频、音频等。
与 <head> 区分
<head> 标签用于放置元信息（如标题、样式、脚本等），而 <body> 才是呈现给用户看的部分。

示例：

基础-3

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>网页主体示例</title>
</head>
<body>
  <h1>欢迎来到我的网站</h1>
</body>
</html>

注意事项：

每个 HTML 页面只能有一个 <body> 标签。
<body> 标签里的内容会真实显示在浏览器页面上。
样式和脚本通常通过 <head> 标签引入，但也可以在 <body> 内部嵌入。

总结：

<body> 是网页内容的容器，所有用户能看到的内容都应该写在 <body> 标签内部。正确使用 <body> 标签是构建规范网页结构的基础。

`<h1> to <h6>`

<h1> 到 <h6> 标签用于定义网页中的标题，用于对页面内容进行分级。<h1> 是最高级别的标题，依次递减，<h6> 是最低级别的标题。合理使用这些标签可以让网页结构更清晰，有助于SEO和无障碍访问。

作用：

分级标题结构
<h1> 到 <h6> 可以把网页内容分成不同的层级，方便用户快速了解页面结构。例如，主标题用 <h1>，章节标题用 <h2>，子标题用 <h3>，以此类推。
提升可访问性和SEO
搜索引擎和辅助设备（如屏幕阅读器）会根据标题层级理解网页内容，有助于提升搜索排名和无障碍体验。

示例：

基础-4

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>标题标签示例</title>
</head>
<body>
  <h1>网站主标题</h1>
  <h2>一级内容标题</h2>
  <h3>二级内容标题</h3>
  <h4>三级内容标题</h4>
  <h5>四级内容标题</h5>
  <h6>五级内容标题</h6>
  <p>以上分别展示了 <code>&lt;h1&gt;</code> 到 <code>&lt;h6&gt;</code> 的标题层级效果。</p>
</body>
</html>

注意事项：

每个页面建议只有一个 <h1>，用于主标题。
标题标签应按顺序使用，不要跳级（例如不要直接从 <h1> 跳到 <h4>）。
标题不仅仅是为了样式，更重要的是表达内容层级和语义。

总结：

<h1> 到 <h6> 标签是网页结构化和分级展示内容的重要工具。合理使用标题标签可以让网页内容更清晰、易读，同时有助于搜索引擎优化和提升用户体验。

`<p>`

<p> 标签用于定义网页中的段落，是最常用的文本排版标签之一。浏览器会自动在每个段落前后添加空白间距，使内容更清晰易读。

作用：

分隔文本内容
使用 <p> 可以将一段文本与其他内容区分开来，形成自然的分段效果，有助于内容结构化和美观展示。
便于样式控制
可以通过 CSS 针对 <p> 标签设置字体、颜色、间距等样式，让页面排版更加灵活。

示例：

基础-5

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>段落标签完整示例</title>
</head>
<body>
  <h1>欢迎来到我的网站</h1>
  <p>这是第一个段落，介绍网站的主要内容。</p>
  <p>这是第二个段落，补充更多详细信息。</p>
  <p>
    你可以在段落中使用<strong>加粗</strong>、<em>斜体</em>等标签丰富内容，也可以通过CSS设置段落样式。
  </p>
  <p>
    如果只想换行但不分段，可以使用<br>标签实现。例如：<br>这一行之后直接换行显示。
  </p>
</body>
</html>

注意事项：

<p> 标签内不允许嵌套其他块级标签（如另一个 <p>、<div>、<h1> 等）。
如果只换行但不分段，可以使用 <br> 标签。
浏览器会自动在 <p> 段落前后加间距，无需手动添加空行。

总结：

<p> 标签是网页排版中最基础的段落标签，用于标识和分隔文本内容，让页面结构更清晰、易于阅读。正确使用 <p> 标签，有助于提升网页的规范性和用户体验。

`<br>`

<br> 标签用于在网页中插入换行，是一个单标签（自闭合标签），没有闭合部分。在需要文本直接换行但不分段时使用 <br> 标签。

作用：

实现文本换行
当需要在同一个段落或文本中换行时，可以使用 <br> 标签。比如诗歌、通讯地址、歌词等场景。
提升排版灵活性
<br> 标签常用于不适合用段落分隔但需要换行的地方，让页面内容展示更符合实际需求。

示例：

基础-6

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>换行标签示例</title>
</head>
<body>
  <h1>个人信息</h1>
  <p>
    姓名：张三<br>
    电话：123456789<br>
    邮箱：zhangsan@example.com
  </p>
  <p>
    这是第一行。<br>
    这是第二行。
  </p>
</body>
</html>

注意事项：

<br> 只是换行，不会产生段落间距。
不建议在大段文本排版中频繁使用 <br>，更推荐用 <p> 标签分段。
在 HTML5 中，<br> 可以写作 <br> 或 <br />，推荐使用 <br>。

总结：

<br> 标签用于在文本中插入换行，适合需要直接换行的场景。合理使用 <br> 可以提升网页内容的表现力，但注意不要滥用，避免影响页面结构的语义性和可维护性。

`<hr>`

<hr> 标签用于在网页中插入水平分隔线，通常用来分隔内容、主题或章节。它是单标签（自闭合标签），没有闭合部分。

作用：

内容分隔
可以在页面中用水平线将不同部分或主题区分开，提升版面层次感和可读性。
美化页面结构
<hr> 标签可以作为视觉元素，使网页内容不显得单调，也能强调分隔的重要性。

示例：

基础-7

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>水平分隔线标签示例</title>
</head>
<body>
  <h1>我的网站</h1>
  <p>这是第一部分内容。</p>
  <hr>
  <p>这是第二部分内容，与上一部分用水平线分开。</p>
</body>
</html>

注意事项：

<hr> 只是插入一条水平线，不会影响内容的语义结构。
可以通过 CSS 设置线条的颜色、粗细、宽度等样式。
在 HTML5 中，推荐写作 <hr>，无需关闭标签。

总结：

<hr> 标签用于插入水平分隔线，帮助网页内容分区，提升视觉效果。合理使用 <hr> 能让页面结构更清晰、美观。

``

 用于定义 HTML 注释内容。注释内容不会被浏览器显示，仅供代码编写者阅读和参考。常用于代码解释、临时备注或屏蔽部分内容。

作用：

代码说明与备注
可以在 HTML 文件中添加解释说明，帮助自己或其他开发者理解代码结构、用途或特殊处理方式。
调试和屏蔽
临时不让一段代码显示，可以用注释标签将其包裹，方便调试和排查问题。

示例：

基础-8

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>HTML 注释示例</title>
</head>
<body>
  <h1>欢迎访问我的网站</h1>
  <!-- 这是一个注释，浏览器不会显示这段内容 -->
  <p>这里是页面正文。</p>
  <!--
    多行注释内容
    可以写一些开发说明
    或者暂时屏蔽某些标签
  -->
</body>
</html>