由页面以纯 HTML 打开并书写内容。 ========================================================================= -->

设计基础 / 03

HTML 标签清单

按标签族分 11 组罗列全量 HTML 元素，每一组都给出一枚「真实渲染 + 标签名」的对照样例，作为组件库的语义地基。

标签分组

01 文档结构 02 元信息 03 语义容器 04 标题与文本 05 列表 06 行内格式化 07 多媒体 08 表单全套 09 表格全套 10 iframe 与嵌入 11 废弃标签

01 文档结构

document structure

骨架标签

<!DOCTYPE html> <html> <head> <body> <div> <span>

<!DOCTYPE html>
<html lang="zh-CN">
<head>…</head>
<body>
  <header>…</header>
  <main>…</main>
  <footer>…</footer>
</body>
</html>

真实渲染：页面骨架

header · 页头

nav

main

section

article

footer · 页脚

div 为无语义容器，span 为行内容器；有语义的区块优先使用语义标签。

02 元信息

metadata

head 内标签

meta title base link style script noscript

charset

UTF-8，保证中文不乱码

viewport

width=device-width, initial-scale=1

description

页面摘要，用于搜索引擎与分享卡片

og:title

社交平台分享标题

本页实际使用的元信息

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nexus UI — 全场景组件库</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<script src="…/@tailwindcss/browser@4"></script>
<script src="assets/js/nexus.js"></script>
<noscript>请开启 JavaScript 以获得完整体验</noscript>

页面标题的写法

每一页在 include 之后用一行 <script> 修改 document.title，不改动 head。

03 语义容器

sectioning & grouping

分组与区块

header nav main section article aside footer figure figcaption details summary dialog template address

figure + figcaption

渐变图 · 模拟配图

图 1 · 使用渐变块 + 内联 SVG 模拟图片，不引入外部资源

details / summary 原生折叠

什么是语义容器？

语义容器表达内容的角色而不是外观：header 表示区块头，article 表示可独立分发的内容单元，aside 表示与主内容弱相关的补充信息。

details 需要写 JS 吗？

不需要。details/summary 是原生交互元素，浏览器自带展开收起与键盘可达性，配合 .acc-item 样式即可获得完整手风琴外观。

dialog 与自定义遮罩如何取舍？

dialog 具备原生焦点陷阱与 ESC 关闭；本组件库的 .ov + .modal 自定义遮罩换取更自由的动画与样式控制，两者都可用。

address · Nexus UI 设计系统团队
新加坡 · 滨海湾 · design@nexus-ui.dev

04 标题与文本

headings & text

h1 → h6

h1 · 一级标题

h2 · 二级标题

h3 · 三级标题

h4 · 四级标题

h5 · 五级标题

h6 · 六级标题

块级

p 段落标签，承载正文。中文正文推荐 15px / 1.6 行高。

hr 表示主题转换，上一行与下一行之间语义断开。
br 表示同一段内的换行。

pre 与 blockquote

pre 保留空格与换行：
  第一行
    第二行（缩进两个空格）
  ┌──────────┐
  │  ASCII   │
  └──────────┘

语义标签的第一价值是可访问性，第二价值才是样式——样式可以改，语义结构不应因改版而丢失。 — Nexus UI / HTML 标签规范

05 列表

ul / ol / dl

ul 无序列表

设计基础 5 页
通用组件 5 页
- 导航类
- 按钮类
表单 5 页

嵌套两层

list-disc
list-circle
list-square

ol 有序列表

安装依赖并初始化项目
引入 header.php 与 sidebar.php
以纯 HTML 书写页面主体
补齐页脚、Toast 容器与脚本

更多序号

需求评审
视觉定稿
开发联调

alpha
beta

dl 定义列表

容器: card / tbl-wrap / modal
控件: btn / input / select / switch
反馈: alert / toast / status / spin

横向 dl

分辨率: 2× / 3× 适配
断点: 640 / 1024 / 1080

06 行内格式化

inline semantics

文本语义

strong 重要 · b 加粗 · em 强调 · i 术语 · u 下划线 · ~~s 已作废~~ · ~~del 删除~~ · ins 插入 · mark 高亮 · small 细则 · _sub · ^sup

缩写与引用

CSS · cite 作品名 · q 短引用 · dfn 术语定义 · time 2026-10-03 · data 97 · span · bdi · bdo · 汉字hàn · wbr

代码类行内标签

code 行内代码 · Ctrl+S · samp 程序输出 · var 变量 · span.font-mono

链接

a 行内链接 · 设计令牌 · 图标系统

中文排版中「」与 —— 直接使用全角字符，不使用引号实体。

07 多媒体

media elements

img / picture / source

img picture source map area

img 必填 alt；picture 用于按格式/分辨率切换源，source 承载具体候选。

video / audio / track

video · 16:9 占位画面

01:12 / 03:20

audio · 组件库介绍音频

01:24 / 03:20

video audio track

canvas / svg / embed / object

canvas 初始为空白画布，需脚本绘制；上方为 260×90 的实际尺寸。

canvas svg embed object param

08 表单全套

form & all input types

form · fieldset · label

textarea · select · optgroup · datalist

textarea 多行文本

select + optgroup 分组

datalist 输入建议

output · progress · meter

128.00

全部 input type（22 种）

type="text"

type="password"

type="email"

type="tel"

type="number"

type="search"

type="url"

type="date"

type="time"

type="datetime-local"

type="month"

type="week"

type="range"

滑块数值实时回显由 data-range 指定输出节点

type="color"

#8B5CF6

type="file"

选择文件

PNG / JPG / PDF，单个不超过 10MB

type="checkbox"

启用组件缓存开启实验特性

type="radio"

浅色深色跟随系统

type="submit" / "reset"

type="image"

type="hidden"

hidden · 不可见但会随表单提交

09 表格全套

table / thead / tbody / tfoot / colgroup

带 caption 与 colgroup 的完整表格

表 1 · 组件库页面分布统计
分类	页面数	组件数	状态
设计基础	5	38	已完成
通用组件	41	210	进行中
行业模块	52	320	待开始
合计	98	568	v3.0

跨行跨列 rowspan / colspan

季度	营收（万元）		同比
季度	线上	线下	同比
Q1	1,280	640	+18.2%
Q2	1,540	720	+21.6%
Q3	1,680	695	-2.4%

table thead tbody tfoot tr th td caption colgroup col

10 iframe 与嵌入

iframe / srcdoc

srcdoc 内联文档

iframe srcdoc sandbox allow loading="lazy"

iframe 常用属性

src

被嵌入页面的地址

srcdoc

直接内联 HTML 字符串，优先于 src

sandbox

限制脚本、表单与同源能力

lazy 时进入可视区再加载

title

为读屏软件提供描述，必填

referrerpolicy

控制请求携带的 referrer 策略

注意

本组件库页面一律不使用外部 iframe，演示统一走 srcdoc 内联，保证离线可用。

11 已废弃标签

deprecated / obsolete

不推荐使用 · 请改用右侧替代方案

<center> → text-center

<font> → CSS 字体令牌

<big> → text-h4

<tt> → font-mono

<strike> → <s> / <del>

<acronym> → <abbr>

<marquee> → CSS animation

<frame> / <frameset> → <iframe>

<applet> → <canvas> / WebGL

<xmp> → <pre><code>

<plaintext> → text/plain

<blink> → 不建议任何实现

不要在业务页面里使用废弃标签

它们在不同浏览器中行为不一致，且无法通过 CSS 令牌统一控制；本页仅作清单展示。