HTML网页基本结构
HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础，其核心结构由固定的标签组成，浏览器通过解析这些标签来渲染页面。
html
<!DOCTYPE html> <!-- 声明文档类型为HTML5 -->
<html lang="zh-CN"> <!-- 根标签，lang指定页面主要语言（如zh-CN为中文） -->
<head> <!-- 头部：存放页面元数据（不直接显示在页面上） -->
<meta charset="UTF-8"> <!-- 声明字符编码（避免中文乱码） -->
<title>网页标题</title> <!-- 页面标题（显示在浏览器标签页） -->
</head>
<body> <!-- 主体：存放页面可见内容（文本、图片、链接等） -->
这里是网页内容... <!-- 如段落、标题、按钮等 -->
</body>
</html>一. 文档结构标签（搭建网页骨架）
：声明HTML5文档类型（必写第一行）。 ：根标签，包裹整个网页内容（lang指定语言，如zh-CN）。 ：头部，存元数据（不直接显示），如字符编码、标题、CSS/JS引入。 ：主体，存可见内容（文本、图片、链接等）。
- 元数据标签（描述页面信息，不显示）
：定义元数据（如charset="UTF-8"设编码，name="viewport"适配手机）。
：页面标题（显示在浏览器标签页，SEO关键）。 ：引入外部资源（如CSS文件：rel="stylesheet" href="style.css"）。 ）。
- 语义化结构标签（定义内容逻辑，替代无意义div）
：页面/区块头部（如logo、标题）。 ：导航栏（菜单、链接组）。 ：页面核心内容（唯一）。 ：独立内容块（如博客文章、新闻）。 ：主题性区块（如"产品介绍"板块）。 ：侧边栏（如相关链接、广告）。
：页面/区块底部（版权、联系方式）。
- 文本标签（定义文本结构与样式）
标题：
<h6>（一级六级标题，
最重要，SEO优先）。
段落：
（普通文本段落）。
换行：
（强制换行，单标签）。
强调：（重要文本，粗体）、（强调文本，斜体）。
引用：
（长引用，缩进）、 （短引用，加引号）。
列表：
无序列表：
-
- （项目符号）。
有序列表：
-
- （数字序号）。
定义列表：
:
（解释）。
- 媒体与嵌入标签（插入图片、音视频等）
图片：（单标签，src设路径，alt设替代文本）。
音频：（ controls显示播放控件，src设音频路径）。
视频：（ controls显示播放控件，src设视频路径）。
嵌入网页：（在当前页嵌入其他网页，如地图、视频）。
- 链接与交互标签（实现跳转与交互）
超链接：（href设跳转地址，target="_blank"新窗口打开）。
按钮：（可点击按钮，需配合JS实现功能）。
输入框：（单标签，type设类型：text文本、password密码、submit提交）。
表单：（包裹输入框，action设提交地址，method设提交方式get/post）。
- 表格标签（展示二维数据）
：表格容器。 ：表格行。 ：单元格（普通数据）。 ：表头单元格（加粗居中）。 # 二.文本结构标签 作用：定义文本的层级结构和逻辑关系（让内容有"主次、顺序、分组"），而非单纯控制样式（样式交给CSS）。
- 标题标签：定义内容层级（重要性从高到低）
~
：一级~六级标题（一个页面建议只1个
，SEO核心）。
示例：
主标题
章节标题
小节标题
- 段落与换行：组织文本块
：普通文本段落（自动换行，前后留白）。
示例：
这是一段文字...
：强制换行（单标签，无内容，用于诗句、地址等需手动换行处）。
示例：第一行
第二行
- 文本强调：突出内容重要性
：重要内容（语义"强强调"，默认粗体，SEO权重更高）。
示例：**注意：**此处必填
：语气强调（语义"斜体强调"，默认斜体，表语气而非绝对重要）。
示例：他说今天下雨
- 引用标签：区分原创与引用内容
：长引用（独立块，默认缩进，如引用文章段落）。
示例：
书籍是人类进步的阶梯
：短引用（行内引用，自动加引号，如对话、短语）。
示例：他说：明天见
- 列表标签：有序/无序分组内容
无序列表（无顺序，项目符号）：
-
- （list item）。
示例：
html
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>有序列表（有顺序，数字/字母序号）：
-
- 。
示例：
html
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>三.容器布局标签
作用：用语义化标签划分页面区域，让结构清晰、易维护，替代无意义的
，兼顾SEO和无障碍访问。
- 核心语义化容器（按页面区域分）
：页面/区块的"头部"
用途：放logo、主导航、页面主标题（如网站顶部通栏）。
：导航栏
用途：菜单、链接组（如顶部导航菜单、侧边栏目录）。
：页面核心内容（唯一）
用途：文章正文、产品列表、主要功能模块（页面独有的核心部分）。
：独立内容块
用途：可复用的独立内容（如博客文章、新闻卡片、评论区）。
：主题性区块
用途：有明确主题的板块（如"产品介绍""用户评价""服务流程"）。
| ：侧边栏（辅助内容）
用途：与主内容弱相关的辅助信息（如相关链接、广告、热门推荐）。
：页面/区块的"底部"
用途：版权信息、联系方式、备案号（如网站底部通栏）。
- 通用布局容器
：无语义的通用容器
用途：纯布局分组（无明确语义时用），常与CSS配合实现复杂布局（如栅格、弹性盒子）。
：行内容器
用途：包裹部分文本（不影响换行），用于局部样式或JS操作（如高亮某段文字）。
- 布局核心逻辑
语义优先：优先用
/ /等有明确含义的标签，让代码结构"自解释"（一看标签就知道区域用途）。
层级清晰：容器可嵌套（如 里放多个
， 里放 ）。
避免滥用：不过度用
（否则成"div soup"），无合适语义标签时才用
兜底。
四.多媒体标签
作用：在网页中嵌入图片、音频、视频、地图等外部资源，让内容更丰富。
- 图片标签
：插入静态图片（单标签，无结束标签）。
核心属性：
src：图片路径（必填，如 src="images/cat.jpg"）。
alt：图片加载失败时显示的替代文本（必填，无障碍/SEO友好）。
width/height：图片宽高（可选，单位px或百分比）。
示例：
- 音频标签
：嵌入音频（支持MP3、WAV、OGG格式）。
核心属性：
src：音频路径（必填）。
controls：显示播放控件（播放/暂停、进度条，必加！否则用户无法操作）。
autoplay：自动播放（多数浏览器禁用，不推荐）。
loop：循环播放。
示例：
- 视频标签
：嵌入视频（支持MP4、WebM、Ogg格式）。
核心属性：
src：视频路径（必填）。
controls：显示播放控件（同音频）。
width/height：视频宽高。
poster：视频加载前显示的封面图（如 poster="cover.jpg"）。
示例：
- 嵌入网页/第三方内容
：在当前页嵌入其他网页（如地图、视频、第三方插件）。
核心属性：
src：嵌入的网页地址（必填，如地图链接、B站视频嵌入代码）。
width/height：嵌入区域大小。
frameborder：是否显示边框（0为无边框）。
示例：
五.表格表单标签
一、表格标签（展示二维数据，如成绩单、价格表）
核心逻辑：用"行+列"组织数据，标签嵌套形成二维结构。
：表格容器（最外层，包裹所有表格内容）。 ：表格行（table row，定义一行）。 ：表头单元格（table header，加粗居中，通常作列标题）。 ：普通单元格（table data，存放具体数据）。
示例：
html
<table border="1"> <!-- border加边框（实际用CSS控制） -->
<tr> <!-- 第1行：表头 -->
<th>姓名</th>
<th>成绩</th>
</tr>
<tr> <!-- 第2行：数据 -->
<td>小明</td>
<td>90</td>
</tr>
</table>二、表单标签（收集用户输入，如登录、注册）
核心逻辑：用"输入框+按钮"收集数据，提交到服务器。
：表单容器（包裹所有输入项，action设提交地址，method设提交方式get/post）。
：核心输入控件（单标签，type指定类型）：
type="text"：单行文本框（如用户名）。
type="password"：密码框（输入隐藏）。
type="email"：邮箱框（自带格式校验）。
type="checkbox"：复选框（多选，如"爱好"）。
type="radio"：单选框（单选，需同name属性分组）。
type="submit"：提交按钮（触发表单提交）。
：关联输入框（点击文字也能聚焦输入框，提升体验）。
：多行文本框（如留言、备注）。 +：下拉选择框（select是容器，option是选项）。 示例： ```html 用户名：
密码：
男 女
``` ## 六.特殊功能标签 作用：实现页面特殊交互、功能或语义补充，弥补基础标签无法覆盖的场景（如分隔、注释、代码展示等）。 1. 页面分隔与装饰
：水平分隔线（单标签，在页面中插入一条横线，用于分隔不同内容块）。 示例：
上文内容
下文内容
2. 代码与预格式化文本
：预格式化文本（保留文本中的空格、换行和缩进，原样显示，常用于展示代码）。
示例：
```html
function hello() {
console.log("Hello World");
} <code>：代码片段（行内或小范围代码，默认等宽字体，常嵌套在<pre>中）。
示例：用 <code>console.log()</code>打印日志
3. 注释标签（不显示在页面）
<!-- 注释内容 -->：给代码加备注（浏览器解析时忽略，仅开发者可见，用于说明逻辑）。
示例：<!-- 这是导航栏区域 -->
4. 元信息与功能增强
<meta>：定义页面元数据（单标签，无结束标签，控制页面行为/SEO）：
charset="UTF-8"：声明字符编码（必写，防中文乱码）。
name="viewport" content="width=device-width, initial-scale=1.0"：适配手机屏幕（响应式必备）。
name="description" content="页面描述"：SEO描述（搜索引擎抓取摘要）。
5. 特殊语义补充
<mark>：标记文本（高亮显示，默认黄色背景，用于强调重点）。
示例：<p>记住<mark>截止日期是周五</mark></p>
<small>：小号文本（默认字体缩小，用于注释、版权声明等次要信息）。
示例：<p>版权所有<small>©2024</small></p>
<del>：删除文本（默认带删除线，表示内容已失效）。
示例：<p>原价<del>999元</del>，现价599元</p>
<ins>：插入文本（默认带下划线，表示新增内容）。
示例：<p>新增<ins>会员专属福利</ins></p>
6. 交互与功能扩展
<details>+<summary>：折叠面板（点击展开/收起内容，原生交互无需JS）：
<summary>：面板标题（必写，点击触发展开）。
<details>：面板容器（包裹展开后的内容）。
示例：
```html
<details>
<summary>点击查看详情</summary>
<p>这里是折叠的详细内容...</p>
</details>