1 . 网页乱码的问题的产生,及解决
- 产生原因:编写网页代码时保存的编码和浏览器解析时的解码格式不匹配。
- 错误方式:
1 .<head>
里未添加确定的编码方式如<meta charset=“utf-8”>
2 . 浏览器端未选择正确的解码格式。 - 解决办法:
1 . 一般情况下用<meta>
标签声明即可,实验中发现在sublime中 不能简单地添加<meta charset="GBK">
而是应该安装插件解决。
2 . 在选项中选择对应的解码格式。
2 . 颜色的写法;红色、 绿色、蓝色、白色、黑色的表示? 透明黑色如何表示?#ccc的颜色, #eee的颜色? #333的颜色?
- 三种颜色表示
1 . 16进制表示,以“#”开头。
2 . rgb(x,x,x)(rgba的a表示透明度)
3 . 一些颜色可以用对应的英文
红:#ff0000 | #f00 | #RGB(255,0,0)| #red
绿:#00ff00 | #0f0 | #RGB(0,255,0)| #green
蓝:#0000ff | #00f | #RGB(0,0,255)| #blue
白:#ffffff |#fff | #RGB(255,255,255) | #white
黑:#000000| #000 | #RGB(0,0,0)| #black
- 透明黑色: rgba(0,0,0,0)
rgba中的a代表的是透明度,例子:rgba(255,255,255,0)表示白色完全透明(1为完全不透明),此为CSS3中的新样式。
#ccc
:表示中等灰色
#eee
:表示淡灰色
#333
:表示浓灰色
3 .<!doctype html>
的作用
<!DOCTYPE>声明不是 HTML 标签而是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。它必须是 HTML 文档的第一行,位于 <html> 标签之前。它和HTML 4.01有三种 <!DOCTYPE> 声明不同,在 HTML5 中只有一种<!DOCTYPE html>。它没有结束标签,对大小写也不敏感,必须始终向 HTML 文档添加 <!DOCTYPE> 声明,这样浏览器才能获知文档类型。如果html中没有加上doctype 可能在不同浏览器出现bug. 所以html加上doctype是至关重要的
4 . 严格模式和混杂模式指什么
混杂模式(怪异模式)和严格模式(标准模式)是浏览器解析CSS时的两种模式。
早期的浏览器在实现CSS机制时,为了保证自己的网站在不同的浏览器中都能正确展现,开发者不得不依据各个浏览器的自身的规范来使用CSS。因此大部分网站的CSS实现并未符合W3C的标准。然而随着标准一致性变得越来越重要,浏览器开发商不得不面临一个艰难的抉择:逐渐遵循W3C的标准是前进的方向。但是改变现有CSS的实现,完整去遵循标准,会使许多网站或多或少受到破坏。如果浏览器突然以正确的方式解析现存的CSS,陈旧的网站显示必然受到影响。因此立即遵循标准会产生问题,然而忽略标准则又会维持浏览器竞争时所产生的混乱。因此所有的浏览器提供了两种模式:
- 严格模式:指声明了文档类型的模式,也就是在HTML页面最上面加上了<!doctype html>(html5的声明),并且页面以最高标准进行显示;
- 混杂模式(怪异模式):指未声明文档类型的模式,也就是没加<!doctype html>,并且标准不严,好处是可以向老版本的浏览器进行兼容;
5 . meta
的作用,常见的值:
- <meta>标签位于文档头部<head>区,通常用来为搜索引擎robots定义页面主题,或者是定义用户浏览器上的 cookie;它可以用于鉴别作者,设定页面格式,标注内容提要和关键字;还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级等。
- meta标签共有两个属性,它们分别是http-equiv属性和name属性。name 属性主要用于描述网页,对应于content(网页内容),以便于搜索引擎机器人查找、分类。http-equiv用以说明主页制作所方法。
name属性的对应值有:
- content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
- Keywords(关键字),keywords用来告诉搜索引擎你网页的关键字是什么。
- description(网站内容描述),description用来告诉搜索引擎你的网站主要内容。
- robots(机器人向导),robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。
- author(作者),标注网页的作者
- meta标签的generator的信息参数,代表说明网站的采用的什么软件制作。
- meta标签的COPYRIGHT的信息参数,代表说明网站版权信息。
- revisit-after代表网站重访,7days代表7天,依此类推。
http-equiv属性的对应值有:
- Expires(期限),可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。
- Pragma(cache模式),禁止浏览器从本地计算机的缓存中访问页面内容。
- Refresh(刷新),自动刷新并指向新页面。
- Set-Cookie(cookie设定),如果网页过期,那么存盘的cookie将被删除。
- Window-target(显示窗口的设定),强制页面在当前窗口以独立页面显示。
- content-Type(显示字符集的设定),设定页面使用的字符集。
- content-Language(显示语言的设定)
- Cache-Control指定请求和响应遵循的缓存机制。
- imagetoolbar指定是否显示图片工具栏,当为false代表不显示,当为true代表显示。
- Content-Script-Type,W3C网页规范,指明页面中脚本的类型。
6 . <meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1"
有什么作用
- X-UA-Compatible是IE8的一个专有<meta>属性,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式。谷歌内嵌浏览器框架GFC:可以让用户的IE浏览器外观不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器。
- 此标记的作用是:在开发时指定页面默认首先使用GCF进行渲染,如果未安装GCF,看是否安装ie8,如果是,使用最高版本IE内核进行渲染。如果两个条件都不满足,此条标记无效。
参考:神奇的content="IE=edge,chrome=1"的meta标签
7 . 常见的浏览器有哪些,什么内核
浏览器用的内核,一般不外乎微软的IE 内核和webkit内核。所谓内核,就是常驻内存、能够快速响应的那一部分核心代码,非内核代码都是要用到时再调入内存并执行的。webkit内核更小巧快速,但兼容性不如IE内核。所以有些浏览器是用的双内核,可以在高速模式和兼容模式间切换。
-
Trident内核代表产品Internet Explorer,又称其为IE内核。
Trident(又称为MSHTML),是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括:IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。 -
Gecko内核代表作品Mozilla
FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一,仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。 -
WebKit内核代表作品Safari、Chromewebkit
是一个开源项目,包含了来自KDE项目和苹果公司的一些组件,主要用于Mac OS系统,它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高,导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。 -
Presto内核代表作品OperaPresto
是由Opera Software开发的浏览器排版引擎,供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎,包括加入动态功能,例如网页或其部分可随着DOM及Script语法的事件而重新排版。
参考:浏览器内核历史
- 学习参考
- 一些标签属性的作用可以参考bootstrap编码规范中的 HTML 部分
- 浏览器乱码参考聊一聊编码与乱码