Ste*_*ett 314 html semantic-markup
我的网站将有一些内联代码("当使用foo()函数..."时)和一些块代码段.这些往往是XML,并且有很长的行,我更喜欢浏览器包装(即,我不想使用<pre>).我还想在块片段上放置CSS格式.
似乎我不能同时使用<code>它们,因为如果我把CSS块属性放在它上面(带display: block;),它将打破内联片段.
我很好奇人们在做什么.使用<code>的块,<samp>内联？使用<code><blockquote>或类似的东西？
我想保持实际的HTML尽可能简单,避免类,因为其他用户将维护它.
Jos*_*Lee 334
使用<code>内联代码可以包装和<pre><code>块代码不能换行.<samp>是用于示例输出,所以我会避免使用它来表示示例代码(读者要输入的代码).这就是Stack Overflow的功能.
(更好的是,如果你想要易于维护,让用户将文章编辑为Markdown,那么他们就不必记得使用<pre><code>.)
HTML5在" pre元素"中同意这一点:
pre元素表示预格式化文本块,其中结构由印刷约定而不是元素表示.
可以使用pre元素的一些示例:
- 包括计算机代码的片段,其结构根据该语言的惯例表示.
[...]
为了表示计算机代码块,pre元素可以与代码元素一起使用; 为了表示计算机输出块,pre元素可以与samp元素一起使用.类似地,可以在pre元素内使用kbd元素来指示用户要输入的文本.
在下面的代码段中,提供了一个计算机代码示例.
Run Code Online (Sandbox Code Playgroud)<p>This is the <code>Panel</code> constructor:</p> <pre><code>function Panel(element, canClose, closeHandler) { this.element = element; this.canClose = canClose; this.closeHandler = function () { if (closeHandler) closeHandler() }; }</code></pre>
Ste*_*ett 76
我完全错过的东西:<pre>可以用CSS控制非包装行为.所以这给出了我正在寻找的确切结果:
code {
background: hsl(220, 80%, 90%);
}
pre {
white-space: pre-wrap;
background: hsl(30,80%,90%);
}Here's an example demonstrating the <code><code></code> tag.
<pre>
Here's a very long pre-formatted formatted using the <pre> tag. Notice how it wraps? It goes on and on and on and on and on and on and on and on and on and on...
</pre>sle*_*man 36
我个人使用,<code>因为这是最正确的语义.然后,为了区分内联代码和块代码,我要添加一个类:
<code class="inlinecode"></code>
对于内联代码或:
<code class="codeblock"></code>
用于代码块.取决于哪个不太常见.
小智 14
对于正常的内联 <code>使用:
<code>...</code>
并且对于每个被阻挡的地方 <code>需要使用
<code style=display:block;white-space:pre-wrap>...</code>
或者,<codenza>为break衬块定义一个标签<code> (无类)
<script>
</script>
<style>
codenza, code {} /* noop mnemonic aide that codenza mimes code tag */
codenza {display:block;white-space:pre-wrap}
</style>`
测试:(注意:以下是使用data:URI协议/方案的scURIple ,因此%0Anl格式代码在剪切并粘贴到URL栏进行测试时保留此类代码至关重要 - 因此view-source:(ctrl- U)在下面的每一行之前看起来都很好%0A)
data:text/html;charset=utf-8,<html >
<script>document.write(window.navigator.userAgent)</script>
<script></script>
<style>
codenza, code {} /* noop mnemonic aide that codenza mimes code tag */
codenza {display:block;white-space:pre-wrap}
</style>
<p>First using the usual <code> tag
<code>
%0A function x(arghhh){
%0A return "a very long line of text that will extend the code beyond the boundaries of the margins, guaranteed for the most part, well maybe without you as a warrantee (except in abnormally conditioned perverse environs in which case a warranty is useless)"
%0A }
</code>
and then
<p>with the tag blocked using pre-wrapped lines
<code style=display:block;white-space:pre-wrap>
%0A function x(arghhh){
%0A return "a very long line of text that will extend the code beyond the boundaries of the margins, guaranteed for the most part, well maybe without you as a warrantee (except in abnormally conditioned perverse environs in which case a warranty is useless)"
%0A }
</code>
<br>using an ersatz tag
<codenza>
%0A function x(arghhh){
%0A return "a very long line of text that will extend the code beyond the boundaries of the margins, guaranteed for the most part, well maybe without you as a warrantee (except in abnormally conditioned perverse environs in which case a warranty is useless)"
%0A }
</codenza>
</html>
vsy*_*ync 13
<xmp>:<xmp>
<div>
<input placeholder='write something' value='test'>
</div>
</xmp>很遗憾这个标签已被弃用,但它仍然适用于浏览器,它是一个糟糕的标签.没有必要逃避它内部的任何东西.真高兴啊!
考虑TextArea
人们通过谷歌找到这一点，并寻找更好的方法来管理他们的片段的显示也应该考虑<textarea>这给了很多在宽度/高度控制，滚动等注意到@vsync提到的过时的标签<xmp>，我觉得<textarea readonly>是一个很好的替代品用于显示HTML，而无需转义其中的任何内容（</textarea>可能出现在其中的位置除外）。
例如，要显示具有受控制的换行符的单行，请考虑<textarea rows=1 cols=100 readonly> html或其他带有制表符和CrLf的字符 </textarea>。
<textarea rows=5 cols=100 readonly>Example text with Newlines,
tabs & space,
html tags etc <b>displayed</b>.
However, note that & still acts as an escape char..
Eg: <u>(text)</u>
</textarea>比较所有...
<h2>Compared: TEXTAREA, XMP, PRE, SAMP, CODE</h2>
<p>Note that CSS can be used to override default fixed space fonts in each or all these.</p>
<textarea rows=5 cols=100 readonly>TEXTAREA: Example text with Newlines,
tabs & space,
html tags etc <b>displayed natively</b>.
However, note that & still acts as an escape char..
Eg: <u>(text)</u></textarea>
<xmp>XMP: Example text with Newlines,
tabs & space,
html tags etc <b>displayed natively</b>.
However, note that & (&) will not act as an escape char..
Eg: <u>(text)</u>
</xmp>
<pre>PRE: Example text with Newlines,
tabs & space,
html tags etc <b>are interpreted, not displayed</b>.
However, note that & still acts as an escape char..
Eg: <u>(text)</u>
</pre>
<samp>SAMP: Example text with Newlines,
tabs & space,
html tags etc <b>are interpreted, not displayed</b>.
However, note that & still acts as an escape char..
Eg: <u>(text)</u>
</samp>
<code>CODE: Example text with Newlines,
tabs & space,
html tags etc <b>are interpreted, not displayed</b>.
However, note that & still acts as an escape char..
Eg: <u>(text)</u>
</code>这是一个简单的、非 JavaScript 的 HTML 解决方案，使用起来非常简单，并且优于使用<pre>和<code>元素，或者总是矫枉过正的笨拙的 JavaScript 解决方案。这个技巧我已经用了20年了！它适用于所有新旧浏览器。今天的孩子们未能学习旧的方法。
它允许您的用户快速剪切和粘贴代码示例。它还允许您快速、轻松地将代码放入 HTML 元素中，而无需转义<您>在使用<code>.
使用该<textarea>元素来共享代码，如下所示：
<textarea class="code" contenteditable="true" spellcheck="false" aria-label='Code Sample'>
My Sample Bookmark:
<a href="#bookmark1" id="b1" title="View my bookmark" target="_blank" rel="noreferrer nofollow noopener" accesskey="a" tabindex="0" aria-label="Bookmark">Got to My Bookmark</a>
</textarea>
...使用一些简单的 CSS 样式...
<style>
textarea.code {
display: block;
width: 90%;
min-height: 5em;
overflow-y: auto;
overflow-x: hidden;
font-family: monospace;
border: 1px solid #bbb;
padding: 1em;
white-space:pre-wrap;
}
</style>
请注意，它看起来像常规等宽字体<code>，但却是块级的，支持文本格式，例如<pre>，长文本现在换行，代码框大小是可控的，并且允许更灵活地显示大型 HTML 或用户可以更轻松访问的脚本块。
顺便说一句......你仍然可以使用<pre><code>. 对于较小的例子我仍然这样做。并且不用担心使用的语义或可访问性问题，<textarea>因为它是替换元素并且具有更通用的用途。如果您担心，只需向您的 中添加一个 ARIA 标签<textarea>，就像我上面所做的那样。
| 归档时间： |
|
| 查看次数： |
298092 次 |
| 最近记录： |