前端的三把利器

HTML：赤裸的一个人

CSS：华丽的衣服

JS/JavaScript：赋予这个人的行为，也就是动起来

DOM 就是将页面变成可操

HTML（超文本标记语言）

html代码实际上就是一套能够被浏览器所识别的规则代码，由一个个标签组成。html代码就是一大长串字符串，而这种字符串的格式正好能够被浏览器所识别，也就有了我们的WEB页面。

<!DOCTYPE html>
<!--html标签的开始 一个页面只可以有一对html标签-->
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <!--指定了字符集 自闭和标签-->
    <!--一对的叫做主动闭合标签-->
    <!--head标签中大部分都是不可见的-->
    <!--charset="UTF-8" 叫做meta标签的属性-->
    <meta charset="UTF-8">
    <!--每隔一秒钟，刷新一次-->
    <!--<meta http-equiv="refresh" content="1;http://ui.imdsx.cn">-->
    <!--关键字检索参数-->
    <meta name="keywords" content="性能测试，自动化测试">
    <!--描述当前网站是干什么的-->
    <meta name="description" content="">
    <!--rel代表告诉link标签干什么，stylesheet引入css的标签，href引入的路径-->
    <link rel="stylesheet" href="">
    <!--title的logo图标-->
    <link rel="shortcut icon" href="timg.jpg">
    <!--修改浏览器的tag名-->
    <title>HTML</title>
    <!--css样式标签-->
    <style></style>
    <!--js标签-->
    <script></script>
</head>
<br>
<h3><p>段落标签</p></h3>
<h3></br>换行</h3>
<!--段落标签-->
<p>年轻,就是拿来折腾的。让自己具备独立生活的能力，具备一技之长的资本，是需要无数个夜晚的静思，无数寂寞时光的堆积而成的。

    别在最该拼搏的年纪选择稳定，世界上最大的不变是改变，只有每天进步，才能拥抱生命的无限可能！

    你以为你给对方留了电话存了微信，应该彼此也能互相帮忙，却忘记了一件很重要的事情，只有关系平等，才能互相帮助。

    不要为了户口丢掉生活，为了稳定丢掉青春，为了平淡丢掉梦想，因为你所谓的稳定，不过实在浪费生命。

    真正的勇者不是狼狈的逃脱，而是用闲暇时间，磨练自己。

    只有等现实的日子富足了，能力够强了，才可以去追求那些美好的生活状态，才该去追求那些伟大的梦。否则那些梦幻般的生活，都只是空中阁楼，不堪一击。

    生活是自己的，自己都不求进取，凭什么让别人给你美好的未来？</p>
<!--标题标签-->
<h1>标题标签h1</h1>
<h2>标题标签h2</h2>
<h3>标题标签h3</h3>
<h4>标题标签h4</h4>
<h5>标题标签h5</h5>
<h6>标题标签h6</h6>
<!--块级标签，自己有多大，都占一行，div伪白板标签，只有一个css样式修饰-->
<div>div标签</div>
<!--行内标签，也叫内联标签，自己有多大占多大，白板标签，没有任何css样式修饰-->
<span>span标签</span>
<br>
<!--text 文本框-->
<input type="text" placeholder="默认值" name="">
<!--password 密文-->
<!--<input type="password">-->
<!--checkbox 多选框-->
<input type="checkbox" name="a" checked="checked">男的
<input type="checkbox" name="a">一米四
<input type="checkbox" name="a">36c
<!--radio 单选框 name属性相同 名字互斥-->
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<!--用button写的，绑定js才可以操作-->
<input type="button" value="登陆">
<!--submit如果和form标单连用，则直接提交-->
<!--form表单为一张白纸，action要提交的地址，method请求方式-->
<form action="http://baidu.com" method="get">
    <input type="text">
    <input type="submit" value="提交">
</form>
<!--重置-->
<input type="reset">
<!--隐藏的数据-->
<input type="hidden" name="" value="">
<!--上传文件-->
<input type="file">
<!--通过for与inputid进行关联，扩展获取焦点的范围-->
<label for="i1">用户名</label><input type="text" id="i1">
<!--多行文本-->
<textarea name="">默认值</textarea>
<div>
    <!--下拉框，selected默认属性-->
    <select>
        <option value="1">北京</option>
        <option value="2">四川</option>
        <option value="3">辽宁</option>
        <option value="4" selected="selected">黑龙江</option>
    </select>
    <select>
        <!--optgroup组名-->
        <optgroup label="黑龙江">
            <option value="">哈尔滨</option>
            <option value="">大庆</option>
            <option value="">佳木斯</option>
            <option value="">鹤岗</option>
        </optgroup>
        <optgroup label="北京">
            <option value="">石景山区</option>
            <option value="">朝阳区</option>
            <option value="">海淀区</option>
            <option value="">通州区</option>
        </optgroup>
    </select>
</div>
<div>
    <a href="http://baidu.com">跳转</a>
    <!--<span id="i2">11111</span>-->
    <!--<a href="#i2">按钮</a>-->
</div>
<div>
    <table border="1">
        <thead>
            <tr>
                <td>ID</td><td>用例名称</td><td>执行人</td><td>编辑</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td><td>table表格测试</td><td>大师兄</td><td>详情 编辑</td>
            </tr>
            <tr>
                <td>1</td><td colspan="2">table表格测试</td><td>详情 编辑</td>
            </tr>
            <tr>
                <td>1</td><td rowspan="2">table表格测试</td><td>大师兄</td><td>详情 编辑</td>
            </tr>
            <tr>
                <td>1</td><td>大师兄</td><td>详情 编辑</td>
            </tr>
        </tbody>
    </table>
</div>
<div>
    <!--原点的方式显示数据-->
    <ul>
        <li>第一列</li>
        <li>第二列</li>
    </ul>
    <!--数字的形式标记数据-->
    <ol>
        <li>第一列</li>
        <li>第二列</li>
    </ol>
    <dl>
        <dt>黑龙江</dt>
        <dd>哈尔滨</dd>
        <dd>牡丹江</dd>
    </dl>
    <dl>
        <dt>北京</dt>
        <dd>北京</dd>
    </dl>
</div>
<div>
    <!--title鼠标悬浮在图片上显示的文案，alt代表当图片加载失败时显示的文字-->
    <img src="timg.jpg" alt="代表当图片加载失败时显示的文字" title="鼠标悬浮在图片上显示的文案">
</div>
</body>
</html>

UI自动化（一）html基础的更多相关文章

  1. python ui自动化之元素定位和常用操作

    做ui自动化的最基础的就是页面元素定位了,如果连页面元素都定位不到,自动化从何谈起呢?接下来我们就看看页面元素定位的方法吧!(这里就用百度页面来进行演示) 一.最通用的几种定位方式: 1.通过id定位 ...

  2. UI自动化之8种基础定位

    UI自动化的核心在于定位 目录 1.8种基础定位方法 2.xpath定位 3.css定位 4.多组元素 1.8种基础定位方法 driver.find_element_by_id() #id定位 dri ...

  3. 【自动化基础】手把手教零基础小白搭建APP的UI自动化环境

    前言 帮助零基础小白一步步搭建UI自动化环境,完成Python+Appium+模拟器/真机的UI自动化环境搭建. 环境准备: jdk1.8.0 sdk Node.js appium python Ap ...

  4. UI自动化，你值得拥有

    去年春节联欢晚会,为了那张“敬业福”,全家都卯足了劲儿“咻一咻”,连节目都顾不上看了.当时我就想,要是能自动化该多好,不停点击屏幕,屏幕不疼手还疼呢,何况还不好分心,生怕错过了“敬业福”.玩“咻一咻” ...

  5. 洗清UI自动化鸡肋说的不白之冤

    人类文明发展的一个重要标识是工具的诞生,当人类开始制作工具来提高生产力时,就逐渐拉开了与其他生物的距离.曾在2013年,<Google如何测试软件>中提到的分层自动化金字塔,轰动业界.而在 ...

  6. ui自动化笔记 selenium_webdriver,ui自动化框架(web)

    Selenium学习笔记 selenium webdriver是业界公认ui自动化测试的标准,其封装的api可以对浏览器的任何地方进行操作 selenium2.0和selenium3.0的区别? 3. ...

  7. (appium+python)UI自动化_07_app UI自动化实例【叮咚搜索加车为例】

    前言 初学UI自动化的小伙伴,在配置好appium+python自动化环境后,往往不知道如何下手实现自动化.小编在初期学习的时候也有这种疑惑,在此以叮咚买菜app-搜索加车为实例,展示下appium是 ...

  8. 小程序UI自动化（一）：appium小程序自动化尝试

    appium 进行 小程序自动化尝试: 由于工作中进行app自动化用的是appium,故首先尝试用appium进行小程序自动化,以美团小程序为例(python脚本实现) 一.配置基础信息 启动微信ap ...

  9. 基于python2+selenium3+pytest4的UI自动化框架

    环境:Python2.7.10, selenium3.141.0, pytest4.6.6, pytest-html1.22.0, Windows-7-6.1.7601-SP1 特点:- 二次封装了s ...

  10. UI自动化技术在高德的实践

    一.背景汽车导航作为ToB业务,需要满足不同汽车厂商在功能和风格上体现各自特色的需求.针对这种情况,传统的UI开发方式,基本上是一对一的特别定制.但是这种方式动辄就要500~600人日的工作量投入,成 ...

随机推荐

  1. 梯度下降法(BGD、SGD)、牛顿法、拟牛顿法（DFP、BFGS）、共轭梯度法

    一.梯度下降法 梯度:如果函数是一维的变量,则梯度就是导数的方向:      如果是大于一维的,梯度就是在这个点的法向量,并指向数值更高的等值线,这就是为什么求最小值的时候要用负梯度 梯度下降法(Gr ...

  2. 回车和刷新以及Ctr+F5的区别

    回车(url跳转)主要是判断本地缓存文件的Expires的有效时间,如果有效则直接使用客户端缓存 不在提交到HTTP服务器 F5 Expires设置不再起效果,只有Last-Modified/ETag ...

  3. shell基础：预定义变量

    比如&& ||用的就是$?,用于计算机的识别

  4. KMP模板(bin)

    KMP模板 主要是kuangbin的模板,之后加了一点我的习惯和理解. kmpN() 作用:构造next数组 参数:模式串,模式串长度 kmpC() 作用:返回模式串在主串中出现的次数(可重复) 参数 ...

  5. laravel 前后端分离 token

    由于自己开发的项目中用到了 JWT 技术,前端采用了 Vue.js 框架,后端采用了 CodeIgniter 框架,故作此文帮助使用相同技术栈的朋友们. 具体思路如下:把后端生成的 JWT token ...

  6. quartz demo01

    1,Pom.xml   加入:quartz-2.1.7.jar <dependency> <groupId>org.quartz-scheduler</groupId&g ...

  7. Rpgmakermv（30） GameQuest任务插件

    插件简介: 很牛X的任务插件(个人目前用过中的) 插件用法说明 Report any bugs, editor or plugin related here: http://forums.rpgmak ...

  8. Robot Framework 遇到过的错误 1. Chrome打开无法数据网址，地址栏只显示data:,

    问题描述:用RF打开网页时未跳转到指定网址,而是显示data:, *** Settings ***Library SeleniumLibrary *** Test Cases ***Login_Tes ...

  9. .net 缓存

    缓存有很多实现方法,所有这些可以被分为两类,基于内存的缓存和基于磁盘的缓存: 1.  内存驻留缓存——包含在内存中临时存储数据的所有实现方法,通常在以下情况下使用: a)       应用程序频繁使用 ...

  10. 大数据处理框架之Strom:Storm集群环境搭建

    搭建环境 Red Hat Enterprise Linux Server release 7.3 (Maipo)      zookeeper-3.4.11 jdk1.7.0_80      Pyth ...