html代码html中如何直接显示html代码

 所属分类:web前端开发

 浏览:200次-  评论: 0次-  更新时间:2022-10-18
描述:更多教程资料进入php教程获得。 本篇文章给大家介绍一下html中直接显示html代码的方式。有一定的参考价值,有需要的朋友可以参考一下,希望...
更多教程资料进入php教程获得。 本篇文章给大家介绍一下html中直接显示html代码的方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

前端(vue)入门到精通课程:进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用

百度了很多中做法,感觉很多都没有测试再胡说,特总结一下。
百度说的<code><pre>标签,我的测试结果如下:

1.<code>

<code>
    <h1>hello</h1>
    <h2>hello</h2>
      <h3>hello</h3>
      <h4>hello</h4>
    <h5>hello</h5>
    <h6>hello</h6>
  </code>
登录后复制

效果图:
在这里插入图片描述
代码依然被渲染,失败。说是渲染行内元素的,改为span依旧渲染。

2.<pre>

代码:

<pre>
    <h1>hello</h1>
    <h2>hello</h2>
      <h3>hello</h3>
      <h4>hello</h4>
    <h5>hello</h5>
    <h6>hello</h6>
  </pre>
登录后复制

效果图:

在这里插入图片描述
同上依旧渲染。

3.<xmp>

代码:

<xmp>
    <h1>hello</h1>
    <h2>hello</h2>
      <h3>hello</h3>
      <h4>hello</h4>
    <h5>hello</h5>
    <h6>hello</h6>
  </xmp>
登录后复制

效果图:
在这里插入图片描述

直接显示并且保留格式!可行!

推荐学习:html视频教程

以上就是html中如何直接显示html代码的详细内容,更多请关注zzsucai.com其它相关文章!

 标签: html显示代码,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!