keywords：乱码、颜色、<!DocType>、严格模式、meta元素、内核
一、网页的乱码是如何产生的?怎样解决?
ps：二进制是人为定义的，屏幕显示的图形字符是人为定义的，除了输入机器的高低电压，一切都是人为定义的。
1、编码
编码是信息从一种形式或格式转换为另一种形式的过程。解码，是编码的逆过程。
编码最初是出于保密需要，避免重要情报泄露。后来随着技术的进步，人们发现编码能够在极其有限的资源下传递出足够清晰的信息，其中最为著名的要数摩斯电码（morse code）。
编码是信息从一种形式或格式转换为另一种形式的过程。如同函数y=kx（k为常量，恒定），输入x，则输出y，这个k就是编码表。
摩斯电码的编码如下：
在y=kx中输入x（点、划组合），根据规则输出y（26个英文字母），整个实现过程就是编码。
2.用位（bit）表示文本
上帝创造了0和“与非”，其他的由人创造.（God gave us 0 and Nand; Everything else was done by humans)
bit（比特），全名“binary digit”（中文：二进制数字）。1比特，代表一个二进制数字位（注意这里提到的“位”的概念，比如10就是2位，110就是3位）。只要谈到比特，通常是指特定数目的比特位。在计算机时代，比特被视作信息块的基本单位，我们在电脑或者任何终端上所看到的内容都是以二进制的形式存储、读取、交换的。
计算机不明白人类语言，但它理解逻辑语言（即是或否），因此计算机天然就能够利用二进制表示信息。聪明的人类想到利用二进制来让计算机明白自然语言，即为所有的字母、数字、符号制定唯一的代码，每个代码具有唯一的位数。一些代码表示字母，一些代码表示标点符号，一些表示数字，甚至可以表示空格。美国为此制定了信息交换标准代码，即ASCII码。ASCII码是7位编码，用二进制0000000~1111111表示，需要用一个字节表示（1字节=8位）。
ASCII仅考虑美国人的需要，中文、韩文、日文、德文等字符很难表示，为适配世界上所有语言，1988年几个主要的计算机公司研究出Unicode编码。Unicode编码采用16位，需要2个字节，可以表示65536个字符。
3.UTF-8和Unicode
UTF-8（8-bit Unicode Transformation Format）是一种针对Unicode的可变长度字符编码.它可以用来表示Unicode标准中的任何字符，且其编码中的第一个字节仍与ASCII兼容
ASCII和Unicode都是字符集,Unicode的特点决定了使用这种编码存储会浪费很多资源，这在20世纪初期是无法接受的，因此Unicode中的字符该以何种形式存储成了问题。人们提出了3中方法：UTF-8，UTF-16，UTF-32。目前Unicode最常用的存储方式是UTF-8。我们在存储文本或者浏览网页时，可以看到编码一般是Unicod（UTF-8），这就是说要采用Unicode字符集并以UTF-8的二进制形式存储。
参考：1、字符编码笔记：ASCII，Unicode和UTF-8
2、编码的奥秘
4、网页乱码的形成与解决。
任何形式的乱码都是网页所采用的编码方式与html的实际内容无法匹配，不能正确解读html的文本。问题定义清楚，解决办法不言自明。首先看html的以何种编码存储，再看浏览器会以何种编码解析，使html的存和取采用同样的编码即可。
二、CSS中的颜色表示
1、颜色有几种写法？
在css中颜色可以由以下方法指定（分颜色值和颜色名），详细解释见参考资料：
- HEX（十六进制）
- RGB（红绿蓝）
- RGBA（A指透明度）
- HSL（色调、饱和度、亮度）
- HSLA（A指透明度）
- 预定义（由颜色名指定）
2、红色、 绿色、蓝色、白色、黑色如何表示？ 透明黑色如何表示？
使用HEX：
#p1 {background-color: #ff0000;} /* red /
#p2 {background-color: #00ff00;} / green /
#p3 {background-color: #0000ff;} / blue /
#p4 {background-color: #ffffff;} / blank /
#p5 {background-color: #000000;} / black /
使用RGB：
#p1 {background-color: rgb(255, 0, 0);} / red /
#p2 {background-color: rgb(0, 255, 0);} / green /
#p3 {background-color: rgb(0, 0, 255);} / blue /
#p4 {background-color: rgb(255,255,255);}/blank/
#p5 {background-color: rgb(0,0,0);}/black/
使用HSL（代表任意值）：
#p1 {background-color: hsl(0, 100%, 50%);} /* red /
#p2 {background-color: hsl(120, 100%, 50%);} / green /
#p3 {background-color: hsl(240, 100%, 50%);} / blue /
#p4 {background-color: hsl(, , 100%);} / blank /
#p5{background-color: hsl(, , 0%);} / black /
透明黑色：
#p2 {background-color: hsl(, , 0%，0.5);} / 透明黑色*/
#p1 {background-color: rgba(0,0,0,0.5);}
3、#ccc的颜色，#eee的颜色？#333的颜色？
#ccc即#cccccc，是一种银灰色（靠近黑色）,#eee是银白色（靠近白色），#333是灰黑色。透明黑色
参考资料：CSS Legal Color Values
三、HTML相关
1、<!doctype html>的作用是什么？
DocType是文档类型（document type）,处于文档的最前面的位置，当一个页面确定了正确的doctype，就相当于告诉浏览器，该以怎么样的方式来解释css，也即是规定了浏览器文档使用哪一种html或者xhtml规范。
<!doctype html>就是告诉浏览器页面按照html5标准编写。
2、严格模式（strict mode）和混杂模式（quirks mode）指什么？
混杂模式就是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式。
严格模式则是遵循W3C标准呈现页面的模式。
参考资料：
ie和firefox 盒子模型区别以及quirks mode(怪异模式)和strict mode(严格模式]
怪异模式（Quirks Mode）对 HTML 页面的影响
3、meta有什么作用，常见的值有哪些？
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
meta标签属性分别是http-equiv属性、name属性、charset属性、content属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
name属性对应的值：
- keywords （关键词）
- description(网站内容描述)
- referrer
- viewport
http-equiv属性对应的值：
- Content-Type
- X-UA-compatible
参考资料：html的meta总结，html标签中meta属性使用介绍
4、下列代码的作用
<meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1">
1、如果支持Google Chrome Frame：GCF，则使用GCF渲染；2、如果系统安装ie8或以上版本，则使用最高版本ie渲染；3、否则，这个设定可以忽略。
参考资料：关于content=”IE=edge,chrome=1″介绍-让网页优先采用Chrome渲染
5、 常见的浏览器有哪些，什么内核
常用浏览器.PNG
浏览器内核.jpg
（continued）
网友评论