【05】Bootstrap — 代码

最新推荐文章于 2019-07-27 10:35:59 发布

有心博客

最新推荐文章于 2019-07-27 10:35:59 发布

阅读量353

点赞数

CC 4.0 BY-SA版权

文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/qq_32629809/article/details/77836261

本文介绍了如何使用HTML中的特定标签来格式化代码元素，包括内联代码、用户输入、代码块、变量及程序输出等，提供了丰富的示例。

内联代码

通过<code>标签包裹内联样式的代码片段

用户输入

通过<kbd>标签标记用户通过键盘输入的内容。

代码块

多行代码可以使用<pre>标签。为了正确的展示代码，注意将尖括号做转义处理。

变量

通过<var>标签标记变量

程序输出

通过<samp>标签来标记程序输出的内容。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding: 20px;">
        <h2>内联代码</h2>
        For example, <code>&lt;section&gt;</code> should be wrapped as inline.
        <h2>用户输入</h2>
        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>
        <h2>代码块</h2>
        <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
        <h2>变量</h2>
        <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
        <h2>程序输出</h2>
        <samp>This text is meant to be treated as sample output from a computer program.</samp>
    </body>
</html>