Web前端开发技术

Appearance

格式与转义 ​

元信息 ​

  • 目标：理解浏览器默认过滤空白字符正是"HTML 聚焦语义"设计初衷的体现；掌握 pre/code 保留格式的例外用法与字符实体转义——在 HTML 里显示 HTML 的唯一正途
  • 关键概念：空白字符、pre标记、code标记、转义、字符实体
  • 关联阶段：cp1
  • 常见误区：以为多个空格/换行能控制 HTML 排版（默认全被过滤）；以为 <code> 会让浏览器把内容当代码原样显示（浏览器不识别代码种类，仍按 HTML 解析）；在源码里直接写 <h1> 想显示标签本身（被渲染成标题，须写 &lt;h1&gt;） 演示： https://openxyz.github.com/web_front_code/resume/01-html/index-code.html

空白字符 ​

细心的同学会发现，在制作html文档时，虽然你在某段文本中插入了多个空格，然而在浏览器中显示时，这些空格却统统消失不见了。

这是因为：在浏览器对html文档的默认处理规则中，文本中的空白字符，将会被浏览器自动过滤和删除掉。

所谓空白字符: 指空格、制表符、换行符、回车符、换页符、垂直制表符等。它们的共同的特征是没有对应的文字显示形态及含义，所以统称为空白字符。

空白字符源于传统的印刷术，人们使用大幅的留白、换行或对齐等方式来设计符合人类视觉习惯的版式，方便人类阅读。

但是，正如本书所一直所强调的，html文档应当聚焦于语义，因此这一类与内容无关的空白字符必须被无情的删除或忽略，而浏览器忠实的执行了这一html标准的设计初衷。

<pre> ​

不过，凡事都有例外，有些时候，作者不得已需要在html文档中插入有格式文本，譬如诗歌之类。

此时，可以使用<pre>标记(preserve)，保留文本的原有格式。

参考 http://www.runoob.com/tags/tag-pre.html

<code> ​

与<pre>经常组合使用的标记是<code>, <code>用于标记一段计算机代码或数学表达式。而一般来说，代码总会包含有特殊的排版格式，所以两者总是形影不离

http://www.runoob.com/tags/tag-code.html

问题: 在html文档中插入html代码 ​

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

初入门的读者可能会认为，浏览器会识别出这是一段html源代码，从而将<h1></h1>、<h2></h2>、<h3></h3>作为内容文本而不是源代码原样不动的显示在屏幕上。然而，当你实际在浏览器中运行上述代码，你会发现什么也未显示出来。

答案很简单，浏览器忠实的对<h1></h1>、<h2></h2>、<h3></h3>这一段html标记或源代码进行了渲染，但是由于标记中没有文本，因此在屏幕上显示为一片空白。

你可能会说，我明明使用了<code>标记告诉浏览器这是一段代码。但很不幸的是，在当前的浏览器软件中，对于<code>所标记的内容并不会进行任何特殊的处理，仍然是按照普通html文档进行处理和渲染。这里的道理很简单，世界上的代码种类有成千上万，浏览器无法一一识别并为其做特殊处理。

转义 ​

其实，在任何计算机语言中都存在这类状况，即如何在源代码中嵌入和引用一段源代码，并标记或告知编译器或处理器这段代码是普通文本而不是代码。

解决方案就是：转义。各类编程语言中都提供有转义机制，在html中，则是字符实体。

字符实体使用了另一种书写机制来表达html代码。也就是说，当使用字符实体形式来书写html源代码，则浏览器将其视为内容文本，而不是源代码标记。譬如:

  • "&lt;" 代表 "<"，"&gt;" 代表 ">"，"&nbsp;" 表示空格
  • &lt;h3&gt;登金陵凤凰台&lt;/h3&gt; 在浏览器中将被渲染为<h3>登金陵凤凰台</h3> ，而不是三级标题

http://www.runoob.com/html/html-entities.html