下载掌阅APP，畅读海量书库
立即打开
超文本标记语言HTML是用于描述网页文档的标记语言。
HTML是由万维网的发明者蒂姆·伯纳斯-李和同事丹尼尔·W. 科诺里（Daniel W.Connolly）于1990年创立的标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX、Windows等）。使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
自 1990 年以来，HTML就一直被用作WWW的信息表示语言，使用HTML语言描述的文件需要通过WWW浏览器显示效果。HTML是一种建立网页文件的语言，能通过标记式的指令（Tag），将影像、声音、图片、文字动画等内容显示出来。
HTML自首次应用于网页编辑后便迅速崛起，成为网页编辑主流语言。几乎所有网页都是由HTML或者其他程序语言嵌套在HTML中编写的。
• HTML2.0——1995年11月，作为RFC 1866发布。
• HTML3.2——1996年1月14日，W3C发布推荐标准。
• HTML4.0——1997年12月18日，W3C发布推荐标准。
• HTML4.01——1999年12月24日，W3C发布推荐标准。
• XHTML1.0——2000年1月26日，W3C发布推荐标准。
• XHTML1.1——2001年5月31日，W3C发布推荐标准。
• HTML5——2014年10月28日，W3C发布推荐标准。
HTML5是超文本标记语言第五代的缩写，是构建Web内容的语言描述方式。HTML5由不同的技术构成，结合了SVG的内容，运用这些技术，在网页中可以更加便捷地处理多媒体内容。
1998年W3C成员决定停止发展HTML，在HTML4.01发布之后，HTML规范长时间处于停滞状态，Web标准的焦点也开始转移到XML和XHTML上。但XHTML规范越来越复杂，并没有被浏览器厂商接受。为了支持新的Web内容，HTML迫切需要制定新的规范。在2004年，一些浏览器厂商如Opera、Mozilla等联合成立了WHATWG（Web Hypertext Application Technology Working Group，网页超文本应用技术工作组），WHATWG工作组认为XHTML并非用户所需要的，于是继续开发HTML的后续版本，并将其定名为“HTML5”。随着万维网的发展，WHATWG的工作获得了很多厂商的支持，并最终取得W3C的认可，终止了XHTML的发展。HTML研究重新启动，WHATWG工作组在之前的规范的基础上开发HTML5，并最终发布了HTML5规范，于2014年由W3C发布推荐标准。
学习任何一门语言，都要先掌握它的基本格式，就像写信需要符合书信的格式要求一样，HTML5标记语言也不例外。接下来将具体讲解HTML5文档的基本格式。
HTML5文档的基本格式主要包括“<！DOCTYPE>文档类型声明”“<html>根标记、<head>头部标记”“<body>主体标记”等，具体代码如下。
<！DOCTYPE>标记位于文档的最前面，用于向浏览器说明当前文档使用的是哪种HTML或XHTML标准规范。HTML5 文档中的DOCTYPE声明非常简单，只有在开头处使用<！DOCTYPE>声明，浏览器才能将该网页作为有效的HTML文档，并按指定的文档类型进行解析。使用HTML5的DOCTYPE声明，会触发浏览器以标准兼容模式来显示页面。
<html>标记位于<！DOCTYPE> 标记之后，也称为根标记，用于告知浏览器这是一个HTML文档。根标记通常成对出现， <html>标记标志着HTML文档开始，</html>标记标志着HTML文档结束，在它们之间的则是文档的头部和主体内容。
<head>标记用于定义HTML文档的头部信息，也称为头部标记。头部标记紧跟在<html>标记之后，也需要成对出现，主要用来封装其他位于文档头部的标记，例如<title>、<meta>、<link>、<style>等，分别用来描述文档的标题、作者以及和其他文档的关系等。一个HTML文档只能包含一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。
成对出现的<body>标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内，<body>标记中的信息才是最终展示给用户看的。
一个HTML文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于<head>头部标记之后，与<head>标记是并列关系。
在HTML页面中，带有“< >”符号的元素被称为HTML标记，如上面提到的<html>、<head>、<body>都是HTML标记。所谓标记，就是放在“< >”标记符中、表示某个功能的编码命令，也称为“HTML标记”或“HTML元素”，本书中统一称作“HTML标记”。为了方便学习和理解，通常将HTML标记分为两大类，分别是“双标记”与“单标记”。
双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下。
该语法中“<；标记名>”表示该标记的作用开始，一般称为“开始标记（start tag）”；“</标记名>”表示该标记的作用结束，一般称为“结束标记（end tag）”。和开始标记相比，结束标记只是在前面加了一个关闭符“/”。
单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下。
在HTML中还有一种特殊的标记——注释标记。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标记。其基本语法格式如下。
需要说明的是，注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，可以被下载到用户的计算机上，查看源代码时就可以看到。
使用HTML制作网页时，如果想让HTML标记提供更多的信息，例如希望标题文本的字体为“微软雅黑”且居中显示，此时仅仅依靠HTML标记的默认显示样式已经不能满足需求了，需要使用HTML标记的属性加以设置。其基本语法格式如下。
在上面的语法格式中，标记可以拥有多个属性，必须写在开始标记中，位于标记名后面。属性之间不分先后顺序，标记名与属性、属性与属性之间均以空格分开，任何标记的属性都有默认值，省略该属性则取默认值。
HTML5 的出现对于Web前端开发有着非常重要的意义，其核心目的在于解决当前Web开发中存在的各种问题。一是解决Web浏览器之间的兼容性问题。在一个浏览器上正常显示的网页（或运行的Web应用程序），很可能在另一个浏览器上不能显示或显示效果不一致。二是文档结构描述的问题。在HTML4之前的各版本中，HTML文档的结构一般用div元素描述，文档元素的结构含义不够清晰。三是使用HTML+CSS+JavaScript开发Web应用程序时，开发功能受到很大的限制，比如本地数据存储功能、多线程访问、获取地理位置信息等，这些都影响了用户体验。
HTML5 和以前的HTML版本比较，区别主要体现在语法的变化，增加和删除的元素、属性，以及全局属性等方面。
DTD（Document Type Definition，文档类型定义）是一组机器可读的规则，它们定义XHTML或HTML的特定版本中允许有什么、不允许有什么。在解析网页时，浏览器将使用这些规则检查页面的有效性并采取相应的措施。文档类型列表见表2-1。
表2-1 文档类型列表
①HTML4.01 规定了三种文档类型：Strict（严格类型）、Transitional（过渡类型）以及Frameset（框架类型）。
②XHTML1.0 规定了三种XML文档类型：Strict（严格类型）、Transitional（过渡类型）以及Frameset（框架类型）。
③HTML5只规定了一种文档类型。
在HTML4.01版本中，使用<meta>标记指定HTML文件的字母编码，代码如下。
在HTML5中，直接指定<meta>标记的charset属性就可以设置字符编码，代码如下。
HTML5的语法格式和之前的HTML4.01没有太大的变化，HTML5的语法变化主要是为了兼容各种不规范的HTML文档，提高各浏览器之间的兼容性。这些不规范的写法可以归纳为以下几点。
①可以省略标记的元素，具体内容见表2-2。
表2-2 省略标记的3种情况
注意：“不允许写结束标记的元素”是指不允许用开始标记与结束标记将元素内容括起来的形式，只允许使用“<tag/>”的形式进行书写。例如“<img>.</img>”的书写方式是错误的，只允许“<img.../>”的书写形式。“省略全部标记的元素”是指该元素可以完全被省略，但即使元素的标记被省略了，元素也是以隐形的方式存在的。例如省略body元素时，在文档结构中该元素还是存在的，可以使用 document.body来访问body对象。
②具有boolean值属性的元素可以省略属性值，具体见表2-3。
表2-3 具有boolean值的相关属性
有些元素如果有boolean值的属性，当只写属性而不指定属性值时，表示属性值为true；如果需要将属性值设置为false，则可以不使用该属性。另外，将属性设置为true时，也可以将属性名设定为属性值，或将空字符串设定为属性值。例如，
③允许属性值不使用引号。
在不同版本的HTML中，在指定属性值时，属性值两边的引号既可以是双引号，也可以是单引号。
HTML5又做了一些改进，当属性值不包括空字符串、“<”、“>”、“=”、单引号和双引号等字符时，属性值两边的引号可以省略。例如，
④标记不再区分大小写。
基本语法格式如下：
1999 年以后，HTML4.01 改变了很多，如今在HTML4.01 中的几个元素已经被废弃，而这些元素在HTML5中则被删除或重新定义。
为了更好地处理今天的互联网应用，HTML5 添加了很多新元素及功能，比如图形的绘制、多媒体内容、更好的页面结构、更好的形式处理等。
HTML5新增的主要元素见表2-4。
表2-4 HTML5新增的主要元素
续表
注意：这里要提到“语义化元素”这个概念。通常用div来完成的网页结构，一般会用id class来标识这些元素的用途。但是从机器搜索引擎的角度来说，它并不知道这些div元素具体是做什么的，因为它看不懂id class的意义。所以为了让机器理解这些元素的意义，就会用这些语义化标记来代替之前的div布局方式，这样的网页结构对搜索引擎来说更加友好，网页内容也能够更好地被搜索引擎抓取。
HTML5 移除的元素包括能用CSS代替的元素、框架类元素及只有部分浏览器支持的元素，HTML5移除的元素见表2-5。
表2-5 HTML5移除的元素
元素可以定义自己的属性，比如<a>标记定义href属性，这种叫局部属性（local attribute）。相对应地，可以通过全局属性（global attribute）为所有元素设置共有的行为，当然也可以为单独元素设置全局属性，只是这样做没有太大意义。HTML5增加了许多新的全局属性（表2-6），下面逐一介绍。
表2-6 HTML5的全局属性
全局属性contenteditable是一个枚举属性，表示元素是否可被用户编辑。 如果可以，则浏览器会修改元素的部件以允许编辑。
contenteditable有以下几种属性：
①"true"：表明该元素可编辑。
②"false"：表明该元素不可编辑。
③"inherit"：（默认）表明该元素继承了其父元素的可编辑状态。
例如，设置一个ul元素的contenteditable属性的基本语法格式如下，结果显示如图 2-5所示。
图2-5 测试ul元素的contenteditable属性
contextmenu属性规定div元素的上下文菜单，上下文菜单会在用户右键单击元素时出现。目前的主流浏览器都不支持contextmenu属性。
designMode属性用来指定整个页面是否可编辑，当页面可编辑时，页面中任何支持contentEditable属性的元素都会变成可编辑状态。designMode属性只能在JavaScript脚本里被编辑修改。其属性值有on和off，当该属性值为on时表示页面可编辑，属性值为off时表示页面不可编辑。
在HTML5中所有元素都允许使用一个hidden属性，该属性是布尔值属性，可以被设定为true或false。当设为true时，元素处于不可见状态；设为false时，元素处于可见状态。
该属性是HTML5对input元素与textarea元素提供的一个新属性，它的功能是针对用户输入的内容进行拼写检查和语法检查。spellcheck属性是一个布尔值属性，具有true和false值，在书写时有一个关键的地方，就是必须明确声明属性值为true或false。
例如，设置一个输入语法检查框的基本语法格式如下，其结果显示如图2-6所示。
图2-6 spellcheck属性测试
draggable属性定义元素是否可以被拖动。属性取值如下：
①true：定义元素可拖动。
②false：定义元素不可拖动。
③auto：定义使用浏览器的默认行为。
目前所有主流浏览器都不支持dropzone属性。dropzone 属性定义在元素上拖动数据时是否复制、移动或链接被拖动数据。属性取值如下：
①copy：拖动数据会产生被拖动数据的副本。
②move：拖动数据会导致被拖动数据被移动到新位置。
③link：拖动数据会产生向原始数据的链接。
HTML5用于取代HTML4.01和XHTML1.0标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些HTML5技术，同时HTML5也新增了很多新的特性，包括：
• 语义特性；
• 本地存储特性；
• 设备兼容特性；
• 连接特性；
• 网页多媒体特性；
• 三维、图形及特效特性；
• 性能与集成特性；
• CSS3特性。