文章目录


注：学习笔记基于小甲鱼学习视频，官方论坛： https://fishc.com.cn/forum.php

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/

学习正文

pre标签：https://man.ilovefishc.com/pageHTML5/pre.html
code标签：https://man.ilovefishc.com/pageHTML5/code.html
在 HTML 中，某些字符是预留的。不能使用包含这些字符的文本。比如在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
关于具体的字符实体，可以去网站：https://man.ilovefishc.com/html5/查看。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十节课</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
	<style>
		span {color: red}
	</style>
</head>
<body>
	<pre>
		&#60;!DOCTYPE html&#62;
		&#60;html lang=&#34;en&#34;&#62;
		&#60;head&#62;
			&#60;meta charset=&#34;UTF-8&#34;&#62;
			&#60;title&#62;第十节课&#60;/title&#62;
			&#60;meta name=&#34;viewport&#34; content=&#34;width=device-width, intial-scale=1.0&#34;&#62;
			&#60;meta name=&#34;keywords&#34; content=&#34;小甲鱼,Web开发,HTML5,CSS3,Web编程教学&#34;&#62;
			&#60;meta name=&#34;description&#34; content=&#34;《零基础入门学习Web开发》案例演示&#34;&#62;
			&#60;meta name=&#34;author&#34; content=&#34;小甲鱼&#34;&#62;
			&#60;style&#62;
				span {color: red}
			&#60;/style&#62;
		&#60;/body&#62;
		&#60;/html&#62;
	</pre>
</body>
</html>

通常情况下，我们也可以code标签用于定义计算机代码片段。
如果我们要显示一大坨代码，建议使用pre标签里面嵌套一个code标签，这样语义化的效果更好。并且code标签可以通过CSS定制，展示更丰富的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十节课</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
	<style>
		span {color: red}
	</style>
</head>
<body>
	<p>HTML中注释的语法是：<code>&#60;!--这里是注释--&#62;</code></p>
</body>
</html>

<!--pre标签里嵌套code标签-->
<pre>
<code>
	你要显示的代码（字符实体显示）
</pre>
</code>

零基础学习HTML(8)——pre标签、code标签_Html
零基础学习HTML(8)——pre标签、code标签_CSS_02
另外还有三个标签，但没有细讲：
var标签：定义程序的变量。
kbd标签：定义用户的输入。
samp标签：定义程序的输出。