1.网页乱码的问题是如何产生的？怎样解决
先认识认识几种编码方式
ASCII
全称美国标准信息交换代码（American Standard Code for Information Interchange）的缩写, 为美国英语通信所设计。它由128个字符组成，包括大小写字母、数字0-9、标点符号、非打印字符（换行符、制表符等4个）以及控制字符（退格、响铃等）组成，每个字符占7位（1字节是8位）。
ISOLatin-1
欧洲人发明了一种8位字符集是ISO 8859-1Latin 1，也简称为ISOLatin-1。它对ASCII做了个扩充，对于0-127之间的字符还使用ASCII里的字符不变， 把位于128-255之间的字符表示拉丁字母表中特殊语言字符。
UNICODE
计算机不断发展扩展到亚洲非洲，为了把地球上绝大多数语言用一种编码方式表示出来，发明了UNICODE编码，只用2个字节(16位)就可以编码地球上几乎所有地区的文字。但是，UNICODE只是理论上的编码方式，相当于给世界上每个文字打了个编号，但这编号具体如何在计算机里面存储，可以有多种实现方式。比如utf-8和gbk。
UTF-8
utf-8（8-bit Unicode Transformation Format）是一种针对Unicode的可变长度字符编码，又称万国码。UTF-8用1到6个字节编码UNICODE字符。用在网页上可以同一页面显示中文简体繁体及其它语言（如英文，日文，韩文）。
GBK
中国制定一套自己的规则，用2个字节来表示一个汉字，总共可以覆盖2万多个文字。 对于英文，还是保留UTF-8同样的方式使用一个字节来表示。
记住：UNICODE只是给字符一个代号，而GBK和UTF-8使用不同的规则来表示同一个代号
那么网页产生乱码的根本原因是我们保存HTML文件的编码方式和浏览器解析HTML文件的解码方式不一致。
解决方法：
在文件保存的时候你自己要清楚是用哪种编码方式保存的（sublime默认保存方式是utf-8，如果安装了插件也可另存为gbk，其它IDE可以做设置保存格式）。如果你的文件是保存为utf-8格式，那么一定要在html 的 <head>里添加<meta charset="utf-8">，这句话的意思是告诉浏览器在打开这个页面的时候直接用utf-8去解码。 同理，如果你的文件保存为gbk格式，一定在文件里添加<meta charset="gbk">。
2.颜色有几种写法， 红色、 绿色、蓝色、白色、黑色如何表示？ 透明黑色如何表示？#ccc的颜色， #eee的颜色？ #333的颜色？
有三种写法：
- 按名字指定颜色： 这是最直接的方法，有16种基本颜色（所有浏览器都有）和150种扩展颜色（只有较新的浏览器上有）可以采用这种方法指定，假设希望指定“red”作为一个body元素的背景色，可以在CSS中这么写：
body {
background-color: red；
}
所以，按名指定一个颜色时，只需要输入颜色名作为相应的属性值。CSS颜色名是不区分大小写的，所以输入red，Red，RED都是允许的。另外16种基本颜色是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
- 用红、绿、蓝（rgb）值指定颜色：可以按红、绿、蓝的分量的多少来指定一个颜色。假设想指定一个背景色为橙色，它由红色80%，绿色40%和蓝色0%构成，可以这么写：
body {
background-color: rgb(80%, 40%, 0%);
}
以“rgb”开头，这是red，green，blue的缩写，然后在小括号里指定红、绿、蓝的百分比。
更为普遍的一种写法是将红、绿、蓝值指定为0到255之间的一个数值，使用红色204（255的80%就是204）， 绿色102（255的40%就是102），蓝色0（255的0%当然是0）来指定橙色，代码如下：
body {
background-color: rgb(204, 102, 0);
}
- 使用十六进制码指定颜色：一个十六进制码中，每组2位数字分别代表颜色的红、绿、蓝分量。所以前两位数字代表红色，接下来两位表示绿色，最后两位表示蓝色。还是以橙色为例子，代码就像这样：
body {
background-color: #cc6600;
}
cc转化为10进制就是204，66转化为10进制就是102,00转化为10进制就是0。就这样得到了各个分量的数值，就可以准确的知道这个颜色的红、蓝、绿有多少。
| 颜色 | 英文单词表示 | rgb值表示 | 16进制表示|
| :--------: | :-----------: | :-------: |:--------: |
| 红色 | red | rgb(255,0,0)|#ff0000 |
| 绿色 | green | rgb(0,255,0) |#00ff00|
| 蓝色 | blue | rgb(0,0,255) |#0000ff|
| 白色 | white | rgb(255,255,255) |#ffffff|
| 黑色 | black | rfb(0,0,0) |#000000|
| 透明黑色 | \ | rgba( 0,0,0,0.3)||
如果每一组分量中的两位数字都相同，可以使用简写模式。
| 16进制表示 | 颜色 |
| :------: | :-----------: |
| #ccc （#cccccc） | 灰 |
| #eee （#eeeeee） | 浅灰 |
| #333 （#333333） | 深灰 |
3.<!doctype html>的作用是什么
- doctype就是给浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。
- <!doctype html>的作用就是让浏览器以html5的规范来解释和显示这个页面。
- html5，它是目前html最新的版本，它其实是一份文档，表示着最新规定的HTML中有哪些元素和属性。
在看资料的时候发现一个有趣的问题，就是我们为什么写的是
<!doctype html>而不是<!doctype html5>呢？原来在html的发展历史上有过很多版本，而随着版本的不断变化，相同的代码在浏览器中就会有不同的显示甚至于显示错误。
为了结束这种混乱的情况，人们就推出了新的版本HTML5，制定HTML5的人把这个规范变成了一个活的标准，它会随着技术的发展形成相应文档，所以，不再有版本号6、7、8，甚至可以不再把它叫做HTML5，因为从现在开始它就是"HTML"。
阅读扩展：为什么HTML5里面我们不需要DTD
而之所以HTML5成为一个活的标准关键是它具有向后兼容性。向后兼容性表示我们可以继续向HTML增加新的内容，浏览器会支持这个内容，不过它们还会继续支持原来的内容。所以，你现在写的HTML页面将会继续正常工作，甚至以后增加了新的特性之后也能很好地工作。
4.严格模式和混杂模式指什么
- 严格模式又称标准模式，浏览器以其支持的最高Web标准来呈现页面。
- 混杂模式又称怪异模式，页面以一种比较宽松的向后兼容的方式显示，但是可能会得到一个奇怪或丑陋的并不符合你的期待的结果。混杂模式通常模拟老式浏览器（IE5.5以下）的行为以防止老站点无法工作
模式触发条件
浏览器根据DOCTYPE是否存在以及使用的哪种DTD（文档类型定义）来选择要使用的呈现方法。
- 如果XHTML、HTML 4.01文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。
- 包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI（申明了文档但是没有文档路径）会导致页面以混杂模式呈现。
- DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
注意html5是没有DTD的（具体原因可以参考上一问题的回答），也就没有严格模式与宽松模式的区别，html5有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。
5.meta有什么作用，常见的值有哪些。
- <meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
- meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
常见的值：
定义针对搜索引擎的关键词：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
定义对页面的描述：
<meta name="description" content="免费的 web 技术教程。" />
定义页面的最新版本：
<meta name="revised" content="David, 2008/8/8/" />
每 5 秒刷新一次页面：
<meta http-equiv="refresh" content="5" />
必须的属性
| 属性 | 值 | 描述 |
| :-------- | :-----: | :----: |
| content | some_text | 定义与 http-equiv 或 name 属性相关的元信息 |
可选的属性
| 属性 | 值 | 描述 |
| :-------- | :-----: | :----: |
| http-equiv | content-type，expires，refresh，set-cookie | 把 content 属性关联到 HTTP 头部。 |
| name | author，description，keywords，generator，revised，others | 把 content 属性关联到一个名称。 |
| scheme | some_text | 定义用于翻译 content 属性值的格式。 |
6. <meta http-equiv="XUAcompatible"content="IE=edge,chrome=1"有什么作用
- X-UA-Compatible是IE8专有的一个<meta>设置，对于IE8以下的浏览器是不识别的。 通过在meta中设置X-UA-Compatible的值，可以指定网页的兼容性模式设置。
- "IE=edge" 表示告知IE浏览器使用可使用的最高版本的内核来渲染页面。
- “chrome=1“表示如果浏览器装有Google Chrome Frame插件，将使用chome的内核来渲染页面。
7.常见的浏览器有哪些，什么内核
| 浏览器 | 内核 |
|---|---|
| Internet Explorer | IE 内核 |
| Firefox | Gecko 内核 |
| Chrome | WebKit 内核 |
| Safari | WebKit 内核 |
| Opera | Presto 内核 |
本文版权归饥人谷_任磊和饥人谷所有
