么是HTTP

HTTP 傳輸的內容就是超文本：

1）我們先來理解文本：在互聯網早期的時候只是簡單的字符文字，但隨著技術的發展，現在文本的涵義己經可以擴展為圖片、視頻、壓縮包等，在 HTTP 眼里這些都算做文本。

2）再來理解超文本：它就是超越了普通文本的文本，它是文字、圖片、視頻等的混合體。最關鍵有超鏈接，能從一個超文本跳轉到另外一個超文本。 HTML 就是最常見的超文本了，它本身只是純文字文件，但內部用很多標簽定義了圖片、視頻等的鏈接，在經過瀏覽器的解析，呈現給我們的就是一個文字、有畫面的網頁了。

下面我們正式介紹什么是 HTTP ?

HTTP ：超文本傳輸協議（ HyperText Transfer Protocol ）是當今互聯網上應用最為廣泛的一種網絡協議。所有的 WWW （萬維網）文件都必須遵守這個標準。 HTTP 和 TCP / IP 協議簇中的眾多協議一樣，用于客戶端和服務器端之間的通信。

章先介紹一些HTML最基礎的考點，很多大長面試官喜歡由淺入深地考察知識。而對于一些基礎問題的回答，很多同學反而因組織不好語言而給面試官留下不好的印象。本章節我們就帶大家一一整理和回顧。

1.1 DOCTYPE的作用

面試官：我們現在寫HTML代碼第一行通常是 !<DOCTYPE HTML>，請介紹一下DOCTYPE的作用（基礎題）

DOCTYPE標簽是一種標準通用標記語言的文檔類型聲明，且必須聲明在文檔的第一行，來告知瀏覽器用何種文檔標準來解析這個網頁，不同的渲染模式會影響瀏覽器對CSS和JavaScript的解析標準。

面試官：瀏覽器解析文檔有哪幾種解析模式呢？（拓展題）

文檔的解析模式目前主要有 *兩種（注意：還有一種“準標準模式”只在IE8瀏覽器里，目前主流瀏覽器已無需考慮）：

1. 怪異模式（quirks mode）：此種模式會模擬更舊的瀏覽器的行為。如果沒有聲明DOCTYPE，瀏覽器默認會以這種模式解析文檔。
2. 標準模式（standards mode）：瀏覽器使用W3C的標準解析渲染頁面。

面試官：如何快速檢查頁面的解析模式？（發散題）

HTML文檔對象有個 compatMode 屬性，用于記錄頁面的解析模式：

• 如果文檔處于“混雜模式”，則該屬性值為 BackCompat
• 如果文檔處于“標準模式”或者“準標準模式(almost standards mode)”，則該屬性為 CSS1Compat

const mode=document.compatMode; // 頁面的解析模式
if (mode==="BackCompat") {
  // 渲染模式為混雜模式
}

1.2 HTML的語義化

面試官：什么是HTML語義化，語義化的作用是什么？（基礎題）

語義化是指使用恰當語義的html標簽，讓頁面具有良好的結構與含義；比如<p>標簽就代表段落，<article>代表正文內容等等。語義化的作用有兩點：

• 開發者友好：使用語義類標簽增強代碼的可讀性，開發者也能夠清晰地看出網頁的結構，易維護；
• 機器友好：帶有語義的標簽適合搜索引擎的爬蟲爬取有效信息，能快速生成網頁骨架或文章提綱，SEO友好。

面試官：你平時有哪些語義化的建議或最佳實踐？（發散題）

根據語義化的優點，對于富文本內容類的網站（如門戶、新聞網站），語義化利于SEO，對網站內容的傳播有很大幫助，此類網站應該重視和實踐語義化標準。而對于一些系統類網站的搭建，語義化就沒有那沒重要了，甚至刻意做語義化反而會影響開發者的效率，此類網站可以對頁面骨架做語義化，至于模塊的交互組件和表單等則無需刻意做語義化。

1.3 HTML5新增內容考察

面試官：你知道HTML5有哪些新增的東西嗎？（基礎題）

HTML5新增的內容確實不少，面試官不會要求你全部記下來，我們可以挑重要的東西來回答：

• 新的文檔解析順序：不再基于 *SGML；
• 全面支持CSS3：
• 加了一些語義化元素：<header>、<mainer>、<footer>、<section>、<nav>等
• 刪了一些樣式類元素：<font>、<big>、<center> 等
• 表單能力加強：<input>的新類型（date、email、url等）、新屬性（autocomplete、autofocus等）
• 新的屬性：ping（用于a與area）、charset（用于meta）、async（用于script）等
• 定位能力：navigator.geolocation
• 多媒體支持：<video>（視頻）、<audio>（音頻）等
• 2D/3D 制圖支持：支持svg、canvas繪圖和動畫等
• 新的緩存策略：Localstorage、SessionStorage、IndexedDB等
• 新的網絡協議：WebSocket
• 新的跨域通信方案：XHTMLHttpRequest2、PostMessage......

拓展：什么是SGML

• SGML 即Standard Globalized Markup Language 是用來定義標準的標記語言，簡單的說，就是定義文檔的元語言。
• HTML 是基于SGML 的超鏈接語言，可以用于創建Web頁面。在DTD 內部定義了標簽的規則，DTD就是使用SGML 語言創建的。
• HTML5不是基于SGML 語言的，因此不需要DTD ，它是一種全新的標記語言，有自己的解析規則，HTML5的語法規則與之前版本有很大的差別，可以稱的上是一種全新的語言

1.4 meta標簽

面試官：介紹一下<meta>標簽的用途 （基礎題）

meta標簽由name和content兩個屬性來定義，來描述一個HTML網頁文檔的元信息，例如作者、日期和時間、網頁描述、關鍵詞、頁面刷新等，除了一些http標準規定了一些name作為大家使用的共識，開發者也可以自定義name

面試官：移動端適配的viewpoint，能否手寫一下？（拓展題）

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

1.5 src和href的區別

面試官：介紹一下src和href的區別（基礎題）

• src是指向外部資源的位置，指向的內容會嵌入到文檔中當前標簽所在的位置，在請求src資源時會將其指向的資源下載并應用到文檔內，如JS腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，所以一般JS腳本會放在底部而不是頭部。

• href是指向網絡資源所在位置（的超鏈接），用來建立和當前元素或文檔之間的連接，當瀏覽器識別到它他指向的文件時，就會并行下載資源，不會停止對當前文檔的處理

1.6 img標簽的srcset

面試官：介紹一下<img>標簽的srcset和sizes屬性的作用（基礎題）

可以設計響應式圖片，我們可以使用兩個新的屬性srcset 和 sizes來提供更多額外的資源圖像和提示，幫助瀏覽器選擇正確的一個資源

• srcset 定義了我們允許瀏覽器選擇的圖像集，以及每個圖像的大小

• sizes 定義了一組媒體條件（例如屏幕寬度）并且指明當某些媒體條件為真時，什么樣的圖片尺寸是最佳選擇

所以，有了這些屬性，瀏覽器會：

• 查看設備寬度
• 檢查 sizes 列表中哪個媒體條件是第一個為真
• 查看給予該媒體查詢的槽大小
• 加載 srcset 列表中引用的最接近所選的槽大小的圖像
• srcset提供了根據屏幕條件選取圖片的能力

<img src="clock-demo-thumb-200.png"
     alt="Clock"
     srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
     sizes="(min-width: 600px) 200px, 50vw"
/>

1.7 script標簽的defer和async

面試官：介紹一下<script>標簽的defer和async的作用（基礎題）

• defer：瀏覽器指示腳本在文檔被解析后執行，<script>被異步加載后并不會立刻執行，而是等待文檔被解析完畢后執行

• async：同樣是異步加載腳本，區別是腳本加載完畢后立即執行，這導致async屬性下的腳本是亂序的，對于<script>有先后依賴關系的情況，并不適用

  如下圖：藍色線代表網絡讀取，紅色線代表執行時間，這倆都是針對腳本的；綠色線代表 HTML 解析

1.8 前端數據存儲的方式

面試官：前端有哪幾種數據存儲方式？（基礎題）

主要的存儲方式有Cookie、LocalStorage、SessionStorage、IndexedDB、WebSQL，它們的優缺點如下：

• Cookie：在HTML5標準前本地儲存的主要方式
  • 優點是兼容性好，請求頭自帶cookie方便可以和服務端進行交互
  • 缺點是大小只有4k，請求頭攜帶cookie浪費流量，每個domain限制20個cookie，JS無法直接操作，需要自行封裝

• LocalStorage：以鍵值對為標準的數據存儲方式
  • 優點是操作方便，永久性儲存（除非手動刪除），大小為5M
  • 缺點是兼容IE8+

• SessionStorage：與localStorage基本類似，區別是**sessionStorage當頁面關閉后會被清理
  • 優點是會話級隨存隨取，不占用本地空間，操作方便
  • 缺點是不能在所有同源窗口中共享，是會話級別的儲存方式，兼容IE8+

• IndexedDB：是被正式納入HTML5標準的數據庫儲存方案，它是NoSQL數據庫，用鍵值對進行儲存，可以進行快速讀取操作
  • 優點是存儲量更大，非常適合web場景，同時支持JS進行操作，非常方便
  • 缺點是兼容性IE8+

• WebSQL：類似SQLite，是真正意義上的關系型數據庫，用sql進行操作
  • 優點是關系型數據庫，適合大型的離線web應用
  • 缺點是JS需要通過transaction操作sql，火狐瀏覽器不支持

拓展：如何操作webSql

// WebSql操作實例
var db=openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;

// 建表=> 插入=> 刪除
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鳥教程")');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
  tx.executeSql('DELETE FROM LOGS  WHERE id=1');
  msg='<p>數據表已創建，且插入了兩條數據，然后又刪除了第一條。</p>';
  document.querySelector('#status').innerHTML=msg;
});

1.9 WebSocket考點

面試官：介紹一下webSocket的特點和作用（基礎題）

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。它允許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，并進行雙向數據傳輸。

在 WebSocket API 中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送

本文由博客一文多發平臺 OpenWrite 發布！

位小伙伴好，黑客技術離不開代碼，做為一個滲透測試工程師，也一定要有一些代碼基礎。網絡安全行業，現在人才缺口大，再加上就業形勢又很嚴峻，介于這些，我們想培養一批優秀的網絡安全人才，將對網絡安全行業、黑客技術，以及滲透測試技術感興趣的小白培養成精英。

跟隨我們，不管你有多白，都可以逐步進入網絡安全行業，并最終在這個行業找到高薪職業。

然后呢，我要說一句，關于“黑客”可能并不是大多數人所了解的那樣。關于這些，可以參考：什么是黑客？什么是滲透測試？2分鐘看完這800多字你就懂了

那么，我們就先從代碼基礎——HTML的基本語方開始。

首先給大家描述三個概念：語言、程序、代碼之前的關系。

語言

首先我們就要搞清楚什么是語言？可能說HTML語言不太好理解，那么我們想一想日常生活當中比較常見的我們中國人彼此之間都會交流，是不是叫做漢語呢？所以說漢語就是一門語言。

那么這時候大家腦子里面就可以構思一下啊什么樣的東西大致就是語言了。它應該是一種溝通交流的一種方法的一個集合，包括我們如何發音，如何寫字，這些字如何拼在一起，能夠產生具體的意義，有一定的含義，這些所有所有的集合在一起，形成了一套規則，然后大家都去遵循這套規則，就能夠彼此交流，那么這就叫做語言。

我們再舉一個例子，比如說英國人或者美國人，他們也有自己的語言，叫做英語，那么我在這里就是換了另一種語言，

代碼

了解了語言之后，我們就再來看一看，什么是代碼，那代碼跟我們日常生活中的這種能夠聯系起來的又是什么東西呢？

我們還是拿漢語來做比喻哈，我們說漢語就是一種交流溝通的一種規則，它是一門語言。在大家小的時候肯定就會去學這門語言。這門學科在小學的時候就叫語文，對吧。那么我們上語文課的時候，就要學一些最基礎的有關語言的東西，比如說漢語拼音生字詞，當時要記很多的這種生字生詞，那么他是不是可以理解成是我們漢語的一種最基本的那種組成結構？

那么英語呢？我們在學習英語的時候也會去記一些東西啊，就比如英文字母，緊接著就是背各種各樣的單詞，是不是當我們單詞量有了一定的積累之后，我們對這個語言呢就掌握得更深刻了。

那么漢語要背生字詞，英語呢要背單詞，這些最基本的組成結構。那么在程序語言里面，代碼就可以理解成是生字詞或者是單詞。

程序

最后，我們再來看看什么是程序。它是由很多很多一行一行的代碼組成在一起，能夠完成一個綜合性的或者一個比較大的一個目標的這樣的一個代碼的集合。

那么我們對照一下自然的這種語言，比如說漢語英語呢它是什么樣？好多的文字放在一起，是不是句子？或者說再多一點兒就是一篇文章。一篇文章甚至再大一點兒可能是一本書，

那么漢語能寫文章，用英語英文也能寫文章，這個文章可大可小，可能幾千字能大一點兒的一本書，也可以理解成是文章，那么用生字詞組成的這種集合就成了文章了。然后我們再談程序，它是什么呢？對照一下大家可能就理解了，它就是一個由代碼組成的文章。

HTML叫做超文本標記語言

那么回過頭來我們看我們要學的HTML語言，它也是一門語言，只不過呀它跟我們理解的漢語和英語有一定的區別。

漢語的主流是中國人之間交流的時候溝通的時候用的語言。那么英語呢應用的比較廣泛，是一些英語國家之間彼此交流溝通的時候用的語言。那么HTML語言它也是一種語言，只不過它不是人和人之間去交流的語言，那么它到底是做什么用的呢？我們來看一下HTML的概念。

HTML中文名稱叫做超文本標記語言，用HTML編寫的超文本文檔稱為HTML文檔。它能夠獨立于各種操作系統平臺，使用HTML語言將所需要表達的信息按某種規則寫成HTML文件，通過專用的瀏覽器來識別，并將這些HTML文件翻譯成可以識別的信息，即現在所見到的網頁。

那么從中我們能看到什么呢？首先我們知道它的中文名稱了。HTML叫做超文本標記語言。

那么再往下我們看他提到了。

在這里瀏覽器是吧？提到了瀏覽器，那么這時候我們就知道了HTML語言啊它是一種與瀏覽器之間進行交流的這么一種語言。就是我們去寫一些代碼，那么寫這些代碼的目的是什么呢？目的就是為了和瀏覽器去交流，只要我們寫的這個東西瀏覽器能看得懂，他就會根據我們寫的代碼呈現出最終的網頁。這就是HTML語言的一個基本概念。

HTML的語法規則

（1）HTML中的各種元素都是通過標記（標簽）來表示。

（2）HTML當中的標簽分為單標簽和雙標簽。

（3）單標簽格式為<名稱/>，雙標簽格式為<名稱></名稱>。

（4）HTML對大小寫不敏感。

然后，我們可以對照一下HTML的基本結構

HTML網頁基本結構需要如下標簽組成：

（1）<html></html>

（2）<body></body>

（3）<head></head>

（4）<title></title>

首先，我們打開一個記事本。

然后在記事本中輸入<html></html>,這表示告訴瀏覽器，這是一個標準的HTML網頁。

那么為什么是兩個呢？前面1個，后面1個，這就有點類似于我們標點符號里邊的括號，前面有一個開始，左半邊括號后面有一個結束。右半邊括號在這里也是前面的HTML表示網頁從這兒開始，那么后邊這個-html表示網頁呢至此結束。

那我們網頁這才剛開始就結束了呢，別著急，我們來看我在這里敲了幾次回車把它分開了。那么表示什么意思呀？表示中間呀是有很多內容的，就是在網頁開始到網頁結束的中間是會有其他的東西的。

我們接著往下看，第二個標簽呢叫做<body></body>,里面的單詞呢表示的是身體，那么它呢表示的就是網頁的主體，這個網頁的主體也屬于基本結構，那么它在哪兒呢？注意啊網頁的主體也屬于網頁，那么它呀要放在<html></html>的中間。

下面，我們開始將第3個標簽<head></head>寫入記事本，它代表頭部。他表示頭是吧？我們可以想象一下，這個腦袋注意它和身體之間到底應該是個什么樣的關系呢？就我們想象有一個人站在那兒，腦袋應該是在上面，身子應該是在下邊哈。所以注意我們這個<head>標簽呀要放在<body></body>標簽的上方。注意！它們之間沒有包含關系！是一上一下的。

最后一個叫做<title></title>這個單詞的意思呢叫做標題。那么這個標題你應該放在哪？告訴大家，它屬于網頁的頭部，在頭部的里邊。

好了，整理一下格式

我們來看4個基本結構的組成標簽，我們都已經寫到了這個文檔里面了。

大家需要注意的是，我寫的這種結構啊這個包含的關系非常重要。最外邊是html表示網頁開始，到網頁結束，中間呢有頭、身子，還有標題，那么頭和身子是一上一下的關系，那么標題呢屬于頭部里邊兒。要記住這個格式！

那么到現在為止呀我們這個網頁的基本結構就算是真正寫完了，我們把它保存一下。現在這個文檔里邊啊我們寫的是網頁的程序，雖然很簡單，但它也是一個完整的網頁了。

那么既然是一個網頁，那我們如何能打開它看這個網頁呢？注意這個HTML寫出來的這個程序啊需要放在HTML文件里邊，

那么我們怎么做呢？直接把這個記事本改后綴，他現在是個.txt文檔，我們把這個文件的后面的txt擴展名改成html。

雙擊“網頁.html”，就會打開一個網頁。

果然是用瀏覽器打開的一個網頁，但是里邊呢還沒有東西是吧？空白的。

那么我們就來看一下，重新用記事本的方式把它打開。

我現在要想在里邊簡單的寫點文字，哎我看看我這個網頁是否能夠正常顯示。

那么在哪兒能夠寫文字呢？跟大家說一下，

在我們這個基本結構里啊有兩個地方是可以寫內容的，一個就是<body></body>主體，另外一個呢就是<title></title>標題，這兩個地方中是可以寫文字內容的。

右鍵單擊這個html文件，選擇打開方式→打開其他應用，然后找到記事本，用記事本打開。

然后在<title></title>中間寫上“我的第一個網頁”，<body></body>中間寫上“這里是主體文字”

好了，寫完之后我們再保存。關閉這個窗口，重新打開看一下效果。那么大家看這會兒在網頁里面顯示出來了。首先呢在網頁主體里邊顯示出了“這里是主體文字”，并且在頁面的上方的標簽呢顯示的是“我的一個網頁”。

那么我們今天的講解你看懂了么？

帶你學代碼、學編程、學語言、學網絡安全、學黑客技術、學滲透技術，逐步成為網絡高手，拿到年薪30W+的offer，在網絡江湖，從小刀客變成大俠。如果感興趣，請關注我，私信我，可獲得更多學習資料。