在上一期，我们顺口提到了——你写的网页在打开后，可能发现只是一串乱码。那么这是为什么呢？

这就是编码的神奇力量！

八卦的启示——什么是编码？

编码的思想，很早就在中国诞生了，从还不太明朗的结绳记事、算筹一直到成熟的八卦，无不包含编码的思维。

在八卦中，使用一长横“—”代表“阳”，使用两短横“- -”代表“阴”，三个横线组合起来可以形成八种不同的符号，也就是：乾（☰）、震（☳）、坎（☵）、艮（☶）、坤（☷）、巽（☴）、离（☲）、兑（☱）。这八种符号分别代表了自然界的不同事物——我们不得不惊叹前人的智慧，使用八种符号就可以表示我们世界的万物。

这，就是编码——使两个符号（阴阳）通过不同的排列，表示不同的信息。这也是计算机的核心原理之一。

我们都知道，计算机只认识0和1，而计算机能存储、表示、处理如此多样的信息，就是通过编码。只要0和1的位数足够多，就能表示出足够庞大的信息。

最简单的数字编码——二进制

计算机最初被设计来进行复杂计算，这也就诞生了最初的编码问题——我们如何用0和1来表示我们常见的十进制数字。

这里，我们不进行复杂的介绍，我们只需要知道这个常识就足够了——二进制就是我们使用两个符号来表示信息（0与1），同理，十进制也是一种编码，我们的祖先用两只手的十根手指来代表十进制里使用的10个符号（0-9）。

其对应规则如下：

十进制

二进制

0

0000

1

0001

2

0010

3

0011

4

0100

5

0101

6

0110

7

0111

8

1000

9

1001

推荐自行了解一下进制转换、二进制的计算等扩展内容。

字符编码——ASCII

ASCII全称American Standard Code for Information Interchange，美国信息交换标准代码。这种代码被设计用来表示一些常见符号和英文字母。其中包括可打印字符和不可打印字符，不可打印字符通常用来描述打字机操作，不是我们关注的重点。我们需要了解的如下表：

ASCII 码

字符

ASCII 码

字符

ASCII 码

字符

ASCII 码

字符

十进位

十六进位

十进位

十六进位

十进位

十六进位

十进位

十六进位

032

20

056

38

8

080

50

P

104

68

h

033

21

!

057

39

9

081

51

Q

105

69

i

034

22

"

058

3A

:

082

52

R

106

6A

j

035

23

#

059

3B

;

083

53

S

107

6B

k

036

24

$

060

3C

<

084

54

T

108

6C

l

037

25

%

061

3D

=

085

55

U

109

6D

m

038

26

&

062

3E

>

086

56

V

110

6E

n

039

27

'

063

3F

?

087

57

W

111

6F

o

040

28

(

064

40

@

088

58

X

112

70

p

041

29

)

065

41

A

089

59

Y

113

71

q

042

2A

*

066

42

B

090

5A

Z

114

72

r

043

2B

+

067

43

C

091

5B

[

115

73

s

044

2C

,

068

44

D

092

5C

\

116

74

t

045

2D

-

069

45

E

093

5D

]

117

75

u

046

2E

.

070

46

F

094

5E

^

118

76

v

047

2F

/

071

47

G

095

5F

_

119

77

w

048

30

0

072

48

H

096

60

`

120

78

x

049

31

1

073

49

I

097

61

a

121

79

y

050

32

2

074

4A

J

098

62

b

122

7A

z

051

33

3

075

4B

K

099

63

c

123

7B

{

052

34

4

076

4C

L

100

64

d

124

7C

|

053

35

5

077

4D

M

101

65

e

125

7D

}

054

36

6

078

4E

N

102

66

f

126

7E

~

055

37

7

079

4F

O

103

67

g

127

7F

DEL

不用害怕，这个表不需要“全文背诵”。

ASCII码最初设计时，是使用七个二进制位来表示128个字符，为了方便计算机进行处理，我们在使用时通常给它加前缀0使其变成8位，计算机中，我们常使用十六进制来避免过长的二进制串（二进制和十六进制的转换极为简单）。

我们必须牢记一点：所有的编码都是人为规定的。这可以避免一些初学者提出一些难以回答的问题，比如“为什么0的ASCII码是30？”，对于这种问题，只有统一的回答——这是人为规定的，也许方便了设计者，也许方便了使用者，也许只是设计者当时的心情不太好。

使用这套编码方式，我们就能把字符存储在计算机里了——比如我们想存一个A，则只要在计算机里存下01000001即可——这是计算机所能存储的形式。

简体中文编码——GBK

同理，GBK是另一种编码方法，这种编码方式足够复杂来表示几乎我们需要使用的所有简体汉字，对于其具体的编码方式，我们不需要掌握，感兴趣可以自行了解。

海纳百川——万国码

计算机的普及使得国际上急需一种编码标准——这种编码方式能够表示世界上所有得文字。这就是Unicode，其中最常用的一种编码方式为UTF-8。

计算机中的文本文件

我们现在知道了，想要在计算机里存储文本，就需要选择一种编码，这样才能把我们得文本表示成二进制串从而存储在计算机中，当我们需要使用时，计算机再把二进制串转成我们认识的信息——这叫解码。

这时，问题就来了，一串0和1，那么多种编码方式，计算机怎么知道这一串0和1是用了什么编码呢？遗憾的是，计算机不知道，所以，需要我们告诉它。操作系统简化了这一步骤，Windows默认使用GBK编码中文，所以我们在打开Word或者文本文档时不需要手动选择文件的解码方式，但是不同操作系统有不同的默认设置，浏览器也是如此。

当你写网页的源代码时使用了GBK编码，而浏览器使用UTF-8打开时，网页就会显示乱码——超文本文件也是文本文件。

设置网页的默认编码

幸运的是，不同编码对ASCII编码都有一定的兼容性，所以英文通常不会乱码，所以我们的标签不会因为解码方式的错误而变得乱七八糟——我们可以使用标签来告诉浏览器，我们的网页在编写的时候使用了何种编码，这样就能保证网页显示出来和我们编辑时是一样的。

我们在<head>标签中加一个标签：

<meta charset=”utf-8”>

使网页用utf-8编码显示。

HTML字符实体

我们会发现，当我们在编辑网页内容时，明明打了很多空格，但是显示出来只有一个空格，当我们需要显示<head>而不是把他作为标签时，浏览器也无法智能地处理。

这就需要用到HTML字符实体，我们直接使用一种编码来表示这个字符。

比如我们使用 来表示空格，&是各一个前缀，用来表示他后面跟了一个编码的值而不是需要显示的网页内容，#代表之后跟了一个数值。当然，给一些常用的编码取了“小名”，方便我们的使用，所以空格又可以写成&nbsp;，请务必不要漏掉分号。

其他的HTML字符实体：https://www.runoob.com/tags/ref-entities.html

如果这篇文章对你有帮助，请点个赞，你的支持就是我的动力！

点击扫描二维码，关注极客剑寮！

网页制作入门——HTML(2)编码与字符实体的更多相关文章

  1. html标题、段落、换行与字符实体

    通过 <h1>.<h2>.<h3>.<h4>.<h5>.<h6>,标签可以在网页上定义6种级别的标题.6种级别的标题表示文档的6 ...

  2. HTML段落,换行,字符实体

    HTML段落,换行,字符实体 html段落 <p>标签定义一个文本段落,一个段落含有默认的上下间距,段落之间会用这种默认间距隔开,代码如下: <!DOCTYPE html> & ...

  3. HTML、CSS、JavaScript网页制作从入门到精通 (刘西杰) pdf扫描版彩色版​

    html.css.JavaScript网页制作从入门到精通中从基础知识开始讲起,如html的基本标记.文字与段落标记.表格标记.超链接标记……同时介绍了目前流行的web标准与css网页布局实例,以及基 ...

  4. 【Ecmall】ECMall2.x模板制作入门系列（认识ECMall模板）

    ECMall2.x模板制作入门系列之1(认识ECMall模板) 从ECMall2.0全新架构发布以来,随着版本的不断更新,ECMall已经逐渐走向一个稳定时期,是时候整理一些实用教程了.下面给大家带来 ...

  5. ECMall2.x模板制作入门系列之2（模板标签/语法）

    ECMall2.x模板制作入门系列之2(模板标签/语法) 今天给大家带来一个模板语法的教程.希望能为ECMall模板制作者提供一份参考资料.如有问题.建议和意见,欢迎提出. 在ECMall模板中,用& ...

  6. 【整理】Python中实际上已经得到了正确的Unicode或某种编码的字符，但是看起来或打印出来却是乱码

    转自:http://www.crifan.com/python_already_got_correct_encoding_string_but_seems_print_messy_code/ [背景] ...

  7. 网页中常用HTML字符实体

    摘要: 一些字符在 HTML 中拥有特殊的含义,比如小于号 () 用于定义 HTML 标签的开始.如果我们希望浏览器正确地显示这些字符,我们必须在 HTML 源码中插入字符实体. 字符实体有三部分:一 ...

  8. 网页制作之html基础学习1-简介

    学习网页制作主要分为三大块 1.HTML    超文本标记语言( 全称:Hyper Text  Markup Language) 专门编辑静态网页 2.CSS      网页美化:是HTML控制的样式 ...

  9. 《SEO在网页制作中的应用》视频笔记

    学习了慕课网<SEO在网页制作中的应用>视频,今天将里面的知识整理一下. 一.SEO介绍 1.  搜索引擎工作原理 搜索引擎现在主流有百度.谷歌.360,他们都有庞大的搜索引擎数据库,每个 ...

随机推荐

  1. Visual Studio 编译Winform程序不生成.vshost.exe和.pdb文件的方法

    问题:使用Visual Studio编译工程时,默认设置下,即使选择了「Release」时也会生成扩展名为「.vshost.exe」和「.pdb」的文件. 先解释一下各个文件的作用: .pdb文件: ...

  2. cogs服务点设置（不凶，超乖） x

    cogs3. 服务点设置 ★   输入文件:djsa.in   输出文件:djsa.out   简单对比时间限制:1 s   内存限制:128 MB 问题描述为了进一步普及九年义务教育,政府要在某乡镇 ...

  3. TensorFlow使用记录 (八）： 梯度修剪 和 Max-Norm Regularization

    梯度修剪 梯度修剪主要避免训练梯度爆炸的问题,一般来说使用了 Batch Normalization 就不必要使用梯度修剪了,但还是有必要理解下实现的 In TensorFlow, the optim ...

  4. Spring——JdbcTemplate

    一.JdbcTemplate介绍: 为了使 JDBC 更加易于使用,Spring 在 JDBCAPI 上定义了一个抽象层, 以此建立一个JDBC存取框架,Spring Boot Spring Data ...

  5. CF762F Tree nesting

    题目连接 问题分析 可以给小树钦定一个根, \(Dp[i][j]\) 表示大树上的点 \(i\) 对应到小树上的点 \(j\) 的可能的方案数.然后每一步转移都是一个状压DP(将小树是否被匹配状压,然 ...

  6. Java集合框架之接口Iterator

    简述 Iterator迭代器的定义:迭代器(Iterator)模式,又叫做游标(Cursor)模式.GOF给出的定义是,提供一种方法访问一个容器(container)对象中各个元素,而又不需暴露该对象 ...

  7. 微信小程序 改变radio（单选钮）默认大小

    /* 单选钮样式 */ radio { transform:scale(0.5); }

  8. 使用Telnet访问端口发送数据

    什么是Telnet? 对于Telnet的认识,不同的人持有不同的观点,可以把Telnet当成一种通信协议,但是对于入侵者而言,Telnet只是一种远程登录的工具.一旦入侵者与远程主机建立了Telnet ...

  9. js小数点相乘或相除出现多位数的问题

    最近做一个支付的项目需要做个计算器,所以发现了一个问题. 比如: 0.03/0.00003=999.9999999999999 0.0003*0.3=0.000029999999999999997 0 ...

  10. 分享如何在github上为代码创建一个链接

    从自学前端到现在差不多一个月了,在此期间,一直有一种困惑,如何将自己电脑中编写的代码生成一个链接,以便可以发布呢?今天有幸被高人指点一二,现将其分享. 第一步,网上注册一个github账号 第二步,新 ...