HTML 标签及推荐嵌套结构

HTML 标签（语法）及推荐嵌套结构

1. HTML 标签基本语法

HTML 标签是构建网页的基础，用于定义页面的结构和内容，基本语法规则如下：

标签格式 ：由尖括号 <> 包裹，分为双标签 （闭合标签）和单标签 （自闭合标签）。
- 双标签：包含 opening tag（开始标签）和 closing tag（结束标签），内容位于两者之间。例：<标签名>内容</标签名>（如 <p>这是段落</p>）。
- 单标签：无需闭合，通常用于插入内容或功能性操作。例：<img>（插入图片）、<br>（换行）、<input>（输入框）、<meta>（元数据）。
属性：标签可添加属性，用于补充信息或配置行为，格式为 属性名="属性值"，写在开始标签中。例：<a href="https://example.com" target="_blank">链接</a>（href 定义链接地址，target 定义打开方式）。
语义化 ：优先使用有明确含义的标签（如 <header>、<nav>、<article>），而非纯样式标签（如 <b> 可替换为 <strong> 表示重要性），提升可读性和 SEO。

2. 常用 HTML 标签分类及示例

类别	常用标签	说明
文档结构	`<html>`、`<head>`、`<body>`	`<html>` 是根标签；`<head>` 存放元数据（如 `<title>`、`<style>`）；`<body>` 是可见内容区域。
标题与文本	`<h1>`-`<h6>`、`<p>`、`<br>`、`<strong>`、`<em>`	`<h1>`-`<h6>` 表示标题层级（h1 最粗）；`<p>` 是段落；`<strong>` 强调重要性（粗体）；`<em>` 表示强调（斜体）。
列表	`<ul>`、`<ol>`、`<li>`	`<ul>` 无序列表（默认圆点）；`<ol>` 有序列表（默认数字）；`<li>` 列表项（必须嵌套在 `<ul>`/`<ol>` 中）。
链接与媒体	`<a>`、`<img>`	`<a href="url">` 定义链接；`<img src="图片路径" alt="替代文本">` 插入图片（`alt` 用于加载失败时显示）。
表格	`<table>`、`<tr>`、`<td>`、`<th>`、`<thead>`、`<tbody>`	`<table>` 是表格容器；`<tr>` 表示行；`<td>` 表示单元格；`<th>` 是表头（默认加粗居中）；`<thead>`/`<tbody>` 区分表头和内容区域。
表单	`<form>`、`<input>`、`<button>`、`<select>`、`<textarea>`	用于用户输入，`<form action="提交地址" method="get/post">` 定义表单，`<input type="text">` 是输入框。
语义化容器	`<header>`、`<nav>`、`<main>`、`<article>`、`<section>`、`<footer>`	划分页面结构，提升可读性（如 `<header>` 表示页头，`<footer>` 表示页脚）。

3. 推荐的标签嵌套结构

HTML 标签必须遵循嵌套规则，不能交叉嵌套，推荐结构如下：

根结构：

html 复制代码

<!DOCTYPE html> <!-- 声明文档类型为 HTML5 -->
<html lang="zh-CN"> <!-- 根标签，lang 定义语言 -->
  <head> <!-- 元数据区域 -->
    <meta charset="UTF-8"> <!-- 字符编码 -->
    <title>页面标题</title> <!-- 浏览器标签页标题 -->
    <style>/* CSS 样式 */</style>
  </head>
  <body> <!-- 可见内容区域 -->
    <!-- 页面内容 -->
  </body>
</html>

列表嵌套 ：<li> 必须作为 <ul> 或 <ol> 的直接子元素，且列表内部可嵌套其他列表：
html 复制代码
```
<ul>
  <li>项目1</li>
  <li>项目2
    <ol>
      <li>子项目2-1</li>
    </ol>
  </li>
</ul>
```

表格嵌套 ：<tr> 必须在 <table> 内，<td>/<th> 必须在 <tr> 内：

html 复制代码

<table>
  <thead>
    <tr><th>表头1</th><th>表头2</th></tr>
  </thead>
  <tbody>
    <tr><td>数据1</td><td>数据2</td></tr>
  </tbody>
</table>

语义化结构示例：

html 复制代码

<header> <!-- 页头 -->
  <h1>网站标题</h1>
  <nav> <!-- 导航 -->
    <a href="/">首页</a>
  </nav>
</header>
<main> <!-- 主要内容 -->
  <article> <!-- 独立文章 -->
    <h2>文章标题</h2>
    <p>正文内容</p>
  </article>
</main>
<footer> <!-- 页脚 -->
  <p>版权信息</p>
</footer>

禁止交叉嵌套 ：❌ 错误：<p>这是<p>错误</p>嵌套</p>（<p> 不能嵌套 <p>）❌ 错误：<div><span></div></span>（交叉嵌套）

二、CSS 基本语法及应用

1. CSS 基本语法

CSS（层叠样式表）用于控制 HTML 元素的样式，基本语法由选择器 和声明块组成：

语法结构：
css 复制代码
```
选择器 {
  属性名1: 属性值1;  /* 声明1：控制元素的某一样式（如颜色、大小）*/
  属性名2: 属性值2;  /* 声明2 */
}
```
- 选择器：指定要样式化的 HTML 元素（如标签名、类、ID 等）。
- 声明块 ：用 {} 包裹，包含一个或多个声明，每个声明由 属性名: 属性值 组成，以分号 ; 结尾。
注释：用 /* 注释内容 */ 表示，不影响代码执行，用于说明逻辑。

2. 常用选择器

选择器类型	语法示例	说明
标签选择器	`p { color: red; }`	选中所有 `<p>` 标签。
类选择器	`.active { color: blue; }`	选中所有 `class="active"` 的元素（类名前加 `.`）。
ID 选择器	`#logo { width: 100px; }`	选中 `id="logo"` 的元素（ID 前加 `#`，页面中 ID 唯一）。
后代选择器	`div p { font-size: 14px; }`	选中 `<div>` 内的所有 `<p>`（无论嵌套层级）。
子选择器	`ul > li { list-style: none; }`	选中 `<ul>` 的直接子元素 `<li>`（仅一级嵌套）。
伪类选择器	`a:hover { color: teal; }`	选中鼠标悬停时的 `<a>` 标签（`:hover` 是伪类）。
群组选择器	`h1, h2 { margin: 0; }`	同时选中 `<h1>` 和 `<h2>`，共用样式。

3. 常用 CSS 属性

类别	常用属性及示例	说明
文本样式	`color: red;`（文本颜色）	支持颜色名（`red`）、十六进制（`#ff0000`）、RGB（`rgb(255,0,0)`）。
	`font-size: 16px;`（字体大小）	单位：`px`（像素）、`pt`（点）、`em`（相对父元素）。
	`font-family: sans-serif;`（字体）	如 `Arial`、`"Microsoft YaHei"`，优先使用无衬线字体。
	`text-align: center;`（文本对齐）	`left`（左对齐）、`center`（居中）、`right`（右对齐）。
盒模型	`width: 200px;`（宽度）、`height: 100px;`（高度）	控制元素的宽高。
	`margin: 10px;`（外边距）	元素与其他元素的间距（`margin: 上右下左`）。
	`padding: 5px;`（内边距）	元素内容与边框的间距。
	`border: 1px solid #333;`（边框）	`宽度样式颜色`（如 `solid` 实线、`dashed` 虚线）。
背景	`background-color: #f0f0f0;`（背景色）	设置元素背景色。
	`background-image: url("bg.jpg");`（背景图）	引用图片作为背景。

4. CSS 的应用方式

CSS 有三种应用方式，优先级为：内联样式 > 内部样式表 > 外部样式表 （除非使用 !important 强制提升优先级）。

内联样式 ：直接写在 HTML 标签的 style 属性中，仅作用于当前标签。例：<h1 style="color: orange; text-align: center;">标题</h1>缺点：复用性差，不利于维护。
内部样式表 ：写在 <head> 中的 <style> 标签内，作用于当前页面所有匹配元素。例：
css 复制代码
```
<head>
  <style>
    p { color: gray; } /* 所有 <p> 标签应用此样式 */
  </style>
</head>
```
外部样式表 ：将 CSS 代码单独保存为 .css 文件（如 style.css），通过 <link> 标签引入 HTML，可作用于多个页面，是推荐方式。例：
css 复制代码
```

<head>
  <link rel="stylesheet" href="style.css">
</head>


body { font-family: sans-serif; }
```

5. 层叠与继承

层叠性：多个样式规则作用于同一元素时，按优先级生效（优先级：ID 选择器 > 类选择器 > 标签选择器；后定义的规则覆盖先定义的同名规则）。
继承性 ：子元素会继承父元素的某些样式（如 font-family、color），但盒模型属性（width、margin 等）不会继承。

总结

HTML 负责页面的结构和内容，核心是标签的语义化和正确嵌套，推荐使用 <header>、<article> 等语义标签提升可读性。
CSS 负责样式控制，通过选择器定位元素，用属性定义样式，推荐使用外部样式表实现样式与结构分离，便于维护和复用。两者结合可构建结构清晰、样式美观的网页。