前端程序员面试笔试通关宝典
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.1　HTML 5基础

本节主要讲解前端内容中HTML 5的基本结构、HTML的发展史、HTML 5的优势以及W3C的标准等基础知识内容。读者需要牢牢掌握这些基础知识，才能在面试及笔试中应对自如。

2.1.1　基本结构

HTML 5的基本结构主要分为头部区域、主体区域以及结束区域。

HTML 5是一个以.html为扩展名的文件，下面是一个HTML 5的基本结构：

1．头部区域

HTML 5的头部区域head用于定义一些网页的初始化工作，如文档编码格式、网页的title标题以及引入CSS和JavaScript文件等。

其中，title标签定义的网页标题显示在浏览器顶部窗口的标签栏，而meta中的name为description定义的是网页描述不可见的，主要用于告诉搜索引擎的爬虫机器人当前页面主要的内容，适当的时候搜索引擎会给出相关词汇的搜索排名，类似的标签还有meta中的keyword和author。

2．主体区域

HTML 5的主体区域body是浏览器的视窗区域，在这个区域写入的任何内容，都会显示在浏览器中。

3．标签形式

每个以< >符号组成的元素都是一个HTML 5标签，分为单标签和双标签。

4．标签属性

标签的形式除了有单标签和双标签之外，还包括了属性，通常是作为标签功能的补充。

5．严格类型

HTML 5并不是严格类型的语言，拥有一定的容错机制，当我们把标签写错的时候，浏览器并不会直接报错不显示了，而是根据自己的理解去解析错误的内容。

6．代码注释

HTML 5用于注释标签的是<!--我是注释-->。

     <!--这是一段注释内容-->

2.1.2　HTML的发展史

HTML的英文全称是Hypertext Marked Language，即超文本标记语言。HTML是由Web的发明者Tim Berners-Lee和同事Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX和Windows等）。使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。

自1990年以来，HTML就一直被用作WWW的信息表示语言，使用HTML语言描述的文件需要通过WWW浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令（Tag），将影像、声音、图片、文字动画、影视等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术，即通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接。超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。

万维网（World Wide Web）上的一个超媒体文档称之为一个页面（page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（Homepage）或首页，主页中通常包括指向其他相关页面或其他节点的指针（超级链接）。所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”。

HTML历史上有以下版本。

·　HTML 1.0：在1993年6月作为互联网工程工作小组（IETF）工作草案发布。

·　HTML 2.0：1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时。

·　HTML 3.2：1997年1月14日，W3C推荐标准。

·　HTML 4.0：1997年12月18日，W3C推荐标准。

·　HTML 4.01：1999年12月24日，W3C推荐标准。

·　HTML 5：HTML 5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。

2.1.3　HTML 5的优势

学习前端知识都需要学习HTML 5，并知道使用它的优势是什么。下面将对它的优势进行介绍。

（1）跨平台：跨平台技术在早期大多因为性能问题没有实现，中后期硬件能力增强后又成为主流，因为跨平台确实是适合大众需要的。

（2）成本低：创业者融资并不容易，如何更高效地花钱非常重要。使用原生开发的App和使用HTML 5开发的App没什么区别，但是开发成本会高出一倍。

（3）快速迭代：移动互联网更新速度很快，谁对用户的需求满足得更快，谁的试错成本更低，谁就拥有巨大的优势。

（4）导流入口多：HTML 5应用导流非常容易，超级App（如微信朋友圈）、搜索引擎、应用市场、浏览器，到处都是HTML 5的流量入口。而原生App的流量入口只有应用市场。聪明的HTML 5开发者当然会玩转各种流量入口从而取得更强的优势。

（5）开源生态系统发达：HTML 5前端是开放的正反馈循环生态系统，拥有大量的开源库，开发应用变得更轻松、更敏捷，当然这也体现在了快速迭代和成本下降上。

（6）开放的数据交换：HTML是以page为单元开放代码的，无须专门开发SDK，只要不混淆，就能与其他应用交互数据。开发者可以让手机搜索引擎很容易地检索到自己的数据，也更容易通过跨应用协作来满足最终用户需求。

（7）持续交付：很多人有这样的体会，一个原生应用上线Appstore，突然有一个大问题，只好尽快修复，然后静静等待一段时间进行审核。正是因为这段间隔时间，用户可能会大量流失，等新应用被审核上线了，用户可能已经卸载了该应用。但是使用HTML 5没有这些问题，可以实时更新，有问题立即响应。

（8）对最终用户的三大优势：大幅降低使用门槛；实时更新、提高体验；跨应用的使用体验。

上文对HTML 5开发语言做了详细的介绍和优势说明，希望大家在学习之后可以对HTML 5有一个大概认识，未来的开发技术市场将会由HTML 5占领。

2.1.4　W3C标准

W3C标准主要由DOCTYPE、名字空间（NameSpace）、定义语言编码、CSS定义等内容组成。

1．DOCTYPE

DOCTYPE是DocumentType（文档类型）的简写，用来说明使用的XHTML或者HTML是什么版本。其中的DTD（如xhtml1-transitional.dtd）叫作文档类型定义，包含文档的规则，浏览器根据定义的DTD来解释页面的标识，并展现出来。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非XHTML确定了一个正确的DOCTYPE，否则标识和CSS都不会生效。

在XHTML 1.0中提供了三种DTD声明可供选择。

·　过渡的（Transitional）：要求非常宽松的DTD，它允许继续使用HTML 4.01的标识（但是要符合xhtml的写法）。

完整代码如下所示：

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

·　严格的（Strict）：要求严格的DTD，不能使用任何表现层的标识和属性。

完整代码如下所示：

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

·　框架的（Frameset）：专门针对框架页面设计使用的DTD，如果页面中包含框架，需要采用这种DTD。

完整代码如下所示：

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

☆注意☆　DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。

2．名字空间（NameSpace）

通常在HTML 4.0的代码中有“xmlns”。这个“xmlns”是XHTML NameSpace的缩写，叫作“名字空间”声明。XHTML是HTML向XML过渡的标识语言，它需要符合XML文档规则，因此也需要定义名字空间。又因为XHTML 1.0不能自定义标识，所以它的名字空间都相同，目前阶段只需要参照它的代码即可。

3．定义语言编码

为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明其所使用的编码语言，一般使用gb2312（简体中文）。制作多国语言页面，也有可能用Unicode、ISO-8859-1、UTF-8等，根据所需来进行定义。

☆注意☆　如果忘记了定义语言编码，可能就会出现这样的情况：在DW（dreamweaver）做完一个页面，第二次打开时所有的中文变成了乱码。

4．CSS定义

为保证各浏览器的兼容性，在写CSS时都需要写上数量单位，代码如下所示：

     错误：.space_10 {padding-left:10}
     正确：.space_10 {padding-left:10px}
5．不要在注释内容中使用“--”

“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们是不起任何作用的。

6．所有标签的元素和属性的名字都必须使用小写

与HTML不一样，XHTML对大小写是敏感的，所以在书写的时候需要注意大小写。

上一章目录下一章