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

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

  1. RobotFramework自动化测试框架-Selenium Web自动化(二)关于在RobotFramework中如何使用Selenium很全的总结(上)

    好久没有继续分享关于自动化测试相关的东西了,自动化在现今的测试领域已经越来越重要了,大部分公司在测试岗位招聘中都需要会相关的自动化测试知识.而 RobotFramework自动化测试框架 是自动化测试 ...

  2. TestNG测试框架在基于Selenium进行的web自动化测试中的应用

    转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ TestNG+Selenium+Ant TestNG这个测试框架可以很好的和基于Selenium的 ...

  3. Windows环境搭建Web自动化测试框架Watir

    Windows环境搭建Web自动化测试框架Watir 一.前言     Web自动化测试一直是一个比较迫切的问题,对于现在web开发的敏捷开发,却没有相对应的敏捷测试,故开此主题,一边研究,一边将We ...

  4. python web自动化测试中失败截图方法汇总

    在使用web自动化测试中,用例失败则自动截图的网上也有,但实际能落地的却没看到,现总结在在实际应用中失败截图的几种方法: 一.使用unittest框架截图方法:   1.在tearDown中写入截图的 ...

  5. Web 自动化测试框架 sweetest 介绍

    项目开源: https://github.com/tonglei100/sweetest 文章转载:https://segmentfault.com/a/1190000011612061 介绍 swe ...

  6. Web自动化测试框架Watir(基于Ruby) - 第2章 使用Watir写自动化测试脚本

    一.先来看一个小DEMO 通过上一篇博文<Web自动化测试框架Watir(基于Ruby) - 第1章 Windows下安装与部署>的介绍,我们已经有了完整Watir运行环境,现在我们可以来 ...

  7. Web自动化测试框架Watir(基于Ruby) - 第1章 Windows下安装与部署

    一.前言 Web自动化测试一直是一个比较迫切的问题,对于现在web开发的敏捷开发,却没有相对应的敏捷测试,故开此主题,一边研究,一边将Web自动化测试应用于工作中,进而形成能够独立成章的博文,希望能够 ...

  8. 习题-第7章Web自动化测试

    一.选择题 1.如果火狐浏览器不在默认安装路径,编写Selenium的设置代码,横线处应该填入(    ), System.setProperty(“webdriver.firefox._______ ...

  9. Web自动化测试框架改进

    Web自动化测试框架(WebTestFramework)是基于Selenium框架且采用PageObject设计模式进行二次开发形成的框架. 一.适用范围:传统Web功能自动化测试.H5功能自动化测试 ...

随机推荐

  1. WPF旋转的界面实现

    原文:WPF旋转的界面实现 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/yangyisen0713/article/details/1821534 ...

  2. QPointer,QSharedPointer,QWeakPointer的区别与使用例子(QSharedPointer类似Delphi里的引用计数,是强引用,而QWeakPointer是弱引用,不影响原始对象的引用计数,相当于是在暗中观察对象,但保持联系,需要的时候就会出现)

    QPointer is a template class that provides guarded pointers to Qt objects and behaves like a normal ...

  3. STM32处理器AD难度整理

    1.STM32的AD变化,任务组可以转换成两组:规则组和注射组.随机序列按随机顺序变换多种渠道构成了一组转换.例如.能够完成转换中,例如按照以下顺序:通道3.通道8.通道2.通道2.通道0.通道2.通 ...

  4. Ubuntu 14.04 64位字体美化(使用黑文泉驿)

    Ubuntu 14.04安装和升级后,,斜体字体变得很难看,昨天,我得到一个晚上,最终,管理一个线索,这里整洁. 在线调研后,.一致的观点是,,使用开源字体库文泉驿理想的黑色字体效果,效果甚至没有丢失 ...

  5. C# 获得设备usb信息

    原文:C# 获得设备usb信息 本文告诉大家如何获得设备的usb来进行判断是否有哪些usb和找不到usb可能是什么. 需要在项目右击引用,点击程序集,搜索 System.Management 然后安装 ...

  6. 安装CUDA和cuDNN

    GPU和CPU区别 1,CPU主要用于处理通用逻辑,以及各种中断事物 2,GPU主要用于计算密集型程序,可并行运作: NVIDIA 的 GeForce 显示卡系列采用 GPU 特性进行快速计算,渲染电 ...

  7. js操作select控件大全(包含新增、修改、删除、选中、清空、判断存在等)

    原文:js操作select控件大全(包含新增.修改.删除.选中.清空.判断存在等) js操作select控件大全(包含新增.修改.删除.选中.清空.判断存在等) js 代码// 1.判断select选 ...

  8. ARTS 1.7 - 1.11

    每周一个 Algorithm,Review 一篇英文文章,总结一个工作中的技术 Tip,以及 Share 一个传递价值观的东西! Algorithm: 学习算法 题目: https://leetcod ...

  9. GIS基础软件及操作(十一)

    原文 GIS基础软件及操作(十一) 练习十一.3D 可视分析 1.对地理数据进行透视观察.三维浏览:2.制作飞行动画 GIS数据三维显示 (1) 运行程序:[开始菜单]>>[所有程序]&g ...

  10. c# json key转大小写

    有需求需要将json的字段转换为小写,使用正则表达式实现,代码如下 正则表达式为   \"[a-zA-Z0-9]+\"\s*: MatchCollection ms = Regex ...