Web自动化测试二 ----- HTML

阅读量：4323 次

发布时间：2019-06-06

本文共 2957 字，大约阅读时间需要 9 分钟。

HTML

一、结构

html> 与 </html> 之间的文本描述网页

<body> 与 </body> 之间的文本是可见的页面内容

<h1> 与 </h1> 之间的文本被显示为标题

<p> 与 </p> 之间的文本被显示为段落

　　<html>
　　　　<head>
　　　　快递单
　　　　</head>
　　　　<body>
　　　　邮寄的东西
　　　　</body>
　　</html>

二、概念

HTML(Hyper Text Markup Language)：超文本标记型语言,方便快速查找。'

HTML 不是一种编程语言，而是一种标记语言 (markup language)

HTML标签

HTML 标签是由尖括号包围的关键词，比如 <html>

HTML 标签通常是成对出现的，比如 <b> 和 </b>,有些是单个出现的。有些是没有内容的。

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

看到的网页 == HTML

三、与XML的区别

HTML：<key>value</key> key标签是指定的

XML：<key>value</key> key标签可以自己定义

四、HTML头部元素

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

1、<title> 标签

定义文档的标题。

2、<base> 标签

页面上的所有链接规定默认地址或默认目标（target）。

3、<link> 标签

定义文档与外部资源之间的关系。

4、<style> 标签

用于为 HTML 文档定义样式信息。

5、<meta> 标签

提供关于 HTML 文档的元数据。

meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

6、<script> 标签

用于定义客户端脚本，比如 JavaScript。

五、HTML实体

1、<p> 元素

<p> 元素定义了 HTML 文档中的一个段落。

This is my first paragraph.

2、<body> 元素

定义了 HTML 文档的主体。

3、<html> 元素

定义了整个 HTML 文档。

4、<h1> - <h6> 标签

<h1> 定义最大的标题。<h6> 定义最小的标题。

5、<hr /> 标签

在 HTML 页面中创建水平线。

6、HTML注释

7、 <br /> 标签

在不产生一个新段落的情况下进行换行。

8、HTML链接

<a href ="www.baidu.com"> 这是一个链接</a>

target属性：使用target属性，可以使链接在新窗口打开。

9、HTML图像

10、HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。


    
                  row 1, cell 1        row 1, cell 2       
             row 2, cell 1        row 2, cell 2

在浏览器显示如下：

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

border属性（border=“1”）：显示一个带有边框的表格。

表头使用 <th> 标签进行定义。

11、HTML列表

无序列表：无序列表始于 <ul> 标签。每个列表项始于 <li>。

　　
    
     　　
     Coffee
　　
     Milk

有序列表：有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

　　
    
     　　
     Coffee
　　
     Milk

12、<iframe>标签

用来在一个HTML页面上显示另一个HTML页面。

13、<input>标签

用户名：用户名：用户名：

我最喜欢的歌手周杰伦林俊杰张惠妹

我爱听的歌手周杰伦林俊杰张惠妹

最喜欢的水果

属性总结：

id必须要唯一，不唯一浏览器不会识别到，但是会产生严重的影响，是编程人员的问题

for设同一个id name不是唯一的，当a有两个相同的name，锚会定位到第一个。name的作用非常有用，作为可与服务器交互数据的HTML元素的服务器端的标识，分组，锚点

value值很重要，向后端传输的数据就是value

style通常被css文件代替

class通常用来做样式分离，可以同时又多个值，用空格分开

readlonly和disabe的区别：
- readonly只针对input（text/password）和textarea有效，而disabled对于所有的表单元素有有效，包括select、radio、checkbox、button等，但是表单如果在使用了readonly后，当我们将表单以post或get的方式提交的话，这个元素的值不会被传递出去，而readonly会将值传递出去（这种情况出现在当我们将某个表单中的textarea元素设置为disabled或readonly，但是submit button确实可以使用的）