当前位置：首页 > news >正文

前端三件套简单学习：HTML篇1

news 2025/9/9 7:43:40

前端三件套简单学习：HTML篇1

前言

笔者最近打算展开研究一下前后端作为自己的兴趣爱好技术栈，这里笔者打算先打牢自己三件套的基本工，为后面自己出于兴趣进行学习其他的Web框架打下坚实的基础。

从HTML文件的结构说起

HTML文件是骨架，他直接决定了我们会在界面上看到什么。一个完整的 HTML 文件通常包含以下几个主要部分：

文档类型声明：<!DOCTYPE html>这个在我们传递HTML文件的时候，我们会看到这个文件是一个标准的HTML文件，方便我们后续展开对HTML文件的解析
<html> 根元素，通常带有 lang 属性声明文档语言，这个标签尝试声明这个HTML文件的其他属性问题，比如说当我们要求翻译的时候，我们察觉到这个文档不是中文的，就是依靠lang属性完成的
<head> 元素，用于放置元数据（metadata）
<body> 元素，包含所有可见内容（文本、图像、链接等）

这些标签和结构保证浏览器能够正确解析和呈现页面内容。

文档类型声明 `<!DOCTYPE html>`

一般而言，这是声明确认这是一个 HTML5 文档，有助于浏览器启用标准模式（避免“怪异模式”）

`<html>` 元素

是整个 HTML 文档的根。所有内容（除 <!DOCTYPE> 外）都应嵌套在它内部。通常使用 lang 属性指定页面所用语言，有利于辅助工具、搜索引擎与翻译服务识别

`<head>` 元素

此部分虽然不直接呈现于页面上，但极为重要，包含：

字符编码声明（如 <meta charset="utf-8">），确保文档中的字符（尤其是标题）能够正确显示
文档标题：通过 <title> 标签定义，显示在浏览器标签页、搜索结果中等
其他元数据：如 viewport 设置、描述、外部样式表链接、图标、关键词等

2.4 `<body>` 元素

包含网页所有可视内容：段落、标题、图片、链接、表格、表单等，我们一般的工作就集中在这里完成。

示例结构

<!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>这是一个标题</h1><p>这是一个段落。</p>
</body>
</html>

文档声明使页面声明为 HTML5。
<head> 中包含编码、视口设置、标题。
<body> 部分为页面可见内容。

Tips:笔者使用的VSCode写前后端，您可以安装LiveServer插件来完成这个HTML页面通过开设服务器的方式完成实时查看，这有助于我们的调试

HTML 标签概览：结构与语义分类

HTML 标签是 HTML 文档的基本构建块，用于定义内容和结构。常见标签按用途可以分为以下几大类：

基本结构标签（Basic Structure）

这些标签构成 HTML 文档的骨架：

<!DOCTYPE>：声明文档类型（如 HTML5），确保浏览器使用标准模式渲染
<html>：根元素，所有内容应嵌套于此
<head>：包含文档元数据，如编码、标题、链接引用等
<title>：定义页面标题，在浏览器标签页及搜索结果中显示
<body>：包含所有可见内容，如文本、图像、链接等

2. 文本与格式化标签（Text & Formatting）

用于控制文本内容与样式：

标题标签：<h1> 到 <h6>（依次递减为副标题）
段落标签：<p>，用于分段文本
强调与强调级别：<strong>（语义强调，通常加粗）、<em>（文本重点，通常斜体）
代码块：<code>、<pre>（保留空格与换行）
行内元素：<span>（用于行内内容加样式），<div>（块级容器）
其他：<br>（换行）、<hr>（主题分隔线）

3. 列表标签（Lists）

整理项目或定义：

无序列表：<ul> 包含 <li> 列表项
有序列表：<ol> 包含 <li> 项
描述列表：<dl> 包含 <dt>（术语）和 <dd>（描述）

4. 链接与导航（Links & Nav）

用于创建跳转与引用：

<a>：锚点，定义超链接，需使用 href 属性
<link>：用于关联外部资源（如 CSS 样式表）
<nav>：表示导航链接的语义区域

5. 媒体标签（Media）

嵌入音视频与图像：

图像：<img>，可添加 src, alt 等属性
媒体容器：<audio>、<video>，配合 <source> 和 <track> 标签使用
多媒体与图形：<canvas>（绘图）、<svg>（矢量图形）

6. 表格标签（Tables）

用于展示二维数据：

<table>：表格容器；
<thead>、<tbody>、<tfoot>：分别定义表头、主体、表尾；
<tr> 表格行、<th> 表头单元格、<td> 表体单元格；
<caption> 表格标题、<colgroup> 和 <col> 设置列属性

7.表单与交互输入（Forms & Inputs）

用于用户沟通和交互：

容器：<form>；
基础控件：<input>、<textarea>、<button>；
选项：<select>、<option>、<optgroup>；
辅助标签：<label>、<fieldset>、<legend>、<datalist>、<output>

8. 脚本与嵌入标签（Scripting & Embeds）

用于扩展功能与嵌入内容：

<script>：加载或嵌入 JavaScript；
<noscript>：浏览器不支持脚本时显示内容；
<object>、<embed>、<param>：嵌入外部内容（如插件）

HTML的Header标签

<h1> ~ <h6> 标签是 HTML 标题标签（Heading Elements）。

用于表示文档或内容中的标题，具有层级关系：

<h1> 表示最高级标题（最重要）。
<h6> 表示最低级标题（最不重要）。

它们既影响页面的视觉层次（通常浏览器会自动加粗，并逐级缩小字号），也具有 语义价值，帮助搜索引擎和辅助工具理解内容结构。

使用上如下，您可以复制到自己的HTML文件

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

在浏览器中，<h1> 会显示得最大，<h6> 最小。

特点

语义性强：不仅仅是字体大小不同，还表示结构层级。
SEO 影响：搜索引擎会重点抓取 <h1> 和 <h2>，因为它们通常代表页面主题和主要内容。
可访问性：屏幕阅读器会根据标题层级生成目录，方便用户快速跳转。

使用规范与最佳实践

一个页面 通常只使用一个 <h1>，用来表示网页的核心标题（如文章标题）。
<h2> ~ <h6> 可以根据需要多次使用，用来表示小节、副标题。
标题层级应 逐级嵌套，不要跳跃式使用（例如从 <h1> 直接到 <h4>）。
不要用标题标签来单纯改变字体大小，如果只是样式需求，应使用 CSS。

示例：文章结构

<h1>我的博客文章标题</h1>
<p>文章简介...</p><h2>第一章：HTML 基础</h2>
<p>介绍 HTML 的基本结构...</p><h3>1.1 文档声明</h3>
<p>说明 <!DOCTYPE html> 的作用...</p><h3>1.2 head 部分</h3>
<p>介绍 meta、title 等标签...</p><h2>第二章：HTML 标签</h2>
<p>详细说明常用标签...</p>

`<p>`、`<b>`、`<i>`、`<s>`、`<u>` 五个标签

我们下面进一步说明一下Paragraph的标签，这个标签包裹的就是一个段落，后面的四个标签依次对包裹的文字进行修饰

`<p>` — 段落（Paragraph）

定义与作用

表示文档中的一个段落，是一个块级（block-level）元素，用来承载“段落式”的文本或内联内容。

特点

会在前后产生换行（默认为块级布局）。
只能包含“短语内容”（phrasing content，例如文本、<a>、<strong>、<em>、<span> 等），不应直接包含其他块级元素（如另一个 <p>、<div>、<section> 等）。
当在源码中遇到另一个块级元素时，浏览器会自动关闭当前未闭合的 <p>。

示例

<p>这是一个段落。可以包含 <a href="#">链接</a>、<strong>强调</strong> 等行内元素。</p>

建议

用于组织文本内容，语义化比用 <div> 更好（便于可访问性与 SEO）。
控制间距、对齐等视觉效果应使用 CSS（margin、text-align 等）。

`<b>` — 视觉加粗（Bold, non-semantic）

定义与作用

表示样式性加重（通常表现为加粗），但在语义上并不表示强调或重要性。HTML5 将其定义为“无语义的括起文本，用于视觉突出但不传递强调含义”的标签（例如关键字、术语、产品名等的视觉突出）。

浏览器默认

文本加粗（font-weight: bold 的效果）。

可访问性 / 语义建议

如果你想表达“强调/重要”（即对内容有语义意义），应使用 <strong>（语义强调，会被屏幕阅读器识别）。
若只是为了视觉样式，使用 <b> 合理；但更推荐用 CSS（font-weight）以分离结构与表现。

示例

<p>价格: <b>$9.99</b></p>
<!-- 或用 CSS -->
<p>价格: <span class="price">$9.99</span></p>

`<i>` — 斜体（Italic, non-semantic）

定义与作用

表示样式性斜体，HTML5 将 <i> 用于标注“语气、术语、书名、外来词、技术用语或类似需要区分的文本”，但本身不代表强调（非语义强调）。

浏览器默认

文本斜体（font-style: italic 的效果）。

可访问性 / 语义建议

如果需要语义强调（强调发声或重要性），应使用 <em>，因为 <em> 会被屏幕阅读器识别为强调。
如果只是视觉效果或特定类型的文本（如术语、外来词），使用 <i> 合适；否则优先用 CSS。

示例

<p>书名：<i>小王子</i></p>
<p>外来词：这是个 <i>résumé</i></p>

`<s>` — 删除线 / 不再准确的内容（Strikethrough）

定义与作用

通常表示“已不再准确或已被删除/废弃的文本”，在视觉上呈现为删除线（strike-through）。HTML5 的语义是“内容不再正确或相关”。

和 <del> 的关系

如果你要表达“历史上被删除”或“编辑上移除的文本”并希望提供变更记录（可带时间信息），优先使用 <del>（可以加 datetime 属性）。
<s> 更适用于表示“视觉上的删除/不再适用”，但不一定表示有编辑历史。

示例

<p>原价：<s>$19.99</s> 现价：$9.99</p><!-- 如果确实是编辑删除且要记录时间 -->
<del datetime="2025-09-01">这句已删除的文字</del>

建议

对于表明“已废弃/不再适用”的内容，<s> 可以用；但若涉及版本/编辑历史，用 <del> 更语义化。

`<u>` — 下划线（Underline）

定义与作用

表示文本带下划线的样式。HTML5 重新定义 <u>：用于表示有“非语义的文本注解”或“拼写/语义需要下划线标识”的文本（不过常见用法仍是下划线样式）。

浏览器默认

文本带下划线（text-decoration: underline）。

可访问性 / 语义建议

避免用 <u> 仅仅为了样式（下划线通常与链接混淆），推荐使用 CSS（text-decoration）或更语义化元素（如表示“插入”的 <ins>）。
对于需要表示“被插入的文本”（语义上），使用 <ins>（可带 datetime）更合适。

示例

<p><u>重要标注</u></p><!-- 更推荐用 CSS -->
<p><span class="underline">重要标注</span></p>

小例子

<article><h1>产品更新</h1><p>我们的新型号售价为 <b>$299</b>，并且包含改进的电池技术（见下文的 <i>技术说明</i>）。</p><p>特别活动：原价 <s>$399</s>，现价 <b>$299</b>。</p><p>注：<u>产品颜色仅限黑色和银色</u>（仅视觉标注）。</p><p>注意：如果你想强调“重要性”，请使用 <strong>或</strong> <em>而不是</em> <b>/<i>。</p>
</article>

一句话说完

<p>：用来分段，块级语义标签。
<b> / <i>：主要用于视觉效果或特定类型文本（非语义强调）。屏幕阅读器通常不会把它们当作“强调”。
想表达“强调/重要”请用 <strong>（强调重要）或 <em>（语气强调）。
<s>：表示文本不再准确或已废弃；若需要记录删除时间或编辑历史，使用 <del>。
<u>：表示下划线样式或特定非语义注解；若只是样式，优先用 CSS；若是“插入”含义，请用 <ins>。

好——下面把 HTML 的 <ul>、<ol>、<li> 三个标签讲清楚：定义、用法、属性、嵌套、样式与无障碍（accessibility）注意点，并给出实战示例与常见误区。

列表标签

定义与语义

<ul>（unordered list）——无序列表，用于表示项之间没有先后顺序或顺序不重要的集合。默认显示圆点（bullet）。
<ol>（ordered list）——有序列表，用于表示有序序列（步骤、排名、顺序说明等）。默认显示数字（1., 2., 3.）。
<li>（list item）——列表项，必须作为 <ul> 或 <ol> 的直接子元素，用来表示单个条目。

语义很重要：浏览器、搜索引擎和辅助技术（屏幕阅读器）会把这些元素当作“列表”来处理，所以用于表示集合/步骤/多项条目时要用列表，而不要用一堆 <div> 或换行符模拟列表。

基本语法

<!-- 无序列表示例 -->
<ul><li>苹果</li><li>香蕉</li><li>橘子</li>
</ul><!-- 有序列表示例 -->
<ol><li>第一步：安装依赖</li><li>第二步：运行脚本</li><li>第三步：检查输出</li>
</ol>

`<ol>` 的常用属性（常见与实用）

start：设置起始数字（例如 start="3" 从 3 开始编号）。
reversed：布尔属性，表示倒序（例如 5,4,3…）。
在单个 <li> 上可以使用 value（数字）来强制该项的编号（只在 <ol> 中有意义）。

示例：

<ol start="3"><li>第三项（显示为 3）</li><li value="10">本项显示为 10</li><li>下一项显示为 11</li>
</ol><ol reversed><li>最后一步</li><li>倒数第二步</li>
</ol>

小贴士：尽量用 start / value 等属性仅为必要情形（如从特定编号继续）；常规样式变化用 CSS 来做。

嵌套列表（多级列表）

列表可以嵌套，常用于目录、子任务、分组条目。嵌套时，子列表放在父 <li> 内部：

<ul><li>前端<ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul></li><li>后端</li>
</ul>

浏览器会对不同层级使用不同的默认样式（例如第一层圆点，第二层圆圈或方块），但更好的做法是使用 CSS 明确控制。

无障碍（Accessibility）与语义建议

保持语义化：用 <ul>/<ol> 表示真正的列表。屏幕阅读器会读出“list with N items”，便于盲人理解页面结构。
在可交互的导航或菜单中，配合合适的容器（如 <nav>）和 ARIA（当需要自定义行为时）：
```
<nav><ul><li><a href="/home">首页</a></li>...</ul>
</nav>
```
避免把 <ul> 当作布局工具（不要把它用于纯视觉的网格排布而忽略语义）。
如果用 CSS 隐藏列表项或改变顺序，注意仍保持 DOM 中的语义顺序或提供屏幕阅读器可用的替代信息。

常见场景建议

步骤、流程、说明顺序：用 <ol>（有先后）。
项目集合、要点、特征列表：用 <ul>（无序）。
菜单、导航（结构化链接）：通常用 <ul> 放在 <nav> 中。
表格式数据不要用列表表示，用 <table>。

常见误区与避免

不要用 <ul>/<ol> 包裹非 <li> 子元素（应为直接子元素）。
不要只为外观使用列表：如果只是想缩进或加点样式，应考虑用语义更合适的标签配合 CSS。
不要滥用 start/value 来“造序号”，除非确实需要让浏览器输出特定编号；很多视觉编号问题用 CSS 计数器（CSS counters）更灵活且可控。

一句话总结

<ul>：无序列表（点符号），用于无先后关系的项目集合。
<ol>：有序列表（编号），用于有先后顺序的步骤或序列。支持 start、reversed、li value 等属性以控制编号。
<li>：列表项，必须放在 <ul> 或 <ol> 内。
用 CSS 控制展示样式；保持语义化以利于可访问性与 SEO。

HTML 表格（`<table>`、`<tr>` 等）标签

表格的基本概念与用途

HTML 表格用于展示二维表格数据（行×列）——例如财务报表、日程、数据列表等。不要用表格做页面布局（那是历史遗留做法），表格应主要用于表现结构化数据。

核心元素与作用

<table>：表格容器（整个表格）。
<caption>：表格标题（可选，但对可访问性非常重要）。
<thead>：表头区域（通常包含列标题）。
<tbody>：表体区域（数据行）。
<tfoot>：表尾区域（汇总行等，可放在源码末尾或表头之前以便打印友好）。
<tr>：表格行（table row）。
<th>：表头单元格（table header cell），通常用于列标题或行标题，语义上表示“表头”。
<td>：表体单元格（table data cell）。
<colgroup> / <col>：定义列组或单列属性（例如宽度、样式），便于统一控制列的样式或宽度。

常用属性（语义与布局）

rowspan（在 <td> / <th> 上）：跨越多行。例如 rowspan="2"。
colspan：跨越多列。例如 colspan="3"。
scope（在 <th> 上）：辅助说明该 <th> 的作用：scope="col"（列标题）、scope="row"（行标题）、scope="colgroup"、scope="rowgroup"。对屏幕阅读器友好。
headers（在 <td> 上）：可与带有 id 的 <th> 关联（更精确的无障碍映射，适用于复杂表格）。
<col> 支持 span 属性来合并列组设置。
全局属性也可用（如 class、id、data-* 等）。

无障碍（Accessibility）要点

表格常被辅助技术读取，下面是关键注意事项：

总要提供 <caption>（简短描述表格内容）。
为表头使用 <th>，并加上 scope（最简单且强烈推荐）。例如：
```
<th scope="col">姓名</th>
<th scope="row">合计</th>
```
对于复杂表格（多级表头、交叉表），使用 id 在 <th> 上并在相应 <td> 上用 headers="id1 id2" 显式关联。
避免用表格做布局；如果非数据表格而仅为布局（不含语义数据），考虑用 role="presentation" 或用 CSS 布局替代。
确保足够的键盘导航与对比度，若表格可排序、可展开，提供 ARIA 提示（例如 aria-sort 等）和清晰的可视焦点样式。

示例一：简单表格

<table><caption>2025 年第 3 季度销售</caption><thead><tr><th scope="col">产品</th><th scope="col">数量</th><th scope="col">金额</th></tr></thead><tbody><tr><td>产品 A</td><td>120</td><td>¥12,000</td></tr><tr><td>产品 B</td><td>80</td><td>¥8,000</td></tr></tbody><tfoot><tr><td>合计</td><td>200</td><td>¥20,000</td></tr></tfoot>
</table>

示例二：跨行跨列（`rowspan` / `colspan`）

<table><caption>班级考试成绩</caption><thead><tr><th scope="col">姓名</th><th scope="col">语文</th><th scope="col">数学</th><th scope="col">英语</th></tr></thead><tbody><tr><td rowspan="2">张三</td><td>85</td><td>90</td><td>88</td></tr><tr><td colspan="3">备注：该学生数学提高明显</td></tr></tbody>
</table>