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

定义

  • 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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,298评论 0 5
  • 1、HTML介绍 1 2、Html和CSS的关系 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户...
    夏沫xx阅读 1,418评论 0 8
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,837评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,861评论 25 708
  • "生活不如意,十之八九"。很多人都会用这句话来安慰自己那颗因为太多失败而支离破碎的心。但是,你真的有问过内心深处的...
    文字虫洞阅读 409评论 0 4