HTML berücksichtigt den Stil des -Tags

Vermutlich mit dem

-Tag. Dies ist ein ganz besonderes Tag in HTML, das es ermöglicht, dass die darin enthaltenen Leerzeichen tatsächlich angezeigt werden. Beispiel: Vier Leerzeichen werden tatsächlich als vier Leerzeichen angezeigt. Dies unterscheidet sich von dem, was andere Tags normalerweise tun, bei denen die Leerzeichen zwischen ihnen zu einem einzigen komprimiert werden. Unter diesem Gesichtspunkt ist das <pre class="brush:php;toolbar:false">-Tag wirklich nützlich. <p style="padding: 0px; margin: 0px; color: rgb(51, 51, 51); font-family: 微软雅黑, " microsoft yahei sans gb tahoma arial white-space: normal background-color: rgb>Verwenden Sie das <code>-Tag innerhalb des <pre class="brush:php;toolbar:false">-Tags? 

 Das „per“ des Tags bedeutet „vorformatierter Text“ (vorformatierter Text), und es gibt keine spezifische Angabe darüber, was der darin enthaltene Text ist. Die Semantik des <code>-Tags weist darauf hin, dass es sich bei dem darin enthaltenen Text um Code handelt. Dies ist besonders nützlich für mich, wenn ich einen Teil des Codes anzeigen muss. Hier ist ein Beispiel: <pre class="brush:html;toolbar:false"><pre class="brush:php;toolbar:false"><code>
function cool(x) {
  return x + 1;
}
</code>

Zur Erklärung: Zwischen

<code> steht A Newline wird auch als Leerzeile angezeigt, was sehr ärgerlich ist. Es gibt keine gute CSS-Methode, um dieses Problem zu lösen. Der beste Weg ist, den Code in derselben Zeile wie das <pre class="brush:php;toolbar:false">-Tag zu beginnen oder einen Compiler zu verwenden, um die neue Zeile hier zu entfernen.  auf eine monospaced-Schriftart festzulegen. <p>Glücklicherweise ist die Standardschriftart des Browsers bereits auf eine monospaced-Schriftart eingestellt, sodass Sie damit nichts anfangen können. Natürlich können Sie eine Schriftart festlegen, die Ihnen gefällt. <img src="https://img.php.cn//upload/image/141/220/754/1499484133429984.jpg" title="1499484133429984.jpg" alt="HTML berücksichtigt den Stil des <pre class="brush:php;toolbar:false">-Tags"></p>Hier ist ein Artikel von Michael Tuck aus dem Jahr 2009, der sich mit „Font-Stacks“ befasste. Unter „Schriftstapel“ versteht man das Auflisten einer Gruppe von Schriftarten in einem Font-Family-Tag, wobei die bevorzugte Schriftart vorne und die alternativen Schriftarten der Reihe nach aufgeführt werden. Sein monospaced Schriftartenstapel nutzt vorinstallierte Schriftarten des plattformübergreifenden Systems optimal aus. <p   style="max-width:90%" microsoft yahei sans gb tahoma arial white-space: normal background-color: rgb></p><p></p><p></p>Ich bin mir nicht sicher, ob der Schriftartenstapel heute veraltet ist, aber es ist trotzdem ein guter Anfang. <p></p>Außerdem können Sie benutzerdefinierte Schriftarten verwenden. Oder nutzen Sie Dienste von Drittanbietern. Während ich dies schreibe, bietet Typekit 23 Monospace-Schriftarten an. <pre class="brush:html;toolbar:false">font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", 
"Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", 
"Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

Falten oder nicht falten? -Tags"></p>Hier geht es um persönliche Vorlieben. Für mich persönlich gibt es zwei Situationen. <p></p>Wenn ich Code im Editor schreibe, neige ich dazu, dass der Code automatisch umgebrochen wird, ohne dass horizontale Bildlaufleisten angezeigt werden. Und wenn ich Code in einem Artikel lese, gefällt mir, dass der Code nicht kaputt geht. Ich weiß, das ist seltsam. In CodePen bieten wir Benutzern die Möglichkeit, zu entscheiden, ob sie kaputt gehen möchten oder nicht, da jeder seine eigenen Vorlieben hat. <p></p><p style="max-width:90%" microsoft yahei sans gb tahoma arial white-space: normal background-color: rgb></p><p>Bei der Anzeige des Codes müssen Sie auswählen, ob umgebrochen werden soll oder nicht. Wenn Sie sich für den Umbruch entscheiden, können Sie glücklicherweise die einzigartigen Stile verwenden, die für das Tag </p><pre class="brush:php;toolbar:false"> bereitgestellt werden, um den Leerraum beim Umbruch beizubehalten: <p></p>Wenn Sie nicht umbrechen möchten, Sie müssen es nicht wie oben tun, aber Sie müssen bedenken, was passiert, wenn eine Zeile zu lang ist. Zu lange Zeilen können einen Container mit fester Breite dehnen oder seine Grenzen überschreiten. Um dies zu vermeiden, schlage ich vor, dass Sie eine horizontale Bildlaufleiste hinzufügen: <p><img src="https://img.php.cn//upload/image/839/197/758/1499484213362346.gif" title="1499484213362346.gif" alt="HTML berücksichtigt den Stil des <pre class="brush:php;toolbar:false">-Tags"></p><p></p><pre class="brush:html;toolbar:false">pre { white-space: pre-wrap; } Möglicherweise möchten Sie auch

max-height

in Betracht ziehen, um die maximale Höhe anzugeben und overflow:auto lässt alle Bildlaufleisten zu, um zu verhindern, dass Codeblöcke zu hoch werden.

pre {
  overflow-x: auto;
}

Vielleicht sollte es anpassungsfähig gemacht werden -Tags"></p>Manche Leute, wahrscheinlich auch Sie, mögen weder Umbruch noch Scrollen. Auch für diese Situation gibt es eine Lösung. Sie können die standardmäßige Containerbreite von <pre class="brush:php;toolbar:false"> beibehalten, es jedoch während der Interaktion erweitern: <p><pre class="brush:html;toolbar:false">pre:hover, pre:focus { width: min-content; }

-Tags"></p><p style="max-width:90%" microsoft yahei sans gb tahoma arial white-space: normal background-color: rgb>如果在 email 中怎么办？</p><p>也许因为某些原因，你的 HTML 在 email 中使用。一些标签在 email 中可能会有问题，因为你的 css 在 email 中不生效，因此当特别长的不换行的文本存在时，可能会破坏掉 email 的布局。</p><p>在 CSS-Tricks, 我必须要用 RSS feed 自动生成电子报刊，因此我生成 RSS feed 时要一个特殊处理 HTML，保证对所有的 </p><pre class="brush:php;toolbar:false"> 标签强制添加一个 inline 样式如下：<p></p><pre style="white-space: pre-wrap;">

这是我所能做的保证代码块中很长的一行不会破坏掉布局。（一般我们除了加上面的那个外，还加上 word-wrap: break-word 和 word-break: break-all—— 译者注）

你需要代码语法高亮吗？

网上不乏各种语法高亮方案，你可以搜索自己喜欢的方案。我个人推崇 Prism.js，因为：

它代码量少。

它无依赖。

它对标签的 class 起名起的好。

它允许你 copy 它的代码自己修改和定制。

-Tags"></p><p>除非从 server 端直接生成 <span> 的样式（用来语法分色），不然 Prism.js 已经足够好了。</span></p><p style="max-width:90%" microsoft yahei sans gb tahoma arial white-space: normal background-color: rgb>你标注了代码是什么语言了吗？</p><p>我个人比较喜欢在代码块上标准出使用的语言。</p><p>比如：</p><p><img src="https://img.php.cn//upload/image/452/866/390/1499484295576952.png" title="1499484295576952.png" alt="HTML berücksichtigt den Stil des <pre class="brush:php;toolbar:false">-Tags"></p><p>标记出语言的其中一种方式是通过 data-* 属性（可能你的语法高亮工具也已经要求你标记出）然后显示它，例如：</p><pre class="brush:html;toolbar:false"><pre data-lang="HTML"><code> <h1>Example code</h1> <code>

pre[data-lang]::before {
  content: attr(data-lang);
  display: block;
}

我想这也不是一种特别简单的方法，所以可能一些人只是简单在代码里注释一下。也许用 title 属性是更好的选择？

控制空格

如果你使用 tab 来缩进，你可能会觉得缩进太宽了。

默认情况下，tab 被按照 8 个空格来渲染，这很荒唐。

-Tags"></p><p>在写代码的时候，我们通常让 tab 宽度为 4 个空格。幸运地，你可以用样式控制它：</p><pre class="brush:html;toolbar:false">pre { tab-width: 4; }

就我个人而言，我喜欢直接用空格缩进。

Other options

其他选择

努力让代码块很好地展示在网页上可不是一件琐事，它是值得做的工作。如果你不想自己做这些工作，CodePen 提供了内嵌版可以很好地演示代码（还可以预览），内嵌 GitHub Gists 也是一个不错的选择

Das obige ist der detaillierte Inhalt vonHTML berücksichtigt den Stil des

-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!