简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

HTML 代码标签

PHPz
发布： 2024-09-04 16:28:53
原创
784 人浏览过

HTML 或超文本标记语言是一种 Web 开发编程语言，它使用标签来定义、声明和在任何网页元素上执行操作。标签使用符号 和 。 ……。 ，因为 HTML 中的每个标签都必须有一个结束标签。

语法及解释：

基本语法如下所示，其中元素带有一对，代码片段写在这些标签之间。这里不执行标签省略，因为默认情况下起始标签和结束标签都是必需的。

<pre class="brush:php;toolbar:false">
<code>
….
….
</code>
登录后复制

代码标签在 HTML 中如何工作？

默认情况下，的内容是标签字体使用等宽字体显示，这意味着给定内容中的所有字符具有相同的宽度。它在 HTML 5 和 HTML4 标准中都有指定。

HTML 使用各种文本大小以及更多字体和缩进属性。有一种场景，需要在浏览器中显示一些内容，同时包含文本和代码片段，那么我们就需要使用这个标签。代码标签与预格式化标签 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> 配对，它保留了源文档中写入的文本的确切格式。</pre><div class="contentsignin">登录后复制</div></div>

为了在同一行开始文本，使用了这个标签，它实际上删除了空格。为了以字体样式表示代码，最好使用CSS样式的代码选择器并给出视觉权重。要选择字体，最好将 CSS 设置为等宽字体。浏览器兼容性方面，chrome、edge、opera、safari、Firefox 均支持。即使这个元素也支持事件和全局属性。代码标签使用预定义语言的类属性以及 、

此代码标签在实现时使用了一些元素。

  • : 定义代码片段
  • : 解释变量
  • ：抛出计算机输出
  • ：帮助显示键盘输入

实现 HTML 代码标签的示例

这是代码标签上具有不同样式的示例。

示例#1

这里第一个示例程序是显示代码，这形成了基本的内联概念。

代码：

<!DOCTYPE html>
<html>
<body>
<em># Display the sum</em><br>
<strong>program adds two numbers</strong><br>
<pre class="brush:php;toolbar:false">
<code>
nu1 = 2.5
nu2 = 5.3
sum = float(nu1) + float(nu2)
print('The sum of two num {0} and {1} is {2}'.format(nu1, nu2, sum))</code>

output from a program
input
Variable declaration
登录后复制

生成的输出如下所示，它显示了程序代码的内容以及使用 的输出。网页上的标签。为了换行片段的多行，计算机代码

下面使用了元素。</samp></p>
<p><strong>输出：</strong></p>
<p><img  src="https://img.php.cn/upload/article/000/000/000/172543853827005.png" alt="HTML 代码标签" ></p>
<p>使用多个<code>同一程序中的元素。</code></p>
<p><strong>代码：</strong></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<body>
<h1>Various Programming language</h1>
<h2> Java</h2>
<code>
import java.io.*;<br>
System.out.println();
</code>
<h2>C programming</h2>
<code>
#include <stdio.h><br>
void main()<br>
printf()
</code>
</body>
</html>
登录后复制

我们有一个小代码快照，在网页上显示上述代码的 Java 和 C 编程示例。

输出：

HTML 代码标签

示例#2

第二个示例显示了一个示例程序，该程序以居中对齐方式显示代码。

代码：

<!DOCTYPE html>
<html>
<body>
<code>
<center>
x = 3;
y = 2;
c = "To add a program";
</center>
</code>
</body>
</html>
登录后复制

输出：

HTML 代码标签

示例#3

此外，我还包括了

显示程序以及描述内容的概念（给出语义信息）。甚至我们可以在它们之间添加任何功能代码以提供程序的好处。

代码：

<!DOCTYPE html>
<h1>Demo of article tag</h1>
<p>The <code> fact()</code> this method is used to calculate a factorial of a given number.</p>
登录后复制

代码：

code {
background-color: #8A2BE2;
border-radius: 2px;
font-family: "Courier New", monospace;
padding: 0 4px;
}
登录后复制

输出：

HTML 代码标签

示例#4

使用 href linkOutput 的 html 代码格式。

代码：

<!DOCTYPE html>
<h1>Demo of code tag</h1>
<p>This is an implementaion of a <a href="http://www.educba.com" title="online tutorial"><code>link to edu</code></a> displayed with code tag.</p>
登录后复制

代码：

code {
background-color: #6495ED;
border-radius: 5px;
font-family: "italic", monospace;
padding: 1 5px;
}
登录后复制

输出：

HTML 代码标签

示例#5

为了正确地编写代码并查看和阅读时尚，我们必须使用