基础排版

H1 标题

H2 标题

H3 标题

H4 标题

H5 标题

H6 标题

\n\n

段落内
的换行

这是一段包含\n 小字、HTML、\n 强、粗、强调、斜体、\n 删除、删除、~~简单删除~~、\n 插入、下划线、_下标、^上标、\n 引用、短引用、定义、高亮、\n 变量、示例输出、输出、\n 2025 年 9 月 24 日、\n

地址：北京市朝阳区

、\n 汉字(hanzi)、\n 反向文本、\n （可选换行点）的文字。\n

\n\n

按 Ctrl + C 复制；输入 alert(1) 查看效果。

\n\n

内联

<kbd>：Enter
<samp>：Build completed successfully.
<var>：x = 3
<output>：42
<meter>：\n 30%\n 70%\n
<progress>：\n 50%\n indeterminate\n

\n\n

区块

Blockquote 长引用

\n
这是一段长引用，出自某篇文章。
\n

Pre 代码

// preformatted code\nfunction hello(){\n    console.log(\"Hello, classless!\");\n}

Figure 元素

Aside 元素

\n \n

\n\n

列表

无序列表

项 1
项 2\n
- 嵌套项
\n

有序列表

第一
第二

描述列表

HTML: 超文本标记语言
CSS: 层叠样式表

菜单

\n \n

\n\n

表格

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

带列分组的表格
名称	年龄	城市
张三	28	北京
共 1 人

\n\n

表单

\n 普通文本\n \n\n 必填邮箱\n \n\n 只读数字\n \n\n 禁用密码\n \n\n 搜索\n \n\n 电话\n \n\n URL\n \n\n 颜色\n \n\n 文件\n \n\n 范围 50\n \n\n 日期\n \n\n 多选下拉\n \n\n

\n 单选组\n 一\n 二\n

\n\n

\n 整组禁用\n 无法勾选\n

\n\n Datalist 示例\n \n \n \n\n 同意协议\n\n \n \n \n

\n\n

权限

\n \n

attr()显示链接的图片

\n 图片？\n\n

媒体元素

Picture 响应式图片

\n\n

音频（多源+字幕）

\n\n

视频（多源+海报）

\n\n

SVG 内联

\n \n\n

Canvas 占位

\n\n

图像热点

\n \n

\n \n \n \n \n

\n\n

交互元素

手风琴（name 属性，Chromium）

第一节

内容一

第二节

内容二

\n\n

可关闭 Dialog

\n \n \n

\n\n

嵌入元素

iframe

\n \n \n\n \n\n

直连-youtube转embedly

\n \n \n\n

直连-youtube内置

\n \n\n

直连-youtube简单

\n \n \n \n

object 图片

\n\n

embed 图片

\n\n

MathML

\n \n x \n = \n \frac{\n}{\n - \n b \n \pm \n \sqrt{\n \n \n^{b \n 2 \n} \n - \n 4 \n a \n c \n \n} \n} \n \n

\n\n

template & slot（无 JS 时静默）

\n \n

\n 默认 slot 内容\n

Classless CSS 框架演示

基础排版

H1 标题

H2 标题

H3 标题

H4 标题

H5 标题

H6 标题

内联

区块

Blockquote 长引用

Pre 代码

Figure 元素

Aside 元素

列表

无序列表

有序列表

描述列表

菜单

表格

表单

权限

attr()显示链接的图片

媒体元素

Picture 响应式图片

音频（多源+字幕）

视频（多源+海报）

SVG 内联

Canvas 占位

图像热点

交互元素

手风琴（name 属性，Chromium）

可关闭 Dialog

嵌入元素

iframe

object 图片

embed 图片

MathML

template & slot（无 JS 时静默）

横向排列的 display: flex，会被自动纠正为竖向的