网页乱码是怎样产生的
- 网站头部设定的编码和网页本身的编码不一致导致的
<head>
<meta chaeset = utf-8>
</head>
如果网站制作者将网页文件存储为了gbk格式,然后在网页头部却设置了utf-8的格式,那么浏览器在读取网页的时候就会将中文或其他非英文和数字的字符解析成乱码
解决办法很简单,将解码方式和文件存储的编码修改成一致即可
- 不合理的字符串截取造成个别字符乱码
在gbk和gb2312编码下,中文是占用两个字节,而在utf-8编码模式下,中文字符占用三个字节,而英文和数字都是占用一个字节,如果用英文的一些截取方式去截取中文字符的话,就可能出现将一个中文截断的现象,网页就会出现中文乱码,而gbk和utf-8的中文截取手段也不一样。
这种情况的解决办法就是规范截取字符串的函数,因地制宜
颜色有几种写法, 红色、 绿色、蓝色、白色、黑色如何表示? 透明黑色如何表示?#ccc的颜色, #eee的颜色? #333的颜色?
-
颜色的写法
- 十六进制色
- 十六进制颜色是这样规定的:#RRGGBB,其中的 RR(红色)、GG(绿色)、BB(蓝色)十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间
- 十六进制色
举例说,#0000ff 值显示为蓝色,这是因为蓝色成分被设置为最高值(ff),而其他成分被设置为 0。
- RGB 颜色
- RGB 颜色值是这样规定的:rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100%)。
>举例说,rgb(0,0,255) 值显示为蓝色,这是因为 blue 参数被设置为最高值(255),而其他被设置为 0
- RGBA 颜色
- RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。
RGBA 颜色值是这样规定的:rgba(red, green, blue, alpha)。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字
p {
background-color:rgba(255,0,0,0.5);
}
- HSL 颜色
- HSLA 颜色
- 预定义/跨浏览器颜色名
- ###红色、 绿色、蓝色、白色、黑色如何表示?
颜色名 | 十六进制颜色值 | 颜色 RGB
:----:|:------:|:------:|
red | #FF0000 |rgb(255,0,0)
green| #00FF00 |rgb(0,255,0)
blue | #0000FF |rbg(0,0,255)
white | #FFFFFF|rbg(255,255,255)
black | #000000 | rbg(0,0,0)
- ###透明黑色怎么写?
由RGBA 颜色可得
> `rgba(0,0,0,0)`
- ###ccc的颜色, #eee的颜色? #333的颜色?
-
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4592325-e9a318cec7afb2d8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
-
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4592325-5c841d2495adb544.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
-
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4592325-8463010d6ef6b318.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
##<!doctype html> 的作用是什么
>- <!doctype html>是告诉浏览器当前页面是使用html5版本进行编写的
- <!doctype html>不是标签,而是声明,必须放在html文档的第一行
- 文档类型声明对大小写不敏感
##严格模式和混杂模式指什么?
>- 文档类型事先声明,告诉浏览器以特定标准去渲染文件,即严格模式;
- 如果没有声明,则浏览器以自己的标准去渲染文件,即混杂模式;
##meta 有什么作用,常见的值有哪些?
>- <meta>标签定义html文档的元数据,具有描述网页内容的作用,常用于 SEO及记录页面的主干信息;
- <meta>通常以名称/值对出现
常见名/值包括:
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4592325-dacd0fa34792b072.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4592325-7a62fb910ba61a7f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- http-equiv:相当于http的头文件,在向浏览器传输html文档时先传递特定的信息以辅助页面显示
###<meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1">有什么作用?
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4592325-a6335e2e637a878b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 这个属性主要是设置浏览器优先使用什么模式来渲染页面的
- 以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame
##常见的浏览器有哪些,什么内核?
>- 浏览器的内核可分为渲染引擎(排版引擎)和JS引擎
- 渲染引擎就是解析并执行Html和Css来渲染页面的;
- JS引擎就是解析并执行JavaScript的;
- 由于不同的浏览器使用的内核不一,导致同一页面的渲染效果会产生差异,因此作为前端工程师要特别注意不同浏览器内核的特征。
>>- 渲染引擎:Mosaic -> Trident
- JS引擎:WebGL(JavaScript和OpenGL ES 2.0的结合)
代表: IE系列浏览器
***
- 渲染引擎:Gecko
- JS引擎:spiderMonkey
代表:FireFox系列浏览器;Netcape 6
***
- 渲染引擎:Presto(已弃用)
- JS引擎:无记录
代表:Opera系列浏览器
***
- 渲染引擎:KHTML->WebCore->WebKit->Webkit2
- JS引擎:KJs->JScore
代表:Safari;Chrome
***
- 渲染引擎:WebKet->Blink
- JS引擎:JScore->V8
代表:Chrome;Blink