跳到主要内容

HTML-标签

一、结构标签（7）​

示例项目：

my-page/
├── index.html
├── style.css
└── script.js

示例代码：

### 1.1 html

<html>: 定义整个 HTML 文档。常用 lang 属性指定语言（对搜索引擎和辅助技术有用）。

<html lang="zh-CN">

1.2 head（4）​

<head>: 定义文档的元数据（如标题、字符集、链接等）。通常不直接使用属性，直接嵌入如 <meta>、<title>、<link>、<script> 等标签。

meta​

<meta>: 提供页面元信息，通常用于 SEO、编码等。

<meta charset="UTF-8" />
<meta name="description" content="前端入门教程" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

title​

定义网页标题，在浏览器（顶部）标签页显示。

<title>我的网页</title>

用于引入外部资源（常见于加载 CSS），常用属性：

  • rel：定义资源关系（如 stylesheet）
  • href：资源地址
  • type：资源类型（如 text/css）
<link rel="stylesheet" href="style.css" />

script​

插入或引用 JavaScript 脚本，常用属性：

  • src：外部脚本地址
  • type：脚本类型（默认 text/javascript 可省略）
  • defer：延迟执行直到 HTML 解析完毕
  • async：异步加载脚本，不保证执行顺序
<script src="script.js" defer></script>

1.3 body​

网页的主题，在body中插入各种标签来展现网页内容。

<body>
    <h1>标题</h1>
    <p>
        内容
    </p>
</body>

二、文本标签（9）​

示例代码：

### h1 ~ h6

定义标题元素，从最大标题 <h1> 到最小标题 <h6>，常用属性：

  • id：用于定位或跳转锚点
  • class：配合 CSS 设置样式
<h2 id="intro" class="section-title">简介</h2>

p​

定义一个段落（自动带有上下间距），常用 class、id 属性。

<p class="text-muted">这是一段文字。</p>

br​

插入换行符（自闭合标签）

第一行<br>第二行<br />第三行

b​

定义无语义的粗体文本，一般只用于视觉强调，不传递语义信息。

<b>加粗</b>

i​

定义无语义的斜体文本，常用于术语、外文词汇。

<i>italic text</i>

u​

定义带下划线的文本（HTML5中建议少用，通常由CSS控制）

<u>下划线</u>

strong​

定义语义强调的文本，表现为粗体。建议优先使用 <strong> 代替 <b> 来表达重要性。

<strong>重要提示</strong>

em​

定义语义强调的文本，表现为斜体。建议优先使用 <em> 代替 <i> 来表达强调语气。

<em>请仔细阅读</em>

span​

用于内联容器无语义包装文本，常用于局部样式或脚本操作。常用class / id属性：配合 CSS 或 JS 操作。

<p>价格：<span class="highlight">¥199</span></p>

三、链接和媒体（5）​

示例代码：

### a

定义超链接，跳转到其他网页、锚点、文件或协议地址。

属性说明
href指定链接目标地址
target链接打开方式，如 _blank（新窗口）_self（在当前窗口跳转）
rel定义链接关系，如 nofollow、noopener
download下载链接的文件
<a href="https://example.com" target="_blank" rel="noopener">访问示例网站</a>

img​

用于插入图像（自闭合标签）

属性说明
src图片路径
alt图片无法加载时显示的文字（可访问性）
width图片宽度
height图片高度
loading延迟加载，如 lazy
<img src="logo.png" alt="网站 Logo" width="200" height="100" loading="lazy" />

audio​

嵌入音频播放器

属性说明
src音频文件路径
controls显示播放控件（必须）
autoplay自动播放（需配合静音）
loop播放结束后重新播放
muted静音
<audio src="music.mp3" controls loop></audio>

video​

用于嵌入视频播放器

属性说明
src视频路径
controls显示控制条
autoplay页面加载后自动播放（需 muted）
loop循环播放
muted静音播放
poster视频加载前显示的封面图
width/height控制播放器尺寸
<video src="demo.mp4" controls width="640" poster="cover.jpg"></video>

iframe​

嵌入外部网页、地图、视频等

属性说明
src要嵌入的网页地址
width/height设置 iframe 尺寸
title描述嵌入内容（用于辅助技术）
loadinglazy 表示懒加载
allow权限控制（如 fullscreen、autoplay）
sandbox限制嵌入页面的能力（增强安全性）
<iframe src="https://example.com" width="800" height="400" title="嵌入页面" loading="lazy"></iframe>

四、列表（3）​

示例代码：

  • <ul>: 定义无序列表。
  • <ol>: 定义有序列表。
  • <li>: 定义列表项。
  • <dl>: 定义定义列表（描述列表）。
  • <dt>: 定义定义列表中的术语。
  • <dd>: 定义定义列表中的描述。

ul​

无序列表。使用 CSS 设置样式。

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>李子</li>
</ul>

ol​

有序列表

属性说明
type设置编号样式：1（默认）、a、A、i、I
start指定起始编号，如 start="5" 从第5项开始编号
reversed反向排序（从大到小编号）
<ol type="A" start="3" reversed>
  <li>选项一</li>
  <li>选项二</li>
  <li>选项三</li>
</ol>

dl​

自定义列表。用于术语及其定义的展示，通常配合 <dt>（定义项）和 <dd>（定义描述）使用。

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
  <dt>CSS</dt>
  <dd>层叠样式表</dd>
</dl>

一般通过 CSS 控制缩进、排版。

五、表格​

示例：

嵌套关系：

table：表格
	thead: 表头
		th：表头单元格
	tbody：表格主体
		tr：行
			td：行中单元格
	tfoot：表格底部

表格边框的处理（合并内外border）：

<table style="border-collapse: collapse;" border="1">

合并单元格：第一，使用 rowspan、colspan合并，第二，减少数据。

六、表单​

  • <form>: 定义表单。
  • <input>: 定义输入字段。
  • <textarea>: 定义多行文本输入字段。
  • <button>: 定义按钮。
  • <select>: 定义下拉菜单。
  • <option>: 定义下拉菜单中的选项。
  • <label>: 定义表单元素的标签。

七、布局和分区​

  • <div>: 定义文档中的区块级元素，用于布局。
  • <span>: 定义行内元素，用于文本或小范围的内容。
  • <section>: 定义文档中的一个区域或部分。
  • <article>: 定义一个独立的内容区域，通常是一个独立的文章。
  • <header>: 定义文档的头部区域。
  • <footer>: 定义文档的底部区域。
  • <nav>: 定义导航链接区域。
  • <aside>: 定义旁边的内容，通常是与主内容相关的副本或侧边栏。

八、其他常用标签​

  • <hr>: 插入水平线。
  • <code>: 定义代码片段。
  • <pre>: 保留格式的文本，用于显示预格式化文本。
  • <blockquote>: 定义引用的内容。
  • <cite>: 定义引用的来源。
  • <mark>: 定义高亮文本。
  • <progress>: 显示进度条。
  • <meter>: 显示数值范围的可视化表示。

section 与 div 相似，但它有更进一步的语义。section 用作一段有专题性的内容，一般在它里面会带有标题。 section 典型的应用场景应该是文章的章节、标签对话框中的标签页、或者论文中有编号的部分。

标签闭合​

✅ 闭合标签

  • 概念：成对出现，有开始和结束，可以包裹内容

  • 语法：

    <标签名>内容</标签名>

  • 示例：

    <p>这是段落</p>
    <div>内容</div>

✅ 自闭合标签

  • 概念：单个标签，不需要结束，不能包裹内容

  • 语法：

    • HTML 写法：<标签名>
    • XHTML 写法：<标签名 />

  • 示例：

    <br>
    <img src="a.png" alt="图片">
    <input type="text">

哪些是自闭合标签：

标签说明
<br>换行
<hr>水平分隔线
<img>图片
<link>外部资源链接（如 CSS）
<meta>文档元信息（如字符集）
<source>媒体资源（配合 <audio> 或 <video> 使用）
<input>表单输入字段
<embed>嵌入外部资源（如音视频）
<col>定义表格列属性（配合 <colgroup> 使用）
<wbr>建议的换行位置
<base>设置所有链接的基准 URL
<track>为媒体元素提供文本轨道
<area>图像映射区域
最后于 更新