html考虑<pre>标签的样式

可能正在使用 

 标签。这是一个 HTML 中非常特别的标签，它允许其中的空格真正显示出来。例如：四个空格将真实显示成四个空格。这不同于其他标签通常的做法，其他标签会将之间的空白压缩成一个。从这一点来说，<pre class="brush:php;toolbar:false">标签真的是很有用。</p>
<p style='padding: 0px; margin: 0px; color: rgb(51, 51, 51); font-family: 微软雅黑, "Microsoft Yahei", "Hiragino Sans GB", tahoma, arial, 宋体; white-space: normal; background-color: rgb(255, 255, 255);'>你在 <pre class="brush:php;toolbar:false"> 标签中使用 <code> 标签吗？</p>
<p><pre class="brush:php;toolbar:false"> 标签的 “per” 的意思是 “preformatted text”（预格式化的文本），没有特别规定里面的文本是什么内容。<code> 标签的语义表示其中的文本是代码。这对我来说尤其有用，当我需要显示一段代码时，使用它们，下面是一个例子：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/141/220/754/1499484133429984.jpg"  class="lazy" title="1499484133429984.jpg" alt="1718.jpg"/></p><p   style="max-width:90%">选择一个字体</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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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;

登录后复制