HTML5教程

HTML_6——pre和code

本文主要是介绍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>

效果:

image-20210818151146921

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>

效果

image-20210818152743768

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>

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

image-20210818153256496




<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 文件中对文本进行格式化)

image-20210818153613970

3. 语义化

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

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

4. 参考

<pre>元素

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

HTML语义化

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