Web自动化测试 二 ----- HTML
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)。
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>
3、<link> 标签
定义文档与外部资源之间的关系。
4、<style> 标签
用于为 HTML 文档定义样式信息。
5、<meta> 标签
提供关于 HTML 文档的元数据。
meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
6、<script> 标签
用于定义客户端脚本,比如 JavaScript。
五、HTML实体
1、<p> 元素
<p> 元素定义了 HTML 文档中的一个段落。
<p>This is my first paragraph.</p>
2、<body> 元素
定义了 HTML 文档的主体。
3、<html> 元素
定义了整个 HTML 文档。
4、<h1> - <h6> 标签
<h1> 定义最大的标题。<h6> 定义最小的标题。
<h1> 定义标题</h1>
5、<hr /> 标签
在 HTML 页面中创建水平线。
6、HTML注释
<!-- This is a comment -->
7、 <br /> 标签
在不产生一个新段落的情况下进行换行。
8、HTML链接
<a href ="www.baidu.com"> 这是一个链接</a>
target属性:使用target属性,可以使链接在新窗口打开。
9、HTML图像
<img src="图片路径" width=“100” herght=“100”>
10、HTML表格
表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器显示如下:
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
border属性(border=“1”):显示一个带有边框的表格。
表头使用 <th> 标签进行定义。
11、HTML列表
- 无序列表:无序列表始于 <ul> 标签。每个列表项始于 <li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
- 有序列表:有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
12、<iframe>标签
用来在一个HTML页面上显示另一个HTML页面。
<iframe src="www.baidu.com" height="100" width="200"> </iframe>
13、<input>标签
用户名: <input type="text">
用户名: <input type="text" readonly>
用户名: <input type="text" disabled> <!--单选框-->
<p> 我最喜欢的歌手
<input type="radio" name="favor_singer" id="zjl" value="周杰伦" readonly>周杰伦
<input type="radio" name="favor_singer" id="ljj" value="林俊杰" checked>林俊杰
<input type="radio" name="favor_singer" id="zhm" value="张惠妹"disabled>张惠妹
</p> <!--多选框-->
<p> 我爱听的歌手
<input type="checkbox" name="listen" value="周杰伦">周杰伦
<input type="checkbox" name="listen" value="林俊杰" checked>林俊杰
<input type="checkbox" name="listen" value="张惠妹">张惠妹
</p>
<!--无论单选或者多选同一个问题必须加name属性--> <input type="button">
<input type="color">
<input type="time">
<input type="email"> <!--只能输入email格式的数据-->
<input type="file">
<input type="number">
<input type="password"> <!--文本域-->
<p>
<textarea> </textarea>
</p> <p>
<p style="color:red">最喜欢的水果</p>
<!--select里只显示option元素,备注信息放到select外-->
<select>
<option></option>
<option>草莓</option>
<option>香蕉</option>
<option>苹果</option>
</select>
<input type="submit">
</p>
属性总结:
- 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确实可以使用的)
- checked,默认值
最新文章
- 移动端自动化环境搭建-RIDE的安装
- PHPMailer不能发送邮件
- maven--composer---setting.xml(updatepolicy)---mvn install , mvn deploy
- dllimport路径问题
- CSS构造列表
- Floyd 算法 打印路径模板
- Javascript进阶篇——(JS基础语法)笔记整理
- 1001 A + B Problem
- AR_Demon(使用vuforia平台提供的钥匙跟后台,实现相机拍图片读取模型以及视频的功能)
- python学习之while循环
- Microsoft SQL server2017初次安装与使用记录
- Hadoop:Hadoop基本命令
- Net Core 生成图形验证码
- 使用webmagic爬虫对百度百科进行简单的爬取
- Laravel 出现 No application encryption key has been specified.
- 自定义滤镜 ColorMatrixFilter
- flutter 环境安装以及配置
- Windows下Python3.6安装第三方模块
- 加密算法(DES,AES,RSA,MD5,SHA1,Base64)比较和项目应用(转载)
- python字符中加入变量
热门文章
- 文件上传(bootstrap fileinput)
- Windows系统时间(FILETIME和SYSTEMTIME)
- 解决ASP.NET中Redis 每小时6000次访问请求的问题
- Program for Linux USB-devices driver step by step (ONE)
- bigdata_mac下安装spark_scala
- WPF 使用Propereties:Resources.resx里面的资源
- 通通玩blend美工(7)——简约而不简单的块
- Delphi I/O Errors(几百种不同的错误)
- Android 查看APK文件的签名算法
- Windows 10开发基础——网络编程