使用纯CSS/HTML创建虚拟HTML布局，并将其显示为文本

我正在试图找到一种创建HTML布局并将其显示为文本的方法。
例如，我想根据选择在虚拟html布局上“绘制”一个区域。
我已经用图像做了一个例子，但我的问题是如何用纯HTML/CSS替换图像部分

请注意，我正在使用.Net环境（MVC）

CSS:

img{
  display: none;
}
img:target {
    display: block;
  }

HTML:

<div>
  <a href="#topHead">Top Head</a> |
  <a href="#bottomHead">Bottom Head</a> |
  <a href="#topBody">Top Bottom</a> |
  <a href="#bottomBody">Bottom Head</a>
  <div>
    <img id="topHead" src="https://s29.postimg.org/fjuguwv2f/htmlTopHead.png" alt="">
    <img id="bottomHead" src="https://s29.postimg.org/qtn6pv03r/htmlBottomHead.png" alt="">
    <img id="topBody" src="https://s29.postimg.org/vgt8rmngn/htmlTopBody.png" alt="">
    <img id="bottomBody" src="https://s29.postimg.org/q2ugk2xqf/htmlBottomBody.png" alt="">
  </div>

</div>

|
|
|

看看：

---

这将替换HTML中保留的字符，这些字符必须替换为相应的HTML实体。

像这样的语法高亮字符怎么样？还有许多其他的可以满足您的要求

---

如果这样做没有帮助，那么最好的选择是对

html

文件进行编码，并在每个标记中放入scaped版本，使用您自己的样式。

prism不也需要转义吗？我不认为没有转义符就可以编写正常的标记