下载掌阅APP，畅读海量书库
立即打开
1993年，Internet工程任务组（Internet Engineering Task Force，IETF）起草了HTML的第一个版本，此时的HTML采用了标准通用标记语言（Standard General Markup Language，SGML），通过各种标记告诉浏览器应如何显示网页的内容（如文本、图片等），从而使各种网页能在不同的浏览器中正确地显示出来。
1997年12月，万维网联盟（World Wide Web Consortium，W3C）推出了具有严谨（Strict）、过渡（Transitional）和框架（Frameset）3个版本的HTML 4，该标准废弃了一些旧的标记，增加了一些适应发展需要的新标记，同时允许使用与框架相关的大部分标记。
2014年，W3C在HTML 4的基础上推出了HTML 5的正式标准，并迅速获得各大浏览器产品的支持（如IE、Firefox和Chrome等）。HTML 5目前已成为网页设计的主流趋势，那些不支持或不完全支持HTML 5的浏览器产品正逐步被淘汰。
需要说明的是，Microsoft的IE浏览器从IE 9开始部分支持HTML 5，直到IE 11才真正实现了对HTML 5的完全支持，但IE 11只能运行在Windows 7以上版本的操作系统上，不支持早期的Windows XP。运行本书示例时建议在Windows 7以上环境中，并使用IE 11或Edge浏览器。
虽然HTML的标准正在不断地发展完善，每个版本都会出现一些新的内容，废弃一些过时的内容，但它的基本格式始终没有变化。所有HTML版本都是以“标记”的方式表示页面内容的。标记可以用来划分页面的不同区域（如页眉、页脚、导航栏、正文区等）、规定段落或表格的起始、显示HTML控件（如按钮、文本框和下拉列表框等）及其属性等。通常将“标记”表示的HTML页面内容称为“HTML元素”，也可以将HTML页面理解成各种“元素”按特定规则组成的集合。
HTML文件中的标记符必须用“<”和“>”括起来，一般情况下标记符都以“<标记>”开始，以“</标记>”结束（若标记为块标记，则结束标记可以省略）。
其最基本的格式如下。
举例如下。
可以看出HTML标记语言是通过各种标记及标记附带的属性值，通知浏览器应如何显示网页中的内容的。
1.文档结构
一个相对完整的HTML 5文件的基本格式如下。
上述代码的第一行“<!DOCTYPE html>”是文档类型（Document Type）的缩写，用来标识文档的版本为HTML 5。
XHTML 1.0 Transitional的版本声明标记如下。
HTML 4.01 Transitional的版本声明标记如下。
2.HTML 5与早期版本的不同
HTML 5相对XHTML和HTML 4.01发生了一些改变，其规范显得更加宽松，对早期版本也体现了最大可能的“兼容性”。以下是HTML 5与其他版本之间的一些差异。
（1）标记不区分大小写
在HTML 5中允许开始标记与结束标记的大小写不一致。举例如下。
需要说明的是，允许“不一致”是为了提高“容错”和“兼容”度，书写格式混乱在任何时候都不会被提倡。在编写代码时应养成格式规范、层次清晰、可读性高的良好习惯。
（2）结束标记可以省略
在HTML 5中允许省略“块”状元素的结束标记。例如，下列代码在页面中显示一个下拉列表框和一个按钮控件，下拉列表框中有“教务处”“学生处”和“科研处”3个选项。其中，用于表示下拉列表框选项的<option>标记就省略了结束标记</option>。用于显示按钮的语句“<input epub:type="Button" value="确定" />”将开始标记和结束标记合二为一了。
（3）boolean类属性的设置
常用的boolean类属性有readonly（只读）、disabled（不可用）、checked（选中状态）、selected（设置默认选项）和multiple（是否允许选择多个项）等，设置这些属性时应注意以下3种情况。
1）只写属性名而不指定属性值时，属性值默认为true。例如，下列语句表示设置一个按钮控件，但按钮处于不可用状态（灰色显示，用户不能操作它）。
2）当属性值与属性名相同或属性值为空字符串时，该属性值为true。举例如下。
或者
3）省略boolean类属性名时，属性值默认为false。例如，下列语句表示设置一个按钮控件，按钮处于可用状态，可以响应用户的单击操作。
（4）属性引号允许省略
HTML 5规定，当属性值中不包含空格、<、>、=或单双引号等特殊字符时，属性值可不用引号括起来。举例如下。
Visual Studio提供了强大的网页设计功能，开发人员既可以在源视图中通过代码完成网页设计任务，也可以在设计视图提供的可视化环境中进行网页设计，而且可以通过“属性”窗口完成页面元素的属性值设置。被编辑的网页对象可以是静态网页（.html），也可以是Web窗体（.aspx）。此外，Visual Studio还提供了对多种版本HTML代码的智能感知和校验功能，提高了代码的编写效率。
1.向ASP.NET网站中添加静态网页
Visual Studio环境下，可以在网站中新建或添加已编辑完成的静态网页文件。
（1）添加现有静态网页
新建一个ASP.NET网站后，如果希望向网站中添加已在Dreamweaver等环境中编辑完成的静态网页，可在解决方案资源管理器中右击网站名称，在弹出的快捷菜单中选择“添加”→“现有项”命令，在弹出的“添加现有项”对话框中选择希望添加的.html文件后单击“添加”按钮即可。
（2）新建静态网页
在解决方案资源管理器中右击网站名称，在弹出的快捷菜单中选择“添加”→“添加新项”命令，在弹出的“添加新项”对话框中选择“HTML页”模板，输入文件名称后单击“添加”按钮，系统将按默认版本创建一个包含了基本框架的HTML文档。
2..aspx文件与HTML文件
Visual Studio 2015中创建的Web窗体中各元素默认以HTML 5规范描述，页面中Web服务器控件以<asp>标记表示。例如，下列代码表示一个命令按钮控件（Button）和一个标签控件（Label）。其中，按钮控件的OnClick属性指定了当用户单击该按钮时，响应单击事件的处理方法名称，如本例的Button1_Click。
可以看出，Web服务器控件与普通HTML元素相比最突出的不同点就是具有runat=＂server＂的属性，表示控件在服务器端运行。
在Visual Studio中新建一个网站项目或添加一个新Web窗体页面时，系统都会自动切换到页面的源视图，下列代码为由系统创建的一个空白的.aspx文件的内容。
可以看出，.aspx页面代码以<%@ Page…%>开始，称为页面的“@Page指令”，其中各属性的含义说明如下。
1）Language：指示程序代码使用的语言，如C#、VB等。
2）AutoEventWireup：指示是否自动与某些特定事件关联，如Page_Init（页面初始化）、Page_Load（页面载入）等。该属性默认值为true。
3）CodeFile：前面介绍过Visual Studio将ASP.NET页面分成展现外观的.aspx文件和实现功能的程序文件两部分。该属性指示了实现功能的程序文件名称，如果使用C#为程序设计语言，则程序文件的扩展名为.cs。
4）Inherits：指示供页面继承的代码隐藏类。
在.aspx文件中除了@Page指令行和runat="server"属性外，其他内容与标准的HTML文件完全相同。当用户请求一个.aspx页面时，服务器会将所有具有runat="server"属性的元素及实现功能的程序文件执行结果转换成标准HTML代码返回给用户，这些代码将在用户浏览器中被显示为特定的页面。
另一个值得注意的特点是，Visual Studio创建的.aspx文件中自动包含了一个<div>和</div>标记，程序员进行的所有外观设计的代码都将包含在该标记之间。也就是说，Visual Studio默认将整个.aspx页面包含到一个用于布局的“层”中，通过对层的属性进行统一设置，就能影响页面中所有HTML元素（如文字、表格和图片等）的外观。
3.Visual Studio提供的设计环境
在Visual Studio中编辑、修改HTML或.aspx文件时，无论是编写HTML标记代码还是编写JavaScript脚本代码，都可以通过系统提供的智能提示功能快速完成编辑工作。
如图2-1所示，在源视图中输入了某HTML标记的前几个字符后，系统自动显示出相关的智能提示信息。当系统所推荐的正是希望值时，可按空格或〈Enter〉键继续。若在输入了某标记名称并按智能提示使用空格键进行了关键字选择，系统将进一步提示后续的内容。
图2-1 Visual Studio的智能提示
在Visual Studio中打开一个.aspx文件并切换到源视图后，工具栏中会出现一个名为“验证的目标架构”下拉列表框，如图2-2所示。它用于设置编写HTML文件时按指定版本对用户的输入进行验证和智能提示，可选项有HTML 4.01、XHTML 1.0的各版本和HTML 5等。若希望修改其默认值，可选择“工具”→“选项”命令，在弹出的对话框中选择左侧窗格中的“文本编辑器”下的“HTML（Web窗体）”，在右侧窗格中按照如图2-3所示进行相关的各项设置。
图2-2 选择验证的目标架构
图2-3 选择验证方式
构成HTML 5网页的基本元素有文本、超链接、图片和音视频等。此外，为了格式和页面布局的需要，常用元素还包括层、区域、列表、表格等。网页中的所有元素都需要通过“标记”来表示。
2-1-1 HTML5的常用元素1
1.文本元素标记
HTML 5网页中常用的文本元素标记及其说明见表2-1。
表2-1 常用文本元素标记及其说明
HTML 5的各种标记可以嵌套使用，但应注意嵌套标记的顺序，不能交叉出现。举例如下。
2.层标记<div>
层标记以<div>标记开始，以</div>标记结束。该标记用来定义页面中的一个特殊区域，区域内可包含文字、图片、表格或下级<div>等。使用<div>标记可方便地将若干页面元素组成一个集合，进而统一设置该集合的显示位置及所含元素的样式。<div>是HTML 5页面布局中使用最多，也是最重要的标记之一。
3.超链接标记<a>
超链接标记<a>是HTML 5页面中实现用户交互的一个重要途径，通过超链接可以将组成网站的众多网页关联起来，用户单击设置了超链接的元素（如文字、图片或控件等）时可以跳转到指定的其他页面。使用超链接可以使访问者根据自己的喜好，有选择地从顺序排列的内容中访问需要的内容。组织好的超链接不仅能使读者跳过不感兴趣的章节，而且有助于更好地理解作者的意图，使整个内容更加层次化。
一个超文本链接由两部分组成，一部分是呈现在读者面前的超链接对象（通常是文字和图片）；另一部分是被指向的目标，它可以是同一页面的另一部分，也可以是不同的页面，还可以是动画、音乐、视频和程序文件等。
<a>标记的基本格式如下。
其中，href为超链接引用，其值为一个URL地址。
target用来设置链接到目标资源时打开窗口的方式，有以下3种值可供选择。
1）_blank：在新的窗口中打开目标。
2）_parent：目标直接显示在父框架窗口中。
3）_self：目标显示在当前窗口中，该值为默认值。
举例如下。
表示使用文档中的“校园新闻”几个文字作为热点，链接到当前文件夹中的news1.html文件，并且在用户单击热点时，在新窗口中打开目标文件。
描述目标文件位置时可以使用相对路径，也可以使用绝对路径。但如果目标对象不在当前站点中，链接地址就只能使用绝对路径。
举例如下。
表示在新窗口中打开另一站点（www.myweb.com.cn）中news文件夹下的news1.htm文件，目标文件路径描述采用了绝对路径方式。
表示在当前窗口中打开站点下级子目录news下的HTML文件news1.htm，目标文件路径描述采用了相对路径方式。
4.列表标记
使用列表标记可以将页面中的文本以列表的方式分层次显示。HTML 5提供了3种列表标记：无序列表标记<ul>、有序列表标记<ol>和自定义列表标记<dl>。
2-1-2 HTML5的常用元素2
（1）无序列表标记<ul>
<ul>是表示列表项顺序无关的标记，其基本格式如下。
（2）有序列表标记<ol>
有序列表标记<ol>默认自动添加阿拉伯数字作为列表项的序号，强调了列表项顺序的重要性。其基本格式如下。
（3）自定义列表标记<dl>
<dl>标记用来表示带有说明信息的列表，列表中的每个列表项一般由<dt>和<dd>标记组成。其中，<dt>用来表示列表项的标题，<dd>用来表示标题的描述信息。其基本格式如下。
5.表格标记
表格标记<table>用于在页面中以表格形式组织文本，也可以使用表格进行页面布局。表格中的行使用<tr>标记表示，单元格使用<td>表示。例如，下列代码表示了一个2行2列的表格，“第×行第×格”是显示到相应单元格中的文字。表格的样式（如框线、大小和对齐方式等）通常需要通过CSS或style样式进行设置。其基本格式如下。
<table>标记中除了需要包含最基本的<tr>和<td>标记外，其他一些辅助标记及其说明见表2-2。
表2-2 常用的表格辅助标记及其说明
6.图像、音频和视频标记
在网页中加入图像、音频或视频等元素，可以大幅度提高页面的视觉效果和感染力，能有效地辅助阅读者理解页面中包含的信息，甚至可以取代文字成为信息传递的主要载体。
（1）图像标记<img>
图像标记<img>用于在网页中显示一幅图像，该标记常用的属性有src和alt。src用于指明要显示的图像文件的存放位置，alt用于表示当图像加载失败时显示的替代文字。例如，下列语句表示在网页中显示当前目录下images文件夹中的logo.jpg图像文件，当图像加载失败时显示“网站logo”。
图片的大小等属性通常需要通过style样式或CSS进行设置。图片在页面中的显示位置一般需要使用表格或div进行控制，这种表格或div被称为图像的父容器。
（2）音频标记<audio>
音频标记<audio>是HTML 5新增的标记，用于为网页提供播放指定的音频文件的功能。需要说明的是，<audio>标记支持的音频文件格式有Ogg Vorbis、MP3和WAV共3种。<audio>标记的常用属性及其说明见表2-3。
表2-3 <audio>标记的常用属性及其说明
举例如下。
图2-4所示的是为<audio>标记设置了controls属性时，在网页中显示的音频播放器。它提供了开始/暂停播放、显示已播放的时间、调整播放进度和调整音量/静音等功能。音频控件的显示位置和大小通常需要通过style样式或CSS进行设置。
（3）视频标记<video>
视频标记<video>是HTML 5的新增标记，用于在网页中播放视频。<video>标记与<audio>标记相同，也具有src、autoplay、controls、loop和preload属性。此外，该标记还有用于设置播放窗口大小的width（宽）和height（高）属性。设置播放窗口大小时，可仅指定width值和height值中的一个，另一个数值可根据视频的原始尺寸按比例自动推算出来。
图2-5所示为HTML 5视频播放器的界面，窗口最下方显示播放控制条，包含开始/暂停按钮、已播放的时间、播放进度条、视频总共时长、音量/静音按钮和全屏播放按钮。该控制条是否显示由<video>标记的controls属性决定。正常播放时该控制条能自动隐藏，当鼠标移动到播放画面上时又能自动显示出来。如果加载的视频文件较大，播放控制条上会显示出“……”标记，表示正在进行缓冲。
图2-4 HTML 5音频播放器
图2-5 HTML 5视频播放器
需要说明的是，HTML 5视频播放器支持的视频格式只有MP4（带有H.264视频编码和ACC音频编码的MPEG4文件）、Ogg（带有Theora视频编码和Vorbis音频编码的Ogg文件）和WebM（带有VP8视频编码和Vorbis音频编码的WebM文件）3种，而且并非所有的浏览器都支持HTML 5的<video>标记。常用浏览器对3种视频格式的支持情况见表2-4。
表2-4 常用浏览器对3种视频格式的支持情况
网页加载时系统会自动判断用户的浏览器是否支持<video>标记，若不支持，会使用夹在开始标记和结束标记之间的文字给出提示。举例如下。
需要注意的是，新版主流浏览器（Chrome、Microsoft Edge等）已取消了对<audio>和<video>元素自动播放功能的支持。所以，即使设置了标记的autoplay属性，也可能无法实现音视频的自动播放。