HTML 标签及推荐嵌套结构
HTML 标签（语法）及推荐嵌套结构
1. HTML 标签基本语法
HTML 标签是构建网页的基础，用于定义页面的结构和内容，基本语法规则如下：
- 标签格式：由尖括号
<>包裹，分为双标签（闭合标签）和单标签（自闭合标签）。- 双标签：包含 opening tag（开始标签）和 closing tag（结束标签），内容位于两者之间。例：
<标签名>内容</标签名>（如<p>这是段落</p>）。 - 单标签：无需闭合，通常用于插入内容或功能性操作。例：
<img>（插入图片）、<br>（换行）、<input>（输入框）、<meta>（元数据）。
- 双标签：包含 opening tag（开始标签）和 closing tag（结束标签），内容位于两者之间。例：
- 属性：标签可添加属性，用于补充信息或配置行为，格式为
属性名="属性值"，写在开始标签中。例：<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 标签必须遵循嵌套规则，不能交叉嵌套，推荐结构如下：
-
根结构：
<!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>的直接子元素，且列表内部可嵌套其他列表：<ul><li>项目1</li><li>项目2<ol><li>子项目2-1</li></ol></li> </ul> -
表格嵌套：
<tr>必须在<table>内，<td>/<th>必须在<tr>内：<table><thead><tr><th>表头1</th><th>表头2</th></tr></thead><tbody><tr><td>数据1</td><td>数据2</td></tr></tbody> </table> -
语义化结构示例：
<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 元素的样式，基本语法由选择器和声明块组成：
-
语法结构：
选择器 {属性名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>标签内，作用于当前页面所有匹配元素。例：<head><style>p { color: gray; } /* 所有 <p> 标签应用此样式 */</style> </head> -
外部样式表：将 CSS 代码单独保存为
.css文件（如style.css），通过<link>标签引入 HTML，可作用于多个页面，是推荐方式。例：<!-- HTML 中引入 --> <head><link rel="stylesheet" href="style.css"> </head><!-- style.css 内容 --> body { font-family: sans-serif; }
5. 层叠与继承
- 层叠性：多个样式规则作用于同一元素时，按优先级生效（优先级：ID 选择器 > 类选择器 > 标签选择器；后定义的规则覆盖先定义的同名规则）。
- 继承性：子元素会继承父元素的某些样式（如
font-family、color），但盒模型属性（width、margin等）不会继承。
总结
- HTML 负责页面的结构和内容，核心是标签的语义化和正确嵌套，推荐使用
<header>、<article>等语义标签提升可读性。 - CSS 负责样式控制，通过选择器定位元素，用属性定义样式，推荐使用外部样式表实现样式与结构分离，便于维护和复用。两者结合可构建结构清晰、样式美观的网页。