首页 › HTML › HTML 基础 › 标签语法与全局属性

双标签与单标签

双标签（容器标签）

绝大多数 HTML 元素由开始标签 + 内容 + 结束标签组成：

<p>这是一个段落</p>
<h1>标题</h1>
<div>区块容器</div>
<strong>强调文本</strong>
<ul>
  <li>列表项</li>
</ul>

单标签（自闭合标签）

不包含内容，只用一个标签表示：

<br>        <!-- 换行 -->
<hr>        <!-- 水平分割线 -->
<img src="photo.jpg" alt="照片">
<input type="text">
<meta charset="UTF-8">

HTML5 中单标签可不写末尾的斜杠（<br> 和 <br/> 都合法）。

属性

属性为元素提供额外信息，写在开始标签中：

<!-- 基本格式：属性名="属性值" -->
<a href="https://example.com" title="点击访问示例网站">访问示例</a>
<img src="logo.png" alt="网站Logo" width="200" height="100">
<input type="text" name="username" placeholder="请输入用户名" maxlength="20">

多属性

<a href="https://example.com" target="_blank" rel="noopener" title="新窗口打开">
  在新窗口打开
</a>

多个属性用空格隔开，顺序不限。

布尔属性

有些属性不需要值，出现即表示 true：

<input type="checkbox" checked>       <!-- 默认选中 -->
<input type="text" disabled>           <!-- 禁用 -->
<button disabled>不能点击</button>
<video src="movie.mp4" controls autoplay loop></video>

也可以写成 disabled="disabled"，效果一样。

全局属性

全局属性是所有 HTML 元素都拥有的属性：

id

元素的唯一标识，页面内不可重复：

<nav id="main-nav">
  <!-- 导航菜单 -->
</nav>
<form id="login-form">
  <!-- 登录表单 -->
</form>

用途：CSS 选择器（#main-nav）、JS 获取（document.getElementById）、锚点跳转（#login-form）。

class

元素的类名，可重复，常用于分组：

<p class="warning">警告信息</p>
<p class="warning important">严重警告</p>  <!-- 多个类名用空格隔开 -->
<div class="card">卡片1</div>
<div class="card">卡片2</div>

title

鼠标悬停时的提示文本：

<p title="World Health Organization">WHO</p>
<a href="https://vuejs.org" title="Vue.js 官方网站">Vue</a>
<abbr title="HyperText Markup Language">HTML</abbr>

data-* 自定义属性

存储自定义数据，JavaScript 可通过 dataset 访问：

<button data-user-id="123" data-role="admin" onclick="showUser(this)">
  用户信息
</button>

function showUser(btn) {
  console.log(btn.dataset.userId)  // "123"
  console.log(btn.dataset.role)    // "admin"
}

其他常用全局属性

属性	作用	示例
hidden	隐藏元素（等价于布尔属性）	<div hidden>隐藏内容</div>
tabindex	Tab 键导航顺序	<input tabindex="1">
lang	元素的语言	<p lang="en">Hello</p>
style	内联样式（仅临时使用）	<p style="color:red;">文本</p>
dir	文字方向	<p dir="rtl">从右到左</p>

全局属性对照表

<div
  id="main"
  class="container active"
  title="主容器"
  data-type="page"
  lang="zh-CN"
  dir="ltr"
  tabindex="0"
  hidden
>
  拥有所有全局属性的 div
</div>

标签嵌套规则

块级元素 vs 内联元素

注意：HTML5 更强调内容模型而非 display 属性，但理解这个区别有助于正确嵌套。

类别	特点	常见元素	嵌套规则
块级	独占一行，可包含块级和内联	<div> <p> <h1> <ul> <table>	可嵌套内联元素
内联	不换行，只占内容宽度	<span> <a> <strong> <img> <input>	不可包含块级元素

<!-- ✅ 正确 -->
<div>
  <p>段落中的 <strong>强调</strong></p>
  <span>内联文本</span>
</div>

<!-- ❌ 错误：内联元素包裹块级元素 -->
<span>
  <p>不能把段落放在 span 中</p>
</span>

<!-- ❌ 错误：<p> 中不能套块级元素 -->
<p>
  <div>不能把 div 放在 p 中</div>
</p>

最常踩的坑：<p> 中套 <div>、<span> 中套 <p>。

注释

<!-- 这是一个注释，浏览器不会显示它 -->
<!--
  多行注释
  也是可以的
-->

<p>可见内容</p>
<!-- <p>被注释的代码不会显示</p> -->

快捷键：VSCode 中按 Ctrl + /（Mac: Cmd + /）快速注释/取消注释当前行。

小结

概念	要点
双标签	<p>内容</p>，可包含内容
单标签	<br> <img> <input>，自闭合
属性	写在开始标签内，名="值" 格式
布尔属性	出现即 true，如 disabled checked
id	唯一标识
class	类名（可重复、多个）
data-*	自定义数据属性
嵌套规则	块级可包含内联，内联不能包含块级

上一节：HTML 概述与文档结构 下一节：文本标签与列表

贡献者: 布欧-Lewyon