簡單小程序：登錄頁面（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 基本標簽

標簽

標簽就是 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小時內與您取得聯系。

整合營銷服務商