为什么我的和<代码>标签读取标记而不是生成代码片段?代码>
我正在为那些想要协助我的组织(CURE International)参与海地地震救灾工作的教会制作这个资源页面:http://blog.helpcurenow.org/test/mockups/jan2010/jan2010_haiti_church_resources.html
我遇到的麻烦是在步骤 4 下你会看到我已经创建了横幅广告,我正在尝试生成代码片段(也称为代码块),供用户复制并粘贴到他们的博客/网站/其他内容中。
我使用了“pre”和“code”标签,但浏览器仍然呈现 HTML,而不是将标记显示为文本。
有人能帮我解释为什么我会得到这个结果吗?
以下是标记示例:
<li class="haitiWebBanner">
<p class="webBannerSize">300 x 250</p>
<a href="http://helpcurenow.org/haitirelief"><img src="http://static.helpcurenow.org/images/campaigns/jan2010/haiticrisis/cure-haiti-banner-300x250.jpg" title="Click Here to Donate Now!" alt="Help save lives in Haiti by supporting the relief effort through CURE International" width="300" height="250" border="0" /></a>
<pre><code class="html"><a href="http://helpcurenow.org/haitirelief"><img src="http://static.helpcurenow.org/images/campaigns/jan2010/haiticrisis/cure-haiti-banner-300x250.jpg" title="Click Here to Donate Now!" alt="Help save lives in Haiti by supporting the relief effort through CURE International" width="300" height="250" border="0" /></a></code></pre>
I'm working on this resource page for Churches who want to assist my organization (CURE International) in the Haiti earthquake relief effort: http://blog.helpcurenow.org/test/mockups/jan2010/jan2010_haiti_church_resources.html
The trouble I'm having is that under step 4 you'll see I've created banner ads and I'm trying to produce code snipets (a.k.a. code blocks) for the users to copy and paste into their blog/site/whatever.
I've used the "pre" and "code" tags, but the browser is still rendering the HTML instead of displaying the markup as text.
Can anybody help me as to why I'm getting this result?
Here's a sample of the markup:
<li class="haitiWebBanner">
<p class="webBannerSize">300 x 250</p>
<a href="http://helpcurenow.org/haitirelief"><img src="http://static.helpcurenow.org/images/campaigns/jan2010/haiticrisis/cure-haiti-banner-300x250.jpg" title="Click Here to Donate Now!" alt="Help save lives in Haiti by supporting the relief effort through CURE International" width="300" height="250" border="0" /></a>
<pre><code class="html"><a href="http://helpcurenow.org/haitirelief"><img src="http://static.helpcurenow.org/images/campaigns/jan2010/haiticrisis/cure-haiti-banner-300x250.jpg" title="Click Here to Donate Now!" alt="Help save lives in Haiti by supporting the relief effort through CURE International" width="300" height="250" border="0" /></a></code></pre>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
“Code”的意思是“这是标记的代码”
“Pre”的意思是“这个数据已经被预先格式化”(就空格而言)
它们都不意味着“这个数据不应该被视为 HTML”
代表
& ;
为&
,<
为<
和>
为<代码>>。"Code" means "This is marked up code"
"Pre" means "This data has been preformatted" (as far as whitespace is concerned)
Neither of them mean "This data shouldn't be treated as HTML"
Represent
&
as&
,<
as<
and>
as>
.您仍然需要考虑特殊字符 <和>
You still need to take special characters into account < ; and > ;
标签对不会改变浏览器解析其中内容的方式(即,作为带有浏览器需要解析的标签的 HTML)。相反,它只是告诉浏览器该对中的内容是未格式化的,并且应该按原样呈现给用户。
您需要做的是转义 HTML(即,“<”到“<”等),以便浏览器知道它应该显示原始字符。
The <pre></pre> tag pair doesn't change how the contents in them are parsed by the browser (ie, as HTML with tags the browser needs to parse). Rather, it just tells the browser that the contents inside the pair as unformatted and should be presented to the user as such.
What you need to do is escape the HTML (ie, "<" to "<", etc), so the browser knows it should display the raw characters.
对于
For the code within the <pre> tags, do a global search and replace of "<" with "<".
那是因为代码和 pre 标记不能以这种方式工作。改变你的“<”到“<”和“>”到“>”它也会按照你想要的方式工作。
That's because the code and pre tags don't work that way. Change your '<' to '<' and the '>' to '>' and it will work as you want it too.