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

这就是编码的神奇力量！

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

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

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

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

我们都知道，计算机只认识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. STM32F103C8T6最小板搞定CMSIS-DAP和SWO功能

    转载:http://www.stmcu.org.cn/module/forum/forum.php?mod=viewthread&tid=616081&extra=page%3D&am ...

  2. nginx 缓存，大文件分片请求方法

    实现的途径:expire cache-control 更新缓存的机制 如何校验本地缓存是否过期 expires cache-control(max-age)如果超期,说明失效 然后进行etag是否过期 ...

  3. LocalDate使用（转）

    3.Date 3.1.JDK7 Date缺点 1.所有的日期类都是可变的,因此他们都不是线程安全的,这是Java日期类最大的问题之一 2.Java的日期/时间类的定义并不一致,在java.util和j ...

  4. 【C#-导出Excel】DataSet导出Excel

    1.添加引用 2.封装方法 using System; using System.Data; using System.IO; using NPOI.HSSF.UserModel; using NPO ...

  5. css3常用动画大全：translate、scale、opacity、rotate （转）

    /* animation */ .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animation:1s ...

  6. removeAttr(name)

    removeAttr(name) 概述 从每一个匹配的元素中删除一个属性 1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的.解决的方法就是使用$(" ...

  7. 删除git的远程分支

    命令:$ git push origin [空格][冒号][需要删除的分支名字] git push origin :dev 删除git的凭证的方法: 控制面板\用户帐户\凭据管理器  --->普 ...

  8. Travis-CI自动化测试并部署至自己的CentOS服务器

    一直都想自己部署一下自动化测试部署,在了解了Travis-CI之后终于准备在这次和小伙伴一起做的一个博客类网站实验下了. 因为这是一个前后端分离的项目,所以我这里只管前端工程的自动化部署,前端主要用V ...

  9. Windows下设置U盘自动复制文件到本地

    一.打开记事本,把下面的代码复制进去 set fso=createobject("scripting.filesystemobject") set ws=createobject( ...

  10. Mac securecrt 破解

      今天花了好长的时间终于在Mac上把SecureCRT安装成功了,网上教程大多没有截图,破解关键步骤含糊,现在把详细的破解过程和SecureCRT使用教程分享给大家.最后把参考的博客连接附在最下方. ...