整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
上一篇文章我們提到了web的三大主要資源，HTML，CSS以及JS，HTML是提供web頁面內容的資源，本文我們就來介紹一下HTML。
HTML（HyperText Markup Language）是web的核心組成部分之一，是構建網頁的基礎語言。HTML使用標記來描述文檔的結構，并定義了網頁上的內容，包括文本、圖像、鏈接等。
HTML 是一種在 Web 上使用的通用標記語言。HTML 允許你格式化文本，添加圖片，創建鏈接、輸入表單、框架和表格等等，并可將之存為文本文件，瀏覽器即可讀取和顯示。
我們可以直接通過示例來介紹HTML的基本使用，首先，我們新建一個html文件，命名可以隨意，但是后綴必須為.html，比如叫study.html。
html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Muller</title>
</head>
<body>
<h1>拜仁慕尼黑</h1>
<p>德甲聯賽霸主</p>
</body>
</html>
其中：
我們可以在瀏覽器中打開這個HTML文件，界面如下圖：
HTML 標題（Heading）是通過<h1> - <h6> 標簽來定義的，示例如下：
html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Muller</title>
</head>
<body>
<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
<h4>這是標題 4</h4>
<h5>這是標題 5</h5>
<h6>這是標題 6</h6>
</body>
</html>
HTML 段落是通過標簽 <p> 來定義的，示例如下：
html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Muller</title>
</head>
<body>
<p>德甲霸主xxx。</p>
<p>歐陸豪門xxx。</p>
<p>國家隊貢獻xxx。</p>
</body>
</html>
HTML 鏈接是通過標簽 <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 圖像是通過標簽 <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> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。表格的表頭使用 <th> 標簽進行定義。如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。使用邊框屬性來顯示一個帶有邊框的表格：
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>
HTML作為構建網頁的基礎語言，為互聯網世界的發展奠定了堅實的基礎。通過不斷地學習和了解HTML的新特性，我們能夠創造出更加豐富、功能更強大的網頁體驗。本文主要介紹了HTML的基礎知識，各種內容如何在HTML上體現，希望本文能夠幫到大家！
獲取更多技術資料，請點擊！
推薦
Python全棧開發與自動化測試開發班 由淺入深實戰進階，從小白到高手
以Python全棧開發為基礎，深入教授自動化測試技能，為學員打造全面的技術能力。通過系統學習和實際項目實戰，學員將具備在職場中脫穎而出的競爭力。不僅能夠靈活運用Python進行開發，還能夠保障項目質量通過自動化測試手段。這是一個全面提升職業競爭力的機會。
課程詳情 Python開發必備基礎技能與項目實戰 Pvthon 編程語言/算法和數據結構/面向對象編程Web后端開發/前端開發/測試管理平臺項目實戰
人工智能ChatGPT實戰 人工智能輔助學習各種開發和測試技能/Pytorch深度學框架/平臺開發實戰
數據分析與自動化辦公 數據采集/Pandas與數據處理技術/ECharts與數據可視化技術/爬蟲實戰/自動化辦公/批量文件處理
UI自動化測試與高級項目實戰 Web自動化測試/App自動化測試/ PageObject設計模式
接口自動化測試 接口協議分析/Mock實戰/服務端接口測試
性能測試 性能測試流程與方法/JMeter 腳本參數化/Grafana監控系統搭建
簡歷指導與模擬面試 1V1簡歷指導/模擬真實面試/測試開發崗面試全攻略名企私教服務 名企專家1v1輔導/行業專家技術指導/針對性解決工作難題/績效提升輔導與晉升復盤
課程亮點 名企私教服務 先學習后付費 高額獎學金 專屬社群+晚自習在線答疑 5V1全方位輔導作業+考試強化學習效果 簡歷修改 模擬面試 就業內推 面試復盤
題
在瀏覽器中瀏覽了網頁之后，下一步就是查看其HTML源代碼。盡管這種方法很簡單，但仍然非常值得去做。查看源代碼有兩項作用；它可以幫助你發現最明顯的安全問題，但最重要的是，它使你能夠為將來的測試建立一個比較基準。對攻擊失敗之前和之后的源代碼進行比較，你就能夠調整你是輸入，了解到哪些通過了，哪些沒有通過，并再次嘗試。
解決方案
我們推薦使用Firefox，你已經在2.1節中學會了它的安裝。首先瀏覽應用中你所感興趣的網頁。
右擊，并選擇“查看源文件”或從菜單欄選擇“查看”→ "源文件"。
我們推薦Firefox的主要原因是因為它的彩色顯示。如圖3-1所示，使用這種顯示方式，HTML標簽和屬性都要容易理解得多。相比之下，Internet Explorer在記事本中打開網頁。就會難讀得多。
討論
作為比較基準，訪問HTML源代碼會非常有幫助。最常見的Web漏洞涉及到向Web應用提供惡意輸入以修改HTML源代碼。在測試這些漏洞時，驗證測試通過或失敗的最簡單的方法就是檢查源代碼是否被惡意更改。
當心一切未經更改就寫進源代碼中的輸入。我們將在第8章討論輸入驗證，然后許多應用根本就不對輸入進行驗證。在開始討論更加復雜的內容之前，不妨在源代碼中搜索你剛剛提供的輸入。然后，使者將可能的危險值作為輸入，比如HTML標簽或JavaScript，并注意它是否未經修改就直接顯示在源代碼中。如果是這樣的話，那么這就是個警示信號。
注意，你可以像搜索任何其他Firefox頁面那樣搜索HTML源代碼（根據具體情況，使用Ctrl+F或（Windows徽標鍵）+F）。
在以后的秘訣和章節中，我們將使用工具來自動搜索、解析和比較源代碼。記住基本要點；通常，可以通過重復地手動檢查源代碼以檢查怎樣做才能使它通過篩選程序或編碼找出漏洞。
注意：你在這里看到的靜態源代碼不能反映JavaScript或AJAX功能所做的任何更改。
搜索微信公眾號：TestingStudio霍格沃茲的干貨都很硬核
瀏覽器開發者工具 F12
對于雙標簽，屬性只能寫在開始標簽中。對于單標簽，屬性就寫在單標簽內就好
比如注冊的時候，要填一些信息。
action 是指表單要提交到哪兒
多行文本輸入控件
霍格沃茲的測試管理班是專門面向測試與質量管理人員的一門課程，通過提升從業人員的團隊管理、項目管理、績效管理、溝通管理等方面的能力，使測試管理人員可以更好的帶領團隊、項目以及公司獲得更快的成長。提供 1v1 私教指導，BAT 級別的測試管理大咖量身打造職業規劃。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
