一、内联代码
1、说明
通过 <code> 标签包裹内联样式的代码片段；
2、演示
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title></title>
<!-- 引入bootstrap -->
<link rel="stylesheet" href="../css/bootstrap.min.css" />
</head>
<body>
For example, <code><section></code> should be wrapped as inline.
</body>
</html>
运行结果：
二、用户输入
1、说明
通过 <kbd> 标签标记用户通过键盘输入的内容；
2、演示
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title></title>
<!-- 引入bootstrap -->
<link rel="stylesheet" href="../css/bootstrap.min.css" />
</head>
<body>
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
</body>
</html>
运行结果：
三、代码块
1、说明
多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理；
还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条；
2、演示
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title></title>
<!-- 引入bootstrap -->
<link rel="stylesheet" href="../css/bootstrap.min.css" />
</head>
<body>
<pre><p>Sample text here...</p></pre>
</body>
</html>
运行结果：
四、变量
1、说明
通过 <var> 标签标记变量；
2、演示
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title></title>
<!-- 引入bootstrap -->
<link rel="stylesheet" href="../css/bootstrap.min.css" />
</head>
<body>
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
</body>
</html>
运行结果：
五、程序输出
1、说明
通过 <samp> 标签来标记程序输出的内容；
2、演示
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title></title>
<!-- 引入bootstrap -->
<link rel="stylesheet" href="../css/bootstrap.min.css" />
</head>
<body>
<samp>This text is meant to be treated as sample output from a computer program.</samp>
</body>
</html>
运行结果：
