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 的
里添加
,这句话的意思是告诉浏览器在打开这个页面的时候直接用utf-8去解码。 同理,如果你的文件保存为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 是用什么版本编写的。
- 的作用就是让浏览器以html5的规范来解释和显示这个页面。
- html5,它是目前html最新的版本,它其实是一份文档,表示着最新规定的HTML中有哪些元素和属性。
在看资料的时候发现一个有趣的问题,就是我们为什么写的是
而不是
呢?原来在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-information),比如针对搜索引擎和更新频度的描述和关键词。
- meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。
常见的值:
定义针对搜索引擎的关键词:
定义对页面的描述:
定义页面的最新版本:
每 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. 有什么作用
- X-UA-Compatible是IE8专有的一个设置,对于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 内核 |
本文版权归饥人谷_任磊和饥人谷所有