009 - 所见即所得
本帖最后由 不二如是 于 2021-6-4 17:36 编辑上一集：008 - 相拥和独行
在线视频：
https://www.bilibili.com/video/BV1QW411N762?p=10
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
1、pre元素
上一节最后的代码，我们对页面添加了p元素，才显示出想要的效果。
有没有更加方便的操作呢？
有，那就是用pre元素。
pre元素用于定义预格式化的文本。（详细请看：传送门）
我们只需，在整段文本前后，添加：
<pre>
"这在现实世界中完全行不通。"当你向人们介绍一个新创意时，人们总是这么说。
这个"现实世界"听起来是如此令人沮丧，貌似所有的新创意、新提案以及外来概念总是会在"现实世界"中碰壁。
在这里，能够利于不败之地的都是那些人们耳熟能详、习以为常的食物，即使这些东西已经漏洞百出或陈腐低效。
撕开这个"现实世界"的遮羞布后，你会发现栖居其中的人们都充满着悲观和绝望的情绪。
他们期待看到新概念被斩落马下，他们认为这个社会还没有准备好迎接变革，也无力引发变革。他们手中的蛋糕依旧只能独享。
...
</pre>
然后就会看到：
浏览器保存了我们设置的空格和换行符，文本显示为等宽字体。
这就是pre元素的妙用，可以改变浏览器处理内容的方式，被包围在pre元素中的文本通常会保留空格和换行符。
而文本也会呈现为等宽字体，让源文档中的格式可以保留。
pre元素中还可以直接放代码：
<pre>
for(var i = 0 ; i < 99 ;i++)
{
document.write("我爱鱼C");
}
</pre>
上述代码用pre元素标记了一段JavaScript代码，由于并非位于一个script元素中，所以这段代码不会被执行。
所以只是一段普通的文本。
由于浏览器不会重新编排pre元素中的内容格式，所以每一行开头的空格或者tab都会显示在浏览器窗口中。
2、HTML字符实体（Character Entities）
通过pre元素，拷贝一下最简单的页面结构代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="鱼C工作室">
<title>pre元素</title>
</head>
<body>
<!--演示pre元素-->
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="鱼C工作室">
<title>pre元素</title>
</head>
<body>
</body>
</html>
</pre>
</body>
</html>
正确运行后，是不是什么也木有看到呢？
很正常，因为"<>"这些字符就是字符实体，被代码征用了，优先级最高。
只要被浏览器看到，不管在什么元素中，都会被解析为对应的标签。
而标签的话，会按照相应的定义，被浏览器执行，所以什么也看不到。
常用的字符实体就是“<、>、"”，更多鱼油请看速查宝典，传送门
而要想显示字符实体，就需要输入上面图片对应的实体编号或者实体名称。
只需要在字符实体对应的地方，替换为相应的编码就可以。
"，","
<,<,<
>,>,>
注意：
不管是实体编号还是实体名称，替换的时候最后面的“；”千万别忘了哦～
将pre元素中的字符实体都替换（自行动手，此处演示用编号和名称的替换）。
<用编号，>用名称，当这两个变成文本后，“其实不需要替换：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="鱼C工作室">
<title>pre元素</title>
</head>
<body>
</body>
</html>>
替换完成后，浏览器看到字符实体，就知道此处要解析为字符而不是标签啦～
3、等宽字体（Monospaced Font）
等宽字体(monospaced font)是指字符宽度相同的电脑字体。
东亚语言中,方块字基本上都作为等宽字体处理。
基本上就是程序员为了更好看代码的小私心～
详细演示请看下面5、var，kbd，samp元素最后的演示。
更多推荐请看：10个免费超棒的编程用等宽字体（转）
4、语义化
人，指代码的开发者，也指阅读代码的人。
机器，指浏览器内核，第三方代码（爬虫）。
良好的语义话，是HTML5的进化方向，后续我们会介绍到。
此处，只需要鱼油知道：
代码编写时，要使用更加符合实际含义的标签。
就拿一开始的例子来说，我们pre元素显示代码。
这么做可以，但是还有更好的方案，就是code元素。
5、code元素
code元素用于定义计算机代码片段。（详细请看：传送门）
上面pre中调用的代码，还可以这么写：
<code>
for(var i = 0 ; i < 99 ;i++)
{
document.write("我爱鱼C");
}
</code>
http://xxx.fishc.com/forum/201806/22/112819gvf663s303v6wh3f.png
显示效果是一样滴，但是这样拥有更好的语义话～
毕竟，细节决定成败，要从一开始就养成：
用最适合的标签干正确的事情～
在日常开发中常将code元素内嵌到pre元素中。
code元素是行内，pre元素是块级，这样做方便后续c s s样式设置，鱼油只需要知道即可～
6、var，kbd，samp元素
var元素用于定义程序的变量。（详细请看：传送门）
kbd元素用于定义键盘输入文本。（详细请看：传送门）
samp元素用于定义计算机程序的输出。（详细请看：传送门）
小甲鱼老师课上的代码：
其实是一个很好玩的例子，涉及到后面另一个教程《零基础入门学习JavaScript》。
此处，先不做介绍，把源代（彩蛋）码给大家，先去玩一玩：
**** Hidden Message *****
好了，我们写一段说明：
<p>上面代码定义了一个变量<var>user_input</var>,用于接受用户的输入</p>
<p>如果用户输入的是<kbd>香蕉</kbd>，那么程序将打印<samp>你最喜欢吃的水果是：香蕉</samp></p>
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：010 - 引用大作战
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif
在日常开发中常将code元素内嵌到pre元素中。
不二哥，行内元素中不是只能写行内元素吗？{:5_94:} {:5_91:} ‘’ {:7_146:} 复制代码时，会把代码前面的行数也复制进去，请问可以改进下吗？ Romeo 发表于 2018-6-23 23:23
不二哥，行内元素中不是只能写行内元素吗？
没问题呀，pre 是块级元素，code是行内元素，将code内嵌到pre中，你可能没读仔细 每天都能看见你好多帖啊 哈哈哈 源代 好厉害 ······· 学习学习
哈哈哈 12345 只要是笔记我都支持 看一看 1
加油
我爱鱼C 嘻嘻