饥人谷技术博客我爱编程

HTML 简介

2017-07-06  本文已影响67人  _空空

关于 HTML

超文本标记语言（HyperText Markup Language，简称 HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。

发展

年份 版本
1997.1 HTML 3.2
1997.12 HTML 4.0
1999.12 HTML 4.01
2014.10 HTML 5

HTML vs XML vs XHTML

HTML

HTML（Hyper Text Markup Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。它告诉浏览器如何显示内容

主要特点

  1. 简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便
  2. 可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证
  3. 平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因
  4. 通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器

XML

XML（EXtensible Markup Language），即可扩展标记语言，是用于网络上数据交换的语言。它没有标签集，也没有语法规则，但是它有句法规则

XML 与 HTML 的主要区别

  1. 目标：HTML的设计目标是显示数据并集中于数据外观，而XML的设计目标是描述数据并集中于数据的内容，它的显示形式靠CSS或XSL帮完成
  2. 语法：HTML的标记不是所有的都需要成对出现，XML则要求所有的标记必须成对出现；HTML标记不区分大小写，XML则大小敏感，即区分大小写
  3. 更新：XML允许粒度更新，不必在XML文档每次有局部改变时都发送整个文档的内容，只有改变的元素才必须从服务器发送到客户机，而HTML却不支持这样的功能
  4. 可读性：HTML侧重于网页数据表现形式的定义和描述，欠缺对文档数据含义的确切描述，不能适应对于日益增多的各类信息进行传递与存档的需求。例如<h2>Apple</h2>,在浏览器中显示的Apple，人们并不知道它具体是水果还是一个手机，HTML并不能解释数据Apple的含义；而XML不会给大家这个错觉如果描述的是水果中的苹果的话它会很清楚的这样表示<水果>Apple</水果>。所以说HTML的可读性相对较差。
  5. 还有一点就是XML标记由架构或文档的作者定义，并且是无限制的。HTML 标记则是预定义的；HTML 作者只能使用当前 HTML 标准所支持的标记

XHTML

XHTML（EXtensible HyperText Markup Language）,即扩展超文本标签语言，目标是取代HTML

XHTML 与 HTML 的主要区别

  1. XHTML是当前HTML版的继承者，由于HTML的语法较为松散，对于许多其他设备的要求较高，因此就出现了由DTD定义规则,语法要求更加严格的XHTML
  2. XHTML与HTML的最大的变化在于所有标签必须闭合
  3. XHTML中所有的标签必须小写
  4. XHTML 元素必须被正确地嵌套
  5. XHTML 文档必须拥有根元素

怎样理解 HTML 语义化

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

常见的 meta 标签

属性 值 说明
charset UTF-8（Unicode 字符编码）、ISO-8859-1（拉丁字母表的字符编码） 规定HTML文档的字符编码。文档的编码一定要与文件本身的编码保持一致，否则会出现乱码，推荐使用UTF-8编码（charset属性可以通过任意元素上的lang属性来重写）
context text 定义与 http-equiv 或 name 属性相关的元信息
http-equiv content-type（规定文档的字符编码）、default-style（规定要使用的预定义的样式表）、refresh（定义文档自动刷新的时间间隔）、expires（指定网页在缓存中的过期时间）、set-cookie 把 content 属性关联到 HTTP 头部
name application-name（规定页面所代表的 Web 应用程序的名称）、author（规定文档的作者的名字）、description（规定页面的描述。搜索引擎会把这个描述显示在搜索结果中）、generator(规定用于生成文档的一个软件包（不用于手写页面））、keywords（规定一个逗号分隔的关键词列表 - 相关的网页（告诉搜索引擎页面是与什么相关的））、revised、others 把 content 属性关联到一个名称

SEO 优化

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />

<meta name="description" content="Free Web tutorials on HTML and CSS" />

<meta name="robots" content="index, follow" />

<!-- 
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索； follow：页面上的链接可以被查询；
noindex：文件将不被检索； nofollow：页面上的链接不可以被查询。
-->

<meta name="google" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="verify" content="index,follow" />

<!-- 定时跳转（让网页多少秒刷新，或跳转到其他网页） -->
<meta http-equiv="refresh" content="5" />
<meta http-equiv="refresh" content="5; url=http://www.baidu.com" />

<!-- 作者、版权 -->
<meta name="author" content="littlematch" />
<meta name="copyright" content="" />

移动设备

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- 
`width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边
width：宽度（数值 / device-width）（范围从 200 到 10,000，默认为980 像素）
height：高度（数值 / device-height）（范围从 223  到 10,000）
initial-scale：初始的缩放比例 （范围从 >0 到 10）
minimum-scale：允许用户缩放到的最小比例
maximum-scale：允许用户缩放到的最大比例
user-scalable：用户是否可以手动缩 (no，yes)
minimal-ui：可以在页面加载时最小化上下状态栏。（已弃用）
-->

// WebApp全屏模式：伪装app，离线应用
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 启用 WebApp 全屏模式 -->

// 隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为 default | black | black-translucent 。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

// 添加到主屏后的标题
<meta name="apple-mobile-web-app-title" content="标题" />

// 忽略数字自动识别为电话号码
<meta content="telephone=no" name="format-detection" />

// 忽略识别邮箱
<meta content="email=no" name="format-detection" />

// 添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载 banner
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" />

<!-- 针对手持设备优化，主要是针对一些老的不识别 viewport 的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

网页相关

<meta charset="utf-8">  

<!-- 强制浏览器按照特定的版本标准进行渲染。但不支持IE7及以下版本。如果是IE浏览器就用最新的IE渲染，如果是双核浏览器就用Chrome内核 -->
<meta http-equiv='X-UA-Compatible' content='IE=edge, chrome=1' />

<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

<meta name="renderer" content="webkit|ie-comp|ie-stand">

<meta http-equiv="Pragma" content="no-cache">

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
<!-- [wml|xhtml|html5] 根据手机页的协议语言，选择其中一种；url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。 -->

<meta http-equiv="Cache-Control" content="no-siteapp" />

<!-- 期限（指定网页在缓存中的过期时间） -->
<meta http-equiv="Expires" Content="0" />
<meta http-equiv="Expires" Content="Sat Nov 28 2016 21:19:15 GMT+0800" /> 

<!-- cookie -->
<meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Sat Nov 28 2015 21:19:15 GMT+0800; path=/" />

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

HTML 5
  <!DOCTYPE html>

HTML 4.01 Strict
  该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）

HTML 4.01 Transitional
  该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

HTML 4.01 Frameset
  该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。

XHTML 1.0 Strict
  该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 
XML 来编写标记。

XHTML 1.0 Transitional
  该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 
XML 来编写标记。

XHTML 1.0 Frameset
  该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。

XHTML 1.1
  该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。

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

乱码产生的原因

如何解决？

常见的浏览器与内核

常见的浏览器

浏览器内核

浏览器内核是什么？

浏览器内核可以分成两部分：渲染引擎（layout engineer 或者 Rendering Engine）和 JS 引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理信息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS 引擎则是解析 Javascript 语言，执行 Javascript 语言来实现网页的动态效果。最开始渲染引擎和 JS 引擎没有并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

浏览器内核主要指的是浏览器的渲染引擎，2013 年以前，代表有 Trident（IE），Gecko（Firefox），Webkit（Safari Chrome 等）以及 Presto（Opera)。2013 年，谷歌开始研发 Blink 引擎，Chrome 28 以后开始使用，而 Opera 则放弃了自主研发的 Presto 引擎，投入谷歌怀抱，和谷歌一起研发 Blink 引擎，国内各种 Chrome系的浏览器（360、UC、QQ、2345 等等）也纷纷放弃 Webkit，投入 Blink 的怀抱。

Trident

Trident：IE浏览器使用的内核，该内核在 1997 年的 IE4 种首次被采用，是微软在 Mosaic（“马赛克”，这是人类历史上第一个浏览器，从此网页可以在图形界面的窗口浏览） 代码的基础之上修改而来的，并沿用到 IE11，也被普遍称作“IE内核”

Trident 实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用 IE 内核而非 IE 的浏览器（壳浏览器）涌现。由于 IE 本身的 “垄断性”，而使得 Trident 内核的长期一家独大。国内很多的双核浏览器的其中一核便是 Trident，美其名曰 “兼容模式”。

Gecko

Gecko（Firefox 内核）：Netscape6 开始采用的内核，后来的 Mozilla FireFox（火狐浏览器）也采用了该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，Gecko 内核的浏览器也很多，这也是 Gecko 内核虽然年轻但市场占有率能够迅速提高的重要原因

Webkit

一提到 Webkit，首先想到的便是 Chrome，可以说，Chrome 让 Webkit 内核深入人心，殊不知，Webkit 的鼻祖其实是 Safari。现在很多人错误地把 Webkit 叫做 Chrome 内核（即使 Chrome 内核已经是 Blink 了）。

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

Webkit 内核可以说是以硬件盈利为主的苹果公司给软件行业的最大贡献之一。随后，2008 年谷歌公司发布 Chrome 浏览器，采用的 Chromium 内核便 fork 了 Webkit。

Chromeium/Bink

2008 年，谷歌公司发布了 Chrome 浏览器，浏览器使用的内核被命名为 Chromium。

谷歌公司还研发了自己的 Javascript 引擎，V8，极大地提高了 Javascript 的运算速度。

Chromium 问世后，带动了国产浏览器行业的发展。一些基于 Chromium 的单核，双核浏览器如雨后春笋般拔地而起，例如 搜狗、360、QQ浏览器等等，无一不是套着不同的外壳用着相同的内核。

2013年开始，Google 在 WebKit 代码的基础上研发更加快速和简约的渲染引擎，并逐步脱离 WebKit 的影响，创造一个完全独立的 Blink 引擎。Blink 引擎问世后，国产各种 Chrome 系的浏览器也纷纷投入 Blink 的怀抱，可以在浏览器地址栏输入 chrome://version 进行查看

Presto

Presto 是挪威产浏览器 Opera 的 “前任” 内核，为何说是 “前任”，因为最新的 Opera 浏览器早已将之抛弃从而投入到了谷歌大本营。

Opera 的一个里程碑作品是 Opera7.0，因为它使用了 Opera Software 自主开发的 Presto 渲染引擎，取代了旧版 Opera 4 至 6 版本使用的 Elektra 排版引擎。该款引擎的特点就是渲染速度的优化达到了极致，然而代价是牺牲了网页的兼容性。

Presto 与开源的 WebKit 和经过谷歌加持的 Chromium 系列相比毫无推广上的优势，这是 Opera 转投 WebKit 的主要原因，并且使用 WebKit 内核的 Opera 浏览器可以兼容谷歌 Chrome 浏览器海量的插件资源。但是换内核的代价对于 Opera 来说过于惨痛。使用谷歌的 WebKit 内核之后，原本快速，轻量化，稳定的 Opera 浏览器变得异常的卡顿，而且表现不稳定，造成了众多的用户流失。

KHTML

KHTML，是HTML网页排版引擎之一，由KDE所开发。KDE系统自KDE2版起，在档案及网页浏览器使用了KHTML引擎。该引擎以C++编程语言所写，并以LGPL授权，支援大多数网页浏览标准。由于微软的Internet Explorer的占有率相当高，不少以FrontPage制作的网页均包含只有IE才能读取的非标准语法，为了使KHTML引擎可呈现的网页达到最多，部分IE专属的语法也一并支援。KHTML拥有速度快捷的优点，但对错误语法的容忍度则比Mozilla产品所使用的Gecko引擎小

移动端

移动端的浏览器内核主要说的是系统内置浏览器的内核。

目前移动设备浏览器上常用的内核有 Webkit，Blink，Trident，Gecko 等。其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit。Android 4.4 之前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink。Windows Phone 8 系统浏览器内核是 Trident。

参考

上一篇下一篇

猜你喜欢

热点阅读