前端基础01

2017-01-10 本文已影响16人 IT男的成长记录

1.HTML、XML、XHTML的区别

HTML:超文本标记语言(Hyper Text Markup Language)，是一种用来描述网页的语言，常与CSS、JavaScript一起构建网页、网页应用、移动应用程序的用户界面。
XML:可扩展标记语言(Extensible Markup Language)，是一种用于传输数据的标记语言。XML标签没有被预定义，需要根据需要自定义标签。
XHTML：可扩展超文本标记语言(Extensible HyperText Markup Language)，XHTML作用与HTML类似，但是语法更加严格。
区别：
1. XML和HTML是为不同的目的而设计的：XML的目的在于传输和存储数据，其焦点是数据的内容/传输信息；HTML的目的在于显示数据，其焦点是数据的外观/显示信息。
2. XHTML是在HTML的基础上，利用XML的规则进行扩展而得到的。在功能上XHTML与HTML相似，但在语法规则上XHTML相较与HTML更加严格。XHTML是HTML向XML发展过程中的过度。

2.HTML语义化

是什么时HTML语义化：根据网页内容的结构化、语义话，选择不同的HTML标签来进行网页的开发。
为什么要语义化：
1. 使网页代码结构更加清楚，提高代码的可读性，便于项目的开发和维护
2. 使搜索引擎和网页爬虫更容易检索到相应的内容，便于网页的推广
3. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以其他方式来渲染网页
HTML 5中语义化相关的标签：
1. <header>：定义section或page的页眉
2. <footer>：定义section或page的页脚
3. <section>：定义文档中的节（section、区段）
4. <atricle>：定义文章
5. <aside>：定义article元素中作为主要内容的附属信息部分
6. <nav>：定义页面的导航链接区域
7. <figure>：定义媒介内容(图像、图表)的分组，以及它们的标题

3.怎样理解内容和样式分离原则：

将网页的结构、样式、行为分离开，使HTML只负责网页的大体结构与承载内容，内容呈现的具体样式则交由CSS，网页与用户的交互则交给JavaScript
将原始混合了HTML、CSS、JavaScript的网页分为HTML、CSS、JavaScript三大部分，CSS和JavaScript又可以根据功能、模块的需要分为若干个部分，使得项目结构更加清晰，提高了代码的可阅读性和可维护性，并且给团队分工协作带来了便利
方便多个网页页面共用一套样式

4.有哪些常见的meta标签

<meta chartset="utf-8" />:HTML5设置网页字符集的方式，常用的字符集还有GB2312和GBK
<meta http-equiv="content-Type" content="text/html;charset=utf-8" />:之前HTML版本设置字符集的方式
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />:指定浏览器采用何种版本渲染当前页面——使用IE和Chrome最新版本渲染当前页面
<meta http-equiv="expires" content="Monday 9 January 2017 01:00 GMT"/>: 用于设定网页的到期时间，过期后网页必须到服务器上重新传输
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com/" />:2秒后自动跳转到相应的页面
<meta http-equiv="Set-Cookie" content="User=yanxin;path=/;exires=Monday 9 January 2017 01:00 GMT"/>:2017.01.09 01:00后网页过期，并且保存在本地的cookies被自动删除
<meta http-equiv="cache-control" content="no-siteapp" />:禁止当前页面在移动端浏览时，被自动转码
<meta http-equiv="cache-control" content="no-cache" />:先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存
<meta http-equiv="cache-control" content="no-store" />:不允许使用缓存，每次对相关内容的修改都只能在服务器上修改
<meta http-equiv="cache-control" content="public" />:缓存所有相应，但并飞必须。
<meta http-equiv="cache-control" content="private" />:只为单个用户缓存，不允许任何中继进行缓存
<meta http-equiv="cache-control" content="maxage=60" />:表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。
<meta name="keywords" content="html,css,javascript" />:描述网页的关键词，方便搜索引擎搜索和分类
<meta name="description" content="饥人谷课程作业05" />:对网页内容的简要描述
<meta name="viewport" content="width=device-width,initial-scale=1"/>:用于指定用户是否可以缩放Web页面
<meta name="robots" content="none|noindex|nofollow|all|index|follow"/>:告诉搜索引擎应该如何处理当前网页
<meta name="author" content="yanxin,yan358941877@163.com"/>:标注作者信息
<meta name="copyright" content="xxxxxx" />:标注网页的版权信息
<meta name="renderer" content="webkit" />:renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。content的值可选：webkit、ie-comp（ie兼容模式）、ie-stand(ie标准模式)

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

<!DOCTYPE>声明必须是HTML文档的第一行，位于<html>标签之前
<!DOCTYPE>不是HTML标签，它是指示web浏览器关于页面使用哪个HTML版本进行编写的指令
常用的DOCTYPE声明：
1. HTML5：<!DOCTYPE html>
2. HTML 4.01 Strict:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 该DTD包含所有HTML元素和属性，但不包括展示性和弃用的元素(font)。不允许使用框架集(Framesets)
3. HTML 4.01 Transitional:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">:该DTD包含所有HTML元素和属性，包括展示性和弃用的元素(font)。不允许使用框架集(Framesets)
4. HTML 4.01 Frameset:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">::该DTD包含所有HTML元素和属性，包括展示性和弃用的元素(font),允许使用框架集(Framesets)
5. XHTML 1.0 Strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">:该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。
6. XHTML 1.0 Transitional:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">:该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。
7. XHTML 1.0 Frameset:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）,允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。
8. XHTML 1.1：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">：该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。
DOCTYPE可声明三种DTD类型，分别表示严格版本、过渡版本、基于框架的HTML文档。当浏览器厂商开始创建与标准兼容的浏览器是，为了确保向后兼容性，创建了两种呈现模式：标准模式和混杂模式。在标准模式中，浏览器以其支持的最高标准呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。
标准模式和混杂模式的触发：浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择相应的模式：
- 如果XHTML、HTML4.01文档包含形式完整的DOCTYPE，则浏览器以标准模式呈现
- 包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但时有过渡DTD，但是没有URI会导致页面以混杂模式呈现
- DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现
HTML 5没有严格与宽松模式的区别，HTML 5有相对宽松的语法，实现是，已经尽可能地实现了向后兼容。

6.文档乱码的原因是什么？如何解决？

html文件保存的编码格式与浏览器解析时的解码格式不匹配导致的
解决的方法是在<meta charset="">中设置编码格式(该编码格式与文件保存时的编码格式一致)，告诉浏览器按照相同的编码格式去解析。

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

“浏览器内核”主要指渲染引擎(Rendering Engine)，负责解析网页语法(如HTML、JavaScript)并渲染、展示网页。因此，所谓的浏览器内核通常也就是指浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解析也有所不同，因此同一网页在不同的内核浏览器里的渲染、展示效果也可能不同。

Trident内核(代表：Internet Explorer)

Trident(又称为MSHTML)，是微软开发的一种排版引擎。它在1997年10月与IE4一起诞生，一直在被不断地更新和完善。而且除IE外，许多产品都在使用Trident核心，比如Windows的Help程序、RealPlayer、Windows Media Player、Windows Live Messenger、Outlook Express等等都使用了Trident技术。Trident实际上是一款开放的内核，Trident引擎被设计成一个软件模块，使得其他软件开发人员很容易将网页浏览功能加到他们自行开发的应用程序里，其接口内核设计相当成熟，因此涌现出许多采用IE内核而非IE的浏览器，但是Trident只能用于Windows平台。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器等。
Gecko内核（代表：Mozilla Firefox）

Gecko是开放源代码、以C++编写的网页排版引擎，目前被Mozilla家族网页浏览器以及Netscape 6以后版本浏览器所使用。这款软件原本是由网景通讯公司开发的，现在则由Mozilla基金会维护。由于Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，采用Gecko内核的浏览器也很多，这也是Gecko内核虽然年轻但市场占有率能够迅速提高的重要原因。

Gecko排版引擎提供了一个丰富的程序界面以供与互联网相关的应用程序使用，例如网页浏览器、HTML编辑器、客户端/服务器等。虽然最初的主要对象是Mozilla的衍生产品，如Netscape和Mozilla Firefox，但是现在已有很多其他软件利用这个排版引擎。此外Gecko也是一个跨平台内核，可以在Windows、BSD、Linux和Mac OS X中使用。
WebKit内核（代表：Safari、Chrome）

WebKit 是一个开放源代码的浏览器引擎(Web Browser Engine)，WebKit最初的代码来自KDE的KHTML和KJS(它们均为开放源代码，都是自由软件，在GPL协议下授权)。所以WebKit也是自由软件，同时开放源代码。它的特点在于源码结构清晰、渲染速度极快。主要代表产品有Safari和Google的浏览器Chrome。
　　WebKit内核在手机上的应用也十分广泛，例如Google的Android平台浏览器、Apple的iPhone浏览器、Nokia S60浏览器等所使用的浏览器内核引擎，都是基于WebKit引擎的。
Presto内核（代表：Opera）

Presto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。Presto的特点就是渲染速度的优化达到了极致，它是目前公认的网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。

Presto实际上是一个动态内核，与Trident、Gecko等内核的最大区别就在于脚本处理上，Presto有着天生的优势，页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。此外该内核在执行JavaScript时有着最快的速度，根据同等条件下的测试，Presto内核执行同等JavaScript所需的时间仅有Trident和Gecko内核的约1/3。Presto是商业引擎，了Opera以外较少浏览器使用Presto内核，这在一定程度上限制了Presto的发展。
Chromium/Bink内核(代表：Chrome、Opera12以后的版本、360极速)：

Blink是一个由Google和Opera Software开发的浏览器排版引擎，这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。
浏览器野史 UserAgent列传