任务4-HTML基础知识 颜色详解

  • 网页乱码的问题是如何产生的?怎样解决

    原因:文件编码和浏览器解析编码不匹配造成,一般都是非英文字符造成的。
    解决:保存文件的编码格式和浏览器解析编码格式统一,文件中给予浏览器说明编码格式,eg:
    <meta charset=uft-8 />
    <br />
  • 颜色有几种写法, 红色、 绿色、蓝色、白色、黑色如何表示? 透明黑色如何表示?#ccc的颜色, #eee的颜色? #333的颜色?

颜色的几种写法

  • 颜色和关键字 eg:red (红色)
 - rgb写法 eg:rgb(255,0,0)  (红色)
 - 6位16进制写法 eg:#FF0000 (红色)

关于16进制:
A 10 ; B 11 ...... E 14 ; F15
FF= 15(F的十进制表示) X 16的1(位数)次方 + 15 X 16的0(位数)次方=15x16+15X1=240+15=255 从个位开始,0 1 2 3 4 。。。
eg:
FFFFFFF=15*16^6+15*16^5+15*16^4+15*16^3+15*16^2+15*16^1+15*16^0

颜色表示

  • 红色:red|rgb(255,0,0)|#FF0000#F00
  • 绿色:green|rgb(0,255,0)|#00FF00#0F0
  • 蓝色:blue|rgb(0,0,255)|#0000FF#00F
  • 白色:white|rgb(255,255,255)|#FFFFFF#FFF
  • 黑色:black| rgb(0,0,0)| #000000#000

透明色

  • 语法:rgba(RGBa) a值在0-1之间,表示透明度,0=透明,1=完全不透明
    eg: rgb(0,0,0,0.3) 表示不透明30%黑色
  • 语法:hsla(hue色相值,saturation饱和度值,lightness亮度值,alpha值)
    h 色相值:

0=red=360 120=green 240=blue 60=yellow 圆的概念,负值或者超过360也可用,但是有点自找麻烦的感觉。

s 饱和度值:

0%-100%百分比值,0%→灰色调,100%→最大饱和度。所以0%时,不论h 色相值多少,都会以灰阶单色呈现。

l 亮度值

百分比表示,0%→最暗(暗黑),100%→最亮(亮白),50%→正常亮度。 50%以上渐渐增加白色,50%一下渐渐增加黑色。

a 值

0→1允许小数点一位。

eg:

hsla(0,100%,50%,0.3) → 不透明度30%红色
hsla(120,100%,30%,0.4)→不透明度40%暗绿色
hsla(240,0%,70%,0.6)→不透明度60%中亮灰色

#ccc = #cccccc = rgb(204,204,204) = rgb(80%,80%,80%) = hsl(0,0%,80%) 灰色 网页安全色

QQ20160815-3@2x.png

#eee = #eeeeee = rgb(238,238,238) = rgb(93.3%,93.3%,93.3%)= hsl(0,0%,93.3%)
QQ20160815-4@2x.png

#33 = #333333 = rgb(51,51,51) = rgb(20%,20%,20%) = hsl(0,0%,20%)
QQ20160815-5@2x.png

  • <!doctype html> 的作用是什么?

    作用:声明,浏览器能够以正确的形式读取和呈现文件。

  • 严格模式和混杂模式指什么?

    严格模式:浏览器根据规范呈现页面;
    混杂模式:页面以一种比较宽松的向后兼容的方式显示。通常模拟老式浏览器(比如IE 4和Netscape Navigator 4)的行为以防止老站点无法工作。

  • meta 有什么作用,常见的值有哪些?

作用:meta常用于定义页面的说明,关键字,最后修改日期,和其它的元数据。这些元数据将服务于浏览器(如何布局或重载页面),搜索引擎和其它网络服务。
两个属性: name属性,http-equiv属性
name属性

<meta name="TDK" content="title keywords description等等的文字描述" />

http-equiv属性:

定义http参数之类的
<meta http-equiv="参数" content="具体的描述">
<meta charset="utf-8"> //HTML5设定网页字符集的方式,推荐使用UTF-8

详细请点击参考

  • <meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1"有什么作用

    作用:

http-equiv="X-UA-compatible"这个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式,以此来解决部分兼容问题。<br />
content="IE=edge,chrome=1"如果安装了Google Chrome Frame(谷歌内嵌浏览器框架GCF),则使用GCF来渲染,如果没有安装GCF则使用最新最高版本的IE内核进行渲染。

详细解读请点击参考

  • 常见的浏览器有哪些,什么内核

1、Trident内核代表产品Internet Explorer,又称其为IE内核。Trident(又称为MSHTML),是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括:IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。
2、Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一,仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。
3、WebKit内核代表作品Safari、Chromewebkit 是一个开源项目,包含了来自KDE项目和苹果公司的一些组件,主要用于Mac OS系统,它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高,导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。
4、Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎,供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎,包括加入动态功能,例如网页或其部分可随着DOM及Script语法的事件而重新排版。

参考文档|
更多参考:主流浏览器内核介绍(前端开发值得了解的浏览器内核历史)

本文章著作权归(风骨来客qq:2361597776)和饥人谷(QQ 群: 222459918) 所有,转载须说明来源

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

推荐阅读更多精彩内容

  • 1.网页乱码的问题是如何产生的?怎么解决? 一:乱码产生的原因是:当我们保存文件时会把我们写入的文字使用编辑器默认...
    freddy阅读 562评论 0 0
  • Sublime的常用插件及功能 AutoFileName:自动补全文件路径及名称的插件。如插入图片。 Bracke...
    饥人谷_缪维颖阅读 916评论 6 4
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1 92
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,462评论 1 19
  • 曾经以为幸福是一种可遇不可求的状态,是金榜题名时的喜悦,是洞房花烛的快乐,是功成名就的骄傲。可人生漫漫长路,我们多...
    水筠心宁阅读 217评论 0 3