簡(jiǎn)單小程序：登錄頁(yè)面（html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁(yè)面</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; //內(nèi)邊框
        }
        /*給'注冊(cè)'賦予樣式*/
        .register{
            width:280px ; //寬
            height: 50px; //高
            background-color: skyblue; //背景顏色
            border-radius: 10px; //邊框弧度

        }
        /*將所有邊框都改變*/
        *{
            border-radius: 5px; 邊框弧度
        }
        /*使用class選擇器，賦予number寬高和邊框*/
        .number{
            width: 185px; //寬
            height: 27px; //高
            border-width: 1px; //邊框?qū)挾?
        }
        /*id選擇器*/
        #two{
            width: 55px; //寬
            border-width: 1px; 邊框?qū)挾?        }
        /*id選擇器*/
        #phone{
            width: 103px; //寬
        }
        /*class 選擇器*/
        .boxs{
            zoom: 75%; //清除浮動(dòng)
            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; //定位 相對(duì)定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>請(qǐng)注冊(cè)</h1>
<p style="color: darkgray">已有帳號(hào)?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
    <label for="name">用戶名</label>
    <input type="text" placeholder="請(qǐng)輸入用戶名" id="name" class="number"> <br>
    <label for="phone">手機(jī)號(hào)</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)" id="phone" class="number"> <br>
    <label for="mima">密?碼</label>
    <input type="password" placeholder="請(qǐng)輸入密碼" id="mima" class="number"> <br>
    <label for="mima">驗(yàn)證碼</label>
    <input type="password" placeholder="請(qǐng)輸入驗(yàn)證碼" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">閱讀并接受協(xié)議<br>
    </div>
    <input type="submit" value="注冊(cè)" class="register" >

    </form>
</div>


</body>
</html>
在這里插入圖片描述

文節(jié)選自霍格沃茲測(cè)試開(kāi)發(fā)學(xué)社內(nèi)部教材

WEB 就是 World Wide Web 的縮寫(xiě)，稱之為全球廣域網(wǎng)，俗稱 WWW。對(duì)于用戶來(lái)說(shuō)其實(shí)就是由多個(gè)網(wǎng)頁(yè)組合在一起而形成一種服務(wù)。

WEB 前端負(fù)責(zé)展示一個(gè)網(wǎng)站當(dāng)中前臺(tái)網(wǎng)頁(yè)里的內(nèi)容。而網(wǎng)頁(yè)是由前端工程師使用 HTML 語(yǔ)言編寫(xiě)而成的一種文件，它里面會(huì)包含文字、圖片、超鏈接、音頻、視頻等等這些內(nèi)容。

HTML 超文本標(biāo)記語(yǔ)言（Hyper Text Markup Language）就是用來(lái)描述網(wǎng)頁(yè)的一種計(jì)算機(jī)語(yǔ)言。

HTML發(fā)展

在互聯(lián)網(wǎng)最初的時(shí)候是沒(méi)有 HTML 的，只能通過(guò)網(wǎng)絡(luò)傳輸最簡(jiǎn)單的文字內(nèi)容。隨著用戶的要求越來(lái)越多，同時(shí)也隨著技術(shù)的不斷發(fā)展，就出現(xiàn)了一種可以表達(dá)文字內(nèi)容之外的語(yǔ)言 HTML1.0。后來(lái)又慢慢發(fā)展到了現(xiàn)在的 HTML5，也就是現(xiàn)在常說(shuō)的 H5。

HTML查看工具

在測(cè)試過(guò)程中，有時(shí)候需要通過(guò)工具去查看對(duì)應(yīng)的 HTML 代碼。在這里可以用瀏覽器自帶的開(kāi)發(fā)者工具，打開(kāi)這個(gè)工具的快捷鍵是 F12。

開(kāi)發(fā)者工具是一個(gè)相當(dāng)強(qiáng)大的工具。可以查看修改 HTML，還可以調(diào)試 JS，可以修改 CSS，還可以查看網(wǎng)絡(luò)數(shù)據(jù)，并且還能進(jìn)行性能測(cè)試，非常的全能。對(duì)于 WEB 測(cè)試來(lái)說(shuō)，是一個(gè)必須要掌握的工具。

要查看 HTML 源碼，只需要進(jìn)入開(kāi)發(fā)者工具的 Elements 界面。在這里可以對(duì) WEB 頁(yè)面上的元素進(jìn)行定位，并且查看整個(gè) WEB 頁(yè)面的 HTML 源碼。

HTML基本結(jié)構(gòu)

基本結(jié)構(gòu)

網(wǎng)頁(yè)是通過(guò) HTML 語(yǔ)言來(lái)書(shū)寫(xiě)。用 HTML 語(yǔ)言去書(shū)寫(xiě)網(wǎng)頁(yè)有一些結(jié)構(gòu)是默認(rèn)必須存在的，這個(gè)結(jié)構(gòu)就叫做網(wǎng)頁(yè)（HTML）骨架。

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

</body>
</html>

HTML 基本標(biāo)簽

標(biāo)簽

標(biāo)簽就是 HTML 語(yǔ)言的發(fā)明者人為定義好的一些“單詞”，不同的標(biāo)簽代表了不同的功能。

標(biāo)簽有兩種常見(jiàn)的形式：

單標(biāo)簽：<標(biāo)簽名 />
雙標(biāo)簽：<標(biāo)簽名稱>

常見(jiàn)標(biāo)簽

<!DOCTYPE html>：向?yàn)g覽器聲明當(dāng)前的文檔是 HTML 類(lèi)型。
<html> 與 </html> 之間的文本描述網(wǎng)頁(yè)，<html>是網(wǎng)頁(yè)當(dāng)中最大的一個(gè)標(biāo)簽，稱之為根標(biāo)簽。
<head> 與 </head> 描述網(wǎng)頁(yè)頭部，里面的內(nèi)容是寫(xiě)給瀏覽器看的。
<meta charset="UTF-8"> 表示在設(shè)置當(dāng)前網(wǎng)頁(yè)的顯示編碼。
<title> 與 </title> 之間文本為網(wǎng)頁(yè)的標(biāo)題，里面的內(nèi)容會(huì)在瀏覽器的標(biāo)簽頁(yè)上顯示。
<body> 與 </body> 之間的文本是網(wǎng)頁(yè)主體，里面的內(nèi)容會(huì)顯示在瀏覽器的空白區(qū)域內(nèi)。
<div> 與 </div> 之間定義網(wǎng)頁(yè)中的一個(gè)分隔區(qū)塊或者一個(gè)區(qū)域部分。
<h1> 與 </h1> 之間的文本被顯示為標(biāo)題。
<p> 與 </p> 之間的文本被顯示為段落。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>網(wǎng)頁(yè)標(biāo)題</title>
</head>
<body>
    <div>
        <h1>我的第一個(gè)網(wǎng)頁(yè)</h1>
        <p>網(wǎng)頁(yè)中的內(nèi)容</p>
    </div>
</body>
</html>

標(biāo)簽的屬性

HTML 標(biāo)簽可以擁有屬性。屬性提供了有關(guān) HTML 元素的更多的信息。屬性總是以名稱/值對(duì)的形式出現(xiàn)，比如：name="value"。

屬性的基本格式為：<標(biāo)簽名屬性1="屬性值1" 屬性2="屬性值2">

每個(gè)標(biāo)簽都可以擁有多個(gè)屬性。屬性必須寫(xiě)在開(kāi)始標(biāo)簽中，位于標(biāo)簽名的后面。屬性之間不區(qū)分順序。標(biāo)簽名與屬性、屬性與屬性之間使用空格隔開(kāi)。任何屬性都有默認(rèn)值，省略該屬性表示使用默認(rèn)值。

在 HTML 里，屬性也有很多種，比如首先有全局屬性，全局屬性是所有的標(biāo)簽都可以使用的。然后還有事件屬性，事件大家可以理解為不同的操作。在不同的操作中，也有特殊的屬性可以定義。最后還有各個(gè)標(biāo)簽的一些獨(dú)有的屬性。

比如常見(jiàn)的全局屬性有:

class：規(guī)定元素的類(lèi)名
id：規(guī)定元素的唯一 id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>網(wǎng)頁(yè)標(biāo)題</title>
</head>
<body>
    <div id="first" class="content">網(wǎng)頁(yè)中的內(nèi)容</div>
</body>
</html>

來(lái)霍格沃茲測(cè)試開(kāi)發(fā)學(xué)社，學(xué)習(xí)更多軟件測(cè)試與測(cè)試開(kāi)發(fā)的進(jìn)階技術(shù)，知識(shí)點(diǎn)涵蓋web自動(dòng)化測(cè)試 app自動(dòng)化測(cè)試、接口自動(dòng)化測(cè)試、測(cè)試框架、性能測(cè)試、安全測(cè)試、持續(xù)集成/持續(xù)交付/DevOps，測(cè)試左移、測(cè)試右移、精準(zhǔn)測(cè)試、測(cè)試平臺(tái)開(kāi)發(fā)、測(cè)試管理等內(nèi)容，課程技術(shù)涵蓋bash、pytest、junit、selenium、appium、postman、requests、httprunner、jmeter、jenkins、docker、k8s、elk、sonarqube、jacoco、jvm-sandbox等相關(guān)技術(shù)，全面提升測(cè)試開(kāi)發(fā)工程師的技術(shù)實(shí)力。

獲取更多內(nèi)容：https://qrcode.testing-studio.com/f?from=toutiao&url=https://ceshiren.com/t/topic/16586

avaScript具有許多使程序員可以使用數(shù)組的方法。有四種最常用于在數(shù)組中添加和刪除元素的方法。這四種方法是push()，pop()，shift()，和unshift()。無(wú)論是初學(xué)者還是高級(jí)程序員，有時(shí)我們?nèi)匀粚?duì)使用上述四種方法感到困惑。本文將嘗試通過(guò)圖像和示例簡(jiǎn)化其概念。讓我們一個(gè)一個(gè)地探討，然后我們將比較每個(gè)相似點(diǎn)和不同點(diǎn)。通過(guò)圖片可以更好地了解。

1.Push

如上圖所示，該方法push()將一個(gè)或多個(gè)元素添加到數(shù)組的末尾。這些元素在調(diào)用方法時(shí)作為參數(shù)寫(xiě)入。在計(jì)算機(jī)世界中，將某些內(nèi)容添加到其他內(nèi)容（可以是數(shù)組，文件或其他內(nèi)容）的末尾的術(shù)語(yǔ)稱為append。將元素添加到數(shù)組的末尾后，push()它返回存在的元素?cái)?shù)的值。

2.POP

該方法pop()與相對(duì)push()，它刪除數(shù)組的最后一個(gè)元素并返回刪除的元素。此方法不接受任何參數(shù)。

3.Shift

該方法shift()類(lèi)似于pop()，但是它從數(shù)組中刪除第一個(gè)元素并返回刪除的值。同樣pop()，此方法不接受任何參數(shù)。

4.Unshift

就像我們前面討論push()的方法一樣，它將Unshift()在數(shù)組中添加一個(gè)或多個(gè)元素，但是此方法將其添加到數(shù)組的開(kāi)頭/開(kāi)頭，在計(jì)算機(jī)世界中，這通常也被稱為prepend。在將元素添加到數(shù)組的前面之后，該方法unshift()將添加新數(shù)量的已更改的數(shù)組。

5.對(duì)比

在這一點(diǎn)上，我希望上面四種方法的概念足夠清楚。讓我們?cè)俅慰匆幌逻@四種方法的比較，以便我們有一個(gè)更好的理解。

Push & Pop vs Shift & Unshift

Push和pop處理的陣列的端部，而shift與unshift處理的陣列的開(kāi)始。

Push vs Pop

推動(dòng)以添加元素，而彈出以刪除元素

推送要求在調(diào)用Pop不需要參數(shù)時(shí)將元素添加為參數(shù)

在添加后，Push返回?cái)?shù)組中元素的數(shù)量，而Pop返回已刪除元素的內(nèi)容

Unshift vs Shift

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

取消調(diào)用需要調(diào)用時(shí)要添加為參數(shù)的元素，而Shift不需要參數(shù)時(shí)

Unshift返回添加后數(shù)組中元素的數(shù)量，而Shift返回已刪除元素的內(nèi)容

在線咨詢

上一篇：適用于Mac的最佳HTML文本編輯器，編碼開(kāi)發(fā)必備
下一篇：簡(jiǎn)單小程序：登錄頁(yè)面（html）

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商