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

Question

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

只是一个侧面说明，我与.NET环境中工作（MVC）

jsFiddle example

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> 

Answer 1

乘坐看看：http://www.freeformatter.com/html-escape.html

这将替换HTML中保留的字符，并且必须替换为其对应的HTML实体。

Answer 2

怎么样的语法荧光笔如prism？还有很多其他的可以满足您的要求。

如果这样做没有帮助，那么最好的选择是编码html文件，并在每个标签中放入带有自己样式的缩放版本。