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

这就是编码的神奇力量！

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

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

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

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

我们都知道，计算机只认识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.13之数据源系统以及数据结构

    文件系统中采集数据时,应该考虑以下内容. 数据源系统设备的读取速率 在所有处理流水线中,磁盘I/O通常都是主要瓶颈.但是优化采集流程时通常要看一下检索数据的系统系统.一般来说,Hadoop的读取速度在 ...

  2. JSP页面的Page指令指定编码和Meta标签编码

    JSP代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8" page ...

  3. JavaScript一元运算符

    ㈠一元运算符 一元运算符,只需要一个操作数 ⑴+  正号    正号不会对数值产生影响 示例: ⑵-   负号    负号可以对数字进行负号的取反 示例: ⑶对于非Number类型的值,它会将其先转换 ...

  4. 【Python之路】特别篇--Python正则表达式

    正则表达式的基础 正则表达式并不是Python的一部分. 正则表达式是用于处理字符串的强大工具,拥有自己独特的语法以及一个独立的处理引擎,效率上可能不如str自带的方法,但功能十分强大. 得益于这一点 ...

  5. [Linux]Ubuntu安装Java详细教程

    环境:Ubuntu16.04 桌面版虚拟机 1.下载安装包:jdk-8u231-linux-x64.tar.gz 链接: https://pan.baidu.com/s/1mmtzKejL1Fd_RQ ...

  6. Confluence 6.15 锚点（Anchor）宏

    允许你链接到页面的特定部分.有关如何使用锚点的内容,请参考页面 Anchors 页面中的详细内容. Wiki 标记(markup) 示例 宏名称: anchor 宏内容:None. {anchor:h ...

  7. CDOJ 1263 The Desire of Asuna 贪心

    The Desire of Asuna Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Othe ...

  8. python播放音乐

    最近一直想实现使用Python播放音乐的功能,找了百度上的好多博客,要不就只能播放wav格式的,要不播放mp3格式的但无法在Linux系统下使用的,或者只能在Python2的情况下播放的,写的都不符合 ...

  9. HDU6140--Hybrid Crystals（思维）

    Hybrid Crystals Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  10. iPhone/iPad调整事件递交

    UIKit 为应用程序提供了编程手段来简化事件处理或者完全关闭事件流.下面的列表总结了这些方法: 关闭触摸事件的递交. 缺省情况下,视图接收触摸事件,但是你可以设置它的userInteractionE ...