html学习：
ok,今天准备学一下html，花费点时间整理一下：
HTML标签的语法格式
HTML 中的标签就像关键字一样，每个标签都有自己的语义（含义）。
HTML 标签的语法格式
属性↓
<div class="begin">cyx</div>↑ ↑ ↑
开始标签 内容 结束标签- 所有 HTML 标签都必须放在尖括号
< >内； - 如果使用了某个标签，则必须使用对应的结束标签来结尾（自闭合标签除外）。
- 自闭合标签：是在开始标签中添加
/来进行闭合。
<img src="./logo.png" alt="C语言中文网Logo" /> <!-- 图像 -->
<hr /> <!-- 分割线 -->
<br /> <!-- 文本换行 -->
<input type="text" placeholder="请输入内容" /> <!-- 文本输入框 -->属性
属性（Attribute） 是添加在 HTML 标签内部的额外信息，用于定义标签的特性、行为或配置，帮助浏览器理解如何解析和展示标签内容，或实现特定功能。
属性有专有属性和自定义属性两种：
专有属性：
<img src="./logo.png" alt="TEST_Logo" width="100" height="50">
<img> 标签中的 src 属性用来定义图像的路径，alt 属性用来定义图像的描述信息，当图像出现异常无法正常显示时就会显示 alt 中的信息。
<a href="http://baidu.com/" target="_blank">百度</a>
<a> 标签的 href 属性用来定义链接的地址，target 属性用来定义新页面在浏览器中的打开方式。自定义属性
除了自带的属性，HTML 也允许我们自定义属性，这些属性虽然可以被浏览器识别，但是并不会添加什么特殊效果，我们需要借助 CSS 和 JavaScript 处理自定义属性，为 HTML 标签添加指定样式或者行为。
通用属性
在 HTML 中，通用属性（Global Attributes） 是一类几乎所有 HTML 标签都能使用的属性 ，不局限于特定标签，主要用于定义标签的基础特性（如标识、样式、交互提示等），是构建网页时最常用的属性类别。
1.id
为标签定义「唯一标识」（整个页面内不能重复），常用于 JavaScript 精准操作单个标签
2.class
为标签定义「类名」，用于批量关联 CSS 样式（一个标签可多个类名，用空格分隔）或 JavaScript 选择器
3.title
鼠标悬浮在标签上时显示的「提示文本」，常用于补充说明（如链接用途、图片含义）
4.style
直接在标签内写「行内 CSS 样式」（优先级高于外部 CSS 和内部 CSS），用于快速设置单个标签样式
标题标签
标题标签（Heading Tags） 是用于定义网页中不同层级标题的标签，共分为 6 级，从最高级的 <h1> 到最低级的 <h6>
1.层级不可跳过：必须按 <h1>→<h2>→<h3>→…→<h6> 的顺序使用，不能跳过中间层级（如 <h1> 后直接写 <h3>）。跳过层级会破坏内容的逻辑关系，屏幕阅读器用户可能无法理解内容结构。
2.页面内 <h1> 唯一：一个 HTML 页面建议只包含 1 个 <h1>，用于概括页面核心主题（如博客文章的标题、产品详情页的产品名）。若出现多个 <h1>，会让搜索引擎无法判断页面重点，也会打乱内容结构。
3.可嵌套通用属性：标题标签支持所有 HTML 通用属性（如 class、id、title 等），可用于关联 CSS 样式、JavaScript 操作或添加提示信息。
代码：
<!DOCTYPE html>
<html>
<head><title>标题标签示例 - 我的旅行博客</title><style>/* 自定义标题样式（覆盖默认样式，不改变语义） */h1 { color: #2c3e50; font-size: 28px; margin-bottom: 10px; }h2 { color: #34495e; font-size: 24px; margin: 20px 0 10px; }h3 { color: #7f8c8d; font-size: 20px; margin: 15px 0 8px; }h4 { font-size: 18px; color: #95a5a6; }/* 通用样式 */body { max-width: 800px; margin: 0 auto; padding: 20px; }p { color: #333; line-height: 1.6; }</style>
</head>
<body><!-- 1级标题：页面核心主题（唯一） --><h1>我的云南大理5日旅行攻略</h1><!-- 2级标题：主要板块 --><h2>1. 旅行准备清单</h2><p>出发前需准备身份证、防晒霜、薄外套（大理昼夜温差大）...</p><!-- 3级标题：板块内子分类 --><h3>1.1 必备物品</h3><p>证件类：身份证、学生证（部分景点有优惠）...</p><!-- 4级标题：子分类下的细分 --><h4>1.1.1 衣物建议</h4><p>白天可穿短袖，晚上需加薄外套，鞋子推荐运动鞋（方便徒步）...</p><!-- 2级标题：另一主要板块 --><h2>2. 每日行程安排</h2><!-- 3级标题：子分类（每日行程） --><h3>2.1 第一天：抵达大理古城</h3><p>下午抵达大理站，乘坐公交到大理古城，晚上逛古城夜景...</p><!-- 5级标题：更细致的内容（如景点说明） --><h5>2.1.1 古城必吃美食</h5><p>推荐鲜花饼、烤乳扇、大理米线，可去古城人民路觅食...</p><!-- 6级标题：最底层说明性标题 --><h6>2.1.1.1 美食店推荐</h6><p>“大理粑粑店”：招牌粑粑外酥里嫩，人均10元...</p>
</body>
</html>注意：
- 不要用标题标签包裹非标题内容（如段落文本、图片），仅用于 “标题文本”；
- 避免为了追求视觉效果滥用标题标签（如用
<h1>包裹所有大字体文本）； - 配合 SEO：搜索引擎会优先抓取
<h1>内容，合理设置<h1>和其他标题的关键词，有助于提升页面搜索排名。 - 结合无障碍访问：标题层级清晰的页面，屏幕阅读器用户可通过 “跳转标题” 快速导航，提升体验；
段落标签
段落标签（<p> 标签） 是专门用于定义文本段落的标签，核心作用是将网页中的文本内容划分成独立、结构化的段落，让页面排版更清晰易读。浏览器会自动为 <p> 标签包裹的内容添加上下边距（默认间距），并在段落结束后自动换行，无需手动添加换行符（如 <br>）。
注意：浏览器内置的样式会在段落的上下自动添加一定的空白区域（外边距），您可以使用 属性来设置空白区域的大小。
1.嵌套文本格式化标签（如加粗、斜体、链接）
| 嵌套标签 | 作用 | 示例代码 |
|---|---|---|
<strong> | 文本加粗（强调语义） | <p>大理古城的<span><strong>白族民居</strong></span>极具特色，多为“三坊一照壁”结构。</p> |
<em> | 文本斜体（强调语义） | <p>洱海湖水清澈，<em>能见度可达10米以上</em>，是云南第二大淡水湖。</p> |
<a> | 文本链接 | <p>想要了解更多大理旅游攻略，可访问<a href="https://lyj.yunnan.gov.cn" target="_blank">云南省文化和旅游厅官网</a>。</p> |
<span> | 文本分组（用于样式） | <p>大理最佳旅游季节是<span style="color: #2563eb;">3-5月</span>和<span style="color: #2563eb;">9-11月</span>，气候最为舒适。</p> |
2.手动换行（<br> 标签）
若段落内需要强制换行（如诗歌、地址等特殊格式），可在需要换行的位置插入 <br> 单标签（注意：<br> 仅用于段落内换行，不能替代 <p> 划分段落）：
<p>大理著名诗句：<br>
“下关风，上关花，<br>
苍山雪，洱海月。”<br>
这四句诗概括了大理最具代表性的四大景观。</p>3.段落中的空白符
默认情况下，段落标签会对文本中的空白符进行合并，将多个连续的空白符显示为一个空格的效果，具体表现为：
- 如果段落中出现多个连续的空格，浏览器会忽略这些空格只保留一个；
- 如果段落中出现多个连续的换行，浏览器会将这些换行转换成一个空格。
文本格式化
文本格式化（Text Formatting） 是通过特定标签对文本进行样式或语义上的修饰，以突出重点、区分内容类型（如强调、引用、代码）或优化阅读体验。
HTML 中有许多用来格式化文本的标签，如下表所示：
一、语义化强调标签（突出内容重要性）
这类标签核心作用是传递「内容优先级 / 情感倾向」，不仅改变样式，还能被搜索引擎和屏幕阅读器识别，优先用于需要强调的核心信息。
| 标签 | 语义与作用 | 默认样式 | 适用场景 | 示例代码与效果 |
|---|---|---|---|---|
<strong> | 强强调：表示「非常重要」的内容 | 粗体（bold） | 警告、关键数据、核心结论 | <p>旅行前务必携带<strong>身份证和护照</strong>，否则无法入住酒店。</p>效果：旅行前务必携带身份证和护照，否则无法入住酒店。 |
<em> | 弱强调：表示「需要突出」的内容 | 斜体（italic） | 观点、语气强调、重点描述 | <p>这款咖啡的口感<em>格外醇厚</em>，适合喜欢浓郁风味的人。</p>效果：这款咖啡的口感格外醇厚，适合喜欢浓郁风味的人。 |
二、基础样式修饰标签（纯视觉调整）
这类标签仅控制文本视觉效果，无额外语义，适合纯装饰性需求（如标注缩写、区分普通文本），建议优先用 CSS 控制样式，仅在简单场景使用。
| 标签 | 语义与作用 | 默认样式 | 适用场景 | 示例代码与效果 |
|---|---|---|---|---|
<b> | 无语义：仅文本加粗 | 粗体（bold） | 标题内关键词、分类标注 | <p>产品分类：<b>电子产品</b> > 手机</p>效果：产品分类：电子产品 > 手机 |
<i> | 弱语义：表示「特殊标识」（非强调） | 斜体（italic） | 外文单词、符号、术语 | <p>缩写 <i>etc.</i> 源自拉丁语 <i>et cetera</i>（意为“等等”）。</p>效果：缩写 etc. 源自拉丁语 et cetera（意为 “等等”）。 |
<small> | 语义：表示「次要内容」 | 字体缩小（约 80%） | 版权信息、备注、补充说明 | <p>© 2025 我的网站 <small>保留所有权利隐私政策</small></p> |
<ins> | 语义：表示「新增 / 插入」的内容 | 下划线 | 修订文档、补充内容 | <p>会议时间：<ins>本周六下午2点</ins>（原时间：周五下午）</p>效果：会议时间：<ins>本周六下午 2 点</ins>（原时间：周五下午） |
<del> | 语义：表示「删除 / 废弃」的内容 | 删除线 | 价格修改、过时内容 | <p>原价：<del>299元</del> 现价：199元</p>效果：原价：<del>299 元</del> 现价：199 元 |
三、特殊位置文本标签（上下标）
专门用于数学公式、化学符号、引用标注等需要「特殊位置排版」的场景，语义明确且样式固定。
| 标签 | 语义与作用 | 默认样式 | 适用场景 | 示例代码与效果 |
|---|---|---|---|---|
<sup> | 上标：文本向上偏移缩小 | 字体缩小 + 上移 | 数学幂次、引用编号 | <p>勾股定理：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>效果：勾股定理：a² + b² = c² |
<sub> | 下标：文本向下偏移缩小 | 字体缩小 + 下移 | 化学公式、注释编号 | <p>水的化学式：H<sub>2</sub>O；硫酸：H<sub>2</sub>SO<sub>4</sub></p>效果：水的化学式：H₂O；硫酸：H₂SO₄ |
四、代码与技术文本标签（程序员专用）
针对代码、命令、变量等「技术类内容」设计，默认使用等宽字体（保证格式统一），语义精准，是技术文档的核心标签。
| 标签 | 语义与作用 | 默认样式 | 适用场景 | 示例代码与效果 |
|---|---|---|---|---|
<code> | 单行代码片段：变量、函数、语句 | 等宽字体 | 代码关键词、简短命令 | <p>定义变量：<code>let username = "小明";</code></p>效果：定义变量： let username = "小明"; |
<pre> | 多行代码 / 保留格式文本：代码块 | 等宽字体 + 保留空格 / 换行 | 代码段、日志输出 | <pre><code>function add(a, b) {<br> return a + b;<br>}</code></pre>效果：<pre><code>function add(a, b) { return a + b; }</code></pre> |
<kbd> | 表示「用户输入的键盘按键 / 命令」 | 等宽字体 + 浅背景 | 快捷键、终端命令 | <p>复制文本：按 <kbd>Ctrl + C</kbd>；粘贴：按 <kbd>Ctrl + V</kbd></p>效果：复制文本：按 <kbd>Ctrl + C</kbd>；粘贴：按 <kbd>Ctrl + V</kbd> |
<samp> | 表示「程序 / 系统的输出结果」 | 等宽字体 | 日志、报错信息、运行结果 | <p>程序输出：<samp>欢迎使用系统！当前用户：admin</samp></p>效果：程序输出：<samp>欢迎使用系统！当前用户：admin</samp> |
<var> | 表示「数学 / 公式中的变量」 | 斜体 + 等宽字体 | 公式变量、参数占位符 | <p>求根公式：对于方程 <var>ax</var><sup>2</sup> + <var>bx</var> + <var>c</var> = 0</p>效果：求根公式：对于方程 <var>ax</var>² + <var>bx</var> + <var>c</var> = 0 |
五、引用与标注标签（文献 / 说明专用）
用于引用外部内容、标注来源或解释术语，语义上明确 “内容归属”，帮助用户区分 “原创” 与 “引用”。
| 标签 | 语义与作用 | 默认样式 | 适用场景 | 示例代码与效果 |
|---|---|---|---|---|
<blockquote> | 长引用：段落级外部引用（如名言、文章片段） | 左右缩进 + 上下边距 | 引用大段文本（≥1 段） | <blockquote cite="https://example.com/article">旅行的意义不在于目的地，而在于沿途的风景和看风景的心情。</blockquote>效果：<blockquote>旅行的意义不在于目的地，而在于沿途的风景和看风景的心情。</blockquote> |
<q> | 短引用：行内级外部引用（如句子内引用） | 自动添加双引号 | 引用短句（≤1 句，嵌入段落） | <p>古人云：<q>读万卷书，行万里路</q>，正是旅行与学习的结合。</p>效果：古人云：“读万卷书，行万里路”，正是旅行与学习的结合。 |
<cite> | 标注「引用内容的来源」（如书名、作者） | 斜体 | 文献来源、作品名称 | <p>引用自 <cite>《人类简史》</cite>（尤瓦尔·赫拉利 著）</p>效果：引用自 <cite>《人类简史》</cite>（尤瓦尔・赫拉利 著） |
<abbr> | 标注「缩写词 / 简称」，鼠标悬浮显示全称 | 底部虚线（部分浏览器） | 专业术语、机构缩写 | <p>我们常用 <abbr title="HyperText Markup Language">HTML</abbr> 构建网页结构。</p>效果：我们常用 <abbr title="HyperText Markup Language">HTML</abbr> 构建网页结构（鼠标悬浮显示全称） |
<dfn> | 定义「术语 / 概念」，表示 “此处是术语解释” | 斜体（部分浏览器） | 技术术语、专业概念的首次定义 | <p><dfn>前端开发</dfn> 是指构建网页用户界面的开发工作，包括HTML、CSS、JavaScript。</p>效果：<dfn>前端开发</dfn> 是指构建网页用户界面的开发工作，包括 HTML、CSS、JavaScript。 |
六、特殊功能标签（方向 / 联系信息）
用于控制文本方向或标注联系信息，场景较特殊但实用性强。
| 标签 | 语义与作用 | 默认样式 | 适用场景 | 示例代码与效果 |
|---|---|---|---|---|
<address> | 标注「联系信息」（如作者、机构地址） | 斜体 | 网页底部作者信息、公司地址 | <address>作者：小明<br>邮箱：xiaoming@example.com<br>地址：北京市朝阳区</address>效果：<address>作者：小明 邮箱：xiaoming@example.com 地址：北京市朝阳区</address> |
<bdo> | 控制「文本显示方向」（双向文本） | 按方向反转文本 | 阿拉伯语、希伯来语等从右到左的语言 | <p>默认方向：Hello World</p><p>反转方向：<bdo dir="rtl">Hello World</bdo></p>效果：默认方向：Hello World 反转方向：<bdo dir="rtl">Hello World</bdo> |
区别
<strong>和<b>标签之间的区别
在 HTML 中，<strong> 和 <b> 标签都能让文本呈现 “加粗” 的视觉效果，但二者的语义（即标签传递的含义）和使用场景有本质区别，这直接影响网页的无障碍访问、SEO 优化和内容逻辑。
| 维度 | <strong> 标签 | <b> 标签 |
|---|---|---|
| 核心定位 | 「语义化标签」：传递 “内容重要性” | 「纯样式标签」：仅控制 “视觉加粗”，无额外语义 |
| 浏览器 / 工具识别 | 屏幕阅读器（无障碍工具）会用 “强调语气” 朗读，搜索引擎会标记为 “核心内容” | 仅改变外观，屏幕阅读器和搜索引擎不识别其特殊含义 |
| 本质目的 | 告诉用户 / 机器：“这段内容很重要，需要重点关注” | 仅告诉浏览器：“把这段内容显示成粗体”，不附加任何逻辑意义 |
<em>和<i>标记之间的区别
在 HTML 中，<em> 和 <i> 标签都能让文本呈现 “斜体” 的视觉效果，但二者的语义定位（传递的含义）和使用场景存在根本差异，直接影响内容逻辑、无障碍访问和机器对页面的理解。
| 维度 | <em> 标签 | <i> 标签 |
|---|---|---|
| 核心定位 | 「语义化强调标签」：传递 “内容需要被强调” 的逻辑含义 | 「弱语义标识标签」：标记 “特殊类型的文本”，无 “强调重要性” 的含义 |
| 浏览器 / 工具识别 | 屏幕阅读器会用 “语气加重、语速变化” 的方式朗读，让用户感知 “这段内容需要重点关注” | 屏幕阅读器按普通文本朗读（部分会提示 “特殊标识文本”），搜索引擎仅识别为 “特殊类型文本”，不视为 “核心重点” |
| 本质目的 | 告诉用户 / 机器：“这段内容在语境中有强调意义（如观点、情感、逻辑重点）” | 告诉用户 / 机器：“这段文本属于特殊类型（如外文、术语、符号）”，仅做 “分类标识”，不附加 “重要性” |
超链接标签<a>
超链接标签（<a> 标签，全称 Anchor anchor，意为 “锚点”） 是实现页面间跳转、链接外部资源或定位页面内锚点定位的核心标签，通过它可将分散的内容（如网页、图片、文档）关联起来，是构成互联网 “网状结构” 的基础。
<a> 标签的语法格式如下：
<a href="url" target="opentype">链接文本</a>其中，href 属性用来指明要跳转到的 url，target 属性用来指明新页面的打开方式，链接文本需要写在 <a> 和 </a> 之间。
1. 必选核心属性：href
href（Hypertext Reference，超文本引用）用于指定链接的目标地址，取值分 4 类常见场景：
| 目标类型 | href 取值格式 | 示例代码 |
|---|---|---|
| 外部网页 | 完整 URL（需包含 http:// 或 https://） | <a href="https://www.baidu.com" target="_blank">访问百度</a> |
| 内部网页 | 相对路径（基于当前页面的文件路径） | <a href="about.html">关于我们</a>（同文件夹下的 about.html） |
| 页面内锚点 | #锚点ID（需先在目标位置定义 id 属性） | <a href="#section1">跳转到第一部分</a>（目标位置：<div id="section1">...</div>） |
| 邮件 / 电话 | 特殊协议（mailto: 邮件 /tel: 电话） | <a href="mailto:service@example.com">发送邮件</a><a href="tel:10086">拨打10086</a> |
2. 常用可选属性
| 属性名 | 作用说明 | 取值与示例 |
|---|---|---|
target | 控制链接在 “哪个窗口 / 框架” 打开 | - _self（默认）：在当前窗口打开- _blank：在新窗口打开（推荐加 rel="noopener" 提升安全性）- _parent：在父框架打开（框架页场景）示例： <a href="https://github.com" target="_blank" rel="noopener">GitHub（新窗口）</a> |
rel | 定义当前页面与目标页面的 “关系”，提升安全性和语义 | - noopener：防止新窗口通过 window.opener 操控原窗口（配合 target="_blank" 搭配，必加！）- nofollow：告诉搜索引擎 “不传递当前页面权重到目标页面”（如外链广告）示例： <a href="https://ad.example.com" rel="nofollow noopener" target="_blank">广告链接</a> |
title | 鼠标悬浮在链接上时显示 “提示文本” | <a href="products.html" title="查看所有商品分类">商品列表</a>（鼠标悬浮显示 “查看所有商品分类”） |
download | 点击链接时 “下载目标资源”（而非跳转） | - 直接写属性：<a href="report.pdf" download>下载PDF报告</a>（默认用原文件名）- 指定新文件名： <a href="photo.jpg" download="我的照片.jpg">下载图片</a>（下载后文件名变为 “我的照片.jpg”） |
简单举个例子：
test.html:
<a href="https://www.baidu.com" target="_blank">访问百度</a>
<a href="about.html" target="_self" rel="noopener">关于我们</a>这里，当我们同级目录有该文件时，打开网页，点击，就会跳转到目标链接或文件。
插入图片：<img>标签
<img> 标签的语法格式如下：
<img src="url" alt="text">对属性的说明：
- src 是必选属性，它是 source 的简称，用来指明图片的地址或者路径。src 支持多种图片格式，比如 jpg、png、gif 等。src 可以使用相对路径，也可以使用绝对路径。
- alt 是可选属性，用来定义图片的文字描述信息。当由于某些原因（例如图片路径错误、网络连接失败）导致图片无法加载时，就会显示 alt 属性中的信息。
==========暂时更到这，有空再更===========
参考网站:HTML入门教程（非常详细） - C语言中文网