IV. Web测试前端技术
HTML
什么是HTML
HTML全称是超文本标记语言（Hyper Text Markup Language），它是互联网上应用最广泛的标记语言。简单的说，HTML文件就是普通文本 + HTML标记（又叫做标签），而且不同的HTML标记能表示不同的效果。
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> |
HTML 历史
HTML的发展历史比较复杂。因为它实在是太“随意”了，而且负责解析HTML的浏览器们又太“宽容”了。以至于到了“写一份对的HTML文档很容易，写一份错的HTML文档很难”的程度。而且不同的浏览器之间又是存在一些差异，因此导致HTML给人的感觉比较混乱。
HTML 1.0：1993年6月 由互联网工程工作小组发布
HTML 2.0：1995年11月 作为RFC 1866发布
HTML 3.2：1996年1月14日 由W3C组织发布，是HTML文档第一个被广泛使用的标准。
W3C：World Wide Web Consortium，万维网联盟。创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。
HTML 4.0：1997年12月18日 由W3C组织发布，也是W3C推荐标准。
HTML 4.01：1999年12月24日 有W3C组织发布，是HTML文档的另一个重要的和广泛使用的标准。
XHTML 1.0：发布与2000年1月26日，是W3C组织推荐标准，后来经过修订，于2002年8月1日重新发布。
2008年 WHATWG制定并发布了HTML5规范。
W3C 是什么？
W3C 指万维网联盟（World Wide Web Consortium）
W3C 创建于1994年10月
W3C 由 Tim Berners-Lee 创建
W3C 是一个会员组织
W3C 的工作是对 web 进行标准化
W3C 创建并维护 WWW 标准
W3C 标准被称为 W3C 推荐（W3C Recommendations）
在HTML3.2之前，HTML的发展极为混乱，各个软件厂商经常自行增加HTML标签，而各个浏览器厂商为了保持最好的兼容性，总是尽力支持各种HTML标签，这就导致了HTML显得极为混乱。
参考下面的例子
<ol> <li> 这是不标准的 HTML 第1行 <li> 这是不标准的 HTML 第2行 <li> 这是不标准的 HTML 第3行 <li> this is the line 4 of the nonstandard HTML <li> this is the line 5 of the nonstandard HTML <li> this is the line 6 of the nonstandard HTML </ol> |
XHTML的全称是扩展的超文本标记语言（eXtensible Hyper Text Markup Language），是更严格、更纯净的HTML代码。W3C制定XHTML的目的就是逐步取代原有的HTML。简单说：XHTML就是最新版本的HTML规范。
参考下面的例子2
<html> <head> <title>混乱的HTML文档</title> <body> <h1>混乱的HTML文档 |
XHTML致力于消除这种不规范，要求HTML文档首先必须是一份XML文档。
XML文档是一种结构化文档，它有如下4条基本规则：
整个文档有且只有一个根元素
每个元素都有开始表情和结束标签组成，除非使用空元素语法。
元素与元素之间应该合理嵌套。
元素的属性必须有属性值，而且属性值应该用引号引起来。
一个简单的HTML文件
<html> <head> <title>我的第一个 HTML 页面</title> </head> <body> <p>body 元素的内容会显示在浏览器中。</p> <p>title 元素的内容会显示在浏览器的标题栏中。</p> </body> </html> |
段落
<html> <body> <p>这是段落。</p> <p>这是段落。</p> <p>这是段落。</p> <p>段落元素由 p 标签定义。</p> </body> </html> |
<html> <body> <p> 这个段落 在源代码中 包含许多行 但是浏览器 忽略了它们。 </p> <p> 这个段落 在源代码 中 包含 许多行 但是 浏览器 忽略了 它们。 </p> <p> 段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。 </p> </body> </html> |
诗歌问题
<html> <body> <h1>春晓</h1> <p> 春眠不觉晓， 处处闻啼鸟。 夜来风雨声， 花落知多少。 </p> <p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p> </body> </html> |
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>春晓</title> </head> <body> <h1>春晓</h1> <p> 春眠不觉晓， <br />处处闻啼鸟。 <br />夜来风雨声， <br />花落知多少。 </p> </body> </html> |
标题
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>标题</title> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> <p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p> </body> </html> |
居中排列的标题
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>标题</title> </head> <body> <h1 align="center">This is heading 1</h1> <p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p> </body> </html> |
注释
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>注释</title> </head> <body> <!--这是一段注释。注释不会在浏览器中显示。--> <p>这是一段普通的段落。</p> </body> </html> |
文本格式
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>文本格式</title> </head> <body> <b>This text is bold</b> <br /> <strong>This text is strong</strong> <br /> <big>This text is big</big> <br /> <em>This text is emphasized</em> <br /> <i>This text is italic</i> <br /> <small>This text is small</small> <br /> This text contains <sub>subscript</sub> <br /> This text contains <sup>superscript</sup> </body> </html> |
超链接
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>超链接</title> </head> <body> <p> <a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p> <p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p> </body> </html> |
图片超链接
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>超链接</title> </head> <body> <p> 您也可以使用图像来作链接： <a href="/example/html/lastpage.html">  </a> </p> </body> </html> |
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>超链接</title> </head> <body> <p> 您也可以使用图像来作链接： <a href="https://www.baidu.com" target="_blank">  </a> </p> </body> </html> |
邮件测试
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>邮件测试</title> </head> <body> <p> 这是邮件链接： <a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&subject=Hello%20again">发送邮件</a> </p> <p> <b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。 </p> </body> </html> |
表格
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表格</title> </head> <body> <table width="400" border="1"> <tr> <th align="left">消费项目....</th> <th align="right">一月</th> <th align="right">二月</th> </tr> <tr> <td align="left">衣服</td> <td align="right">￥241.10</td> <td align="right">￥50.20</td> </tr> <tr> <td align="left">化妆品</td> <td align="right">￥30.00</td> <td align="right">￥44.45</td> </tr> <tr> <td align="left">食物</td> <td align="right">￥730.40</td> <td align="right">￥650.00</td> </tr> <tr> <th align="left">总计</th> <th align="right">￥1001.50</th> <th align="right">￥744.65</th> </tr> </table> </body> </html> |
列表
无序列表
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>列表</title> </head> <body> <h4>一个无序列表：</h4> <ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul> </body> </html> |
项目符号列表
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>列表</title> </head> <body> <h4>Disc 项目符号列表：</h4> <ul type="disc"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ul> <h4>Circle 项目符号列表：</h4> <ul type="circle"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ul> <h4>Square 项目符号列表：</h4> <ul type="square"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ul> </body> </html> |
有序列表
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>列表</title> </head> <body> <ol> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol> <ol start="50"> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol> </body> </html> |
数字列表
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>列表</title> </head> <body> <h4>数字列表：</h4> <ol> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol> <h4>字母列表：</h4> <ol type="A"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol> <h4>小写字母列表：</h4> <ol type="a"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol> <h4>罗马字母列表：</h4> <ol type="I"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol> <h4>小写罗马字母列表：</h4> <ol type="i"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol> </body> </html> |
表单
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表单</title> </head> <body> <form action="/example/html/form_action.asp" method="get"> <p>用户名: <input type="text" name="username" /> </p> <p>密 码: <input type="password" name="password" /> </p> <input type="submit" value="登录" /> </form> <p>请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面。</p> </body> </html> |
空格
< <
> >
" "
& &
CSS
CSS 概述
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
样式表解决了一个普遍的问题
HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。
由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。
所有的主流浏览器均支持层叠样式表。
样式表极大地提高了工作效率
样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN } h1 {color:red; font-size:14px;} body { color: #000; background: #fff; margin: 0; padding: 0; font-family: Georgia, Palatino, serif; } |
id选择器：#
类选择器：.
背景色
<!DOCTYPE html> <html> <head> <title>背景色</title> <style type="text/css"> body { background-color: yellow } h1 { background-color: #00ff00 } h2 { background-color: transparent } p { background-color: rgb(250, 0, 255) } p.no2 { background-color: gray; padding: 20px; } </style> </head> <body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <p>这是段落</p> <p class="no2">这个段落设置了内边距。</p> </body> </html> |
文本颜色
<!DOCTYPE html> <html> <head> <title>文本颜色</title> <style type="text/css"> body { color: red } h1 { color: #00ff00 } p.ex { color: rgb(0, 0, 255) } </style> </head> <body> <h1>这是 heading 1</h1> <p>这是一段普通的段落。请注意，该段落的文本是红色的。在 body 选择器中定义了本页面中的默认文本颜色。</p> <p class="ex">该段落定义了 class="ex"。该段落中的文本是蓝色的。</p> </body> </html> |
div布局
<!DOCTYPE html> <html> <head> <title>div布局</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> div#container { width: 500px } div#header { background-color: #99bbbb; } div#menu { background-color: #ffff99; height: 200px; width: 150px; float: left; } div#content { background-color: #EEEEEE; height: 200px; width: 350px; float: left; } div#footer { background-color: #99bbbb; clear: both; text-align: center; } h1 { margin-bottom: 0; } h2 { margin-bottom: 0; font-size: 18px; } ul { margin: 0; } li { list-style: none; } </style> </head> <body> <div id="container"> <div id="header"> <h1>这里是网页的主标题</h1> </div> <div id="menu"> <h2>菜单</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </div> <div id="content">这里是网页内容</div> <div id="footer">这里是网页底部</div> </div> </body> </html> |
