在HTML中插入代码有多种方法，下面将介绍几种常见的方法。
1、使用<code>标签
<code>标签是HTML5新增的标签，用于表示计算机代码文本，通过将代码包裹在<code>标签中，浏览器会自动将其显示为等宽字体。
<code>
function helloWorld() {
console.log("Hello, World!");
}
</code>
2、使用<pre>和<code>标签
<pre>标签用于表示预格式化的文本，即保留文本中的空格和换行符，将代码包裹在<pre>标签中，并在内部使用<code>标签，可以实现类似的效果。
<pre>
<code>
function helloWorld() {
console.log("Hello, World!");
}
</code>
</pre>
3、使用在线工具生成代码块
有许多在线工具可以帮助您快速生成漂亮的代码块，例如CodePen、JSFiddle等，这些工具通常会提供一种简单的方法来插入和编辑代码，然后将生成的代码以漂亮的格式展示出来，使用CodePen插入如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Example</title>
</head>
<body>
<h1>My Code Example</h1>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Example</title>
</head>
<body>
<h1>My Code Example</h1>
<script>
function helloWorld() {
console.log("Hello, World!");
}
helloWorld();
</script>
</body></code></pre>
</body>
</html>
4、使用CSS样式自定义代码块样式
除了使用上述方法插入代码外，您还可以通过CSS样式自定义代码块的外观，可以使用以下CSS样式设置代码块的背景颜色、字体大小和间距：
pre code {
background-color: f5f5f5;
font-size: 14px;
padding: 2px 4px;
}
将上述CSS样式添加到HTML文件的<style>标签中，或者将其保存为一个单独的CSS文件并链接到HTML文件中，将代码包裹在<pre>和<code>标签中，即可看到自定义样式的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Code Example</title>
<style>
pre code {
background-color: f5f5f5;
font-size: 14px;
padding: 2px 4px;
}
</style>
</head>
<body>
<h1>My Custom Code Example</h1>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Code Example</title>
</head>
<body>
<h1>My Custom Code Example</h1>
<script>
function helloWorld() {
console.log("Hello, World!");
}
helloWorld();
</script>
</body></code></pre>
</body>
</html>
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/375946.html
微信扫一扫 