html考虑<pre>标签的样式

 标签。这是一个 html 中非常特别的标签，它允许其中的空格真正显示出来。例如：四个空格将真实显示成四个空格。这不同于其他标签通常的做法，其他标签会将之间的空白压缩成一个。从这一点来说，<pre class="brush:php;toolbar:false">标签真的是很有用。<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>你在 </p><pre class="brush:php;toolbar:false"> 标签中使用 <code> 标签吗？<p></p>
<pre class="brush:php;toolbar:false"> 标签的 “per” 的意思是 “preformatted text”（预格式化的文本），没有特别规定里面的文本是什么内容。<code> 标签的语义表示其中的文本是代码。这对我来说尤其有用，当我需要显示一段代码时，使用它们，下面是一个例子：<pre class="brush:html;toolbar:false"><pre class="brush:php;toolbar:false"><code>
function cool(x) {
  return x + 1;
}
</code>

<code>和代码之间有一个换行，而这也会被显示成一个空行，这非常讨厌。没有非常好的 CSS 方法来解决这个问题，最好的方法是与 <pre class="brush:php;toolbar:false"> 标签同一行开始代码，或者用编译程序来去除这里的换行。</p><p><img src="https://img.php.cn//upload/image/141/220/754/1499484133429984.jpg" title="1499484133429984.jpg" alt="1718.jpg"/></p><p   style="max-width:90%"Microsoft Yahei", "Hiragino Sans GB", tahoma, arial, 宋体; white-space: normal; background-color: rgb(255, 255, 255);">选择一个字体</p><p>由于 <pre class="brush:php;toolbar:false"> 标签主要是用来显示代码块，而代码通常使用等宽字体，因此将 <pre class="brush:php;toolbar:false"> 的样式字体设置成等宽字体是个好主意。</p><p>对我们来说幸运地是，浏览器默认字体已经将 <pre class="brush:php;toolbar:false"> 设置成等宽字体，因此你可以不做任何处理。当然，你可以设置一个你喜欢的字体。</p><p>这里有篇文章是 Michael Tuck 写于 2009 年的，他研究了“font stacks”。font stack 是说将一组字体罗列在一个 font-family 标签中，首选字体列在前面，备选字体依次列在其后。他的等宽字体 font stack 较好地利用了跨平台系统预装字体。</p><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;

标签提供的独一无二的样式来保留空白同时折行，如同下面这样：</p><pre class="brush:html;toolbar:false">pre {
  white-space: pre-wrap;
}

pre {
  overflow-x: auto;
}

 保持默认的容器宽度，但是允许它在交互的时候展开：</p><pre class="brush:html;toolbar:false">pre:hover,
pre:focus {
  width: min-content;
}

 标签强制添加一个 inline 样式如下：</p><p><pre style="white-space: pre-wrap;">

<pre data-lang="HTML"><code>   <h1>Example code</h1> <code>

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

pre {
  tab-width: 4;
}