009 - 所见即所得

不二如是 · 发表于 2018-6-23 20:19:46

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2021-6-4 17:36 编辑

上一集：008 - 相拥和独行

在线视频：

课程思维导图

猛戳

登录/注册后可看大图

超清

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>
<!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>

复制代码

登录/注册后可看大图

显示效果是一样滴，但是这样拥有更好的语义话～

毕竟，细节决定成败，要从一开始就养成：

用最适合的标签干正确的事情～

在日常开发中常将code元素内嵌到pre元素中。

code元素是行内，pre元素是块级，这样做方便后续c s s样式设置，鱼油只需要知道即可～

6、var，kbd，samp元素

var元素用于定义程序的变量。（详细请看：传送门）

kbd元素用于定义键盘输入文本。（详细请看：传送门）

samp元素用于定义计算机程序的输出。（详细请看：传送门）

小甲鱼老师课上的代码：

其实是一个很好玩的例子，涉及到后面另一个教程《零基础入门学习JavaScript》。

此处，先不做介绍，把源代（彩蛋）码给大家，先去玩一玩：

游客，如果您要查看本帖隐藏内容请回复

好了，我们写一段说明：

<p>上面代码定义了一个变量<var>user_input</var>,用于接受用户的输入</p>
<p>如果用户输入的是<kbd>香蕉</kbd>，那么程序将打印<samp>你最喜欢吃的水果是：香蕉</samp></p>

复制代码

课后作业，完成了吗？

传送门

登录/注册后可看大图

下一集：010 - 引用大作战

如果有收获，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅专辑☞（传送门）（不喜欢更要订阅

）

登录/注册后可看大图

Romeo · 发表于 2018-6-23 23:23:31

在日常开发中常将code元素内嵌到pre元素中。

不二哥，行内元素中不是只能写行内元素吗？

NinHeaven · 发表于 2018-7-6 00:01:40

cjj735243954 · 发表于 2018-7-19 10:47:51

‘’

floride · 发表于 2018-7-24 18:40:56

那微笑阳光 · 发表于 2018-8-19 16:57:38

复制代码时，会把代码前面的行数也复制进去，请问可以改进下吗？

那微笑阳光 · 发表于 2018-8-19 16:59:25

Romeo 发表于 2018-6-23 23:23
不二哥，行内元素中不是只能写行内元素吗？

没问题呀，pre 是块级元素，code是行内元素，将code内嵌到pre中，你可能没读仔细

被遗忘的指环 · 发表于 2018-8-19 18:05:48

每天都能看见你好多帖啊哈哈哈

AVAN · 发表于 2018-9-2 17:47:07

源代

邓文龙0513 · 发表于 2018-9-14 18:25:19

好厉害

无敌太刀 · 发表于 2018-10-2 20:39:07

·······

Azathouth · 发表于 2018-10-6 12:28:58

学习学习

782173264 · 发表于 2018-10-28 16:25:46

哈哈哈

w877713458 · 发表于 2018-10-29 16:23:19

12345

刹那疾风 · 发表于 2018-11-26 15:34:28

只要是笔记我都支持

JustinZhu · 发表于 2018-11-27 20:29:20

看一看

GodChan · 发表于 2018-12-18 23:20:16

周某人 · 发表于 2018-12-28 15:51:42

加油

mercutio_john · 发表于 2019-1-7 14:47:15

我爱鱼C

拯救世界的同学 · 发表于 2019-1-10 11:45:28

嘻嘻

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 009 - 所见即所得

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐: