第2章 常用Web开发技术
本章主要介绍和Web相关的开发知识，便于测试人员快速地对Web系统的开发过程有一个直观的了解。常见的开发语言和工具有以下几种。
●客户端脚本开发语言包含HTML、JavaScript、CSS等。
以下就一些常用的开发技术进行介绍。
2.1 常用Web开发语言和工具
2.1.1 HTML
定义：和一般文本不同的是，一个超文本标记语言（Hypertext Markup Language，HTML）文件不仅包含文本内容，还包含一些标记。
其特点如下。
●一个HTML文件的扩展名是.htm或者.html。
●用文本编辑器就可以编写HTML文件。
●HTML文件看上去和一般文本类似，但是它比一般文本多了标记。通过<html>、<b>等标记，可以告诉浏览器如何显示文件。
1．入门示例
打开Notepad并新建一个文件，将以下代码复制到这个新文件中，然后将这个文件另存为firstpage.html。
<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> |
要浏览firstpage.html文件，需要双击它，或者打开浏览器，在File菜单中选择Open，然后选择这个文件。
关于以上示例的解释如下。
●这个文件的第一个标签是<html>，这个标签告诉浏览器这是HTML文件的头。文件的最后一个标签是</html>，这表示HTML文件到此结束。
●<head>和</head>之间的内容是Head信息。Head信息是不显示出来的，在浏览器里看不到它。但是这并不表示这些信息没有用处。比如，在Head信息里加上一些关键词，有助于搜索引擎搜索到对应的网页。
●<title>和</title>之间的内容是文件的标题。可以在浏览器最顶端的标题栏看到它。
●<body>和</body>之间的信息是正文。
●<b>和</b>之间的文字用粗体（bold）来表示。
2．HTML文档包含的内容
通过不同的标记，HTML文档可以包含不同的内容，如文本、链接、图片、列表、表格、表单、框架等。
●文本：HTML支持多种文本。可以设置不同级别的标题、分段方式和换行方式；可以指定文本的语义和外观；可以说明文本引用自其他地方等。
●链接：用来指出某些内容与另一个页面或当前页面的某个地方有关。
●图片：用于使页面更加美观，或提供更多的信息。
●列表：用于说明一系列条目是彼此相关的。
●表格：按行与列将数据组织在一起的形式。也有不少人使用表格调整页面布局。
●表单：通常由文本框、按钮、复选框、单选按钮、下拉列表等组成，从而使HTML页面更有交互性。
●框架：使页面包含其他的页面。
3．文本标签
最常用的文本标签可能是<font>，它用于改变字体、字号、文字颜色。示例如下。
<font size="6">6</font> <font size="4">4</font> <font color="red" size="5">红色的5</font> <font face="黑体">黑体的字</font> |
加粗、下划线、斜体也是常用的文字效果，它们分别由<b>、<u>、<i>来表示。
<b>Bold</b> <u>underline</u> <i>italic</i> |
如果一篇很长的文章有合适的小标题，就可以快速地对它的内容有了大致的了解。在HTML里，用来表示标题的标签有<h1>、<h2>、<h3>、<h4>、<h5>、<h6>，它们分别表示一级标题、二级标题、三级标题……示例如下。
<h1>HTML简易入门教程</h1>
<h2>什么是HTML</h2>
...
<h2>HTML的特点</h2>
...
4．图片
<hr>标签可在页面上添加横线。通过指定属性width与color可以控制横线的长度和颜色。示例如下。
<hr width="90%" color="red" >
<img>标签用于在页面上添加图片，src属性指定图片的地址。如果无法打开src指定的图片，则浏览器通常会在页面中需要显示图片的地方显示由alt属性定义的文本。使用方法如下。
<img src="图片路径">
上面的图片路径也可以是网站上的一个地址。
5．链接
超级链接用<a>标签来表示，href属性指定了链接的地址；<a>标签可以包含文本，也可以包含图片。
<a href="http://www.163.com">网易首页</a>
<a href="http://www.126.com"><img src="https://www.baidu.com/img/bdlogo.png" /></a>
6．分段与换行
因为HTML文档会忽略空白符，所以要想保证正常的分段与换行，必须指出哪些文字是属于同一段落的，这就用到了标签<p>。示例如下。
<p>这是第一段。</p>
<p>这是第二段。</p>
也有人不用<p>，而用<br>。因为<br>只表示换行，不表示段落的开始或结束，所以它通常没有结束标签。示例如下。
这是第一段。<br>
这是第二段。<br>
这是第三段。
图2-1形象地说明了分段和换行的区别。
图2-1 分段和换行的区别
有时，要把文档看作是由不同部分组合起来的，比如，一个典型的新闻页面可能包括好多个独立的区域。<div>标签专门用于区分不同的部分。
<body> <h1>NEWS WebSITE</h1> <p>some text. some text. some text...</p> ... <div class="news"> <h2>News headline 1</h2> <p>some text. some text. some text...</p> ... </div> <div class="news"> <h2>News headline 2</h2> <p>some text. some text. some text...</p> ... </div> ... </body> |
7．表格
HTML文档在浏览器里通常是从左到右、从上到下显示的，到了窗口右边就自动换行。为了实现分栏的效果，很多人使用表格（<table>）进行页面排版（虽然HTML里提供表格的本意并不是为了排版）。
<table>标签里通常会包含几个<tr>标签，<tr>代表表格里的一行。<tr>标签又会包含<td>标签，每个<td>代表一个单元格。示例如下。
<table> <tr> <td>2000</td><td>悉尼</td> </tr> <tr> <td>2004</td><td>雅典</td> </tr> <tr> <td>2008</td><td>北京</td> </tr> </table> |
<tr>标签还可以被<table>里的<thead>、<tbody>或<tfoot>所包含。这三者分别代表表头、表正文、表脚。在打印网页的时候，如果表格很大，一页打印不完，<thead>和<tfoot>将在每一页都出现。
<th>和<td>非常相似，也用在<tr>中。然而，<th>代表这个单元格是它所在行或列的标题。示例如下。
<table> <thead> <tr><th>时间</th><th>地点</th></tr> </thead> <tbody> <tr><td>2000</td><td>悉尼</td></tr> <tr><td>2004</td><td>雅典</td></tr> <tr><td>2000</td><td>北京</td></tr> </tbody> </table> |
如果需要表格带上边框，则可在<table>后使用border="1"，例如：
<table border="1"> <thead> <tr> …… |
8．列表
表格用于表示二维数据（行和列）。一维数据则用列表来表示。列表分为无序列表（<ul>）、有序列表（<ol>）和自定义列表（<dl>）。前两种列表更常见一些，它们用<li>标签包含列表项。
无序列表表示一系列类似的项，它们之间没有先后顺序。示例如下。
<ul>
<li>苹果</li>
<li>橘子</li>
<li>桃</li>
</ul>
在有序列表中各个项之间的顺序是很重要的，浏览器通常会自动给它们产生编号。示例如下。
<ol>
<li>打开冰箱门</li>
<li>把东西放进去</li>
<li>关上冰箱门</li>
</ol>
9．框架
作为曾经非常流行的技术，框架使一个窗口能同时显示多个文档。主框架页里面没有<body>标签，取代它的是<frameset>。
<frameset>标签中的属性Rows和Cols用于指定框架集（frameset）里有多少行（列），以及每行（列）的高度（宽度）。
<frameset>标签可以包含<frame>标签，每个<frame>标签代表一个文档（src属性指定文档的地址）。
如果觉得这样的页面还不够复杂，则可以在<frameset>标签里包含<frameset>标签。示例如下。
1 <frameset rows="15%,*"> 2 <frame src="top.html" name=title scrolling=no> 3 <frameset cols="20%,2*,100"> 4 <frame src="left.html" name=sidebar> 5 <frame src="right.html" name=recipes> 6 </frameset> 7 </frameset> |
第1行表示页面分成两行，第1行占整个页面的15%，第2行占整个页面85%。
第2行的内容是top.html页面。因为cols是在rows的框架中写的，所以在第2行的页面中进行分列。
第 3 行表示把页面分成3列，第1列占整个页面的20%，第2列占整个页面的2/3，第3列占100px。由于当右边第3列占用了100px后，第2列就不能占整个页面的2/3了，因此浏览器对其进行了重分配。
以上是HTML框架的基本概念，而在现代的网页编程技术中，更多地使用了iframe这种内联框架技术，iframe同样可以在网页内显示网页。
以下是iframe的一些语法。
iframe的基本语法结构如下。
<iframe src="URL"></iframe>
height 和 width 属性用于设定iframe的高度与宽度。属性值的默认单位是像素，也可以用百分比来设定（比如 "80%"）。示例如下。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
要去掉边框，代码如下。
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
图2-2（a）和（b）分别展示了有边框与无边框的文字。
图2-2 有边框和无边框的文字
要使用iframe作为链接的目标，示例代码如下。
<!DOCTYPE html> <html> <body> <iframe src="demo_iframe.html" name="iframe_a"></iframe> <p> <a href="http://www.51Testing.com" arget="iframe_a">51Testing</a> </p> </body> </html> |
demo_iframe.html的内容如下所示。
<!DOCTYPE html> <html> <body> |
这只是一个演示页面而已
</body>
</html>
当单击<a>中的链接后，就会在iframe中显示51Testing网站的内容，如图2-3（a）和（b）所示。
图2-3 在iframe中显示51Testing网站的内容
10．注释
注释（<!--和-->）标记用于在源代码中插入注释。注释不会显示在浏览器中。
注释可对代码进行解释，这样有助于以后对代码进行编辑。
使用注释标记来隐藏浏览器不支持的脚本也是一个好习惯（这样就不会把脚本显示为纯文本）。
<script type="text/javascript"> <!-- function displayMsg() { alert("Hello World!") } //--> </script> |
注意：倒数第2行中的两条斜杠（//）是JavaScript的注释符号。这可以避免JavaScript 执行这一行代码。
版权声明：51Testing软件测试网获得人民邮电出版社和作者授权连载本书部分章节。
任何个人或单位未获得明确的书面许可，不得对本文内容复制、转载或进行镜像，否则将追究法律责任。
