HTML中..内各标签的作用及其与浏览

2016-12-18 本文已影响0人谢梦扬_

1.浏览器相关知识

浏览器内核的作用：

内核就是一个渲染引擎，用来解析代码（html，css，js）并渲染页面，我们先了解一下市面上流行的浏览器：

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语法的事件而重新排版

由于不同的浏览器内核对于解读hlml css js这三种语言有一定的区别，虽然各浏览器厂商也在日益更新靠近标准化，但各浏览器之间的兼容问题对于前端工程师来说，解决他们仍然是一项繁重的任务。后续会着重这一点的学习。

1.<!doctype html> 的作用是什么

DOCTYPE描述了html文档的类型，对不同的DOCTYPE类型，浏览器会使用不同的方法来解析。
<!doctype html> 指定的是HTML5版本，之前的版本有不同的写法.
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5 不基于 SGML，所以不需要引用 DTD。
网页中的严格模式和混杂模式也与之相关

在严格模式中，浏览器以其支持的最高标准呈现页面，；
在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。
浏览器根据DOCTYPE是否存在以及使用的哪种DTD（文档类型定义Document Type Definition是一套关于标记符的语法规则）来选择要使用的呈现方法。
如果XHTML、HTML 4.01文档包含形式完整的DOCTYPE，那么它一般以严格模式呈现。
html5既然没有DTD，也就没有严格模式与宽松模式的区别，html5有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。

2.meta 有什么作用，常见的值有哪些？

meta具有两个属性（分别为http-equiv和name）和一个对应的变量content。它们共同实现不同的功能。
name属性 用于描述网页，对应属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。
常见属性有

<meta name=“keywords” content="">向搜索引擎说明你的网页的关键词（与seo优化搜索有关,网站性能优化也是前端必学的科目。)
<meta name=“description” content=""> 告诉搜索引擎你的站点的主要内容
<meta name=“author” content=“你的姓名”> 告诉搜索引擎你的站点的制作的作者

http-equiv属性 相当于HTTP的作用，如定义HTTP参数。常见属性有

<meta http-equiv=“Content-Type” content=“text/html”;charset=utf-8>[指定字符集，编码格式]

网页中乱码的问题是由于 html文件保存的编码格式与浏览器解码格式不同。可以在html中<head>添加<meta charset=“UTF-8”>或者<meta charset=“GBK”>之类的语句，浏览器就会按要求使用相应的解码方式解码

<meta http-equiv=“refresh” content=“n; url=”> 定时让网页在指定的时间的n内跳转
<meta http-equiv=“expires” content=“Mon,12 May 2001 00:20:00 GMT”>[可以用于设定网页的到期时间一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式
meta http-equiv=“pragma” content=“no-cache”> [禁用缓存]
<meta http-equiv=“set-cookie” content=“Mon, 12 May 2001 00:20:00 GMT”> cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也必须使用GMT时间格式。（Cookie就是服务器暂存放在你计算机上的一笔资料，好让服务器用来辨认你的计算机。当你在浏览网站的时候，Web服务器会先送一小小资料放在你的计算机上，Cookie 会帮你在网站上所打的文字或是一些选择，都记录下来。当下次你再光临同一个网站，Web服务器会先看看有没有它上次留下的Cookie资料，有的话，就会依据Cookie里的内容来判断使用者，送出特定的网页内容给你）。

3.<title>..</title>

<title> 元素可定义文档的标题。
浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。