标签的样式,标签的用法

设想 <pre> 标签的样式

2016/06/02 · CSS ·
标签

原文出处: Chris
Coyier   译文出处:众成翻译   

你也许正在利用 <pre>亚洲必赢官网, 标签。那是一个 HTML
中越发特其余竹签,它同意其中的空格真正呈现出来。例如:三个空格将忠实展现成七个空格。那分歧于其余标签经常的做法,其余标签会将中间的空域压缩成一个。从那点来说,<pre>标签真的是很有用。

那篇小说里面放的几近是自我要好写程序的时候蒙受的一对小意思,其实都是友好从没控制的点,旁人看起来应当很不难啦,但写下来能唤醒自己,也能鼓励一下祥和,那条路也不佳走哇。

< pre>

  • < pre> 元素可定义预格式化的公文。被包围在 pre
    元素中的文本寻常会保留空格和换行符。而文本也会显现为等宽字体。
    < pre> 标签的一个科普应用就是用来表示计算机的源代码。
    可以导致段落断开的价签(例如标题、< p> 和 <address>
    标签)绝不能包蕴在 < pre>
    所定义的块里。即便有些浏览器会把段落截至标签解释为简便地换行,可是那种行为在享有浏览器上并不都是如出一辙的。
    <
    pre >元素中允许的文件可以包罗物理样式和基于内容的体制变化,还有链接、图像和档次分隔线。当把任何标签(比如
    < a> 标签)放到 < pre> 块中时,似乎放在 HTML/XHTML
    文档的别样部分中千篇一律即可。

pre标签

你在 <pre> 标签中使用 <code> 标签吗?

<pre> 标签的 “per” 的意味是 “preformatted
text”(预格式化的文件),没有专门规定里面的文书是怎么样内容。<code>
标签的语义表示其中的文本是代码。那对本人来说越发有用,当自己须求浮现一段代码时,使用它们,上面是一个例子:

JavaScript

<pre><code> function cool(x) { return x + 1; }
</code></pre>

1
2
3
4
5
<pre><code>
function cool(x) {
  return x + 1;
}
</code></pre>

解释一下:在<pre><code>和代码之间有一个换行,而那也会被出示成一个空行,那非常讨厌。没有格外好的
CSS 方法来解决这一个标题,最好的法子是与 <pre>
标签同一行开始代码,或者用编译程序来去除那里的换行。

亚洲必赢官网 1

<pre> <textarea>
<code>七个标签不一致:之所以要说这么些,是因为我在写代码的时候境遇那样的标题:须要把html源代码在网页中显示出来,直接写<>那样的标签分明会被浏览器解析,因而我查了一晃,可以用<代替<
,>代替>,然则一向那样写会失去代码中的换行等具体格式,万分难读,因而就应用了特其余竹签达成。

< code>

  • < code>
    标签用于表示计算机源代码或者其余机器可以翻阅的文本内容。
    软件代码的编者已经数见不鲜了编写源代码时文本表示的尤其体制。<
    code>
    标签就是为他们布置的。包涵在该标签内的公文将用等宽、类似电传打字机样式的书体(Courier)彰显出来。
    只应该在象征计算机程序源代码或者其他机器可以阅读的文件内容上选拔< code> 标签。就算 < code>
    标签平时只是把文件变成等宽字体,但它暗示着那段文本是源程序代码。以后的浏览器有可能会加入其他展现效果。例如,程序员的浏览器可能会招来
    < code>
    片段,并履行某些额外的文本格式化处理,如循环和原则判断语句的独特缩进等。

  • 概括,一般在插入一行代码时使用< pre>,多行时利用<
    code>

1.pre标签的定义:

<pre>标签用来定义预格式化的文件,被包围在pre标签中的文本平常会保留空格和换行符,
而文本也会展现出等宽字体。同样,pre标签的一个周边的拔取便是用来保存计算机中的源代码文本。示例如下:

代码:

<pre> 
   html中pre和code标签,       html中pre和code标签   
   html中pre和code标签, html中pre和code标签    

   html中pre和code标签
</pre>

效果:

亚洲必赢官网 2

pre在浏览器中的效果.png

接纳一个字体

由于 <pre>标签的样式,标签的用法。 标签紧如若用来突显代码块,而代码平常采纳等宽字体,因而将
<pre> 的样式字体设置成等宽字体是个好主意。

对大家的话幸运地是,浏览器默许字体已经将 <pre>
设置成等宽字体,因而你可以不做任何处理。当然,你可以设置一个您欣赏的字体。

此地有篇文章是
迈克尔 Tuck 写于 2009 年的,他研讨了“font
stacks”。font stack
是说将一组字体罗列在一个 font-family
标签中,首选字体列在头里,备选字体依次列在其后。他的等宽字体 font stack
较好地运用了跨平台系统预装字体。

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;

1
2
3
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;

亚洲必赢官网 3

自身不确定 font stack 在后天有没有不合时宜,不管怎么样这是一个好的开首。

除此以外,你可以用自定义字体。或者采纳第三方服务。在自我写下那篇小说的时候,Typekit
提供了 23
种等宽字体。

  <pre>:pre 元素可定义预格式化的文书。被包围在 pre
元素中的文本寻常会保留空格和换行符。而文本也会展现为等宽字体。可以造成段落断开的标签(例如标题、<p>
和 <address>
标签)绝不能包含在
<pre>
所定义的块里。尽管有些浏览器会把段落为止标签解释为简易地换行,不过那种作为在装有浏览器上并不都是一模一样的。pre
元素中允许的文书可以概括物理样式和根据内容的样式变化,还有链接、图像和水平分隔线。当把别的标签(比如
<a> 标签)放到 <pre> 块中时,就像是放在 HTML/XHTML
文档的别样一些中平等即可。

2.pre标签的效力:

pre标签一个大规模的行使便是用来保存总括机中的源代码的公文。可是,需求注意的是,
可以导致段落断开的标签(例如标题、<p> 和 <address>
标签)绝不可以包蕴在 <pre> 所定义的块里。
pre标签允许的文件能够包涵物理样式和按照内容的样式变化,还有链接、图像和水准分隔线。
当把任何标签(比如 <a> 标签)放到 <pre> 块中时,如同放在
HTML/XHTML 文档的任何一些中一致即可。示例如下:

代码:

<pre>  
    &lt;html&gt;
    &lt;head&gt;
    &lt;script type=&quot;text/javascript&quot;           src=&quot;loadxmldoc.js&quot;&gt;
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
xmlDoc=&lt;<font     color="blue">a&nbsp;href="dom_loadxmldoc.asp"&gt;loadXMLDoc&lt;/a    &gt;</font>(&quot;books.xml&quot;);
document.write(&quot;xmlDoc is loaded, ready for use&quot;);
    &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;
</pre>

效果:

亚洲必赢官网 4

pre标签.png

折行仍然不折行?

那有关个人偏好,对自我个人来说,分三种情状。

当自家自己在编辑器写代码时,我倾向于让代码自动折行而不出新水平滚动条。而当我在小说中阅读代码时,我爱好代码不折行。我掌握那很奇怪。在
CodePen
里,大家将折不折行提供成一个抉择让用户自己挑选,因为大家当然就是萝卜青菜各有所爱。

亚洲必赢官网 5

在显示代码的时候,你需要拔取究竟是或不是折行。倘使您拔取折行,幸运地,你可以运用为<pre>标签提供的绝世的体制来保存空白同时折行,就如上面那样:

CSS

pre { white-space: pre-wrap; }

1
2
3
pre {
  white-space: pre-wrap;
}

即使您不想折行,你就无须像上边那样做,然而你得考虑若是一行太长了咋办。太长的行可能会撑开固定宽度的容器或者超越容器范围。要防止这么些,我指出你加上横向滚动条:

CSS

pre { overflow-x: auto; }

1
2
3
pre {
  overflow-x: auto;
}

亚洲必赢官网 6

你也说不定要考虑 max-height 指定最大高度,以及 overflow:auto
允许所有的滚动条,来幸免代码块过高。

  将代码放在<pre>中的源码:

code标签

可能该让它自适应

一部分人,可能包罗你,既不希罕折行也不希罕滚动条。那种状态也有化解方案。你可以让
<pre> 保持默许的容器宽度,可是允许它在交互的时候举行:

CSS

pre:hover, pre:focus { width: min-content; }

1
2
3
4
pre:hover,
pre:focus {
  width: min-content;
}

亚洲必赢官网 7

  

1.code标签的定义:

<code>标签,
用于表示计算机源代码或者别的机器能够阅读的文件内容。软件代码的编排
者习惯了编制代码时的代码格式,那么这么些<code>标签就是为软件代码编写者设计的,
code标签内的公文将用等宽、类似电传打字机样式的书体(Courier)突显出来。

如果在 email 中如何是好?

或许因为一些原因,你的 HTML 在 email 中行使。一些标签在 email
中可能会有标题,因为你的 css 在 email
中不奏效,因此当越发长的不换行的文件存在时,可能会毁掉掉 email 的布局。

在 CSS-Tricks, 我不能够不要用 RSS feed 自动生成电子报刊,因而我生成 RSS feed
时要一个不相同平时处理 HTML,有限支撑对拥有的 <pre> 标签强制添加一个 inline
样式如下:

XHTML

<pre style=”white-space: pre-wrap;”></pre>

1
<pre style="white-space: pre-wrap;"></pre>

这是本身所能做的保障代码块中很长的一行不会破坏掉布局。(一般大家除了助长面的那一个外,还助长
word-wrap: break-wordword-break: break-all—— 译者注)

<pre>
&lt;div id="div1"&gt;
&lt;p id="p1"&gt;这是一个段落&lt;/p&gt;
&lt;p id="p2"&gt;这是另一个段落&lt;/p&gt;
&lt;/div&gt;

&lt;script&gt;
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
&lt;/script&gt;
</pre>

2.code标签的利用:

有道是是只用在代表统计机程序源代码或者其余机器能够翻阅的文书内容上。<code>
标签的作用有:将文件变成等宽字体;还有一个职能就是暗示那段文本是源程序代码。那么按照第三个作用,未来浏览器可能会基于自己的实际情形添加效果。例如,程序员的浏览器可能会寻找
<code> 片段,并施行某
些额外的文本格式化处理,如循环和规范判断语句的优异缩进等。

代码:

<code>
       var a;
       var b=document.getELementById("id1").value;
       var c=document.getELementById("id2").value;

       return a+b+c;
</code>

效果:

亚洲必赢官网 8

code使用.png

您须要代码语法高亮吗?

网上不乏各类语法高亮方案,你可以搜索自己喜爱的方案。我个人推崇
Prism.js,因为:

  1. 它代码量少。
  2. 它无依靠。
  3. 它对标签的 class 起名起的好。
  4. 它同意你 copy 它的代码自己修改和定制。

亚洲必赢官网 9

唯有从 server 端直接生成 “ 的体制(用来语法分色),不然 Prism.js
已经充分好了。

  注意此时仍急需用<代替< ,>代替>。

code和pre之间的涉及

共同点:都重点行使于浏览器突显统计机中的源代码。
差异点:
code标签的一个意义是暗示浏览器code标签所包围的文本是持筹握算机源代码,浏览器能够做出自己的
样式处理,pre标签则没有那项作用,不过pre标签能够保留文本中的空格和换行符,保留文本中的空格和换行符是总计机源代码显示所不可不的体制。code标签和pre标签是
可以嵌套使用的,不过必须小心两者的嵌套顺序。

你标注了代码是如何语言了呢?

我个人比较欣赏在代码块上正式出利用的言语。

比如:

亚洲必赢官网 10

标志出语言的内部一种形式是通过 data-*
属性(可能你的语法高亮工具也早已必要您标记出)然后突显它,例如:

XHTML

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

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

CSS

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

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

本身想这也不是一种专门不难的主意,所以可能有的人只是简单在代码里注释一下。也许用
title 属性是更好的抉择?

  效果:

决定空格

若是您使用 tab 来缩进,你也许会以为缩进太宽了。

默许意况下,tab 被根据 8 个空格来渲染,那很荒唐。

亚洲必赢官网 11

在写代码的时候,大家常见让 tab 宽度为 4
个空格。幸运地,你能够用样式控制它:

CSS

pre { tab-width: 4; }

1
2
3
pre {
  tab-width: 4;
}

就自我个人而言,我爱好平素用空格缩进。

  亚洲必赢官网 12

Other options

  <textarea>:标签定义多行的文件输入控件。文本区中可容纳无限数量的文书,其中的文书的默许字体是等宽字体(日常是
Courier)。可以由此 cols 和 rows 属性来确定 textarea
的尺码,然而更好的方法是行使 CSS 的 height 和 width 属性。

别的选项

用力让代码块很好地展现在网页上可不是一件麻烦事,它是值得做的行事。即使你不想协调做那些干活儿,CodePen
提供了内嵌版可以很好地示范代码(仍可以够预览),内嵌
GitHub Gists 也是一个毋庸置疑的挑三拣四。

悲催的境内,多少个网站访问都慢 ╮(╯▽╰)╭ —— 译者注

1 赞 1 收藏
评论

亚洲必赢官网 13

  源代码与上述同样,效果图为:

  亚洲必赢官网 14

  <code>标签用于表示计算机源代码或者其余机器能够阅读的文本内容。软件代码的编者已经见怪不怪了编写源代码时文本表示的例外体制。<code>
标签就是为她们设计的。包罗在该标签内的文本将用等宽、类似电传打字机样式的字体(Courier)彰显出来,对于多数程序员和
W3School
的用户来说,那应当是那几个熟知的。只应该在代表统计机程序源代码或者其他机器可以翻阅的公文内容上利用
<code> 标签。就算 <code>
标签经常只是把公文变成等宽字体,但它暗示着那段文本是源程序代码。将来的浏览器有可能会投入此外突显效果。例如,程序员的浏览器可能会寻找
<code>
片段,并执行某些额外的文本格式化处理,如循环和规范判断语句的新鲜缩进等。

  <code>的机能图:

  亚洲必赢官网 15

网站地图xml地图