任务4-HTML1

网页乱码是怎样产生的

  • 网站头部设定的编码和网页本身的编码不一致导致的
<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




最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容

  • 1.网页乱码的问题是如何产生的?怎么解决? 一:乱码产生的原因是:当我们保存文件时会把我们写入的文字使用编辑器默认...
    freddy阅读 555评论 0 0
  • 1 . 网页乱码的问题的产生,及解决 产生原因:编写网页代码时保存的编码和浏览器解析时的解码格式不匹配。 错误方式...
    osborne阅读 680评论 0 1
  • 一、网页乱码的问题是如何产生的?怎样解决 如何产生?使用编辑器编写HTML文件得时候编辑器默认得编码方式和打开这个...
    咩咩咩1024阅读 298评论 0 0
  • 1.网页乱码的问题是如何产生的?怎样解决 先认识认识几种编码方式 ASCII 全称美国标准信息交换代码(Ameri...
    饥人谷_任磊阅读 459评论 0 0
  • 1.网页乱码的问题是如何产生的?怎样解决? 乱码产生的根本原因我们在保存文件时的编码格式和用浏览器解析文件时的解码...
    _hello__world_阅读 217评论 0 0