1.3 网页标准技术与HTML 5_网页设计与制作（第2版）-QQ阅读男生武侠网

上QQ阅读APP看书，第一时间看更新

1.3 网页标准技术与HTML 5

随着计算机技术的发展和数码产品的普及，越来越多的数码设备开始支持智能化和网络化，除计算机外，各种PDA、手机、机顶盒等数码产品也开始支持浏览网页，然而众多的智能终端在解析网页文档时的标准并不统一，在传统的网页设计中，设计者往往需要针对不同的设备、浏览器软件编写大量兼容性代码。

网页标准化技术的意义在于将所有浏览网页的设备的解析网页方式统一起来，这样，设计者只需编写一个网页文档，即可应用到所有的设备中。按照解析网页的模块划分，网页体系主要包括结构、表现和行为三类内容，基于这三类内容，万维网联盟W3C（World Wide Web Consortium）和众多的国际组织建立了网页标准化的规范，定义了标准化的编辑语言。W3C于1994年10月在麻省理工学院计算机科学实验室成立，创建者是万维网的发明者Tim Berners-Lee。W3C组织是对网络标准制定的一个非赢利组织，HTML（HyperText Markup Language，超文本标记语言）、XHTML（Extensible HyperText Markup Language，可扩展的超文本标记语言）、CSS（Cascading Style Sheets，层叠样式表）、XML（Extensible Markup Language，可扩展的标记语言）的标准就是由W3C来制定的。W3C会员（大约500名会员）包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门，他们一起协同工作，致力于在万维网发展方向上达成共识。

1.3.1 网页结构语言

网页结构语言的作用是将网页需要的内容以结构化、模块化的方式进行总结和存储，供表现语言和行为进行调用。网页结构语言包括可扩展超文本标记语言XHTML 1.0和HTML 5两种结构语言。其中，XHTML 1.0为当前被广泛使用的标准，而HTML 5标准则是未来将被使用的标准。

1.XHTML 1.0结构语言

XHTML（Extensible HyperText Markup Language），即可扩展的超文本标记语言，是由HTML （HyperText Markup Language，超文本标记语言）发展而来的一种网页编写语言，也是目前最常见的网页编写语言之一。在2000年1月26日，XHTML语言正式被W3C批准为网页设计的国际标准语言，替代了早期的HTML 3.2和HTML 4.0，XHTML与HTML 4.01几乎是相同的。XHTML结构语言相比早期的HTML，最大的特点就是将网页的结构内容与简单的排版表现功能分离，避免了数据内容的臃肿，提高了网页文档被搜索引擎检索的效率。使用XHTML编写的网页文档结构更加规范，体积更小，代码也更加精练。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的基于HTML语言设计的网站，直接采用XML还为时过早，国际上在网站设计中推崇的Web标准就是基于XHTML的应用。

2.HTML 5结构语言

随着iPhone、iPad等便携式数码设备的普及，传统的XHTML逐渐不能满足人们对网页的图形显示与媒体播放需求。基于此，由W3C牵头，苹果等公司通力协作开发出了最新的Web结构语言标准，即HTML 5标准。2013年5月6日，HTML 5.1草案正式公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素的互操作性。目前，HTML 5标记语言仍处于完善中，但绝大多数最新的Web浏览器都已开始支持其部分标签。HTML5将会取代HTML 4.01、XHTML 1.0标准，使网络标准符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。

相比传统的HTML和XHTML，HTML 5更专注于用户对娱乐的需求，追求以更高的效率、更丰富的内容和对外部插件（如Flash、ActiveX等）更少的需求来展示网页。HTML 5是开放Web标准的基石，它是一个完整的编程环境，适用于跨平台应用程序、视频、动画、图形、风格、排版和其他数字内容的发布工具和广泛的网络功能等。其具有以下几种特性，如表1-1所示。

表1-1 HTML 5的新特性

HTML 5新增了多种语义化的结构标签，允许用户使用这些标签对网页进行划分，从而使网页代码更加直观。同时，HTML 5还简化了文档类型声明的内容，一个典型的HTML 5文档结构如下所示。

<！DOCTYPE HTML>

<html>

<head>

</head>

<body>

<--！版头-->

<--！导航条-->

<--！小节-->

</section>

<--！区域模块--> </article>

<--！主体文章内容-->

<--！侧栏内容-->

<--！版尾-->

</body>

</html>

与XHTML相比，HTML 5的标签更富有语义化。通过以上的代码，用户可以方便地定制网页中的结构化内容，从而使网页更加模块化，在Web浏览器中看起来更加规整。

3.网页表现语言

网页表现语言的作用是为网页的结构语言定义尺寸、位置、背景以及文本的各种效果。目前网页表现的国际标准语言为CSS样式表技术。

CSS（Cascading Style Sheets，层叠样式表）是一种由W3C定义的数据表格式，其作用是为XML、HTML以及XHTML等结构化的文档添加样式描述，从而实现对文档中内容的排版和美化。

在传统的网页文档中，HTML语言以混合结构与表现的方式显示内容，由于没有统一的样式管理，每个页面即使是相同的标记也必须一一进行更改，从而大大地增加了维护的时间和成本。随着网站内页面的不断更新、扩展，需要一种技术对页面布局、字体、颜色、背景和其他图文效果的实现提供更加精确的控制，这种技术就是CSS。

在页面设计时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单修改，就可以改变同一页面的不同部分，或者不同网页的外观和格式。

CSS为标记语言提供了一种样式描述，定义了其中的元素显示方式。CSS在设计领域中是一个突破，仅仅通过CSS样式表就能够使网页开发人员控制所有出现在网页中的外观及布局，并且可以为每种标记语言的元素和应用该元素的每个页面定义所需要的样式。简单的改变样式，所有与之相关的元素都会自动更新。

CSS的出现还使网页文档中结构与表现的分离成为可能。将CSS与XHTML文档相结合，除了可以完全实现HTML语言所能实现的功能外，还增强了对各种网页元素的精确控制，从而使网页中各种元素以精确到像素的方式显示，丰富了网页元素的内涵。

4.网页行为语言

之前的网页结构语言和网页表现语言的共同作用可以为用户呈现网页的整体画面。然而，网页是一种交互性的媒体，其除了可以呈现内容外，还可以根据用户的界面操作响应各种事件，此时，就需要用到网页的行为语言。

网页的行为语言包括多种类型，例如，JavaScript、Jscript和VBScript等。这些语言之间语法各有特点，且支持的Web浏览器各不相同，使得网页设计者往往需要花费大量的精力进行调试，因此，ECMA国际（European Computer Manufacturers Association，欧洲计算机制造商协会，一个国际性信息和电信标准化组织）以NetScape（网景）公司开发的JavaScript脚本语言为基础，定义了ECMAScript脚本语言标准。

ECMAScript 并非具体的脚本编程语言，而是吸收多种脚本语言的特点和规范，制定的一种标准。符合该标准的脚本编程语言都可被称作ECMAScript。例如，由Mozilla FireFox浏览器支持的JavaScript和微软Internet Explorer支持的JScript等都是符合ECMAScript的子集、具体实现或扩展。

注意

在网页设计领域中，经常提到的JS并不是一种脚本语言，而是多种脚本语言的结合体。这些脚本语言之间具有很多的相同之处，但并非完全相同。例如，在IE浏览器中，所允许使用的就是JScript，而在FireFox、Safari和Opera等浏览器中，则使用的是最早由NetScape和Sun提供的JavaScript。

ECMAScript通过一种被称作DOM（Document Object Model，文档对象模型）的技术实现对各种结构化文档的控制，可以根据程序的指令，动态地改变文档中的内容以及描述文档的CSS代码。随着技术的发展，越来越多的网页开始采用ECMAScript的子集脚本编写各种特效、交互响应等。

1.3.2 在Dreamweaver CS6中创建HTML 5文档

1.在Dreamweaver CS6中创建HTML 5文档的操作步骤

在Dreamweaver CS6的“新建文档”窗口，选择“文档类型”，默认为“XHTML 1.0 Transitional”，若在文档类型列表中选择“HTML 5”，即可创建HTML 5文档，如图1-16所示。

图1-16 Dreamweaver CS6新建文档

2.HTML 5空白文档对应的代码

单击“文档”工具栏中的“代码”视图按钮，可看到一个典型的HTML 5代码的文档，如图1-17所示。

图1-17 HTML 5文档代码视图

一个完整的HTML 5文档包含声明、头部和主体三个部分，其代码如下：

3.HTML 5标记语法

一个典型的HTML 5文档由各种以尖括号“<>”括住的标签组成，主要包括DTD（Document Type Definition，文档类型声明）和HTML命名空间两部分。

文档头的作用是提供网页文档的媒体标记（meta标签）、标题标记（title标签）以及加载的各种外部描述性文档（style 标签）或脚本文档（script 标签）等，而文档的主体部分则用于存储各种显示于网页中的数据。

HTML 5的所有内容都存放在特定的标签中，子级标签被嵌套于父级标签内容里。每个标签都包含多个属性和属性的值。

● 标签：标签是 HTML 5 中的元素，它的作用是为文档添加指定的各种内容。例如，简单的换行符标签“<br />”等。HTML 5文档的根元素“<html>”、头部元素“<head>”以及主体元素“<body>”等都是特殊标签。

● 属性：属性是对标签的定义，它为标签添加一个功能。例如，学生有“学号”“姓名”“专业”等，这都是对学生的描述。

● 属性的值：属性的值是属性的表述。例如，某学生的学号“001”、姓名“王小”、专业“物联网”就是属性的值。作为标签值就是为标签设置具体的数值或内容。例如，图像标签“<img>”设置图像的URL地址，也就是将URL地址作为属性值，添加到scr属性中去。

4.HTML 5语法特色

（1）HTML 5所有标签必须被闭合

对于成对的标签一般都会被闭合，如果单独不成对的标签，应在标签的最后加一个“/”对进行闭合处理，例如，“<br />”“<img />”等。

例如：An image: <img src=＂happy.gif＂ alt=＂Happy face＂ />

A break: <br />

（2）HTML 5所有元素和属性必须小写

这是由HTML 5规范定义决定的，标签名和属性对大小写敏感，必须是小写的英文字母。例如，“<html>”和“<HTML>”表示不同的标签。

（3）属性值必须加引号

在HTML 5中必须为属性加引号，例如，“<table width=＂130＂></table>”。

（4）所有属性都要被赋值

与HTML不同，在HTML 5中，属性必须要赋值，如果属性没有值，则以属性名作为属性值赋值。例如，<td nowrop = ＂nowrop＂>。

（5）不要在注释内容中使用“--”

“--”只能出现在注释的开头和结尾。

例如：<！----此处是标题-------第一个网页-->的写法是错误的。

而<！此处是标题：第一个网页-->的写法是正确的。

1.3.3 HTML 5常用标签

HTML 5文档的核心是HTML 5标签，标签是用来实现网页元素的最小单位。学习HTML5语言时，除要知道语言结构外，更多是学习掌握这些标签的使用方法。

为了对HTML 5语言以及标签有一个整体直观的了解，先看下面的一个例子。

启动Dreamweaver CS6后，在菜单栏选择“文件”→“新建”命令，打开图1-16所示的“新建文档”对话框，单击右下角的“创建”按钮打开网页编辑窗口。本例中网页中添加的元素有文本、表格和图像，页面效果如图1-18所示。请把设计的结果与代码行进行逐一对照，了解这些标签的用法与作用。

图1-18 代码运行后的设计结果

实现图1-18所示的设计结果的代码如下：

<！doctype html>

<html>

<head>

<title>无标题文档</title>

</head>

<body>

<p>我用Dreamweaver制作的第一个网页</p>

<p>1.网页中的图像：</p>

<tr>

</tr>

<tr>

<td>计算机科学与技术</td>

</tr>

</table>

</body>

</html>

在HTML 5中根据功能来划分主要有3种标签，即布局标签、内容标签和复合标签，下面主要介绍布局标签和内容标签。

1.布局标签

布局标签以结构模块的方式显示在网页中，构成一个能够识别的矩形区域。因布局标签定义了一个矩形的区域块，所以又被称为块状标签。在该块状区域内又可添加其他的布局标签。常见的布局标签主要有以下几种。

（1）div标签

div 是英文“division”的缩写，其含意是区划、分割区域。在网页文档中，“<div>”标签的作用是将HTML 5文档划分若干的区域，其使用方法如下。

<div>在此之间是div管理的区域</div>

div 标签本身没有默认显示的边框、背景色等修饰，它的高度与网页文字高度相等，宽度与父标签的宽度相等。

（2）ul、ol、li

ul、ol 和 li 用来实现普通的项目列表，其分别表示无序项目列表、有序列表和列表的项目 3种布局容器。ul和若干li标签结合可以定义无序列表，ol和若干li标签结合可以定义有序列表。例如，分别定义一个无序列表和一个有序列表的代码如下，设计结果如图1-19所示。

<ul>

<li>茶

<ul>

<li>绿茶

<ol>

</ol>

</li>

</ul>

</li>

</ul>

由图1-19所示的设计结果可知，使用无序列的标签时，项目列表内容前会加上项目符号；而使用有序列的标签时，项目列表内容前会加上序号。

（3）dl、dt、dd

定义型列表用于对列表条目进行简短的说明。在用户需要创建分标题和内容的列表时，可使用定义列表，具有定义术语和定义解释两个功能。一个定义型列表标记使用例子的代码如下，设计效果如图1-20所示。

定义型列表标记：

<DL>

<DT>软件说明

<DD>就是简单介绍软件的功能、基本应用以及操作的基本方法。

<DT>软件界面

<DD>所谓软件界面就是用于选择使用软件时的外观。

</DL>

图1-19 项目列表设计结果

图1-20 定义型列表设计结果

（4）p

使用HTML 5中的段落标签“<p>”，可以将一个网页中包含的文本与上下文本分开，在默认状态下，段落文本的上方和下方处出现段落默认字体高度50%的边距，把各段明显隔开。设计结果如图1-21所示。

代码如下：

<body>

<p>HTML 5有以下优点</p>

<p>1、提高可用性和改进用户的友好体验；</p>

<p>2、有几个新的标签，这将有助于开发人员定义重要的内容；</p>

<p>3、可以给站点带来更多的多媒体元素（视频和音频）；</p>

<p>4、可以很好地替代Flash和Silverlight；</p>

<p>5、当涉及网站的抓取和索引的时候很友好；</p>

<p>6、将被大量应用于移动应用程序和游戏；</p>

<p>7、可移植性好。</p>

</body>

（5）h1～h6

HTML语言提供了一系列对文本中的标题进行操作的标签对：<h1>…</h1>，<h2>…</h2>，…，<h6>…</h6>，共有6对标题标签对。<h1>…</h1>是最大的标题，而<h6>…</h6>则是最小的标题，标签中h后面的数字代表标题的级别，该数字越大标题文本就越小。如果HTML文档中需要输出标题文本的话，便可以使用这6对标题标签对中的任何一对。示例如下，设计结果如图1-22所示。

图1-21 段落设计结果

图1-22 标题操作设计结果

代码如下：

程序会自动默认对6种标题标签的文本加粗，并按h1到h6的顺序定义从大到小的字体尺寸。

（6）table、tr、th、td、thead、tbody、tfoot

表格元素通常由表格的容器标签<table>…</table>、表格标题<caption>…</caption>、表格行<tr>…</tr>、表头单元格<th>…</th> 、单元格<td>…</td>组成。其中tr标签必须在table标签的子项中，而th标签和td标签必须在tr的子项中，table、tr标签是一个表格中必须的标签，而th和td这两种标签则可以最少出现一种。例如，一个2行3列表通过代码实现，如图1-23所示。大家可通过对比设计视图中“属性”面板的属性值与这些值在代码中的应用，了解其含义与用法。

代码如下：

学生基本信息表

</caption>

<tr>

</tr>

<tr>

<td>西安市太白南路100号</td>

</tr>

</table>

图1-23 2行3列表格

除了以上标签外，表格还可以使用头部描述标签thead、主体描述标签tbody以及尾行技术标签tfoot等嵌套在tr标签以外，来对表格的内容进行划分，为用户定义表格样式属性提供方便。

2.内容标签

内容标签是用来显示网页中各种内容的标签。其特点是基于行内布局，相邻的内容标签不会产生换行。在一行中可以显示多个内容标签。常见的内容标签主要有以下几种。

（1）a

a是anchor（锚）的第一个字母，a标签是成对出现的，即<a>…</a>。该标签用于给网页中添加超链接，它包含的内容可以是文本或图像，是一种典型的没有固定形状大小的标签。

a标签的常用属性如下。

href代表一个url链接源（就是链接到什么地方）。

● url除了是网页外，还可以是其他的文件（如文本文件、pdf文件等）。

● url还可以是指向HTML文件中的一个位置。

● url也可以是E-mail地址。

target用来指出哪个窗口或框架应该被此链接打开。

● target=_blank：将链接的内容在新的浏览窗口中打开。

● target=_parent：将链接的内容当成文件的上一个画面。

● target=_self：将链接的内容显示在目前的窗口中。

● target=_top：这个参数可以解决新内容被旧窗口包围的困扰，使用这个参数，会将整个画面重新显示成链接的画面内容。

title代表链接的附加提示信息，用于定义当鼠标滑过链接时，所显示的提示文本。

一般情况下超链接应至少包含href和title两种属性。

例如，链接到一个主页面的超链接代码如下：

<a href=＂古城西安风光/index.html＂ title=＂西安风光＂> 返回网站首页</a>

设计视图的效果如图1-24所示，在浏览器中的效果如图1-25所示。若单击“返回网站首页”可打开“西安风光”主页面。

图1-24 代码实现的设计效果

图1-25 浏览器运行效果

（2）br

br 标签表示一个简单的换行符，因为 br 标签是一个单独的标签，所以在使用时必须通过“/”对其进行关闭，代码如下：

<br />

（3）img

img是image（图像）的缩写，img标签的作用是为网页显示各种图像内容。img标签是一个单独的标签，也要用“/”对其进行闭合。

img标签的常用属性有以下几种。

● alt代表图像的替代文字。

● src代表一个图像源（就是图像的位置）。

● border代表图像边框的宽度。

● height代表一个图像的高度。

● width代表一个图像的宽度。

在页面中插入图像的格式如下（具体操作示例见上机练习）：

（4）span

span标签用于表示范围，通常为文本或者内联标签定义特殊的样式，修饰特定内容和局部区域等。

例如，在下面一段文字中为某些关键词语或语句应用不同的文字样式，代码如下：

<p>设计网页是一项从艺术设计到页面制作再到后台开发的<span style=＂color:red＂>系统工程</span>，需要应用多种技术，使用各种相关的软件才能完成。在学习设计网页时，需要首先<span style=＂text-decoration:underline＂>了解网页的各种技术</span>，网页布局、网页配色，以及涉及的软件。除此之外，<span style=＂font-size:24px＂>使用最新版本的网页制作软件也可以最大限度地提高网页制作的效率</span>。</p>

经过代码设计，文中“系统工程”文字变成红色，同时相应的文字加下划线和字号变大。如图1-26所示。

图1-26 span标签运行效果

在HTML 5中有90多种标签，本章只介绍了几个常用和比较简单的标签，通过对HTML 5基本结构的了解和对标签的学习，为大家从事更加复杂的页面设计制作起到引导和启发的作用。有兴趣的读者可以进一步参考相关材料学习更多的内容。

1.3.4 HTML 5新增标签

HTML 5 提供了一些新的元素和属性，例如<nav>（网站导航块）和<footer>标签有利于搜索引擎的索引整理、网页在小屏幕装置上的应用和供视障人士使用，同时为其他浏览要素提供了新的功能。HTML5标签的类型包括以下几部分。

● 用于绘画的 canvas 元素。

● 用于媒介回放的 video 和 audio 元素。

● 对本地离线存储的更好支持。

● 新的特殊内容元素，比如 article、footer、header、nav、section。

● 新的表单控件，比如 calendar、date、time、email、url、search。

HTML 5新增标签如表1-2所示。

表1-2 HTML 5新增标签

续表

下面的实例是用HTML 5代码编写的网页中播放视频，其运行结果如图1-27所示。

图1-27 网页视频播放结果

<！DOCTYPE HTML>

<html>

<head>

<title>HTML示例</title>

</head>

<body>

<source src=＂movie.ogg＂ type=＂video/ogg＂> 你的浏览器不支持 video 标签。</video>

</body>

</html>