IMPYLH的博客

本文系统介绍了 HTML <table>基本结构：<table>、<tr>、<th>、<td>语义化标签：<thead>、<tbody>、<tfoot>colspan与rowspan常用属性及 CSS 美化方案响应式表格与可访问性优化掌握这些内容后，你就能在项目中灵活运用表格来展示各种结构化数据。建议在实际开发中优先使用 CSS 控制样式，并始终关注表格的语义化和可访问性，让网页对更多用户友好。

tr>是 HTML 中用于定义表格行的标签，全称是Table Row（表格行）。它必须作为 <table>或 <thead>、<tbody>、<tfoot>的直接子元素使用，用来包裹一行中的单元格。一个 <tr>元素内部通常包含若干个 <td>（标准单元格）或 <th>（表头单元格），它们共同构成表格的一行。<tr>是构建 HTML 表格的核心行标签，配合 <td>、<th>以及 <thead>、<tbody>、<tfoot>分组，可以清晰、语义化地组织表格数据。

th>（Table Header Cell，表头单元格）是 HTML 表格中用于定义表头单元格的元素。它通常出现在表格的第一行或第一列，用于描述该列或该行数据的含义。与普通单元格 <td>不同，<th>中的文本默认会加粗并居中显示，让读者一眼就能识别出表头信息。

sup>元素是 HTML 中处理上标文本的标准方式，具有明确的语义含义和良好的可访问性。<sup>用于定义上标文本，是行内元素典型应用：数学表达式、脚注、化学式、日期序数与 <sub>元素互为补充，分别处理上标和下标可通过 CSS 自定义样式，但应保持语义化使用注意行高问题，必要时设置掌握 <sup>元素，能让你的网页在展示数学公式、化学式等内容时更加规范和美观。<sup><sub>

title>是 HTML 文档中一个非常重要的元数据元素，它定义了网页的标题。DOCTYPE html > < html > < head > < title > 我的第一个网页 </ title > </ head > < body > < p > 欢迎访问我的网站！DOCTYPE html > < html > < head > < title > 我的第一个网页 </ title > </ head > < body > < p > 欢迎访问我的网站！

var>是 HTML 中的语义化元素，用于标记变量名。它代表数学表达式或编程上下文中的变量，例如xyresult等。浏览器默认以斜体渲染 <var>元素的内容。<var>元素属于短语内容（Phrasing Content），可以嵌套在段落、列表、表格等任意包含文本的容器中。虽然浏览器默认以斜体渲染 <var>var {<var>语义化地标记变量名提升文档的可读性和可维护性配合 CSS 实现灵活的样式定制增强页面的可访问性掌握 <var>

u>元素是一个具有特定语义的行内元素，用于表示需要与普通文本区分、但又不属于强调的文本。理解它的语义定位，能帮助你在合适的场景下正确使用它，避免与纯视觉的下划线样式混淆。

thead>是 HTML 表格语义化的重要组成部分，它把表头从数据中分离出来，便于样式控制、脚本操作和无障碍访问。在实际开发中，建议始终显式使用 <thead>、<tbody>和 <tfoot>三个分组元素，让表格结构更规范、更易维护。

summary>浏览器默认会在 <summary>前显示一个三角箭头。你可以通过 CSS 的 list-style属性或 ::-webkit-details-marker伪元素来隐藏或替换它。/* 隐藏默认三角箭头 */summary {隐藏默认箭头后，可以结合::after伪元素和<summary>元素是 HTML 原生交互组件中非常实用的一员。它与 <details>配合，能够以极简的代码实现折叠面板、FAQ、代码展示等常见交互，同时具备良好的无障碍支持和浏览器兼容性。

tbody>（Table Body，表格主体）是 HTML 表格结构中的三大分区元素之一，另外两个是 <thead>（表头）和 <tfoot>（表尾）。

在网页中展示视频， 元素是最核心、最标准的 HTML5 方式。它无需依赖 Flash 等第三方插件，即可在浏览器中直接播放视频文件，并支持丰富的控制能力与自定义样式。本文将带你从零认识 元素，掌握其基础语法、常用属性、事件与进阶技巧，帮助你快速构建出体验良好的视频播放功能。 元素的使用非常简单，只需在标签中指定视频文件的地址即可：其中 指定视频文件的 URL， 属性用于显示浏览器自带的播放控件（播放/暂停、进度条、音量等）。如果希望提供多个备选视频源，以适应不同浏览器和编码格式，可以使用 子元素：

time>元素是 HTML5 新增的语义化标签，用于表示一个特定的时间段或日期时间。机器可读：通过datetime属性提供标准化的时间格式，供程序解析。人类可读：元素内的文本内容以自然语言展示给用户。例如：< p > 会议定于 < time datetime = " 2026-10-01T09:00 " > 10 月 1 日上午 9 点 </ time > 举行。</ p >

tfoot>（Table Foot）是 HTML 表格结构中的语义化元素，用于定义表格的底部区域。它通常用来放置汇总信息、合计数据或表格的脚注说明，让表格在视觉和语义上都更加清晰。<thead>：表头，定义列标题<tbody>：表体，存放主要数据<tfoot>：表尾，放置汇总或脚注。

td>是 HTML 中用于定义表格单元格（Table Data）的元素，全称为 “Table Data Cell”。它是构成 HTML 表格的基本单元之一，用于存放表格中的具体数据内容。在 HTML 表格结构中，<td>元素必须嵌套在 <tr>（表格行）元素内部，而 <tr>又必须位于 <table>元素之中。

style>元素是 HTML 中定义内部样式的核心方式，适合小型项目与快速开发。掌握它的语法、属性和适用场景，能帮助你在合适的场景下做出正确的选择。对于大型项目，仍推荐使用外部样式表以提升可维护性与性能。

track>元素虽小，却是 HTML5 媒体能力中不可或缺的一环。它让网页视频和音频真正做到了「一次制作，多语言、多场景适配」，既提升了可访问性，也改善了用户体验。<track>元素的作用与五种kind类型。WebVTT 字幕文件的基本语法。如何在 HTML 中声明轨道，以及用 JavaScript 动态操作轨道。下次在项目中嵌入视频时，别忘了为它加上一条字幕轨道——这不仅是锦上添花，更是对每一位观众的尊重。

sub>是 HTML 中的下标元素（subscript element），用于将文本以下标形式显示，即文字位置略低于正常基线、字号略小。它属于 HTML 的文本级语义元素，通常用于化学式、数学表达式、脚注编号等场景。< p > 水的化学式是 H < sub > 2 </ sub > O。</ p >< p > 水的化学式是 H < sub > 2 </ sub > O。</ p ></< p > 水的化学式是 H < sub > 2 </ sub > O。</ p ></

当一段很长的、没有空格的文本（比如很长的 URL、代码路径、下划线连接的名称等）超出容器宽度时，普通情况下浏览器无法换行，可能导致文字溢出或强制撑开布局；的兼容性良好，现代浏览器均已支持，包括 Chrome、Firefox、Safari、Edge 以及移动端浏览器。，比如 URL 的路径分隔符附近、长变量名的分段处。不会成为文本的一部分，粘贴结果仍然连续、干净，不会混入不可见字符。是命令式的「必须在这里断」，<wbr>它的作用是：在浏览器需要自动换行时，在合法的 HTML 中，<wbr>

元素<ul>（Unordered List，无序列表）是 HTML 中最基础的列表元素之一，用于创建没有特定顺序的项目列表。浏览器默认会在每个列表项前显示一个圆点（•）作为项目符号。< ul > < li > 苹果 </ li > < li > 香蕉 </ li > < li > 橙子 </ li > </ ul >< ul > < li > 苹果 </ li > < li > 香蕉 </ li > < li > 橙子 </ li > </ ul ></

textarea>是 HTML 中用于多行文本输入的表单元素。与单行的 <input type="text">不同，<textarea>允许用户输入多行文字，并支持换行。它常用于留言板、评论框、意见反馈、代码编辑器等场景。< textarea > 这里是默认内容 </ textarea ></< textarea > 这里是默认内容 </ textarea ><textarea>是构建多行文本输入的核心元素，掌握它的属性、取值方式和样式技巧，可以轻松实现评论框、留言板、聊天输入框等常见交互。

strong><strong>是 HTML 中表达「重要性」语义的标准元素，默认加粗显示，但价值远不止于视觉。表达重要性→ 用 <strong>仅需视觉加粗→ 用 <b>或 CSS结合 CSS 自定义样式，兼顾语义与美观善用语义，提升页面的可访问性掌握 <strong>的正确用法，是写出语义化、可维护、无障碍HTML 的重要一步。

section>是 HTML5 引入的语义化标签，用于表示文档中一个独立的、主题相关的内容区块。它通常包含一个标题（<h1>到 <h6>），用来概括该区块的主题。< section > < h2 > 公司简介 </ h2 > < p > 我们是一家专注于 Web 技术的公司…… </ p > </ section >< section > < h2 > 公司简介 </ h2 > < p > 我们是一家专注于 Web 技术的公司…… </ p > </ section ></

option>元素用于定义下拉列表（<select>）、多选列表或带输入框的下拉框（<datalist>）中的选项。它是表单交互中不可或缺的组成部分，用户通过选择不同的选项来提交对应的值。

rt>（Ruby Text，注音文本）元素用于为东亚文字（如中文、日文）提供注音或注释。它通常与 <ruby>元素配合使用，将注音显示在基准文字的上方或右侧。< ruby > 漢 < rt > かん </ rt > 字 < rt > じ </ rt > </ ruby >< ruby > 漢 < rt > かん </ rt > 字 < rt > じ </ rt > </ ruby ></< ruby > 漢 < rt > かん </ rt > 字 < rt > じ </ rt > </ ruby >

source><source>元素是 HTML5 多媒体与响应式图片体系中不可或缺的一环。通过合理使用srctypesrcsetmedia等属性，可以让浏览器自动选择最合适的资源，提升页面加载速度与兼容性。在实际开发中，建议始终为 <video>和 <audio>提供至少两种格式的 <source>，并为 <picture>提供合理的回退 <img>，以确保最佳的用户体验。

s>元素用于在文本上呈现删除线效果，表示内容已经不再准确、不再相关。它通常用于标记已过时、已删除或需要更正的信息。< p > < s > 原价 199 元 </ s > 现价 99 元 </ p >< p > < s > 原价 199 元 </ s > 现价 99 元 </ p ></< p > < s > 原价 199 元 </ s > 现价 99 元 </ p ></< p > < s > 原价 199 元 </ s > 现价 99 元 </ p >浏览器默认会给 <s>

元素<small>是 HTML 中的一个行内元素，用于表示旁注、小字印刷体等次要文本内容。它让文本以比周围文字更小的字号显示，常用于版权声明、法律条款、免责声明、脚注等场景。需要特别注意的是，<small>在 HTML5 中被重新定义了语义：它不再仅仅是一个「让文字变小」的样式标签，而是具有语义含义的元素，表示「次要的、补充性的文本」。要点说明语义表示次要、补充性文本默认样式字号缩小一档（典型场景版权声明、免责条款、脚注、附加信息替代方案纯视觉缩小用 CSSfont-size兼容性。

span>是 HTML 中一个非常基础且常用的行内元素（inline element）。它本身没有任何默认的样式或语义，纯粹是一个「容器」，用来包裹文本或其他行内内容，方便我们通过 CSS 或 JavaScript 对其中内容进行样式控制或操作。简单来说，<span>就像是一个透明的盒子，你可以在里面放文字，然后通过给它添加classid或 style属性来改变这些文字的样式。<span>是行内元素，本身无样式，主要用于包裹文字片段。

slot>是 HTML 中一个非常特殊的内置元素，它是 Web Components 标准（Custom Elements + Shadow DOM）的核心组成部分之一。它的作用是在自定义元素的 Shadow DOM 内部定义一个「插槽」，用来接收并展示外部传入的内容。简单来说，<slot>就像是一个占位符。当你在页面中使用一个自定义元素时，写在元素标签内部的内容并不会直接显示，而是会被「分发」到 Shadow DOM 中对应的 <slot>位置进行渲染。

samp是 HTML 中的一个语义化行内元素，全称是（示例输出）。它用于标记程序、脚本或计算机系统输出的示例文本，告诉浏览器和开发者：这段内容代表的是计算机程序的输出结果，而不是普通正文。例如，当你在教程中展示命令行运行后的返回结果、程序打印的日志，或系统提示信息时，都可以用 samp元素来包裹。samp是一个简单但实用的语义化标签，它让示例输出在 HTML 中有了明确的含义，既方便阅读，也有利于 SEO 和无障碍访问。在编写技术文档、教程或博客时，善用 samp能让你的示例输出更规范、更易读。

q>元素用于标记行内短引用（short inline quotation），与块级引用 <blockquote>相对。它适合在段落中引用一句话、一个短语或一段简短文字，浏览器通常会自动为 <q>元素的内容加上引号。< p > 鲁迅曾说： < q > 世上本没有路，走的人多了，也便成了路。< p > 鲁迅曾说： < q > 世上本没有路，走的人多了，也便成了路。</< p > 鲁迅曾说： < q > 世上本没有路，走的人多了，也便成了路。</

progress>是 HTML5 新增的原生进度条元素，用于展示任务的完成进度，例如文件上传、下载、表单提交或页面加载的进度。它不需要引入任何第三方库，浏览器原生渲染，语义清晰，对屏幕阅读器友好。一个最简单的示例：</浏览器会渲染出一条进度条，已填充部分占 70%。<progress>元素内部可以放置文本内容，作为不支持该元素的旧浏览器中的降级提示。<progress>是一个轻量、语义化的原生进度条元素，适合绝大多数进度展示场景。

output><output>元素是 HTML5 提供的一个轻量级但功能强大的语义化标签。它解决了表单中动态结果展示的语义化问题，同时天然支持无障碍访问，是现代 Web 开发中值得推荐使用的元素。<output>用于展示计算结果或用户操作输出支持for、formname三个特有属性与 JavaScript 配合可实现动态计算与展示天然支持aria-live，提升无障碍体验现代浏览器兼容性良好，但 IE 不支持。

rp><rp>是 Ruby 注音结构中一个重要但容易被忽略的细节元素。它通过一对降级括号，让使用 Ruby 注音的页面在不支持该特性的环境中依然保持可读性。将 <rp>与 <rt>配合使用，括号放在注音内容前后。支持注音的浏览器自动隐藏 <rp>，不支持的环境则显示括号。日语振假名、中文拼音、中文注音等东亚语言场景是它的主要用途。配合 <ruby>、<rb>、<rtc>可以构建更复杂的注音结构。掌握 <rp>

picture>元素是响应式图片方案中的重要工具，它让开发者能够根据设备条件灵活地选择图片源，兼顾性能与显示效果。<picture>是容器，通过 <source>提供候选图片，<img>作为兜底。media属性使用 CSS 媒体查询匹配设备条件。type属性实现现代图片格式的优雅降级。srcset和sizes用于分辨率和尺寸切换。简单场景优先使用srcset，复杂场景使用 <picture>。始终保留 <img>元素，保证无障碍和兼容性。

p>元素虽然简单，却是构建网页文本内容的基础。掌握它的语法、嵌套规则和 CSS 配合技巧，能让你写出结构清晰、样式美观的页面。希望本文对你有所帮助，快去动手实践吧！

属性下载时机执行时机执行顺序无解析到即下载下载完立即执行（阻塞解析）按文档顺序defer解析时后台下载文档解析完成后按文档顺序async解析时后台下载下载完立即执行不保证顺序<script>元素是 HTML 与 JavaScript 之间的桥梁。掌握它的基本用法、属性含义以及加载策略，是写出高性能网页的关键一步。优先使用外部脚本，便于缓存和维护；使用defer处理依赖 DOM 的脚本；使用async加载独立、非关键的脚本；使用模块脚本组织复杂的前端逻辑。

元素<pre>是 HTML 中一个非常实用的元素，全称是（预格式化文本）。它的核心作用就是保留文本中的空格、换行和缩进，让浏览器按照源代码中的原始格式来显示内容。在普通的 HTML 元素中，连续的空格会被合并为一个，换行符也会被忽略。但 <pre>元素打破了这一规则，它会原封不动地展示文本的排版。<pre>元素是 HTML 中处理预格式化文本的重要工具。它保留了文本的原始排版，特别适合展示代码、日志和任何对格式有要求的文本内容。配合 <code>

select>元素虽然基础，但结合multiple、optgrouprequired等属性以及 JavaScript 事件处理，可以构建出功能强大的表单交互。希望本文能帮助你全面掌握 <select>的用法，在实际项目中灵活运用。

ruby>是 HTML5 中用于标注「注音」或「注释」的语义化元素，最常见的应用场景就是给汉字标注拼音（如「中文」标注为 zhōng wén），或者给生僻字、专有名词添加简短释义。它之所以叫 ruby，是因为早期排版中这种小号注音文字形似红宝石（ruby）而得名。在中文、日文等东亚文字排版中非常实用。<ruby>元素是 HTML5 提供的语义化注音工具，配合 <rt>显示注音、<rp>做兼容兜底，非常适合中文拼音、日文假名以及生僻字注释等场景。始终搭配 <rp>保证老旧浏览器可读。