关于 HTML 的学习总结1

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:表示浓灰色

参考1:color-hex
参考2:MDN-color

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属性的对应值有:

  1. content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
  1. Keywords(关键字),keywords用来告诉搜索引擎你网页的关键字是什么。
  2. description(网站内容描述),description用来告诉搜索引擎你的网站主要内容。
  3. robots(机器人向导),robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。
  4. author(作者),标注网页的作者
  5. meta标签的generator的信息参数,代表说明网站的采用的什么软件制作。
  6. meta标签的COPYRIGHT的信息参数,代表说明网站版权信息。
  7. revisit-after代表网站重访,7days代表7天,依此类推。

http-equiv属性的对应值有:

  1. Expires(期限),可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。
  1. Pragma(cache模式),禁止浏览器从本地计算机的缓存中访问页面内容。
  2. Refresh(刷新),自动刷新并指向新页面。
  3. Set-Cookie(cookie设定),如果网页过期,那么存盘的cookie将被删除。
  4. Window-target(显示窗口的设定),强制页面在当前窗口以独立页面显示。
  5. content-Type(显示字符集的设定),设定页面使用的字符集。
  6. content-Language(显示语言的设定)
  7. Cache-Control指定请求和响应遵循的缓存机制。
  8. imagetoolbar指定是否显示图片工具栏,当为false代表不显示,当为true代表显示。
  9. Content-Script-Type,W3C网页规范,指明页面中脚本的类型。

参考1:meta属性使用
参考2:meta标签

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

推荐阅读更多精彩内容