美文网首页
HTML基础之pre和code的作用和用法

HTML基础之pre和code的作用和用法

作者: 陈锦楣 | 来源:发表于2016-11-27 21:33 被阅读131次

    定义

    • code标签用于表示计算机源代码或者其他机器可以阅读的文本内容。
    • pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

    用法&区别

    • 当你在网页中只需要显示一行代码时便使用<code>去添加。
    • 当你需要在网页中显示许多行代码的时候便使用<pre>去添加。
    例子
    • code例子
    <body>
       <code><script type="text/javascript"></code>//只能添加一行   
    </body>
    //若这里不加code那就会执行script标签,那么页面便会去获取指定的js文件
    

    运行结果

    code示例.png

    往code里添加格式

    <body>
       <code>
        <script type="text/javascript">
        </body>
           </html>
    </code>
       </body>
    

    运行结果

    code示例.png

    会发现格式并没有保存下来,都合并为一行了。

    • pre例子
    <body>
       <pre>
                <script type="text/javascript">
           function test1() { 
              var div1 = document.getElementById("div1"); 
              div1.innerHTML = "<span>一起来编程吧!</span>";
           } 
          </script> 
         <body>
           <div id="div1">
           <a href="https://bbs.excellence-girls.org/" target="_blank">卓越女生论坛</a>
           </div>
           <input type="button" value="提交" onclick="test1();" />
       </body>
       </html>
       </pre>
    </body>
    

    运行结果

    pre例子.png

    代码里的空格及符号都原封不动的保存下来了。

    相关文章

      网友评论

          本文标题:HTML基础之pre和code的作用和用法

          本文链接:https://www.haomeiwen.com/subject/vfpnpttx.html