为什么我的
和<代码>标签读取标记而不是生成代码片段?

发布于 2024-08-19 07:00:25 字数 1313 浏览 8 评论 0原文

我正在为那些想要协助我的组织(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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

_失温 2024-08-26 07:00:25

“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 >.

絕版丫頭 2024-08-26 07:00:25

您仍然需要考虑特殊字符 <和>

<pre><code class="html">>a href=......... <

You still need to take special characters into account < ; and > ;

<pre><code class="html">>a href=......... <
傲影 2024-08-26 07:00:25

标签对不会改变浏览器解析其中内容的方式(即,作为带有浏览器需要解析的标签的 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.

故乡的云 2024-08-26 07:00:25

对于

 内的代码标签,进行全局搜索并替换“<”与“<”。

For the code within the <pre> tags, do a global search and replace of "<" with "<".

世界和平 2024-08-26 07:00:25

那是因为代码和 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文