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

这就是编码的神奇力量！

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

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

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

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

我们都知道，计算机只认识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. Hadoop-No.8之时间戳

    要获得良好的HBase的模式设计,要正确的理解和使用时间错.在HBase中,时间戳的作用如下所述. 时间戳决定了在put请求修改记录时那些记录更新 时间戳决定了一条记录的多个版本在返回时的排序 时间戳 ...

  2. buuctf@ciscn_2019_n_1

    from pwn import * #io=process('./ciscn_2019_n_1') io=remote('node3.buuoj.cn',28216) io.sendline(0x38 ...

  3. WIF配置说明

    <configuration> <configSections> <!--添加 WIF 4.5 sections :如下两条--> <section name ...

  4. 【Andriod-AlertDialog控件】 弹出对话框AlertDialog用法

    Result: Code: import android.app.Activity; import android.app.AlertDialog; import android.content.Di ...

  5. vue css采用别名引入背景图

    在vue css中采用别名引入 背景图片,可以在前面加一个波浪号 css 属性中: background: url("~@/assets/xxx.jpg") Webpack 会将以 ...

  6. TensorFlow2.0提示Cannot find reference 'keras' in __init__.py

    使用TensorFlow2.0导入from tensorflow.keras import layers会出现Cannot find reference 'keras' in __init__.py提 ...

  7. js的三种异步处理

    js的三种异步处理   Promise 对象 含义: Promise是异步编程的一种解决方案, 优点: 相比传统回调函数和事件更加合理和优雅,Promise是链式编程(后面会详细讲述),有效的解决了令 ...

  8. 《剑指offer》算法题第九天

    今日题目: 整数中1出现的次数 把数组排成最小的数 丑数 第一个只出现一次的字符位置 今天的题目相对比较难,特别是第1题和第3题很考验数学功底,下面我们一题一题来看看. 1.整数中1出现的次数 题目描 ...

  9. sql 语句中 order by 的用法

    order by 是用在where条件之后,用来对查询结果进行排序 order by 字段名 asc/desc asc 表示升序(默认为asc,可以省略) desc表示降序 order by 无法用于 ...

  10. 数据分析-excel数据分析（数据分析师岗位分析）

    使用的函数:字符截取函数:LEFT(),MID()  定位函数:FIND()   统计函数:COUNTIF() 1.获取薪资的区间的最小值min和最大值max 处理方法:新插入多列,使用find()定 ...