HTML文档由HTML元素组成，一个HTML元素由一个标签和一组属性组成。一个标签可以有一个或多个属性，属性以名称和值成对出现。
Web 浏览器读取HTML 文档，并以网页的形式显示出来，浏览器不会显示 HTML 标签，而是通过标签来解释网页的内容。
1.1.1 HTML元素
HTML 不是一种编程语言，而是一种描述性的标记语言，并使用HTML标签来描述HTML元素。
HTML标签是由尖括号包围的关键词，如标签
。标签不区分大小写，故
和
的含义相同，不过推荐使用小写。
HTML标签通常成对出现，一个是开始标签，一个是结束标签。开始标签告诉浏览器，从这里开始执行该标签所表示的功能；结束标签告诉浏览器，该功能到这里结束。在开始标签前加一个斜杠即成为结束标签。如，html 元素的开始标签是 ，结束标签是 。
也就是说，一个HTML 元素由开始标签、内容、结束标签组成。开始标签是放在一对尖括号中的元素名称及可能包含的属性，结束标签是放在一对尖括号中的斜杠加元素的名称。语法格式为：
<开始标签>内容
如，em 元素的开始标签为，结束标签为 ，在 和 标签之间是元素的内容。如图 14 所示：
图 14 html元素
还有一些元素就是空元素，它既不包含文本也不包含其他元素。这类元素无需单独的结束标签，只需在开始标签的“>”前加一个可选的空格和斜杠即可。如：
1.1.2 HTML属性
HTML属性包含了元素的额外信息，它总是出现在HTML开始标签中，并且，通常以名/值对的形式出现。属性的名称和值是大小写无关的，推荐使用小写。
HTML属性的值有以下四种表现形式：
1）空值：只有属性名称，隐含的意思是属性的值为布尔类型。在HTML5中，一切化繁为简，对于布尔型的属性，可以不提供属性的值。如果一定要提供一个值，值就是属性名本身。如：
就可以直接写成：
2）无引号值：如果属性的值中不包含任何空格字符、单引号、双引号、等号、大于号、小于号，也不为空，就可以省略属性值两边的引号。如，。
3）单引号值：如果属性的值中不包含任何单引号，也不为空，就可以把属性值放在单引号中。如，。
4）双引号值：如果属性的值中不包含任何双引号，也不为空，就可以把属性值放在双引号中。如，。
大多数的HTML元素都拥有多个属性，多个属性中，如果省略某个属性，则该属性使用默认值。在定义多个属性时，各属性之间没有先后次序，但属性的名/值对之间必须用空格分开。如，a 元素就拥有多个属性，每个属性都有各自的值。如图 15 所示：
图 15 html属性
有的属性可以接受任何值，而有的属性则只能接受预定义的值，即必须从一个标准列表中选择一个值。如，link 元素的 href 属性就可以接受任意值，而 media 属性却只能设置为 all、screen、print 等预定义值中的一个。如图 16 所示：
图 16 html属性取值
HTML的属性中，有些属性只能用于特定元素，而有些属性可以用于任何元素。可用于任何元素的属性被称作全局属性。
HTML4中，提供了 6 个全局属性，它们分别是 class、id、style、title、accesskey、tabIndex、dir，到了HTML5，又新增了 contenteditable、hidden、lang、spellcheck、translate、data-* 这6 个全局属性：
class属性
class属性用来规定元素所使用的CSS类名，该属性对 html、head、title、style、base、meta、param、script等这些元素无效。
一个元素的 class属性值中可以包含多个类名，类名之间用空格分隔，表示为该元素应用多个类选择器合并后的样式。
当元素应用多个类的样式时，类名不分先后顺序，元素的最终样式就是所有这些样式层叠后的效果。如：
.red { color: red; }
.bold { font-weight: bold; }
本段落的文本将显示为红色、粗体。
这个p元素同时应用了red和bold两个类选择器的样式，则段落文本为红色、粗体显示。运行结果如图 17 所示：
图 17 class属性
id属性
id属性用来规定一个元素的 id，在一个 HTML 文档中，id必须是唯一的。定义 id属性后，就可以通过 CSS 为带有指定 id 的元素添加样式，也可以通过 Javascript 来操作元素。假设页面上有一个段落：
这里是段落的内容！
上述段落元素的 id属性值为 paragraph，就可以通过CSS的 id 选择器，为段落元素添加样式。如：
#paragraph {
color: red;
}
上述代码就表示把段落文本的颜色设置为红色。运行结果如图 18 所示：
图 18 通过 id 选择器定义样式
通过 Javascript，可以对元素进行很多操作，如改变元素的内容、为元素添加样式等。可以为元素注册某事件，当事件发生时，对元素进行相应的操作。
如，为上述段落注册 onclick 事件，当用户在段落上点击时，调用 Javascript 函数来改变段落的内容：
nclick="changeText">这里是段落的内容！
HTML文档中的任何一个元素，都会生成一个DOM对象。通过Javascript 操作元素时，首先通过 document.getElementById 方法获取对象的句柄，再通过 Javascript 的属性或方法来操作元素。如，通过innerHTML属性，就可以改变元素的内容。请将以下代码插入到HTML文档的头部：
上述代码就表示，当在段落上点击时，将段落的内容由“这里是段落的内容！”，动态修改为 "Hello World!"。运行结果如图 19 所示：
图 19 通过 id 改变元素内容
style属性
style属性用来规定元素的内联样式。如：
本段落的文本将显示为红色、粗体。
上述代码通过 p 元素的 style属性，为段落元素定义了一个内联样式，让段落中的文本以红色、粗体显示。
由于 style属性定义的样式优先级最高，它将覆盖任何在
title属性
title属性用来规定元素的额外信息，当鼠标移到元素上时，会显示一个文本提示信息，信息的内容是 title属性的值。如：
测试文本
上述代码就表示，当鼠标移到段落上时，会显示"我是测试文本"的提示信息。运行结果如图 110 所示：
图 110 title属性
为链接，特别是图片链接添加 title属性，当把鼠标移动到链接上时，就会显示 title属性的值，可以达到补充说明或者提示的效果。
另外，由于搜素引擎无法直接读取图像的信息，而 title属性可以为它提供文字信息，这对搜索引擎比较友好，是搜索引擎优化的重要内容。因此，强烈建议为所有的链接元素添加 title属性。
accesskey属性
accesskey属性用来规定激活元素的快捷键，定义accesskey属性后，就可以通过快捷键来激活元素，使它获得焦点。
支持 accesskey属性的元素有 a、area、button、input、abel、legend、textarea。如，以下代码为链接元素定义的快捷键是字母 w：
歪脖网
不幸的是，不同浏览的快捷键和访问方式却不完全相同。IE和 Chrome 浏览器的快捷键是 ALT+w，FireFox 浏览器是 Alt+Shift+w。IE要先使用快捷键使链接获得焦点，再按回车，来跳转到链接指定的地址；而 FireFox 和 Chrome 浏览器，仅仅使用快捷键便能自动跳转链接指定的地址。
使用 accesskey属性能够增加应用的易用性，特别是对那些使用键盘的用户。因此，为菜单和导航定义 accesskey属性，是非常不错的选择。
tabIndex属性
当页面上有很多元素的时候，就可以通过Tab键让元素获得焦点，并在元素间进行移动。默认情况下，可以通过Tab键访问的元素有 a、area、button、input、object、select、textarea，其他元素不能通过Tab键进行访问。
通过 tabIndex属性，任何元素都能被包含在Tab键的序列中，可以极大提高应用的易用性。
tabIndex属性的值大于0的元素，将按属性值从小到大设置Tab键顺序。使用Tab键访问元素时，tabIndex属性值最小的元素最先获得焦点。如果两个元素具有相同的 tabIndex属性值，则以它们在源码中出现的先后顺序，前面的元素先获得焦点。并且，tabIndex属性的值可以不是从 1 开始，也可以不连续，浏览器会自动进行排序。
tabIndex属性值等于 0的元素，将根据源代码的顺序设置Tab键顺序，并且排在所有 tabIndex属性值大于 0 的元素之后。
tabIndex属性值为负值的元素，将变成可由代码获得焦点，但它本身并不在Tab键序列中。也就是说，在按下Tab键时，该元素不能获得焦点，但可以通过代码让它获得焦点。
假设页面上有三个链接元素，它们的 tabIndex属性值依次是5、1、8：
商品分类
联系我们
关于我们
在通过Tab键遍历这些链接元素时，它们的访问顺序依次是联系我们->商品分类->关于我们，而不是源码中定义的顺序。
dir属性
dir属性用来规定元素内容的文本书写方向，该属性对 base、br、frame、frameset、hr、iframe、param、script 等这些元素无效。
dir属性的取值为 ltr | rtl，默认值为 ltr。ltr表示从左向右的文本书写方向，而 rtl 表示从右向左的文本书写方向。
假设页面上有两个段落，第一个段落的 dir属性设置为 ltr，第二个段落的 dir属性设置为 rtl：
这段落文本从左到右书写。
这段落文本从右到左书写。
上述代码的运行结果如图 111 所示：
图 111 文本书写方向
contenteditable属性
在HTML4中，只有 type 属性值为 text、password、file 的 input 元素，以及 textarea 元素的内容是可编辑的。
到了HTML5，通过 contenteditable属性，可以让任何元素的内容可编辑。如果一个元素没有显式设置 contenteditable属性，它将从其父元素继承该属性的值。
contenteditable属性是布尔属性，取值为 true | false，默认值为false。true 表示元素的内容可编辑，false 表示元素的内容不可编辑。
如果一个元素的内容被设置为可编辑，当用户用鼠标单击该元素后，浏览器会向用户提供一个插入符号，提示用户该元素的内容允许编辑，用户就可以编辑该元素的内容。
假设页面上有一个段落，它的contenteditable属性被设置为 true，则用户可以编辑段落中的内容：
ntenteditable="true">这是一个可编辑的段落。
上述代码的运行结果如图 112 所示：
图 112 元素可编辑
在HTML5中，一切化繁为简，对于任何布尔属性，如果只提供属性名，就等价于把该属性设置为 true，如果没有提供属性名，就等价于把该属性设置为 false。因此，上述代码也可以写成：
这是一个可编辑的段落。
非常有趣的是，如果在现代浏览器地址栏输入data:text/html, ，即可打开一个简单的在线文本编辑器。是不是很神奇呀！
hidden属性
hidden属性用来规定元素是否在页面上显示出来。该属性是布尔属性，取值为 true | false，默认值为true。true 表示显示元素，false 表示不显示元素。
假设整个页面上只有一个段落，它被设置了 hidden属性：
You can't see me!
当一个元素设置了hidden属性后，它的表现跟CSS的 display: none 作用非常相似，元素将会消失，而且不占用任何页面空间。因此，运行上述代码，页面空空如也，看不到任何内容。
lang属性
lang属性用来规定元素内容所使用语言，其值为语言标记。语言标记用于帮助识别说话、书写、或其他方式进行交流时的语言。格式为：
langtag = language
["-" script]
["-" region]
*
*
["-" privateuse]
由于 extension 和 privateuse 很少有人使用，这里只对比较常用的language、script、region、variant 进行简单介绍：
1）language表示语言的文字种类，该属性对 base、br、frame、frameset、hr、iframe、param、script 等这些元素无效。语言的文字种类包含主要语言文字种类和扩展语言文字种类两部分内容，两者之间通过 "-" 连接起来。主要语言文字种类可以是 2 个字母，如zh、en，也可以是 3 个字母，如cmn、yue；扩展语言文字种类必须为3个字母，如cmn、yue、lzh。
2）script表示文本的书写格式，必须是4个字母，如Hans、Hant。
3）region表示语言的国家地区，可以为2个字母，如CN、HK，也可以为3个字母。
4）variant表示方言，它必须在IANA注册后，才能使用。
以下代码定义了三个段落，第一个段落的语言为文言文的简体中文，第二个段落的语言为文言文的繁体中文，第三个段落的语言为简体中文的大陆语言：
驴不胜怒，蹄之
驢不勝怒，蹄之
驴非常愤怒，用蹄子踢它
上述代码的运行结果如图 113 所示：
图 113 元素内容的语言
从上图可以看出，浏览器渲在染页面时，并不关心 lang属性，无论 lang属性的值是什么，它都会将元素中的文本内容原封不动显示出来。
然而，搜索引擎、语音合成工具、翻译工具等，却要通过 lang属性来确定内容所使用的语言。因此，强烈建议为 html 根元素或某些特定语言的元素指定 lang属性，来为文档或相应元素设置正确的语言，这将有助于搜索引擎根据语言搜索、或语音合成工具根据语言确定发音、或翻译工具根据语言确定遵守的规则等等。
translate属性
translate属性规定是否应该翻译元素的内容，目前为止，所有主流浏览器都无法正确地支持 translate属性。
spellcheck属性
spellcheck属性规定是否对元素的文本内容进行拼写或语法检查。只有当元素在可编辑状态时，sepllcheck属性才有意义。因此，一般是针对input[text]、textarea、contenteditable属性值为 true 的元素进行拼写和语法检查。如：
设置 spellcheck属性后，浏览器会帮助对元素的文本内容进行拼写或语法检查，若发现拼写或语法错误，则用红色的波浪下划线进行标识。运行结果如图 114 所示：
图 114 标识拼写错误
当在被标识的文本上单击鼠标右键，浏览器就会给出相应的提示，供用户选择。运行结果如图 115 所示：
图 115 拼写错误提示
q data-*属性
data-*属性允许开发人员为一个元素自定义私有属性，通过这些私有属性的值来存储页面或应用程序的私有数据。如，
用户列表
一个元素允许定义多个私有属性，属性值可以是任意字符串，但属性名不允许包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符。
定义私有属性后，就可以通过 Javascript 读写私有属性的值。可以通过 dataset 对象的 "." 操作，也可以通过 setAttribute 和 getAttribute 方法来操作私有属性的值。
1）使用 dataset 对象
当使用 dataset 对象时，属性名要去掉 "data-" 前缀，如果属性名中包含连字符，还需要转化为驼峰命名。因此，上述代码中，私有属性名为 user-list，当使用 dataset 对象操作私有属性时，需要转化为驼峰命名，即userList。如：
var user = document.getElementById;
alert; // 读取属性值
user.dataset.userList = "Barack Hussein Obama"; // 设置属性值
当然，也可以使用 jQuery，不过要记住的是，jQuery使用的是 data 方法来操作私有属性。如：
alert.data); // 读取属性值
$.data; // 设置属性值
2）使用 setAttribute 和 getAttribute 方法
由于 setAttribute 和 getAttribute 方法可以操作任何属性，它并不关心这个属性是否为私有属性。因此，属性名不必去掉 "data-" 前缀，也无需转化为驼峰命名。如：
alert); // 读取属性值
user.setAttribute; // 设置属性值
1.1.3 HTML注释
在HTML代码中，标签之间的文本是文档的注释，注释的内容不会被显示在浏览器页面上。只有在文本编辑器中，或浏览器的“查看源代码”选项打开文档时，才能看到注释。
HTML中的注释有两种类型，一种是HTML代码注释，一种是IE条件注释。
1、HTML代码注释
在一个大文档中，通过注释来标明区块的开始合结束的位置，可以方便查找，也可以通过注释来阻止某些内容显示。
当编写了大量代码时，对关键代码进行注释是一个良好的习惯，通过注释来说明某段代码的意图，有助于提醒自己或需要在这个网站上工作的其他人，了解这段代码的作用。
使用注释来隐藏脚本，也是一个良好的习惯，这样一来，不支持脚本的浏览器就不会把脚本作为纯文本显示出来。如：
2、IE条件注释
IE条件注释，是IE浏览器对HTML代码注释的一种扩展，它是一种非标准逻辑语句，可以灵活的为不同版本的IE导入不同html元素，如样式表、html标签等。
条件注释在IE5首次出现，并得到后续版本的支持，其语法就是一个普通的HTML注释，IE以外的浏览器会把它作为注释而忽略。因此，它能通过W3C的校验，也不会对其他浏览器造成影响。
条件注释的功能非常强大，可以进行 if 条件判断，并根据判断结果是true 或 false，来决定是否要解析条件注释里的内容。
条件判断以 结束，可以根据IE、非IE进行判断，还可以根据IE的版本号进行判断，版本号可以精确到小数点后4位。如：
条件判断中，还支持大于、小于、大于等于、小于等于、或、与、非、括号。如：
/ * 如果IE版本小于等于9 * /
/ * 如果IE版本大于6，且小于等于9 * /
借助条件注释，可以解决很多IE兼容性问题。如，IE9以下的版本不支持HTML5的新元素 header、nav、aside、footer等，而在Internet上存在大量的 html5shiv脚本可以解决该问题。只需下载相应的脚本，并在页面的头部，通过IE条件注释，让IE9以下的版本加载该脚本，就可以让这些老浏览器支持HTML5的新元素。
也可以使用同样的方法，来解决CSS的兼容性问题。如，IE6不支持一些CSS新特性，就可以专门针对IE6编写CSS文件，并只让IE6加载它：
一个好消息是，从IE10版本开始，不再支持条件注释。这标志着IE从此走向成熟、走向标准，Web设计师再也不必为IE的兼容性问题所困扰了。
