字段行居中（HTML基础语法）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三国演义</title>
</head>
<body><h1 style = "text-align: center;">目录</h1>
</body>
</html>style="text-align: center;" 这行代码的完整含义可以这样理解：
通过HTML的 style 属性，为某个HTML元素应用一条CSS规则，该规则将CSS的 text-align 属性的值设置为 center，从而使该元素内部的文本内容水平居中
style="text-align: center;
代码结构分解
1. style
这是一个 HTML 属性（Attribute）。
它的作用是为单个HTML元素（如此处的 <p> 标签）指定具体的样式规则。
2. =
赋值符号。
它将右边的样式规则（"text-align: center;"）赋予给左边的 style 属性。
3. "text-align: center;"
这是 style 属性的值，它必须被引号包裹。
引号内部包含的是一条或多条 CSS 声明（Declaration）。
我们再把这条CSS声明拆开来看：
4. text-align
这是一个 CSS 属性（Property）。
它用来定义元素内部文本的水平对齐方式。常见的属性还有 color (文字颜色), font-size (字体大小)等。
5. : (冒号)
分隔符。
它用于分隔CSS属性（Property）和它的值（Value）。可以理解为“将...设置为...”。
6. center
这是 text-align 属性的一个值（Value）。
它告诉浏览器，将文本内容设置为“居中对齐”。其他可选的值还包括 left (左对齐), right (右对齐)等。
7. ; (分号)
结束符。
它标志着一条CSS声明的结束。当我们需要在同一个 style 属性中定义多个样式时，分号就起到了分隔作用。例如：style="text-align: center; color: blue;"。
工作原理：HTML与CSS的结合
CSS（层叠样式表）的核心作用是为HTML元素添加样式。因此，任何CSS规则都必须有一个明确的目标。
HTML标签是目标：像 <p>, <h1>, <div> 这样的HTML标签，就是CSS样式的应用对象。
style 属性是桥梁：通过在HTML标签内部写入 style 属性，我们就建立了一座桥梁，告诉浏览器：“接下来的CSS规则，只对这一个标签生效。”
所以，“样式必须应用于HTML标签” 。没有HTML标签，CSS样式就失去了作用的目标。
以下是HTML中常用的标签及其作用，按功能分类整理：
基础结构标签
| 标签 | 作用 |
|---|---|
<!DOCTYPE html> | 声明文档类型为HTML5（必须放在第一行） |
<html lang="zh"> | 根元素，包裹整个页面内容；lang属性指定语言（如中文） |
<head> | 存储元数据、标题、样式表和脚本等非可视信息 |
<meta charset="UTF-8"> | 设置字符编码以确保中文正常显示 |
<title> | 定义浏览器标签页的标题（影响SEO） |
<body> | 包含所有可见内容的主体部分 |
文本与标题相关标签
| 标签 | 作用 |
|---|---|
<h1>~<h6> | 定义标题层级（语义化重要性递减），用于SEO优化和内容结构化 |
<p> | 段落容器，默认有上下边距 |
<span> | 行内元素，用于局部样式控制（无语义） |
<br> | 强制换行（空标签，无闭合） |
<hr> | 插入水平分割线 |
<pre> | 预格式化文本，保留空格和换行符 |
<blockquote> | 长引用块，常搭配cite属性标注来源 |
列表类标签
| 标签 | 作用 |
|---|---|
<ul> | 无序列表（默认用实心圆点标记项目） |
<ol> | 有序列表（支持数字或字母排序，可自定义起始值和方向） |
<li> | 列表项，必须嵌套在<ul>或<ol>中使用 |
<dl> | 定义列表，用于术语与其解释的配对展示 |
<dt> | 定义术语（与<dd>配对使用） |
<dd> | 术语的具体描述（缩进显示） |
媒体嵌入标签
| 标签 | 作用 |
|---|---|
<img src="..." alt="..."> | 插入图片；src指定路径，alt为替代文本（对可访问性和SEO至关重要） |
<a href="..."> | 创建超链接，支持内部跳转或外部URL；target="_blank"可在新标签页打开 |
<video controls> | 视频播放器，支持多种格式；controls显示播放控件 |
<audio controls> | 音频播放器，同样支持控制界面 |
<iframe src="..."> | 嵌入外部网页内容（需注意跨域策略限制） |
<picture> | 响应式图片适配不同设备屏幕尺寸 |
表格相关标签
| 标签 | 作用 |
|---|---|
<table border="1"> | 创建表格容器；border属性定义边框粗细 |
<tr> | 表格中的一行数据 |
<th> | 表头单元格（默认加粗居中） |
<td> | 普通数据单元格 |
<thead> | 表头区域分组 |
<tbody> | 主体数据区域分组 |
<tfoot> | 表尾汇总行分组 |
表单与交互标签
| 标签 | 作用 |
|---|---|
<form action="/submit" method="POST"> | 表单容器；action定义提交地址，method指定请求方法 |
<input type="text"> | 单行文本输入框；可通过type切换类型（如邮箱、密码等） |
<select> | 下拉选择菜单，需配合<option>使用 |
<option value="..."> | 下拉选项的具体值；selected可预设默认选中项 |
<textarea rows="4"> | 多行文本输入区域；rows/cols控制尺寸 |
<label for="..."> | 关联表单控件的标签，提升可访问性 |
<datalist> | 输入建议列表，绑定到<input>实现自动补全 |
<button> | 按钮控件，可用于提交表单或触发JavaScript事件 |
语义化标签（HTML5新增）
| 标签 | 作用 |
|---|---|
<header> | 页眉区域，通常包含Logo和导航栏 |
<footer> | 页脚区域，放置版权信息或联系方式 |
<article> | 独立的内容区块（如博客文章） |
<section> | 内容分组，建议搭配子标题使用 |
<nav> | 导航栏容器，存放主要链接集合 |
<aside> | 侧边栏，用于展示相关附加内容 |
高级功能标签
| 标签 | 作用 |
|---|---|
<canvas> | 绘图画布，需通过JavaScript动态操作 |
<svg> | 矢量图形容器，基于XML语法绘制形状 |
<progress value="70%"> | 进度条组件，直观显示任务完成比例 |
<meter> | 度量衡工具，表示范围值内的当前状态 |
<dialog open> | 模态对话框，通过JavaScript控制打开/关闭 |
<details> | 折叠内容区域，默认隐藏直到点击展开 |