web开发——前端基础（3）—

今天我们说一说HTML的字符编码。

字符编码：
编码 - 将字符转换为二进制的过程为编码。
解码 - 将二进制转换为字符的过程为解码。
例子：

周杰伦 -> 110000110110 (编码）
110000110110 -> 周杰伦（解码）
编码：计算机要储存周杰伦这三个字，先会对周杰伦进行（编码转换），10000110110就是编码数字。
解码：计算机要取出周杰伦这三个字，就需要用到（解码转换）了，把10000110110转换为周杰伦。

常见的字符集有：

ASCII （美国)
GB2312 （中国）
GBK （中国）
UTF-8 （万国码）全世界通用

注：一般在国内用的话就用UTF-8就可以了。

接下来我写一个小网页来解释一下，字符编码的重要性，我写了一个关于电影《阿凡达2-水之道》的一个简介介绍：
在meta标签之后的 charset="utf-8"
源代码（图1）
红圈一定是utf-8（图2）
效果图（图3）

图1：

<html><head><!-- 字符编码必须与左下角的一致，否则会乱码--><meta charset="utf-8"><!--标题-->><title>这是我第四个网页</title></head><body><h1>阿凡达2-水之道</h1><h2><font color="red">剧情简介</font></h2><p> 故事发生在<font color="blue">2154年</font>，人类为取得另一星球<font color="blue">“潘多拉”</font>的资源，</p><p> 开启了阿凡达计划，以人类与纳美人（潘多拉星球土著）的DNA混血，</p><p> 培养出身高近3米高的阿凡达，并能以人类意志思维控制，</p><p> 以方便在潘多拉星球生存活动并采寻一公斤值2千万美金的矿产输送回地球。</p><p> 受伤后以轮椅代步的前海军陆战队员杰克（萨姆·沃辛顿 饰）接受政府招募，</p><p> 穿越无数光年，来到美丽的潘多拉星球接受饰演。化身“阿凡达”后行走自如的杰克，</p><p> 被赋予渗入纳美人族群的任务。但是一名美丽的女纳美人涅提妮（佐伊·索尔达娜 饰）</p><p> 意外地救了杰克一命，也让一切为之改变。杰克在涅提妮的指引下，学习融入纳美祖群中，</p><p> 经历了无数的考验与冒险。随着逐渐被纳美人所接纳，他也通过这样的旅程找回了自己。</p><p> 不过很快地，杰克却要被迫面对人生最终极的考验，他将率领纳美人向人类宣战，</p><p> 一场决定潘多拉星球命运的战争，一触即发。 </p><img src="https://img1.baidu.com/it/u=1051377346,2959297577&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=350" >
</body></html>

图2：

图3：

就是说我们写的编码一定要一致都是：utf-8,显示的文字才是对的。

否则：如果不一致，会出现乱码，我写的是“gbk”而左下角是“utf-8”

图4：

图5

!!!!!!!!

web开发——前端基础（3）—— HTML字符编码相关推荐

web开发—— 前端基础（6） ——语义化标签
在网页中HTML专门用来负责网页的结构,在使用html标签时,应该关注标签的语法,而不是它的样式! 首先:标题标签有6级,h1~h6,h1时一级标题,h6是6级标题,h1最重要,h6最不重要. 一般情 ...
web开发——前端基础（2）—— HTML属性的设置
今天来说说HTML的"属性",在标签中(开始标签或结束标签)还可以设置属性. 怎么在一个简单的网站里添加字体的颜色.字体的大小以及图片. 话不多说,先上效果图: 在<body ...
web开发——前端基础（1）—— 第一个网页的展示
HTML第一个网页的制作首先先展示第一个网页的效果图,如下: 接下来上代码图: <html><head><title>这是我第一个网页</title> ...
前端入门前端自学路线 web开发前端如何学习
本文介绍前端入门之路,以及之后对前端应该怎么学,大概学哪些东西.作者在前端.后端入门的时候,花了大量时间到CSDN.知乎.百度上去找资料,但是有的说的不是太复杂, 就是一句话带过,那个时候很苦恼.现在 ...
JSP WEB开发入门基础到高手进阶教程002
JSP WEB开发入门基础到高手进阶教程 -------开发入门 JSP与微软的Active Server Pages 兼容,但它是使用类似HTML的卷标以及Java程序代码段而不是VBScript. ...
WEB开发零基础到入门之HTML+CSS(学习记录)
序言之前一直想把自己的一个学习记录,以文章形式记录下来,方便于自己后期查找和温故.自己想了想准备建个人博客站来做记录,但是又想到了csdn的大家庭:所以就放弃了用个人站记录的想法,关于这里简单说明下 ...
移动web开发入门—基础知识、自适应布局、调试
之前没做过移动端web开发,最近接手的一个小项目是做微信公众号,需要考虑手机适配.UI给出的设计稿是一般是基于iphone手机做的(15年之后是基于ipone6),我们的UI是基于iphone6来做的 ...
python web开发 JavaScript基础
文章目录 1. script 标签 2. 字面量.变量 3. 数据类型 4. 运算符 5. if 条件 6. switch分支 7. for循环 8. while循环 9. break, contin ...
python web开发 CSS基础
文章目录 1. 基础知识 2. ID,Class 选择器 3. CSS盒子模型 4. 嵌入CSS样式 4.1 内联样式表 4.2 内部样式表 4.3 外部样式表 learning from <p ...

web开发——前端基础（3）—— HTML字符编码

web开发——前端基础（3）—— HTML字符编码相关推荐

最新文章

热门文章