美文网首页饥人谷技术博客
任务4-HTML基础知识 颜色详解

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

作者: 风骨来客 | 来源:发表于2016-08-15 23:12 被阅读0次
    • 网页乱码的问题是如何产生的?怎样解决

      原因:文件编码和浏览器解析编码不匹配造成,一般都是非英文字符造成的。
      解决:保存文件的编码格式和浏览器解析编码格式统一,文件中给予浏览器说明编码格式,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) 所有,转载须说明来源

    相关文章

      网友评论

        本文标题:任务4-HTML基础知识 颜色详解

        本文链接:https://www.haomeiwen.com/subject/baiusttx.html