軟件測試/測試開發(fā)-一篇文章帶你入門HTML

言

上一篇文章我們提到了web的三大主要資源，HTML，CSS以及JS，HTML是提供web頁面內(nèi)容的資源，本文我們就來介紹一下HTML。

HTML

HTML（HyperText Markup Language）是web的核心組成部分之一，是構(gòu)建網(wǎng)頁的基礎(chǔ)語言。HTML使用標(biāo)記來描述文檔的結(jié)構(gòu)，并定義了網(wǎng)頁上的內(nèi)容，包括文本、圖像、鏈接等。

HTML 是一種在 Web 上使用的通用標(biāo)記語言。HTML 允許你格式化文本，添加圖片，創(chuàng)建鏈接、輸入表單、框架和表格等等，并可將之存為文本文件，瀏覽器即可讀取和顯示。

HTML 指的是超文本標(biāo)記語言: HyperText Markup Language
HTML 不是一種編程語言，而是一種標(biāo)記語言
標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)
HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
HTML 文檔包含了HTML 標(biāo)簽及文本內(nèi)容
HTML文檔也叫做 web 頁面

示例

我們可以直接通過示例來介紹HTML的基本使用，首先，我們新建一個html文件，命名可以隨意，但是后綴必須為.html，比如叫study.html。

html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Muller</title>
</head>
<body>
 
<h1>拜仁慕尼黑</h1>
<p>德甲聯(lián)賽霸主</p>
 
</body>
</html>

其中：

<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數(shù)據(jù)，如 <meta charset="utf-8"> 定義網(wǎng)頁編碼格式為 utf-8（由于在大部分瀏覽器中直接輸出中文會出現(xiàn)亂碼，所以要在頭部將字符聲明為UTF-8）
<title> 元素描述了文檔的標(biāo)題
<body> 元素包含了可見的頁面內(nèi)容
<h1> 元素定義一個大標(biāo)題
<p> 元素定義一個段落

我們可以在瀏覽器中打開這個HTML文件，界面如下圖：

HTML各標(biāo)簽詳解

標(biāo)題

HTML 標(biāo)題（Heading）是通過<h1> - <h6> 標(biāo)簽來定義的，示例如下：

html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Muller</title>
</head>
<body>
 
<h1>這是標(biāo)題 1</h1>
<h2>這是標(biāo)題 2</h2>
<h3>這是標(biāo)題 3</h3>
<h4>這是標(biāo)題 4</h4>
<h5>這是標(biāo)題 5</h5>
<h6>這是標(biāo)題 6</h6>
 
</body>
</html>

段落

HTML 段落是通過標(biāo)簽 <p> 來定義的，示例如下：

html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Muller</title>
</head>
<body>
 
<p>德甲霸主xxx。</p>
<p>歐陸豪門xxx。</p>
<p>國家隊貢獻(xiàn)xxx。</p>
 
</body>
</html>

鏈接

HTML 鏈接是通過標(biāo)簽 <a> 來定義的，示例如下：

html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Muller</title>
</head>
<body>
 
<a href="https://testing-studio.com/">這是一個鏈接</a>
 
</body>
</html>

圖像

HTML 圖像是通過標(biāo)簽 <img> 來定義的。注意：圖像的名稱和尺寸是以屬性的形式提供的。示例如下：

html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Muller</title>
</head>
<body>
 
<img src="muller.jpg" width="640" height="640" />
 
</body>
</html>

表格

表格由 <table> 標(biāo)簽來定義。每個表格均有若干行（由 <tr> 標(biāo)簽定義），每行被分割為若干單元格（由 <td> 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。表格的表頭使用 <th> 標(biāo)簽進(jìn)行定義。如果不定義邊框?qū)傩裕砀駥⒉伙@示邊框。有時這很有用，但是大多數(shù)時候，我們希望顯示邊框。使用邊框?qū)傩詠盹@示一個帶有邊框的表格：

html<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

總結(jié)

HTML作為構(gòu)建網(wǎng)頁的基礎(chǔ)語言，為互聯(lián)網(wǎng)世界的發(fā)展奠定了堅實的基礎(chǔ)。通過不斷地學(xué)習(xí)和了解HTML的新特性，我們能夠創(chuàng)造出更加豐富、功能更強(qiáng)大的網(wǎng)頁體驗。本文主要介紹了HTML的基礎(chǔ)知識，各種內(nèi)容如何在HTML上體現(xiàn)，希望本文能夠幫到大家！

獲取更多技術(shù)資料，請點擊！

推薦

Python全棧開發(fā)與自動化測試開發(fā)班 由淺入深實戰(zhàn)進(jìn)階，從小白到高手

以Python全棧開發(fā)為基礎(chǔ)，深入教授自動化測試技能，為學(xué)員打造全面的技術(shù)能力。通過系統(tǒng)學(xué)習(xí)和實際項目實戰(zhàn)，學(xué)員將具備在職場中脫穎而出的競爭力。不僅能夠靈活運用Python進(jìn)行開發(fā)，還能夠保障項目質(zhì)量通過自動化測試手段。這是一個全面提升職業(yè)競爭力的機(jī)會。

課程詳情 Python開發(fā)必備基礎(chǔ)技能與項目實戰(zhàn) Pvthon 編程語言/算法和數(shù)據(jù)結(jié)構(gòu)/面向?qū)ο缶幊蘔eb后端開發(fā)/前端開發(fā)/測試管理平臺項目實戰(zhàn)

人工智能ChatGPT實戰(zhàn) 人工智能輔助學(xué)習(xí)各種開發(fā)和測試技能/Pytorch深度學(xué)框架/平臺開發(fā)實戰(zhàn)

數(shù)據(jù)分析與自動化辦公 數(shù)據(jù)采集/Pandas與數(shù)據(jù)處理技術(shù)/ECharts與數(shù)據(jù)可視化技術(shù)/爬蟲實戰(zhàn)/自動化辦公/批量文件處理

UI自動化測試與高級項目實戰(zhàn) Web自動化測試/App自動化測試/ PageObject設(shè)計模式

接口自動化測試 接口協(xié)議分析/Mock實戰(zhàn)/服務(wù)端接口測試

性能測試 性能測試流程與方法/JMeter 腳本參數(shù)化/Grafana監(jiān)控系統(tǒng)搭建

簡歷指導(dǎo)與模擬面試 1V1簡歷指導(dǎo)/模擬真實面試/測試開發(fā)崗面試全攻略名企私教服務(wù) 名企專家1v1輔導(dǎo)/行業(yè)專家技術(shù)指導(dǎo)/針對性解決工作難題/績效提升輔導(dǎo)與晉升復(fù)盤

課程亮點 名企私教服務(wù) 先學(xué)習(xí)后付費高額獎學(xué)金專屬社群+晚自習(xí)在線答疑 5V1全方位輔導(dǎo)作業(yè)+考試強(qiáng)化學(xué)習(xí)效果簡歷修改模擬面試就業(yè)內(nèi)推面試復(fù)盤

題

在瀏覽器中瀏覽了網(wǎng)頁之后，下一步就是查看其HTML源代碼。盡管這種方法很簡單，但仍然非常值得去做。查看源代碼有兩項作用；它可以幫助你發(fā)現(xiàn)最明顯的安全問題，但最重要的是，它使你能夠為將來的測試建立一個比較基準(zhǔn)。對攻擊失敗之前和之后的源代碼進(jìn)行比較，你就能夠調(diào)整你是輸入，了解到哪些通過了，哪些沒有通過，并再次嘗試。

解決方案

我們推薦使用Firefox，你已經(jīng)在2.1節(jié)中學(xué)會了它的安裝。首先瀏覽應(yīng)用中你所感興趣的網(wǎng)頁。

右擊，并選擇“查看源文件”或從菜單欄選擇“查看”→ "源文件"。

我們推薦Firefox的主要原因是因為它的彩色顯示。如圖3-1所示，使用這種顯示方式，HTML標(biāo)簽和屬性都要容易理解得多。相比之下，Internet Explorer在記事本中打開網(wǎng)頁。就會難讀得多。

討論

作為比較基準(zhǔn)，訪問HTML源代碼會非常有幫助。最常見的Web漏洞涉及到向Web應(yīng)用提供惡意輸入以修改HTML源代碼。在測試這些漏洞時，驗證測試通過或失敗的最簡單的方法就是檢查源代碼是否被惡意更改。

當(dāng)心一切未經(jīng)更改就寫進(jìn)源代碼中的輸入。我們將在第8章討論輸入驗證，然后許多應(yīng)用根本就不對輸入進(jìn)行驗證。在開始討論更加復(fù)雜的內(nèi)容之前，不妨在源代碼中搜索你剛剛提供的輸入。然后，使者將可能的危險值作為輸入，比如HTML標(biāo)簽或JavaScript，并注意它是否未經(jīng)修改就直接顯示在源代碼中。如果是這樣的話，那么這就是個警示信號。

注意，你可以像搜索任何其他Firefox頁面那樣搜索HTML源代碼（根據(jù)具體情況，使用Ctrl+F或（Windows徽標(biāo)鍵）+F）。

在以后的秘訣和章節(jié)中，我們將使用工具來自動搜索、解析和比較源代碼。記住基本要點；通常，可以通過重復(fù)地手動檢查源代碼以檢查怎樣做才能使它通過篩選程序或編碼找出漏洞。

注意：你在這里看到的靜態(tài)源代碼不能反映JavaScript或AJAX功能所做的任何更改。

搜索微信公眾號：TestingStudio霍格沃茲的干貨都很硬核

tml查看工具

瀏覽器開發(fā)者工具 F12

html結(jié)構(gòu)

html標(biāo)簽

標(biāo)簽的類型

標(biāo)簽的屬性

對于雙標(biāo)簽，屬性只能寫在開始標(biāo)簽中。對于單標(biāo)簽，屬性就寫在單標(biāo)簽內(nèi)就好

全局屬性

事件屬性——窗口事件

事件屬性——表單事件

事件屬性——鍵盤事件

事件屬性——鼠標(biāo)事件

事件屬性——多媒體事件

注釋標(biāo)簽

文檔標(biāo)題標(biāo)簽

標(biāo)題標(biāo)簽

段落標(biāo)簽

容器標(biāo)簽

span標(biāo)簽

div標(biāo)簽

圖像標(biāo)簽

超鏈接標(biāo)簽

列表標(biāo)簽——無序列表

列表標(biāo)簽——有序列表

表格標(biāo)簽

表單域

比如注冊的時候，要填一些信息。

action 是指表單要提交到哪兒

表單標(biāo)簽

文本域標(biāo)簽

多行文本輸入控件

下拉菜單

霍格沃茲的測試管理班是專門面向測試與質(zhì)量管理人員的一門課程，通過提升從業(yè)人員的團(tuán)隊管理、項目管理、績效管理、溝通管理等方面的能力，使測試管理人員可以更好的帶領(lǐng)團(tuán)隊、項目以及公司獲得更快的成長。提供 1v1 私教指導(dǎo)，BAT 級別的測試管理大咖量身打造職業(yè)規(guī)劃。

在線咨詢

上一篇：從淺到深的學(xué)習(xí) CSS3陰影(box-shadow)
下一篇：HTML 簡單的<sup> 標(biāo)簽

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商