HTML_6——pre和code

2021/8/23 6:28:59

编程Tag： 标签 Code 元素 html 文本 text 定义 pre

本文主要是介绍HTML_6——pre和code，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1. pre 元素

1.1 定义

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。呈现等宽字体,比例字体使得可读性增强

可以导致段落断开的标签（例如标题、<p> 和 </p><address> 标签）绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。

pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如标签）放到</a><pre><a>块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。请看下面的例子：

1.2 字符实体

有些字符实体在代码里有相应的用处，所以用组合字符代替该字符,比如<或是>,浏览器会误以为是它们是标签比如 "<" 代表<，> 代表 ">"

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分（cent）	¢	¢
£	镑（pound）	£	£
¥	元（yen）	¥	¥
€	欧元（euro）	€	€
§	小节	§	§
©	版权（copyright）	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

如需完整的实体符号参考，请访问w3school的 HTML 实体符号参考手册。

1.3 实例


    
        <meta charset="utf-8">
        <title>Test测试一下</title>
    
    </a><pre><a>        <html>

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

效果:

2. code元素

2.1 定义

<code>用于定义计算机代码片段

code元素专门显示代码片段

2.2 实例



    <meta charset="utf-8">
    <title>test</title>


    <p>This is how we declare a Javascript variable:<br>
        <code>var i = 0;</code>
        </p>

效果

2.3 短语元素

以下元素都是短语元素。虽然这些标签定义的文本大多会呈现出特殊的样式，但实际上，这些标签都拥有确切的语义。

我们并不反对使用它们，但是如果您只是为了达到某种视觉效果而使用这些标签的话，我们建议您使用样式表，那么做会达到更加丰富的效果。

元素	效果
em	把文本定义为强调的内容。
strong	把文本定义为语气更强的强调的内容。
dfn	定义一个定义项目。
code	定义计算机代码文本。
samp	定义样本文本。
kbd	定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
var	定义变量。您可以将此标签与及标签配合使用。
cite	定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。





<code>Computer code</code>
<br>
<kbd>Keyboard input</kbd>
<br>
<tt>Teletype text</tt>
<br>
<samp>Sample text</samp>
<br>
<var>Computer variable</var>
<br>

<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>

效果(此例演示不同的“计算机输出”标签的显示效果。)




<b>This text is bold</b>

<br>

<strong>This text is strong</strong>

<br>

<big>This text is big</big>

<br>

<em>This text is emphasized</em>

<br>

<i>This text is italic</i>

<br>

<small>This text is small</small>

<br>

This text contains
<sub>subscript</sub>

<br>

This text contains
<sup>superscript</sup>

效果(此例演示如何在一个 HTML 文件中对文本进行格式化)

3. 语义化

在写html代码时要注重语义化

语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

4. 参考

<pre>元素

HTML <em> <strong> <dfn> <code> <samp> <kbd><var> <cite> 标签

HTML语义化

这篇关于HTML_6——pre和code的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！