金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > 标签的用法,标签区别

标签的用法,标签区别

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-09 19:46

假造 <pre> 标签的体制

2016/06/02 · CSS金沙棋牌官方平台, · 标签

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

你恐怕正在使用 <pre> 标签。那是三个 HTML 中十分特殊的标签,它同意个中的空格真正突显出来。例如:多个空格将忠实突显成七个空格。那分歧于其余标签常常的做法,别的标签会将中间的空域压缩成多个。从那一点来讲,<pre>标签真的是很有用。

那篇作品里面放的好些个是本身要好写程序的时候遇到的一些没不平日,其实都是投机未有调节的点,外人看起来应当相当的轻便啦,但写下来能唤起本身,也能慰勉一下谈得来,那条路也不佳走哇。

< pre>

  • < pre> 成分可定义预格式化的文书。被包围在 pre 元素中的文本平常会保留空格和换行符。而文本也展会现为等宽字体。
    < pre> 标签的二个大规模应用便是用来代表Computer的源代码。
    可以形成段落断开的竹签(举例标题、< p> 和 <address> 标签卡塔 尔(英语:State of Qatar)绝无法包涵在 < 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> 标签用于表示Computer源代码只怕别的机器能够阅读的文件内容。
    软件代码的编者已经习以为常了编写源代码时文本表示的奇特殊形体制。< code> 标签就是为她们设计的。包罗在该标签内的文件将用等宽、相同电传机样式的字体(Courier卡塔 尔(英语:State of Qatar)显示出来。
    只应该在表示Computer程序源代码可能其余机器可以阅读的文本内容上利用 < 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 写于 2008 年的,他切磋了“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标签一个平淡无奇的使用正是用来保存Computer中的源代码的文书。不过,必要小心的是, 能够产生段落断开的竹签(比如标题、<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>标签, 用于表示Computer源代码大概其余机器能够阅读的文本内容。软件代码的编写 者习贯了编辑代码时的代码格式,那么这些<code>标签正是为软件代码编写者设计的, code标签内的文本将用等宽、近似电传机样式的字体(Courier卡塔尔展现出来。

即使在 email 中如何做?

想必因为一些原因,你的 HTML 在 email 中运用。一些标签在 email 中也许会非凡,因为你的 css 在 email 中不见到效果,因而当极其长的不换行的公文存在时,大概会毁掉掉 email 的布局。

在 CSS-Tricks, 笔者必须要要用 HighlanderSS feed 自动生成电子报刊,因而小编生成 大切诺基SS 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标签的施用:

有道是是只用在代表Computer程序源代码大概其余机器能够阅读的文件内容上。<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之间的涉及

协同点:都主要使用于浏览器突显Computer中的源代码。
不相同点: 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>:标签定义多行的文本输入控件。文本区中可容纳Infiniti数量的公文,当中的文件的默许字体是等宽字体(平常是 Courier卡塔尔。能够经过 cols 和 rows 属性来鲜明 textarea 的尺码,然则越来越好的章程是利用 CSS 的 height 和 width 属性。

其他选拔

大力让代码块很好地展现在网页上可不是风流倜傥件小事,它是值得做的干活。若是您不想协和做那一个专门的工作,CodePen 提供了内嵌版能够很好地示范代码(仍然为能够预览卡塔 尔(阿拉伯语:قطر‎,内嵌 GitHub Gists 也是叁个确实无疑的精选。

悲催的本国,八个网址访谈都慢 ╮(╯▽╰)╭ —— 译者注

1 赞 1 收藏 评论

金沙棋牌官方平台 13

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

  金沙棋牌官方平台 14

  <code>标签用于表示Computer源代码或许此外机器能够翻阅的文书内容。软件代码的编辑已经习贯了编写源代码时文本表示的极度体制。<code> 标签正是为他们安顿的。包蕴在该标签内的文书将用等宽、相像电传机样式的书体(Courier卡塔 尔(英语:State of Qatar)展现出来,对于绝大多数工程师和 W3School 的顾客来说,那应当是特别听得多了就能说的清楚的。只应该在代表Computer程序源代码可能此外机器能够翻阅的文书内容上运用 <code> 标签。尽管 <code> 标签经常只是把公文变成等宽字体,但它暗中提示着这段文本是源程序代码。今后的浏览器有异常的大可能率会参预其它突显效果。举例,工程师的浏览器也许会寻找<code> 片段,并实践有些额外的文本格式化管理,如循环和原则决断语句的特别规缩进等。

  <code>的效应图:

  金沙棋牌官方平台 15

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:标签的用法,标签区别

关键词:

上一篇:金沙棋牌官方平台技术栈开发web应用

下一篇:没有了