任务4总结

2017-05-19 本文已影响0人 yangjie727

1 HTML、XML、XHTML 有什么区别

html是超文本标记语言，是最早写网页的语言，但是由于时间早，规范不是很好，大小写混写且编码不规范（规范比较松散）

xhml是升级版的html，对html进行了规范，编码更加严谨纯洁，也是一种过渡语言，html向xml过渡的语言

xml可扩展标记语言，是一种跨平台语言，编码更自由，可以自由创建标签。

html与xhtml之间的区别：

1、xhtml对比与html，xhtml文档具有良好完整的排版，体现在两方面：a、元素必须要有结束标签；b、元素必须嵌套；

2、对于html的元素和属性，xhtml必须小写，因为xml是严格区分大小写的，

3、xhtml的属性值必须在引号之中；

4、在xhtml中，name属性是不赞成使用的，在以后的版本中将被删除。

2 怎样理解 HTML 语义化

什么是语义化：基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等。

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

为什么要语义化：

1. 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构;为了裸奔时好看；

2. 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；

3. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

4. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）来渲染网页；

5. 便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

3. 怎样理解内容与样式分离的原则

在一个web网页中一般分为三大块，内容(html)，样式（css），行为（js）

我们这里所说的内容和样式分离指的是html只负责内容部分，而样式全部让css统一管理，不要将行内样式引入到html代码中，这样做将会增加后期维护和改动的成本，不利于维护和改动。

举例说明：<p style="background:red">段落</p> 这里将这个段落的背景色单独的设置成为了红色

如果以后有个需求需要将所有的段落的背景色全部更改为其他的颜色，那么这种行内样式必将会带来更大的工作量，要逐个的去修改行内样式，不利于全局的控制，如果将样式规则全部交给css进行统一的管理，统一编写css文件控制样式，我只需要在每个段落标签中设置一个统一的class属性就能一次性对所有段落的样式进行更改，极易维护和改动。

所以，将样式和内容分离会大大提高维护和改动的效率。

4. 有哪些常见的meta标签

<! 关键字，搜所引擎 SEO -->

<!-- 如果安装了GCF，则使用GCF来渲染页面，如果没有安装GCF，则使用最高版本的IE内核进行渲染。>

X-UA-Compatible：这是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式(比如人见人烦的IE6)，以此来解决部分兼容问题。 -->

<!-- 是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出>

5. 文档声明的作用?严格模式和混杂模式指什么?<!doctype html>的作用?

DOCTYPE（是Document Type文档类型的简写）是一组机器可读的规则，它们指示(X)HTML文档中允许有什么，不允许有什么，DOCTYPE正是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明）用以告诉其他人这个文档的类型风格。

严格模式：严格模式是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法，如<br/>

混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。

<!doctype html> 的作用是指出浏览器以html5的标准去解析html文档

6. 浏览器乱码的原因是什么？如何解决

浏览器乱码的原因：

下面这个流程是我们写入文件到展示文件的简单描述：

1.我们使用编辑器编写 HTML 文件

2.保存编写的HTML文件

3.使用浏览器打开HTML文件

4.HTML文件在浏览器展示

乱码的问题就出在第二步和第四步，当我们保存这个文件的时候会以编辑器默认的编码方式保存文件，但是浏览器并不知道文件的编码方式是什么，浏览器就只能使用它默认的解码方式，由于编码和解码的方式不一致就导致了乱码的出现

如何解决乱码问题（即如何通知浏览器用什么方式解码呢？）：

首页，在文件保存的时候你自己要清楚是用哪种编码方式保存的。如果你的文件是保存为utf-8格式，那么一定要在html 的 <head>里添加<meta charset="utf-8">，这句话的意思是告诉浏览器在打开这个页面的时候不要去猜了，直接用utf-8去解码。同理，如果你的文件保存为gbk格式，一定在文件里添加<meta charset="gbk">。

乱码产生的原因是由于文件的编码和浏览器的解码方式不一致导致的。

7. 常见的浏览器有哪些，什么内核

Internet Explorer：

IE开发计划开始于1994年夏天，微软为抵抗当时主流的网景Netscape Navigator，要在Windows中开发适合自己的浏览器，但微软并没有时间从零开始。因此和Spyglass合作，于是IE从早期一款商业性的专利网页浏览器Spyglass Mosaic派生出来，虽然Spyglass Mosaic与NCSA Mosaic(首款应用得最广泛的网页浏览器)甚为相似，但Spyglass Mosaic则相对地较不出名并使用了NCSA Mosaic少量的源代码。

Safari

Safari是苹果公司开发的浏览器，使用了KDE（Linux桌面系统）的KHTML作为浏览器的运算核心，Safari所用浏览器内核的名称是大名鼎鼎的WebKit。 Safari在2003年1月7日首度发行测试版，并成为Mac OS X v10.3与之后版本的默认浏览器，也成为苹果其它系列产品的指定浏览器（也已支持Windows平台）。

如上述可知，WebKit前身是KDE小组的KHTML引擎，可以说WebKit是KHTML的一个开源的分支。当年苹果在比较了Gecko和KHTML后，选择了后者来做引擎开发，是因为KHTML拥有清晰的源码结构和极快的渲染速度。

需要了解的是，虽然我们称WebKit为浏览器内核（或浏览器引擎），但不太适合直接称之为我们开头提到的Rendering Engine（渲染引擎），因为WebKit本身主要是由两个引擎构成的，一个正是渲染引擎“WebCore”，另一个则是javascript解释引擎“JSCore”，它们均是从KDE的渲染引擎KHTML及javascript解释引擎KJS衍生而来。

在2010年4月，苹果公司宣布了其浏览器引擎Webkit的最新项目 Webkit2。Webkit2的目标是实现独立进程与非阻断式API。

WebKit可以说是苹果公司给开源世界的一大贡献，基于此开源引擎，衍生了多个WebKit分支，如下面要介绍的Chrome的浏览器引擎。

Chrome / Chromium

谷歌Chrome/Chromium浏览器从08年创始至今一直使用苹果公司的WebKit作为浏览器内核原型，是WebKit的一个分支，我们可以称之为Chromium引擎（注意我们这里说的是Chromium引擎，而不是Chromium浏览器）。

这里顺便介绍下Chrome和Chromium两个浏览器的区别——Chromium浏览器是谷歌为发展自家的浏览器Chrome而开启的计划，所以Chromium相当于Chrome的工程版或称实验版（尽管Chrome自身也有β版阶段），新功能会率先在Chromium上实现，待验证后才会应用在Chrome上。Chromium一天最多可以更新十几二十个版本，实验性的新特性都会现在这里放出，但是Chromium本身其实并不稳定；而Chrome总共有四个更新分支：Canary、Dev、Beta、Stable，稳定性依次增强。

我们说回引擎。Chromium引擎虽然是属于WebKit的分支，却把WebKit的代码梳理得可读性提高很多，所以以前可能需要一天进行编译的代码，现在只要两个小时就能搞定。因此Chromium引擎和其它基于WebKit的引擎所渲染页面的效果也是有出入的。基于以上原因，有的地方会把Chromium引擎跟WebKit区分开来，有的地方则直接把Chromium引擎归为WebKit（比如维基百科），其实都有其道理。

然而在13年发布的Chrome 28.0.1469.0版本开始，Chrome放弃Chromium引擎转而使用最新的Blink引擎（基于WebKit2——苹果公司于2010年推出的新的WebKit引擎），Blink对比上一代的引擎精简了代码、改善了DOM框架，也提升了安全性。

Opera

Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。Opera浏览器创始于1995年4月，到2014年3月4日，官方发布的个人电脑用的最新版本为Opera20。

Opera的一个里程碑作品是Opera7.0，因为它使用了Opera Software自主开发的Presto渲染引擎，取代了旧版Opera 4至6版本使用的Elektra排版引擎。

Presto加入了动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。Presto在推出后不断有更新版本推出，使不少错误得以修正，以及阅读Javascript效能得以最佳化，并成为当时速度最快的引擎。

然而为了减少研发成本，Opera在2013年2月宣布放弃Presto，转而跟随Chrome使用WebKit分支的Chromium引擎作为自家浏览器核心引擎。

在Chrome与2013年推出Blink引擎（也是基于WebKit的分支）之后，Opera也紧跟其脚步表示将转而使用Blink作为浏览器核心引擎。

Firefox

Mozilla Firefox是一个开源网页浏览器，原名是Firebird，2004年2月9日，Mozilla Firebird决定改称Mozilla Firefox。Firefox浏览器使用的是Gecko内核，其发展历程如下：

1997年，网景收购了DigitalStyle。当时，网景浏览器在各方面的表现已经比不上她的主要竞争对手Internet Explorer。网景开始研发下一代的排版引擎，并期望把新的排版引擎应用于下一版本的网景浏览器上。

1998年初，Mozilla计划开始执行。这个新的排版引擎名为Raptor，以开发源码的方式发放于互联网上。后来，因为商标问题，Raptor改名为NGLayout（即next generation layout之意）。而最后NGLayout就被网景重新命名为Gecko。

2003年7月15日时代华纳解散了网景公司，大部分开发者被解雇。Mozilla基金会亦在当天成立，继续推动着Gecko的发展。时至今天，Gecko仍继续由Mozilla的雇员和义工所维护和发展。

最后还是再谈谈javascript引擎（后面统称JS引擎）这东西。我们上述的渲染引擎主要是负责HTML、CSS以及其他一些东西的渲染，而JS引擎则主要负责对javascript的渲染，一个JS引擎的好坏决定了一个浏览器对脚本的加载和执行速度，也影响了其跑分。

下方列出各种主流浏览器各自的JS引擎，了解下即可：

Firefox：

SpiderMonkey：第一款JavaScript引擎，由Brendan Eich在Netscape Communications时编写，用于Mozilla Firefox 1.0～3.0版本。

Rhino：由Mozilla基金会管理，开放源代码，完全以Java编写。

TraceMonkey：基于实时编译的引擎，其中部份代码取自Tamarin引擎，用于Mozilla Firefox 3.5～3.6版本。

JaegerMonkey：德文Jäger原意为猎人，结合追踪和组合码技术大幅提高性能，部分技术借凿了V8、JavaScriptCore、WebKit：用于Mozilla Firefox 4.0以上版本。

IonMonkey：可以对JavaScript编译后的结果进行优化，用于Mozilla Firefox 18.0以上版本。

OdinMonkey：可以对asm.js进行优化，用于Mozilla Firefox 22.0以上版本。

Chrome：

V8：开源，由Google丹麦开发，是Google Chrome的一部分。

注：我们上面提到Chrome是基于WebKit的分支，而WebKit又由渲染引擎“WebCore”和JS解释引擎“JSCore”组成，可能会让你搞不清V8和JSCore的关系。你可以这样理解——WebKit是一块主板，JSCore是一块可拆卸的内存条，谷歌实际上认为Webkit中的JSCore不够好，才自己搞了一个V8 JS引擎，这就是Chrome比Safari在某些JS测试中效率更高的原因。

IE：

Chakra：中文译名为查克拉，用于Internet Explorer 9的32位版本及IE10+。

Opera：

Linear A：用于Opera 4.0～6.1版本。

Linear B：用于Opera 7.0～9.2版本。

Futhark：用于Opera 9.5～10.2版本。

Carakan：由Opera软件公司编写，自Opera10.50版本开始使用。

8.列出常见的标签，并简单介绍这些标签用在什么场景

<h1>~<h6> 标题

<p> 段落，大段文字展示的时候用

<a> 链接，需要在页面上链接到另外一个地址时使用a链接

<table> 表格，当需要以表格的形式展示内容时使用

<ol><li> 有序列表

<ul><li> 无序列表

<strong><em> 强调斜体，表示对某些内容的强调

<button> 按钮

<img> 图像

<div> 块级元素