字段行居中（HTML基础语法）

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>`	折叠内容区域，默认隐藏直到点击展开