python自动化（二）前端基础：1.HTML基础

最新推荐文章于 2021-05-26 20:51:10 发布
最新推荐文章于 2021-05-26 20:51:10 发布
阅读量233 收藏 3
点赞数 2
分类专栏： python自动化 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ouyicnm/article/details/116136665
版权

一.HTML基本标签

1.简介

  • html的作用：定义整个页面“长”什么样，相当于网站的骨架。
  • 如何写html标签：安装webstorm软件。
  • html格式：
<!DOCTYPE html>                                 ----定义文件类型为html
<html>                            ----<html></html>之间是整个html的内容
<head lang="en">                             ---<head></head>头部标签 
    <meta charset="UTF-8">
    <title></title>             ---<title></title>标题标签，定义网页标题
</head>
<body>                          ---<body></body>身体标签，定义页面标签内容

</body>
</html>
<!---->                       ---- <!---->注释（CTRL+？）

2.html常用的标签：

内容标签

  • 标题标签：h1~h6。h1到h6都有自己默认的格式。字体大小等
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h1>放置一级标题</h1>
    <h2>放置二级标题</h2>
</body>
</html>

运行效果如下：
在这里插入图片描述

  • 容器标签：div。定义大的模块。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div>666</div>
    <div>333</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

  • 段落标签：p。定义段落文字
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <p>666</p>
    <p>333</p>
</body>
</html>

运行后效果如下：
在这里插入图片描述

  • 行内标签：span。如果放置在p标签内，则它会与p标签在同一行展示。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <span>666</span>
    <p>我是p标签<span>我是span标签</span></p>
</body>
</html>

运行后效果如下：
在这里插入图片描述

  • 超链接标签：a。定义超链接，点击跳转到指定路径。属性：href放置网址，target属性有self，blank值。self表示跳转后不会新建一个窗口，blank跳转后打开新窗口。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <a href="https://www.baidu.com/" target="_self">百度</a>
    <a href="https://www.taobao.com/" target='_blank'>淘宝</a>
</body>
</html>

运行后效果如下：
在这里插入图片描述

  • 图片标签：img。用来放置图片，属性：src用来放置图片路径，可以是本地路径也可以是网络路径。alt属性，用来放置到图片加载失败时，要显示的文字
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt="图片加载失败了">
</body>
</html>

运行后效果如下：
在这里插入图片描述

  • 换行标签：br。用于多个行内元素在同一行时，实现换行。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <span>呜呜</span>
    <span>哈哈</span>
    <br>
    <span>嘿嘿</span>
</body>
</html>

运行效果如下：
在这里插入图片描述

  • 分割标签：hr。显示一条分割线，属性：width定义分割线宽度。size设置分割线的高度（厚度）
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <span>呜呜</span>
    <span>哈哈</span>
    <br>
    <span>嘿嘿</span>
    <hr width="30000" size="10">
</body>
</html>

运行效果如下：
在这里插入图片描述

列表标签

  • ol（有序列表）；type属性设置列表样式。使用style='list-style: none;'可以取消列表前面的标签样式

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<ol type='1'>
  <li>第一条内容</li>
  <li>第二条内容</li>
  <li>第三条内容</li>
</ol>
</body>
</html>

运行效果如下：
在这里插入图片描述

  • ul（无序列表）；列表项也是li标签，前面类型为点。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul type='1'>
    <li>第一条内容</li>
    <li>第二条内容</li>
    <li>第三条内容</li>
</ul>
</body>
</html>

运行效果如下：
在这里插入图片描述

  • dl（图文混排）;

      <!DOCTYPE html>
  <html>
  <head lang="en">
     <meta charset="UTF-8">
     <title></title>
  </head>
  <body>
     <dt>图文混排标题</dt>
     <dd><img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2369680151,826506100&fm=26&gp=0.jpg" alt=""></dd>
     <dd>图文混排内容</dd>
  </body>
  </html>

运行效果如下：
在这里插入图片描述

表格标签

  • 使用方法：
    表格table：标签中，可以放一下标签：
    caption—放置表格标题
    tr-----行标签
    th----表头标签
    td----列表签
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<table>
    <caption>表的标题</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>手机号码</th>
    </tr>>
    <tr>
        <td>张三</td>
        <td>27</td>
        <td>123456789</td>
    </tr>
</table>
</body>
</html>

效果如下：
在这里插入图片描述

  • 表格的属性：（加在table标签内就对整个表格作用）
    border:边框宽度，值为数字类型
    cellpadding: 单元格内边距，值为数字类型
    cellspacing：单元格外边距，值为数字类型
    align:表格的对齐形式，可选值：left 左对齐right，右对齐，center 居中
    ​ width: 设置宽度。如果在table，设置的是整个table的宽；如果在td上，设置对应列的宽

  • 表格的合并属性：
    行合并：rowspan=5 把5行合并成一行
    列合并：colspan=3 把3列合并成一列

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<table border="3" cellpadding="5" cellspacing="5" width="500" align="center">
    <caption>第一个表格</caption>
    <tr>
        <td>1-11</td>
        <td>1-12</td>
    </tr>
    <tr>
        <td>1-21</td>
        <td>1-22</td>
    </tr>
</table>

<table border="3">
    <caption>第二个表格</caption>
    <tr align="center">
        <td width="500">2-11</td>
        <td>2-12</td>
    </tr>
    <tr align="left">
        <td >2-21</td>
        <td align="right" width="100">2-22</td>
    </tr>
</table>
</body>
</html>

运行后效果如下：
在这里插入图片描述

表单标签

  • form 表单标签

    • 区域块：fieldset ，使用 legend 设置区域块的名称
    • 用户输入框： input type=‘text’
    • 单选按钮： input type=‘radio’
    • 多选按钮： input type=‘checkbox’
    • 下拉框： select > option
    • 密码： input type=‘password’
    • 上传文件： input type=‘file’
    • 范围数字： input type=‘range’
    • 提交： input type=‘submit’
    • 重置： input type=‘reset’
    • 按钮： button
    • 文本域： textarea

  • input标签属性：

    • placeholder 设置提示文字
    • name 设置input标签的提交数据键名，因为输入框的内容是以键值对的形式存储
    • value 设置input标签的值，即给输入框一个默认值。可以删除修改。

  • form标签属性：

    • action: url地址，数据提交的地址
    • method: 提交方式， get / post ，默认是get
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form action="" method="get">
		<fieldset>
			<legend>区域块</legend>
			<span>普通文本</span>
		</fieldset>
		<!-- 用户输入 -->
		用户名： <input type="text" placeholder="请输入用户名或手机号" name="userName" ><br>
		<!-- 单选按钮 name必须一样，value必须设置值-->
		性别：<input type="radio" name="sex" value="1"> 男
			 <input type="radio" name="sex" value="2"> 女
			 <br>
		<!--多选按钮-->
		爱好：<input type="checkbox" name="hobby" value="1">看电影
			  <input type="checkbox" name="hobby" value="2">读书
			  <input type="checkbox" name="hobby" value="3">敲代码
			  <input type="checkbox" name="hobby" value="4">看专业书
			  <br>
		<!--下拉框-->
		住址：<select name="address">
				<option value="1">沙河</option>
				<option value="2">西三旗</option>
				<option value="3">月球</option>
				</select>
				<br>
		密码：<input type="password" name="pwd" placeholder="请输入密码"><br>
		上传文件：<input type="file" name="myfile"><br>
		数字范围：<input type="range" name="num" max="10" min="1" defaultValue='1'>	<br>
		文本域：<textarea name="content" id="" cols="300" rows="10"></textarea>
		<!-- 提交 -->
		<input type="submit">
		<!-- 重置 -->
		<input type="reset">
	</form>
</body>
</html>

结果如下：
在这里插入图片描述

块级元素和行内元素：

  • 块级元素：独占一行，标签的宽是浏览器屏幕的宽度，高度由内部的内容决定，常用的块级元素：div，p，ul,li,dl

  • 行内元素：不独占一行，在同一行可以放多个元素，如果行内元素在块级元素的内部，那么会跟块级标签在同一行，行内元素的宽度和高度都是由内部的内容决定的。常见的行内元素：span，a，em，i

  • 行内块级元素：不独占一行，宽度高度可以自己设置，常见的行内块级元素：input，button，img

  • 改变元素属性的方法：

    display:block; 改变为块级元素

    display:inline; 改变为行内元素

    display:inline-block; 改变为行内块级元素

    display:none; 把元素隐藏

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
    <style>
        .newscontent{
            display: inline-block;
        }
    </style>
</head>
<body>
<div >
    <!--使用class选择器设置display为行内元素，这样下面的两个p标签就在同一行了
    注意class定义的类需要在head标签中用style标签说明-->
    <p class='newscontent' >蔡英文要求布基纳法索:＂断交＂了 就把军备还我</p>
    <p class='newscontent' >蔡英文 防务</p>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

双标签和单标签：

  • 双标签：成对出现，有开始标签，有结束标签。大部分标签是双标签

  • 单标签：单个标签，写法：
    常见的单标签：br,hr,input,img

在这里插入图片描述

new nm个对象
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
"Kunlun-ATP：基于Python的自动化测试平台源码，整合JavaScript、HTML、CSS"
03-25
项目名称：Kunlun-ATP 项目简介：Kunlun-ATP 是一个基于 ...项目特性：该项目通过整合前端技术，扩展了Python在自动化测试领域的应用，提高了测试效率和用户体验，是一个功能全面、易于扩展的自动化测试解决方案。
python学习笔记-前端-HTML（一）
大多博客仅为学习笔记使用
04-21 1361
目录前戏一、简介二、注释HTML一、特性二、html结构head内常用标签title标签style标签link标签script标签meta标签body内常用标签基本标签列表标签表格标签其它标签完整代码
govuk-frontend-jinja:GOV.UK前端Jinja宏
04-23
移植故意是手动的，而不是自动化的，以使更新比维护自动化的转换例程更简单。 可确保符合最新版本以及以后的所有GOV.UK Frontend版本。 包装： : 演示应用程序： : 现场演示： : 如何使用运行pip install govuk-...
使用Python自动生成HTML的方法示例
01-21
python 自动化批量生成前端的HTML可以大大减轻工作量 下面演示两种生成 HTML 的方法 方法一：使用 webbrowser #coding:utf-8 import webbrowser #命名生成的html GEN_HTML = test.html #打开文件，准备写入 f = ...
基于Python与多技术栈的Mogui自动化部署系统源码
最新发布
03-25
该系统融合了前端技术如JavaScript、CSS、Vue以及后端Python编程，实现了高效的自动化部署功能。源码包含共681个文件，其中具体文件类型分布为：JavaScript文件328个，CSS文件187个，Vue组件文件83个，Python脚本20...
python+django+selenium搭建简易自动化测试
01-21
该平台会集成UI自动化及api自动化，里面也会涉及到一些简单的HTML等前端，当然都是很基础的东西。在以后的博客里，我会一点点的尽量写详细，帮助一些测试小白一起成长，当然我也是个小菜鸡。 第一章 django 搭建平台...
python自动化（五）接口自动化：4.接口自动化框架搭建实战
ouyicnm的博客
05-19 8628
一.业务分析 我们这里以企业微信的添加成员业务为例，来讲解我们的自动化测试框架。 企业微信接口文档：https://work.weixin.qq.com/api/doc/90000/90135/90195 二.框架搭建实战 1.框架目录结构分析 data：存放测试用例数据的目录。 images：存放项目图片的目录。 logs：存放日志文件的目录。 my_config：存放配置文件的目录。 my_tools：存放公共方法代码的位置。 page_obj：存放page类代码的目录。 test_case：存
python自动化（七）自动化测试平台开发：1.自动化测试平台简介
ouyicnm的博客
05-24 4631
一.测试平台简介 为什么需要测试平台 已有的开源测试平台不能满足需要，不要轻易造轮子 需要公司级别的定制 需要整合公司内部的多套平台 例子：DevOps平台、精准化测试平台、质量监控平台等等 常见的测试平台开发模式 大一统模式（适合简单的项目） 基于模板技术渲染界面，代表作：Rails、Django 入门容易，上手简单 前后端分离（适合复杂的项目） 使用标准的json进行前后端通讯 通常是前端使用SPA框架 后端框架可以是小型的api框架 Flask、SparkJava 也可以是大型的web开发框
python自动化（五）接口自动化：1.接口测试基础
ouyicnm的博客
05-17 4187
一.接口测试价值与体系 二.常见的接口协议 1.TCP/IP协议 TCP/IP协议是在OS7层模型上总结生成的。 TCP/IP 是互联网相关的各类协议族的总称，比如：TCP，UDP，IP，FTP，HTTP，ICMP，SMTP 等都属于 TCP/IP 族内的协议。 TCP/IP模型是互联网的基础，它是一系列网络协议的总称。这些协议可以划分为四层，分别为链路层、网络层、传输层和应用层。 链路层：负责封装和解封装IP报文，发送和接受ARP/RARP报文等。 网络层：负责路由以及把分组报文发
selenium定位悬浮元素
ouyicnm的博客
05-13 3641
1.前沿 我们在定位页面悬浮元素时，往往会出现这种情况。就是某个元素需要鼠标移动到另一个元素上才会出现，如果鼠标移开则会消失。这种情况会导致我们定位十分困难。针对这种情况我们可以使用浏览器开发模式中的sources来处理。 2.sources 开发者模式下的sources，可以将页面元素暂停下来。供我们定位一些悬浮的元素。 方法： 打开待定位的页面 使用F12打开开发者模式 进入sources模式 鼠标移动到元素上，使悬浮元素出现 使用F8暂停页面 定位页面悬浮元素 使
python自动化（四）app自动化：4.appium详解
ouyicnm的博客
05-14 2784
一.appium desktop简介 Appium是一个开源的，适用于原生或混合移动应用（ hybrid mobile apps ）的自动化测试工具，Appium应用WebDriver: JSON wire protocol驱动安卓和iOS移动应用。它是继承自selenium的webdriver，所以它支持selenium的大部分API，且也有一些特殊的使用方式。 appium desktop是一款C/S架构的软件，其内集成了appium service。我们一般主要使用appium desktop来完成元
python自动化（六）持续集成：2.Jenkins技术讲解
ouyicnm的博客
05-22 2056
一.程序集成体系介绍 1.瀑布模型和敏捷模型 瀑布模型：在之前我们项目的开发模式都是瀑布模式。项目生命周期按照需求分析>概要设计>详细设计>代码开发>测试>上线发布一步一步进行。这种模式文档完善，整个开发过程很严谨，相对比较可控。 敏捷模式：敏捷开发以用户的需求进化为核心，采用迭代、循序渐进的方法进行软件开发。在敏捷开发中，软件项目在构建初期被切分成多个子项目，各个子项目的成果都经过测试，具备可视、可集成和可运行使用的特征。换言之，就是把一个大项目分为多个相互联系，但也
python自动化（三）web自动化：1.pytest框架讲解+集成allure
ouyicnm的博客
05-05 1858
一.什么是pytest 我们在编写自动化脚本时，需要一套框架来管理我们的测试用例。这样我们的用例才会更加灵活，pytest就是这么一个框架。 pytest是一个非常成熟的全功能的Python测试框架，主要特点有以下几点： 简单灵活，容易上手，文档丰富； 支持参数化，可以细粒度地控制要测试的测试用例； 能够支持简单的单元测试和复杂的功能测试，还可以用来做selenium/appnium等自动化测试、接口自动化测试（pytest+requests）; pytest具有很多第三方插件，并且可以自定义扩展，比较好
python自动化（五）接口自动化：2.接口测试requests模块
ouyicnm的博客
05-18 1841
一.requests介绍 requests模块是python的第三方库，使用它我们可以非常方便的发起get，post等接口请求。并且获取接口的返回值。在自动化中我们常常使用requests模块来编写接口自动化测试用例。 requests的官方文档为：https://docs.python-requests.org/zh_CN/latest/ 二.requests详解 1.安装 pip install requests 2.常用API 2.1发送请求相关的API (1) 发送get请求API r
python自动化（五）接口自动化：5.接口管理平台
ouyicnm的博客
05-20 1384
一.为什么需要接口管理平台 在项目开发过程中，我们需要开发维护大量的接口。尤其是现在前后端分离模式的流行，需要我们在开发过程中维护大量的接口文档。当文档数量过多时，文档的维护难度也大大增大。所以使用一个方便的接口管理平台来管理我们的接口及其相关文档十分重要。 二.YAPI平台 1.YAPI平台简介 YAPI是由去哪儿网移动架构组(简称YMFE，一群由FE、iOS和Android工程师共同组成的最具想象力、创造力和影响力的大前端团队)开发的可视化接口管理工具，是一个可本地部署的、打通前后端及QA的接口管理平台
python自动化（六）持续集成：3.Jenkins集成自动化测试实战
ouyicnm的博客
05-23 1331
一.jenkins集成WEBUI自动化 1.python代码实现 测试代码如下： import os import time import allure import pytest from selenium import webdriver from selenium.webdriver.chrome.options import Options from selenium.webdriver.common.by import By @allure.feature('百度搜索模块测试') cla
python自动化（一）基础能力：1.python文件读取
ouyicnm的博客
03-14 1329
1. 因为最近公司在搞自动化测试，自己学到了许多自动化测试的知识。所以决定专门写一个自动化系列的博客，方便以后查看，有需要的朋友也可以看看。。 2. 自动化测试中，我们的配置数据，测试数据等等都是使用文件的方式存放的，所以读取文件是自动化中非常的重要，所以第一章我们先讲解python读取文件的方法。 一.YAML文件读取 1.什么是yaml文件 YAML 语言（发音 /ˈjæməl/ ）的设计目标，就是方便人类读写。它实质上是一种通用的数据串行化格式。它的基本语法规则如下。 大小写敏感 使用缩进表示层级关
python自动化（七）自动化测试平台开发：3.flask技术讲解上
ouyicnm的博客
05-26 1239
一.后端开发框架flask 本次主要讲解flask框架 1.flask框架简介 flask框架是一款非常受欢迎的python web框架，它非常的灵活小巧。 2 flask框架的基本使用 from flask import Flask # 传入__name__初始化一个Flask实例 app = Flask(__name__) # 装饰器，将当前路由映射到指定函数 @app.route('/') def hello_world(): return 'hello world' if __
python自动化（三）web自动化：5.测试框架实战一通用方法封装、配置文件、basepage基类封装
ouyicnm的博客
05-09 1102
我们以百度为例来实战讲解测试框架的搭建。 一.创建框架目录 cases：用例文件管理目录 datas：用例数据文件管理目录 etc：配置文件管理目录 logs：日志目录 pages：pageobject文件管理目录 plugins：第三方插件管理目录，例如存放chromedriver.exe文件 reports：测试报告目录 tools：通用方法代码文件管理目录 二.完成通用方法的封装 在编写测试用例代码前，我们可以先完成日志打印，文件读取等公共方法的封装。供后续用例编写时使用。 （1）日志方法封
pythonweb自动化测试学习
06-10
学习 Python Web 自动化测试，你可以按照以下步骤进行： 1. 学习 Python 语言基础，包括变量、数据类型、流程控制语句、函数、面向对象编程等内容； 2. 掌握 Python 的常用 Web 自动化测试框架，比如 Selenium、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值