<!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ǔ)言。
在互聯(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。
在測(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 源碼。
網(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>
標(biāo)簽就是 HTML 語(yǔ)言的發(fā)明者人為定義好的一些“單詞”,不同的標(biāo)簽代表了不同的功能。
標(biāo)簽有兩種常見(jiàn)的形式:
<!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>
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)的全局屬性有:
<!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ò)圖片可以更好地了解。
如上圖所示,該方法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ù)的值。
該方法pop()與相對(duì)push(),它刪除數(shù)組的最后一個(gè)元素并返回刪除的元素。此方法不接受任何參數(shù)。
該方法shift()類(lèi)似于pop(),但是它從數(shù)組中刪除第一個(gè)元素并返回刪除的值。同樣pop(),此方法不接受任何參數(shù)。
就像我們前面討論push()的方法一樣,它將Unshift()在數(shù)組中添加一個(gè)或多個(gè)元素,但是此方法將其添加到數(shù)組的開(kāi)頭/開(kāi)頭,在計(jì)算機(jī)世界中,這通常也被稱為prepend。在將元素添加到數(shù)組的前面之后,該方法unshift()將添加新數(shù)量的已更改的數(shù)組。
在這一點(diǎn)上,我希望上面四種方法的概念足夠清楚。讓我們?cè)俅慰匆幌逻@四種方法的比較,以便我們有一個(gè)更好的理解。
Push和pop處理的陣列的端部,而shift與unshift處理的陣列的開(kāi)始。
推動(dòng)以添加元素,而彈出以刪除元素
推送要求在調(diào)用Pop不需要參數(shù)時(shí)將元素添加為參數(shù)
在添加后,Push返回?cái)?shù)組中元素的數(shù)量,而Pop返回已刪除元素的內(nèi)容
取消移位以添加元素,而移位以刪除元素
取消調(diào)用需要調(diào)用時(shí)要添加為參數(shù)的元素,而Shift不需要參數(shù)時(shí)
Unshift返回添加后數(shù)組中元素的數(shù)量,而Shift返回已刪除元素的內(nèi)容
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。