Web基礎：HTML快速入門

HTML基礎語法

HTML（超文本標記語言） 是用于創建網頁內容的 標記語言，通過定義頁面的 結構和內容 來告訴瀏覽器如何呈現網頁。

超文本（Hypertext） 是一種通過 鏈接（Hyperlinks） 將不同文本、圖像、視頻等內容關聯起來的信息組織形式，其核心特點是 非線性 和 可擴展性。

為什么需要掌握HTML？

學習Web滲透需要掌握HTML，因為HTML是網頁內容的結構語言，滲透測試的核心目標是發現并利用網站漏洞。通過HTML標簽（如<form>、<input>、<a>）可以：

分析頁面邏輯：快速定位漏洞入口（如登錄表單、上傳功能）；
構造惡意請求：直接篡改HTML參數（如SQL注入、XSS攻擊）或繞過前端驗證；
繞過安全防護：利用HTML結構識別WAF規則盲區或隱藏接口；

html代碼編輯方式

文本編輯器

HTML代碼的編輯方式多種多樣，可以根據需求、場景和技術水平選擇不同的工具或方法。

Visual Studio Code（推薦，功能強大且免費）
Sublime Text（輕量高效）

在線編輯器

JSFiddle
CodeSandbox

我建議從CodePen開始。它用戶友好，非常適合初學者。

讓我們編寫我們的第一個HTML代碼！這里有一個簡單的例子：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>我的第一個網頁</title></head><body><h1>你好，世界！</h1><p>這是我的第一個HTML頁面。</p></body></html>

代碼含義如下：

<!DOCTYPE html> 告訴瀏覽器這是一個HTML5文檔。
<html> 是HTML頁面的根元素。
<head> 包含關于文檔的元信息。
<title> 指定頁面的標題（顯示在瀏覽器的標題欄中）。
<body> 定義文檔的正文，其中包含可見內容。
<h1> 定義一個大標題。
<p> 定義一個段落。

在Codepen中查看代碼效果：

HTML元素

HTML使用“元素”來構建內容結構。以下是一些常見的HTML元素：

讓我們看看一些實際的例子：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>我的第一個網頁</title>
</head><h1>我最喜歡的動物</h1><p>以下是我最喜歡的三種動物：</p><ol><li>貓</li><li>狗</li><li>昆</li></ol><p>了解更多關于<a href="https://www.baidu.com">動物</a>的信息。</p></html>

這段代碼創建了一個標題、一個段落、一個動物的有序列表和一個指向百度的鏈接，以了解更多關于動物的信息。效果如下：

網絡瀏覽器就像是HTML的翻譯。它們讀取HTML代碼并將其渲染成我們看到的視覺網頁。不同的瀏覽器可能會稍微不同地渲染相同的HTML，這就是為什么要在多個瀏覽器上測試你

HTML標簽、屬性和元素

HTML由三個關鍵組件組成：

標簽：這些是HTML的構建塊。它們總是被包含在尖括號中，比如<p>代表段落。
屬性：這些提供了關于元素的額外信息。它們總是在開始標簽中指定。
元素：一個元素是從開始標簽到結束標簽的所有內容

如上述代碼中提到的例子：

<a href="https://www.baidu.com" title="訪問百度">動物</a>

在這個例子中：

<a>是標簽（代表超鏈接）
href和title是屬性
整行是一個元素

基本HTML結構

下面是一個代碼片段，展示你可能在這些編輯器之一中設置的基本HTML結構：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我驚人的網站</title><link rel="stylesheet" href="styles.css">
</head><body><header><h1>歡迎來到我驚人的網站</h1><nav><ul><li><a href="#home">首頁</a></li><li><a href="#about">關于</a></li><li><a href="#contact">聯系方式</a></li></ul></nav></header><main>        <section id="home"><h2>首頁</h2><p>歡迎來到我的網站！隨意探索。</p></section><!-- 更多部分將在這里 --></main><footer><p>&copy; 2023 我驚人的網站。保留所有權利。</p></footer><script src="script.js"></script>
</body></html>

這段代碼為網站設置了一個基本結構，包括頁頭、導航菜單、主要內容區域和頁腳。

<nav> 是 HTML5 引入的語義化標簽，用于定義頁面的導航部分。

HTML基礎標簽

現在，讓我們探索一些最常用的HTML標簽。我會為每個標簽提供示例和解釋。

1. 標題

HTML提供了六級標題，從 <h1>到 <h6>。

<h1>這是一個主標題</h1>
<h2>這是一個次要標題</h2>
<h3>這是一個三級標題</h3>

這些標簽不僅使文本變大，還幫助搜索引擎理解你的內容結構。把它們想象成書中的章節標題！

2. 段落

標簽用于定義段落。

<p>這是一個段落。它可以包含多個句子，甚至在你HTML代碼中跨越多行，但在瀏覽器中會顯示為單一的文本塊。</p>

小貼士：總是使用 <p> 標簽來定義段落，而不僅僅是用于間距。這有助于提高可訪問性和SEO！效果：

3. 鏈接

鏈接是使用 <a>（錨點）標簽創建的。

<a href="https://www.example.com">點擊這里訪問Example.com</a>

href 屬性指定了鏈接所指向的頁面URL鏈接就像是網站中的門——它們使用戶可以從一個頁面導航到另一個頁面！

效果：

4. 圖像

圖像是通過 <img> 標簽插入的。

<img src="cat.jpg" alt="一只可愛的小貓坐在窗臺上">

src 屬性指定了圖像文件的路徑，而 alt 提供了屏幕閱讀器使用或圖像加載失敗時的替代文本。總是包含描述性的替代文本——這就像是給你們的圖像一個聲音！

5. 列表

HTML支持有序（編號）列表和無序列表（項目符號）。

無序列表：

<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>櫻桃</li>
</ul>

有序列表：

<ol>
<li>起床</li>
<li>刷牙</li>
<li>吃早餐</li>
</ol>

列表非常適合組織信息。

6. 強調和重要

使用 <em> 來強調（通常顯示為斜體），使用 <strong> 來表示重要（通常顯示為粗體）。

<p>我<em>真的</em>喜歡HTML。這對于網頁開發是<strong>至關重要</strong>的！</p>

7. 換行和水平線

有時你需要添加一個換行而不開始一個新的段落。這時 <br> 就派上用場了：

<p>玫瑰是紅的，<br>紫羅蘭是藍的，<br>HTML很棒，<br>你也是！</p>

要添加一條水平線，使用 <hr> 標簽：

<p>玫瑰是紅的，<br>紫羅蘭是藍的，<hr><br>HTML很棒，<br>你也是！</p>

把 <br> 想象成鍵盤上的軟回車，而 <hr> 就像是在紙上畫一條線來分隔部分。

強制性結束標簽

大多數HTML元素都需要一個開始標簽和一個結束標簽。然而，有些元素是自閉合的。這些元素通常不包含任何內容。下面是一個表格，列出了一些常見元素以及它們是否需要結束標簽：

HTML 屬性

HTML 屬性是用于調整 HTML 元素行為或顯示的標記語言的一部分。它總是包含在元素的開始標簽中，通常由一個名稱和一個值組成。讓我們看看一些實際的例子，以更好地理解屬性是如何工作的：

1. href 屬性

<a href="https://www.example.com">訪問 Example.com</a>

在這個例子中，href 是屬性。它告訴瀏覽器點擊鏈接時應該去哪里。

2. src 屬性

<img src="cute-puppy.jpg" alt="一只可愛的狗狗">

在這里，有兩個屬性：

src：指定圖像文件的路徑。
alt：如果圖像無法顯示，提供替代文本。

3. style 屬性

<p style="color: blue; font-size: 16px;">這是一個藍色的段落。</p>

style 屬性允許我們直接向元素添加 CSS。

HTML 全局屬性

全局屬性可以用于任何 HTML 元素。讓我們看看一些最常見的內容：

屬性	描述	示例
class	為元素指定一個或多個類名	`<div class="header">`
id	為元素指定一個唯一的 ID	`<p id="intro">`
style	為元素指定一個內聯 CSS 樣式	`<p style="color:blue;">`
title	為元素指定額外信息	`<abbr title="世界衛生組織">WHO</abbr>`

此時有以下例子：

<a href="https://www.example.com" target="_blank" title="訪問 Example.com">點擊我！</a>

在這個例子中，我們使用了三個屬性：

href：指定鏈接去的頁面的 URL。
target：指定在哪里打開鏈接的文檔。
title：提供關于鏈接的額外信息。

通用屬性

通用屬性是可以用于大多數（但不是全部）HTML 元素的屬性。它們不像全局屬性那樣通用，但仍然非常靈活。以下是一些例子：

屬性	描述	示例
onclick	指定當元素被點擊時運行的腳本	`<button onclick="alert('你好！')">點擊我</button>`
tabindex	指定元素的鍵盤導航順序	`<input type="text" tabindex="1">`
accesskey	指定激活/聚焦元素的快捷鍵	`<a href="/" accesskey="h">首頁</a>`

HTML - 塊級和內聯元素

塊級元素

想象我們正在用積木建造一座房子，其中一些積木很大，獨自占據了一整行。這些就像是HTML中的塊級元素。它們從新的一行開始，并占據全部可用的寬度。

常見的塊級元素：

<div>我是一個塊級元素</div>
<p>我也是一個塊級元素</p>
<h1>我也是一個標題，同時也是塊級元素！</h1>

運行這段代碼時，每個元素都會出現在新的一行上。

下面是一些常見塊級元素的表格：

內聯元素

現在，讓我們想象一下那些可以并排放在同一行上的積木部件。這些就像是HTML中的內聯元素。它們只占據必要的寬度，并且不會從新的一行開始。

這里有一個例子：

<span>我是一個內聯元素</span>
<a href="#">我是一個鏈接，同時也是內聯的</a>
<strong>我是加粗的，也是內聯的！</strong>

這些元素都會出現在同一行上（如果有足夠的空間）。

下面是一些常見內聯元素的表格：

使用 `<span>` 標簽分組

<span> 標簽就像是一個小而透明的容器，你可以用來分組內聯元素，甚至是在塊級元素內的文本部分。

這里有一個例子：

<p>
我喜歡 <span style="color: blue;">藍色</span> 和
<span style="color: green;">綠色</span> 顏色。
</p>

在這個例子中，我們使用了 <span> 來將不同的顏色應用到段落中的特定單詞。

記住，<div> 是用來分組塊級元素（或創建塊級分組）的，而 <span> 是用來分組內聯元素或文本部分的。

Iframe：通往其他世界的窗口

Iframe，全稱“inline frame”，是一個HTML元素，允許你在當前HTML文檔中嵌入另一個HTML文檔。它就像在網頁上創建了一個小窗口，展示了互聯網上其他地方的內容。

語法

Iframe的基本語法出奇地簡單：

<iframe src="URL"></iframe>

在這里，src是一個屬性，用于指定你想嵌入的頁面的URL。

iframes的示例

讓我們通過一些實際示例來更好地理解iframes。

1. 基礎Iframe

<iframe src="http://www.bilibili.com"?height="1000" width="800"></iframe>

這段代碼將嵌入"url"的內容到你的網頁中。

我們設置了一個寬為800，高為1000顯示文檔為b站（也可以選擇本地html文檔）的內聯框架。

如果我們把鏈接換成www.baidu.com, 就會受到策略限制,無法正常顯示:

這是因為百度使用了 X-Frame-Options 響應頭來限制其在 iframe 中的嵌套。X-Frame-Options 是一種安全策略，可以由網站的服務器設置，用于控制頁面是否允許在 iframe 中嵌套。當網站設置了 X-Frame-Options 為 DENY 或 SAMEORIGIN，瀏覽器將不允許將該頁面在 iframe 中加載，以防止點擊劫持等安全問題。

除此之外iframe的使用有其他需要注意的地方，可以參考如下文章：

https://juejin.cn/post/7261808673035075643

表單：交互式網頁的門戶

HTML表單的功能

想象你在一個咖啡店里，你想點你最喜歡的拿鐵。你需要告訴咖啡師你想要什么，對吧？HTML表單就像是這種對話的數字版本。它們允許用戶輸入信息并將其發送到網頁服務器進行處理。

表單是網頁上用戶交互的支柱。它們用于：

收集用戶數據（如訂閱新聞通訊）
登錄網站
搜索信息
進行在線購買
提交反饋或評論

沒有表單，網頁將是一個相當無聊的單向信息通道。表單使網頁變得交互和動態！

創建表單

讓我們創建一個基本的HTML表單

<form action="/submit-form" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required><label for="email">電子郵件：</label>
<input type="email" id="email" name="email" required><input type="submit" value="提交">
</form>

讓我們分解一下：

<form> 標簽是我們所有表單元素的容器。
action="/submit-form" 告訴瀏覽器在表單提交時將數據發送到哪里。
method="post" 指定如何發送數據（在這個例子中，數據以HTTP POST請求的形式發送）。
<label> 標簽為我們的輸入字段提供描述。
<input> 標簽創建實際的輸入字段。
<input> 中的 type 屬性指定輸入的類型（文本、電子郵件等）。
required 屬性使字段成為必填項。
最后一個 <input> 的 type="submit" 創建了一個提交按鈕。

一個簡單的搜索表單

<form action="/search" method="get">
<input type="text" name="query" placeholder="搜索...">
<input type="submit" value="搜索">
</form>

這個表單創建了一個簡單的搜索框和一個提交按鈕。當用戶輸入查詢并點擊“搜索”時，它會發送一個GET請求到“/search”，并將查詢作為參數。

一個聯系表單

<form action="/search" method="get">
<input type="text" name="query" placeholder="搜索...">
<input type="submit" value="搜索">
</form>

這個表單包括一個文本區域，用于撰寫較長的消息，非常適合聯系頁面！

HTML表單元素

表單不僅僅只是文本輸入。有一整套工具箱中的元素可以用來創建豐富、交互式的表單。讓我們探索一些：

每個元素都有自己獨特的屬性和用例。隨著你在網頁開發旅程中的進步，你將發現自己會在創造性的組合中使用這些元素來構建復雜且用戶友好的表單。

HTML表單屬性

屬性就像是我們給表單元素的特殊指令。它們幫助控制表單的行為以及它與用戶的交互。以下是一些重要的屬性：

當正確使用時，這些屬性可以非常強大。例如，在包含敏感信息的表單上設置 autocomplete="off" 可以通過防止瀏覽器存儲輸入數據來增強安全性。

HTML表單示例代碼

現在，讓我們將所有內容放在一起，展示一個比較復雜的注冊表單示例：

<form action="/register" method="post">
<fieldset>
<legend>個人信息</legend><label for="fullname">全名：</label>
<input type="text" id="fullname" name="fullname" required><label for="email">電子郵件：</label>
<input type="email" id="email" name="email" required><label for="birthdate">出生日期：</label>
<input type="date" id="birthdate" name="birthdate"><label for="gender">性別：</label>
<select id="gender" name="gender">
<option value="">選擇...</option>
<option value="male">男性</option>
<option value="female">女性</option>
<option value="other">其他</option>
</select>
</fieldset><fieldset>
<legend>賬戶詳情</legend><label for="username">用戶名：</label>
<input type="text" id="username" name="username" required><label for="password">密碼：</label>
<input type="password" id="password" name="password" required><label for="confirmpassword">確認密碼：</label>
<input type="password" id="confirmpassword" name="confirmpassword" required>
</fieldset><fieldset>
<legend>偏好設置</legend><label>
<input type="checkbox" name="newsletter" value="yes"> 訂閱新聞通訊
</label><p>喜歡的顏色：</p>
<label>
<input type="radio" name="color" value="red"> 紅色
</label>
<label>
<input type="radio" name="color" value="blue"> 藍色
</label>
<label>
<input type="radio" name="color" value="green"> 綠色
</label>
</fieldset><input type="submit" value="注冊">
</form>

這個表單展示了我們討論的各種表單元素和屬性的使用。它被組織成三個字段集：個人信息、賬戶詳情和偏好設置。每個字段集將相關的輸入分組，使表單更加有序且易于理解。