常用Web开发语言和工具—软件测试专项技术(8)

发表于:2020-4-28 11:05  作者:51Testing教研团队   来源:51Testing软件测试网原创

字体: | 上一篇 | 下一篇 |我要投稿 | 推荐标签: APP测试 Web测试 专项测试

  第2章 常用Web开发技术
  本章主要介绍和Web相关的开发知识,便于测试人员快速地对Web系统的开发过程有一个直观的了解。常见的开发语言和工具有以下几种。
  ●客户端脚本开发语言包含HTML、JavaScript、CSS等。
  ●服务器端脚本一般需要进行组合开发,例如,使用比较多的是PHP+MySQL、ASP.NET+SQL Server,以及JavaSQL Server、Servlet、JSP等。
  以下就一些常用的开发技术进行介绍。
  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 执行这一行代码。

查看《软件测试专项技术--基于Web、移动应用和微信》全部连载内容>>
版权声明:51Testing软件测试网获得人民邮电出版社和作者授权连载本书部分章节。
任何个人或单位未获得明确的书面许可,不得对本文内容复制、转载或进行镜像,否则将追究法律责任。

评 论

论坛新帖

顶部 底部


建议使用IE 6.0以上浏览器,800×600以上分辨率,法律顾问:上海瀛东律师事务所 张楠律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2020, 沪ICP备05003035号
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪公网安备 31010102002173号

51Testing官方微信

51Testing官方微博

扫一扫 测试知识全知道