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

这就是编码的神奇力量！

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

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

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

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

我们都知道，计算机只认识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. 题解 比赛 match

    比赛 match Description 有 N 支队伍打比赛.已知有如下条件: • 每支队伍恰好打了 4 场比赛 • 对于一场比赛,如果是平局,双方各得 1 分:否则胜者得 3 分,负者不得分 给定 ...

  2. HDU 6041 - I Curse Myself | 2017 Multi-University Training Contest 1

    和题解大致相同的思路 /* HDU 6041 - I Curse Myself [ 图论,找环,最大k和 ] | 2017 Multi-University Training Contest 1 题意 ...

  3. 【Python之路】特别篇--ECMA对象、DOM对象、BOM对象

    ECMA对象 从传统意义上来说,ECMAScript 并不真正具有类.事实上,除了说明不存在类,在 ECMA-262 中根本没有出现“类”这个词. ECMAScript 定义了“对象定义”,逻辑上等价 ...

  4. 使用A* Pathfinding Project的一些心得

    最近在游戏开发中要做寻路.首选果断就是Unity3D自带的寻路啦.方便稳定,基本功能都能满足.我们的需求也不复杂,就是一个英雄在不同的地图中探索.但是介于一个比较恶心的问题,果断放弃了它.所以,说A* ...

  5. vue刷新子页面，跳到主页，params传参引起的血案！

    今天,算是真正认识了params传参,为什么说params传参引起了血案? 起因是这样的,我正在做一个登陆的模块,公司想根据url不同的参数来区分是什么类型的会议, 于是后端推荐我用params传参的 ...

  6. BZOJ 4814 Luogu P3699 [CQOI2017]小Q的草稿 (计算几何、扫描线、set)

    题目链接 (BZOJ) http://lydsy.com/JudgeOnline/problem.php?id=4814 (Luogu) https://www.luogu.org/problem/P ...

  7. Vue_(组件)实例属性

    Vue实例属性与方法中文文档 传送门   Vue实例属性:vue实例直接调用的属性 Learn 一.vm.$data:获取属性 二.vm.$el:获取实例挂载的元素 三.vm.$options:获取自 ...

  8. CodeForces 714E Sonya and Problem Wihtout a Legend（单调数列和DP的小研究）

    题意:给你n个数字,每个数字可以加减任何数字,付出变化差值的代价,求最后整个序列是严格单调递增的最小的代价. 首先我们要将这个题目进行转化,因为严格单调下是无法用下面这个dp的方法的,因此我们转化成非 ...

  9. CLion配置Cygwin环境

    CLion "download" 跳转到 https://cygwin.com/install.html 下载64位安装程序并安装 国内添加网易镜像 http://mirrors. ...

  10. scrapy_redis的使用

    配置Scrapy-Redis 配置Scrapy-Redis非常简单,只需要修改一下settings.py配置文件即可. 1. 核心配置 首先最主要的是,需要将调度器的类和去重的类替换为Scrapy-R ...