简单小程序：登录页面（html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    /*总体的样式*/
    <style>
    	/*盒子样式*/
        #box{
            width: 350px; //宽
            height: 450px; //高
            border: 1px solid black; //边框
            border-radius: 10px; //边框弧度
            font-family: 黑体; //字体
            letter-spacing:8px; //段间距
            word-spacing: 10px; //字间距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //内边框
        }
        /*给'注册'赋予样式*/
        .register{
            width:280px ; //宽
            height: 50px; //高
            background-color: skyblue; //背景颜色
            border-radius: 10px; //边框弧度

        }
        /*将所有边框都改变*/
        *{
            border-radius: 5px; 边框弧度
        }
        /*使用class选择器，赋予number宽高和边框*/
        .number{
            width: 185px; //宽
            height: 27px; //高
            border-width: 1px; //边框宽度

        }
        /*id选择器*/
        #two{
            width: 55px; //宽
            border-width: 1px; 边框宽度
        }
        /*id选择器*/
        #phone{
            width: 103px; //宽
        }
        /*class 选择器*/
        .boxs{
            zoom: 75%; //清除浮动
            color: darkgray; //颜色
        }
        /*class选择器*/
        .box_a{
            width: 50px; //宽
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景图片
            background-repeat: no-repeat; // 是否平铺
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相对定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>请注册</h1>
<p style="color: darkgray">已有帐号?<a href="https://im.qq.com/index">登录</a></p>
<form action="" method="post">
    <label for="name">用户名</label>
    <input type="text" placeholder="请输入用户名" id="name" class="number"> <br>
    <label for="phone">手机号</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="请输入手机号" id="phone" class="number"> <br>
    <label for="mima">密 码</label>
    <input type="password" placeholder="请输入密码" id="mima" class="number"> <br>
    <label for="mima">验证码</label>
    <input type="password" placeholder="请输入验证码" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">阅读并接受协议<br>
    </div>
    <input type="submit" value="注册" class="register" >

    </form>
</div>


</body>
</html>
在这里插入图片描述

文节选自霍格沃兹测试开发学社内部教材

WEB 就是 World Wide Web 的缩写，称之为全球广域网，俗称 WWW。对于用户来说其实就是由多个网页组合在一起而形成一种服务。

WEB 前端负责展示一个网站当中前台网页里的内容。而网页是由前端工程师使用 HTML 语言编写而成的一种文件，它里面会包含文字、图片、超链接、音频、视频等等这些内容。

HTML 超文本标记语言（Hyper Text Markup Language）就是用来描述网页的一种计算机语言。

HTML发展

在互联网最初的时候是没有 HTML 的，只能通过网络传输最简单的文字内容。随着用户的要求越来越多，同时也随着技术的不断发展，就出现了一种可以表达文字内容之外的语言 HTML1.0。后来又慢慢发展到了现在的 HTML5，也就是现在常说的 H5。

HTML查看工具

在测试过程中，有时候需要通过工具去查看对应的 HTML 代码。在这里可以用浏览器自带的开发者工具，打开这个工具的快捷键是 F12。

开发者工具是一个相当强大的工具。可以查看修改 HTML，还可以调试 JS，可以修改 CSS，还可以查看网络数据，并且还能进行性能测试，非常的全能。对于 WEB 测试来说，是一个必须要掌握的工具。

要查看 HTML 源码，只需要进入开发者工具的 Elements 界面。在这里可以对 WEB 页面上的元素进行定位，并且查看整个 WEB 页面的 HTML 源码。

HTML基本结构

基本结构

网页是通过 HTML 语言来书写。用 HTML 语言去书写网页有一些结构是默认必须存在的，这个结构就叫做网页（HTML）骨架。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

HTML 基本标签

常见标签

<!DOCTYPE html>：向浏览器声明当前的文档是 HTML 类型。
<html> 与 </html> 之间的文本描述网页，<html>是网页当中最大的一个标签，称之为根标签。
<head> 与 </head> 描述网页头部，里面的内容是写给浏览器看的。
<meta charset="UTF-8"> 表示在设置当前网页的显示编码。
<title> 与 </title> 之间文本为网页的标题，里面的内容会在浏览器的标签页上显示。
<body> 与 </body> 之间的文本是网页主体，里面的内容会显示在浏览器的空白区域内。
<div> 与 </div> 之间定义网页中的一个分隔区块或者一个区域部分。
<h1> 与 </h1> 之间的文本被显示为标题。
<p> 与 </p> 之间的文本被显示为段落。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <div>
        <h1>我的第一个网页</h1>
        <p>网页中的内容</p>
    </div>
</body>
</html>

标签的属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name="value"。

属性的基本格式为：<标签名属性1="属性值1" 属性2="属性值2">

每个标签都可以拥有多个属性。属性必须写在开始标签中，位于标签名的后面。属性之间不区分顺序。标签名与属性、属性与属性之间使用空格隔开。任何属性都有默认值，省略该属性表示使用默认值。

在 HTML 里，属性也有很多种，比如首先有全局属性，全局属性是所有的标签都可以使用的。然后还有事件属性，事件大家可以理解为不同的操作。在不同的操作中，也有特殊的属性可以定义。最后还有各个标签的一些独有的属性。

比如常见的全局属性有:

class：规定元素的类名
id：规定元素的唯一 id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <div id="first" class="content">网页中的内容</div>
</body>
</html>

来霍格沃兹测试开发学社，学习更多软件测试与测试开发的进阶技术，知识点涵盖web自动化测试 app自动化测试、接口自动化测试、测试框架、性能测试、安全测试、持续集成/持续交付/DevOps，测试左移、测试右移、精准测试、测试平台开发、测试管理等内容，课程技术涵盖bash、pytest、junit、selenium、appium、postman、requests、httprunner、jmeter、jenkins、docker、k8s、elk、sonarqube、jacoco、jvm-sandbox等相关技术，全面提升测试开发工程师的技术实力。

获取更多内容：https://qrcode.testing-studio.com/f?from=toutiao&url=https://ceshiren.com/t/topic/16586

avaScript具有许多使程序员可以使用数组的方法。有四种最常用于在数组中添加和删除元素的方法。这四种方法是push()，pop()，shift()，和unshift()。无论是初学者还是高级程序员，有时我们仍然对使用上述四种方法感到困惑。本文将尝试通过图像和示例简化其概念。让我们一个一个地探讨，然后我们将比较每个相似点和不同点。通过图片可以更好地了解。

1.Push

如上图所示，该方法push()将一个或多个元素添加到数组的末尾。这些元素在调用方法时作为参数写入。在计算机世界中，将某些内容添加到其他内容（可以是数组，文件或其他内容）的末尾的术语称为append。将元素添加到数组的末尾后，push()它返回存在的元素数的值。

2.POP

该方法pop()与相对push()，它删除数组的最后一个元素并返回删除的元素。此方法不接受任何参数。

3.Shift

该方法shift()类似于pop()，但是它从数组中删除第一个元素并返回删除的值。同样pop()，此方法不接受任何参数。

4.Unshift

就像我们前面讨论push()的方法一样，它将Unshift()在数组中添加一个或多个元素，但是此方法将其添加到数组的开头/开头，在计算机世界中，这通常也被称为prepend。在将元素添加到数组的前面之后，该方法unshift()将添加新数量的已更改的数组。

5.对比

在这一点上，我希望上面四种方法的概念足够清楚。让我们再次看一下这四种方法的比较，以便我们有一个更好的理解。

Push & Pop vs Shift & Unshift

Push和pop处理的阵列的端部，而shift与unshift处理的阵列的开始。

Push vs Pop

推动以添加元素，而弹出以删除元素

推送要求在调用Pop不需要参数时将元素添加为参数

在添加后，Push返回数组中元素的数量，而Pop返回已删除元素的内容

Unshift vs Shift

取消移位以添加元素，而移位以删除元素

取消调用需要调用时要添加为参数的元素，而Shift不需要参数时

Unshift返回添加后数组中元素的数量，而Shift返回已删除元素的内容

在线咨询

上一篇：适用于Mac的最佳HTML文本编辑器，编码开发必备
下一篇：简单小程序：登录页面（html）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商