誰來教我滲透測試——黑客必須掌握的HTML基礎（一）
小夥伴們，好幾天不見了，這一周菜鳥小白工作很忙，所以沒有每天更新學習內容，但是菜鳥小白的學習是沒有停下來的，只是沒有時間來整理學習筆記了。現在就將菜鳥小白這兩天學習的HTML基礎和大家分享，其中還會拿一些標籤進行舉例，顯示效果。
HTML概述
HTML語言是一種標籤語言，它不需要編譯，可以直接由瀏覽器執行。在標準網頁設計中HTML負責填充網頁的內容，HTML編寫的超文本文檔（文件）稱之為HTML文檔（網頁），它包含了一些html元素，使用html或者htm為文件名後綴，能獨立於各種操作系統平台，如Unix、Windows等
HTML文檔結構
標準的html文檔是由標籤和要顯示在網頁上的內容組成。HTML用於描述功能的符號成為「標籤」，如<html>、<body>、<table>等。HTML標籤規定HTML文檔的邏輯結構，並且控制文檔的顯示格式，然後由瀏覽器來負責解釋並顯示頁面。通過使用標籤可以區分文本文件的各個組成部分，對頁面上的文字、表格、圖片等多媒體數據所出現的未知、形式、順序及網頁間的超鏈接關係進行設定。
HTML標籤
標籤都是封裝在一對尖括號「<……>」之中。標籤只改變網頁的顯示方式，本身不會顯示在窗口中。HTML文檔中最先出現的標籤是<html>標籤。<html>標籤是文檔標識符，它是成對出現的，首標籤<html>和尾標籤</html>分別位於文檔的最前面和最後面，明確地表示文檔是以超文本標識語言（HTML）編寫的。該標籤不帶任何屬性
<html>……</html>之間有如下標籤：
頭部標籤<head>……</head>
head是英文「頭」的意思。習慣上用戶把HTML文檔分為文檔頭和文檔主體兩部分。文檔主體部分就是在web瀏覽器窗口的用戶區內看到的內容，而文檔頭部分用來規定該文檔的標題（出現在web瀏覽器窗口的標題欄中）和文檔的一些屬性。<head>標籤對的作用就是控制文檔的頭部信息。中間可以使用<title>……</title>、<script>……</script>標籤對，在此標籤中間可以HTML文檔的標籤是可以嵌套的，即在一對標籤中可以嵌入另外一對子標籤，用來規定母標籤所含範圍的屬性或其中某一部分內容，嵌套在<head>……</head>標籤對中使用的主要有<title>標籤
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
菜鳥小白的學習分享
</head>
</html>
保存為HTML文件後顯示如下：
標題標籤<title>……</title>
<title>標籤是成對出現的，用以規定HTML文檔的標題。在<title>……</title>之間的內容將顯示在web瀏覽器窗口的標題欄中。另外，<title>……</title>標籤對只能放在<head>……</head>標籤對之間，而且其內部不能包含其它標籤。
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
</html>
修改後顯示如下：
主體標籤<body>……</body>
<body>標籤也是成對出現的。在<body>……</body>之間的內容將顯示在web瀏覽器窗口的用戶區內，它是HTML文檔的主體部分。可以把HTML文檔的主體區域簡單地理解成標題以外的所有部分，該部分可以包含<table>、<font>、<img>、<div>等標籤。結束標籤</body>指明主體區域的結尾，在<body>中可以規定整個文檔的一些基本屬性：
-
「bgcolor」：指定html文檔的背景色
-
「text」：指定html文檔中文字的顏色
-
「link」：指定html文檔中待連接超鏈接對象的顏色
-
「alink」：指定html文檔中連接中超鏈接對象的顏色
-
「vlink」：指定html文檔中已連接超鏈接對象的顏色
-
「background」：指定html文檔的背景文件
我們驗證了前兩個屬性
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
<body bgcolor="11ffff" text="000000">
測試內容
</body>
</html>
顯示效果如下：
特殊字符
在html中有許多特殊字符需要處理，例如：「<」、”>”這兩個符號本身是用來表示標籤的開始和結束的，是沒有辦法通過直接打出來的，必須輸入編碼表示法：「<」和「>」。
通常情況下html會自動截取多餘的空格。不管你加多少個空格，都被看做一個空格。如果要顯示多個空格，可以使用 表示空格
我們看看實現代碼
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<測試內容> 空格在中間 看到了吧
</body>
</html>
顯示效果：
格式標籤
在瀏覽器中控制文本對象的顯示，包括段落、換行、水平線等標籤，下面介紹幾個常用的html格式標籤。所有的格式標籤全部都是在嵌套在<body>……</body>標籤對之間的
段落標籤<p>
全稱paragraph。<p>……</p>標籤對用於創建一個段落，支持align屬性來設置對齊方式，語法如下：
-
<p align=「屬性」>段落內容</p>
-
align：設定水平對齊方式，常見設置：
-
置左：align=「left」
-
置中：align=「center」
-
置右：align=「right」
我們驗證一個居中的對齊方式吧
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<p align="center"><測試內容> 空格在中間 看到了吧</p>
</body>
</html>
顯示效果：
換行標籤
在不另起一段的情況下將當前文本強制換行，<br>標籤屬於單獨出現的標籤，禁止出現結束標籤。
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<p align="center"><測試內容></br> 空格在中間 看到了吧</p>
</body>
</html>
顯示效果：
預格式化標籤<pre>
可以完整保留設計者在源文件中所定義的格式，包含各種空格，縮進，以及其他特殊字符，全部都原封不動的展示在瀏覽器頁面上。
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<p align="center"><測試內容></br> 空格在中間 看到了吧</p>
<pre>
我是菜鳥小白
你們的好朋友
讓我們一起學習吧！！！
</pre>
</body>
</html>
顯示效果：
列表標籤
主要分為無序列表、排序列表、目錄列表、菜單列表和描述性列表五中類型
-
無序列表<ul><li>……</li></ul>
-
排序列表<ol><li>……</li></ol>
-
目錄列表
-
菜單列表
-
描述性列表<dl><dt>列表頭<dd>列表內容
我們就驗證一個無序列表和一個描述性列表吧
無序列表：
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<ul>
<li>我是菜鳥小白</li>
<li>你們的好朋友</li>
<li> 讓我們一起學習吧！！！</li>
</ul>
</body>
</html>
效果如下：
描述性列表：
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<dl>
<dt>菜鳥小白測試表頭</dt>
<dd>我是菜鳥小白</dd>
<dd>你們的好朋友</dd>
<dd> 讓我們一起學習吧！！！</dd>
<dt>菜鳥小白測試表頭2</dt>
<dd>我是菜鳥小白</dd>
<dd>你們的好朋友</dd>
<dd> 讓我們一起學習吧！！！</dd>
</dl>
</body>
</html>
顯示效果如下：
好了，今天的內容就到這了，我們明天繼續學習HTML基礎內容，不見不散~
