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> 定义最小的标题。

5、<hr /> 标签

在 HTML 页面中创建水平线。

6、HTML注释

<!-- This is a comment -->

7、 <br /> 标签

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

8、HTML链接

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

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

9、HTML图像

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页面。

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，默认值

Web自动化测试二 ----- HTML的更多相关文章

RobotFramework自动化测试框架-Selenium Web自动化(二)关于在RobotFramework中如何使用Selenium很全的总结（上）
好久没有继续分享关于自动化测试相关的东西了,自动化在现今的测试领域已经越来越重要了,大部分公司在测试岗位招聘中都需要会相关的自动化测试知识.而 RobotFramework自动化测试框架是自动化测试 ...
TestNG测试框架在基于Selenium进行的web自动化测试中的应用
转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ TestNG+Selenium+Ant TestNG这个测试框架可以很好的和基于Selenium的 ...
Windows环境搭建Web自动化测试框架Watir
Windows环境搭建Web自动化测试框架Watir 一.前言 Web自动化测试一直是一个比较迫切的问题,对于现在web开发的敏捷开发,却没有相对应的敏捷测试,故开此主题,一边研究,一边将We ...
python web自动化测试中失败截图方法汇总
在使用web自动化测试中,用例失败则自动截图的网上也有,但实际能落地的却没看到,现总结在在实际应用中失败截图的几种方法: 一.使用unittest框架截图方法: 1.在tearDown中写入截图的 ...
Web 自动化测试框架 sweetest 介绍
项目开源: https://github.com/tonglei100/sweetest 文章转载:https://segmentfault.com/a/1190000011612061 介绍 swe ...
Web自动化测试框架Watir(基于Ruby) - 第2章使用Watir写自动化测试脚本
一.先来看一个小DEMO 通过上一篇博文<Web自动化测试框架Watir(基于Ruby) - 第1章 Windows下安装与部署>的介绍,我们已经有了完整Watir运行环境,现在我们可以来 ...
Web自动化测试框架Watir(基于Ruby) - 第1章 Windows下安装与部署
一.前言 Web自动化测试一直是一个比较迫切的问题,对于现在web开发的敏捷开发,却没有相对应的敏捷测试,故开此主题,一边研究,一边将Web自动化测试应用于工作中,进而形成能够独立成章的博文,希望能够 ...
习题-第7章Web自动化测试
一.选择题 1.如果火狐浏览器不在默认安装路径,编写Selenium的设置代码,横线处应该填入( ), System.setProperty(“webdriver.firefox._______ ...
Web自动化测试框架改进
Web自动化测试框架(WebTestFramework)是基于Selenium框架且采用PageObject设计模式进行二次开发形成的框架. 一.适用范围:传统Web功能自动化测试.H5功能自动化测试 ...

随机推荐

GameBuilder见缝插针游戏开发系列(AA)
今天推出了一款游戏叫<AA>.在最近IOS只是弹出一个游戏.非常心脏的孩子,但有很多乐趣.今天,我们谈论它tangide(GameBuilderV2.0)用控件UICanvas实现它. 在 ...
[WPF]获取鼠标指针下的元素
原文:[WPF]获取鼠标指针下的元素 [WPF]获取鼠标指针下的元素周银辉以前写过一些GetElementUnderMouse之类的函数,要用到坐标换算而显得有些麻烦(特别是当元素有XXXTr ...
C# WPF 中用代码模拟鼠标和键盘的操作
原文:C# WPF 中用代码模拟鼠标和键盘的操作原文地址 C#开发者都知道,在Winform开发中,SendKeys类提供的方法是很实用的.但是可惜的是,在WPF中不能使用这个方法了. 我们知道,在 ...
ASP.NET Core SameSite 设置引起 Cookie 在 QQ 浏览器中不起作用
最近在发布了基于 ASP.NET Core 实现的新版登录页面之后,陆陆续续地接到用户反馈登录时 Antiforgery Token 总是验证失败. 日志中记录的对应错误是 Antiforgery t ...
WPF编游戏系列之一布局设计
原文:WPF编游戏系列之一布局设计本系列主要使用WPF和C#编写一个简单的小游戏(暂命名XMarket),意在通过该实例进一步学习和体验WPF,也欢迎广大同仁拍砖交流.言归正传,在 ...
IIS Express 启用目录浏览
IIS Express 启用目录浏览,有需要的朋友可以参考下. 今天刚刚使用visual studio 2013创建第一个hello world,结果就发现提示错误. HTTP 错误 403.14 - ...
VisualSVN-5.1.5补丁原创发布
VisualSVN-5.1.5补丁原创发布 VisualSVN-5.1.5官方安装包.rar VisualSVN-5.1.5Patch.rar
图像滤镜艺术---保留细节的磨皮滤镜之PS实现
原文:图像滤镜艺术---保留细节的磨皮滤镜之PS实现目前,对于人物照片磨皮滤镜,相信大家没用过也听过吧,这个滤镜的实现方法是多种多样,有难有简,有好有差,本人经过长时间的总结,得出了一种最简单,效果 ...
零元学Expression Blend 4 - Chapter 1 缘起
原文:零元学Expression Blend 4 - Chapter 1 缘起本来都使用Adobe相关工具从事设计工作的我,因缘际会下,接触到了Expression Blend 4,让我完全的对微软 ...
Android零基础入门第38节：初识Adapter
原文:Android零基础入门第38节:初识Adapter 在上一节一起了解了ListView的简单使用,那么本节继续来学习与ListView有着千丝万缕的Adapter. 一.了解MVC模式在开始 ...

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