一、基础核心：HTML 标签（最接近 “指令” 的概念）
HTML 标签是用来 “标记 / 定义网页内容类型” 的核心语法，格式为 <标签名> 内容 </标签名>（双标签）或 <标签名 />（单标签），按功能可分为几大类：
1. 页面结构类标签（定义网页整体框架）
| 标签 | 作用 | 示例 |
|---|
<!DOCTYPE html> | 声明文档类型（HTML5 必备） | 放在页面第一行：<!DOCTYPE html> |
<html> | 网页根容器（所有内容的父标签） | <html lang="zh-CN">...</html> |
<head> | 网页头部（存放元信息，不显示） | <head>...</head> |
<title> | 网页标题（浏览器标签栏显示） | <title>我的网页</title> |
<body> | 网页主体（可见内容都放这里） | <body>页面内容</body> |
2. 文本内容类标签（定义文字展示形式）
| 标签 | 作用 | 示例 |
|---|
<h1>-<h6> | 标题（h1 最大，h6 最小） | <h1>一级标题</h1> |
<p> | 段落 | <p>这是一段文字</p> |
<br /> | 换行（单标签） | <p>第一行<br />第二行</p> |
<strong> | 加粗（强调重要性） | <strong>重点内容</strong> |
<em> | 斜体（强调语气） | <em>强调文字</em> |
<span> | 行内通用容器（包裹小段文本） | <span style="color:red">红色文字</span> |
3. 媒体 / 链接类标签（插入外部资源）
| 标签 | 作用 | 示例 |
|---|
<a> | 超链接 | <a href="https://www.baidu.com" target="_blank">百度</a> |
<img> | 插入图片（单标签） | <img src="logo.png" alt="网站logo" width="100" /> |
<audio> | 插入音频 | <audio src="music.mp3" controls></audio> |
<video> | 插入视频 | <video src="video.mp4" controls width="400"></video> |
4. 布局 / 容器类标签（HTML5 语义化）
| 标签 | 作用 | 示例 |
|---|
<div> | 块级通用容器（划分区域） | <div class="header">头部</div> |
<header> | 网页头部（语义化） | <header>导航+logo</header> |
<nav> | 导航栏（语义化） | <nav><a href="/">首页</a></nav> |
<section> | 页面区块（语义化） | <section>商品列表</section> |
<footer> | 网页底部（语义化） | <footer>版权信息</footer> |
5. 表单类标签（交互收集数据）
| 标签 | 作用 | 示例 |
|---|
<form> | 表单容器 | <form action="/submit" method="post">...</form> |
<input> | 输入框（单标签，type 控制类型） | <input type="text" placeholder="请输入姓名" /> |
<button> | 按钮 | <button type="submit">提交</button> |
<select> | 下拉选择框 | <select><option>选项1</option></select> |
<textarea> | 多行文本框 | <textarea rows="5">请输入内容</textarea> |
二、标签的 “配置项”：HTML 属性（给标签加规则）
属性是写在标签开头的 “键值对”，格式为 <标签名 属性名="属性值">，分为「全局属性」（所有标签都能用）和「专属属性」（仅特定标签可用）：
1. 全局属性（通用 “指令”）
| 属性名 | 作用 | 示例 |
|---|
class | 定义类名（用于 CSS/JS 选择） | <div class="box">...</div> |
id | 定义唯一标识（页面内唯一） | <p id="desc">...</p> |
style | 行内样式（直接写 CSS） | <span style="font-size:14px">...</span> |
title | 鼠标悬停提示文字 | <a href="#" title="点击跳转">链接</a> |
hidden | 隐藏元素 | <p hidden>隐藏的文字</p> |
lang | 定义元素语言 | <html lang="en">（英文页面） |
2. 专属属性（特定标签的 “指令”）
| 属性名 | 所属标签 | 作用 |
|---|
href | <a> | 链接目标地址 |
src | <img>/<audio>/<video> | 资源文件地址 |
alt | <img> | 图片加载失败时的替代文字 |
type | <input> | 定义输入类型（text/button/checkbox 等） |
action | <form> | 表单提交的后台地址 |
method | <form> | 表单提交方式（GET/POST） |
三、特殊语法（易被误认成 “指令”）
1. 注释语法（不执行、不显示，仅备注）
格式：<!-- 注释内容 -->示例：<!-- 这是头部导航区域 -->
2. 元信息标签（<meta>）—— 页面配置 “指令”
放在 <head> 中，定义网页元数据（编码、视口、关键词等），单标签：
html
预览
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="HTML, 教程, 标签">
四、核心注意事项
- HTML 标签不区分大小写（如
<P> 和 <p> 都生效），但规范要求小写；
- 单标签（如
<br>）在 HTML5 中可省略 /，但建议写全 <br /> 增强可读性；
- 属性值建议用双引号包裹（单引号也可，无引号不规范）；
- 所有标签必须正确嵌套（如
<p><strong>内容</p></strong> 是错误嵌套）。
