HTML 代码元素是干嘛的？
89
0
0
把代码直接贴进网页，浏览器默认拿它当普通文字，挤在一起既看不清也没层次。HTML 给了几个专属标签，就是让你把“代码”“输出”“用户按键”这些片段拎出来，单独加样式，读者一眼就能分辨。
五个常用标签，秒懂
| 标签 | 作用 | 一句话记忆 |
|---|---|---|
<code> | 行内代码 | 把函数、语句包成“代码颗粒” |
<pre> | 整块原样输出 | 空格换行都保留，贴源码必备 |
<kbd> | 键盘按键 | 告诉读者“请动手按这里” |
<samp> | 程序输出 | 终端里蹦出来的那行字 |
<var> | 变量名 | 数学或代码里的替身演员 |
1 分钟实战
下面这段直接拷进空文件，双击打开就能看效果——
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>代码标签演示</title>
<style>
code,kbd,samp,var{ background:#f4f4f4; padding:2px 4px; border-radius:3px; }
pre{ background:#f4f4f4; padding:1em; overflow:auto; }
</style>
</head>
<body>
<p>C 语言里打印用 <code>printf()</code> 函数。</p>
<pre>
#include <stdio.h>
int main() {
printf("Hello, World!");
return 0;
}
</pre>
<p>复制快捷键：<kbd>Ctrl</kbd> + <kbd>C</kbd></p>
<p>终端提示：<samp>文件已保存</samp></p>
<p>方程中的 <var>x</var> 是未知数。</p>
</body>
</html>让代码更好看的小技巧
- 想上色？扔给 Prism.js 或 highlight.js，一分钟搞定高亮。
- 太长？给
<pre>加max-height和滚动条，手机端也能滑。 - 怕换行被吃掉？
<pre>里别按 Tab，全用空格，万无一失。
总结一句话
记住“code 行内、pre 整块、kbd 按键、samp 输出、var 变量”，写完顺手包一下，你的技术文档立刻人模狗样，读者少掉一半头发。
0
快来点个赞吧
发表评论
评论列表