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语言中文网