第01節：第一個網頁

、內容概述

從本節我們開始正式學習前端開發的課程內容，首先我們從第一個網頁開始了解html和css的基本概念，并通過創建第一個網頁了解vscode的基本使用方法。

二、安裝vscode插件

漢化插件：Chinese (Simplified) Language Pack for Visual Studio Code
瀏覽器打開：open in browser

三、HTML概述

HTML的全稱是【超文本標記語言】，，超級文本標記語言是標準通用標記語言下的一個應用，也是一種規范，一種標準，它一個標記語言通過標記符號來標記要顯示的網頁中的各個部分。網頁文件本身是一種文本文件，示例代碼

<!-- demo01.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title> 
</head>
<body>
	<p>我的第一個網頁</p>
</body>
</html>

HTML主要控制網頁的內容，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網頁文件，然后根據標記符解釋和顯示其標記的內容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是，對于不同的瀏覽器，對同一標記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果如下所示：

不同的標簽具有不同的含義，HTML有上百個標簽，有些是不常用的，有些甚至已經被廢棄。很多初學者都會困惑，不知道自己到底要學習哪些標簽。慶幸的是有了這本《前端開發學習手冊》，只要掌握十幾個標簽，就能完成生動的網頁。

在下一節我們會列舉常用的HTML標簽。

四、CSS概述

CSS全稱【層疊樣式表(英文全稱：Cascading Style Sheets)】。剛才我們了解了，使用HTML可以設置網頁中的內容（標準通用標記語言的一個應用）等文件樣式的計算機語言，那么使用CSS就可以進一步裝飾這些內容，錄入設置文本的字體顏色，或是改變圖片的尺寸等等。如下面的代碼所示，CSS的代碼是在style標簽內部編寫的。示例代碼

<!-- demo02.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
			color:red;
		}
	</style>
</head>
<body>
	<p>我的第一個網頁</p>
</body>
</html>

上面的代碼我們可以將p標簽的文字設置成紅色。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。

關于CSS的更多內容，我們會在后續章節繼續討論。

五、練習

上節我們簡單地概括了什么是HTML和CSS，接下來大家可以在vscode中編寫上面的兩個例子，步驟如下：

打開vscode
點擊菜單 File=> New File 創建文件。
點擊菜單 Save 保存成后綴為html的文件，例如index.html
在文件中輸入一個英文的感嘆號（!），然后按tab鍵，就可以生成一個HTML文件的模板了。
接下來按照上面的代碼示例編寫自己的網頁。
用瀏覽器打開此html文件。

通過上面的六步，我們就可以訪問我們自己的第一個網頁了。

人說“互聯網中有50%以上的流量是爬蟲”，第一次聽這句話也許你會覺得這個說法實在太夸張了，怎么可能爬蟲比用戶還多呢？畢竟會爬蟲的相對與不會爬蟲的簡直少之又少。

但是很多爬蟲工程師或者反爬蟲工程師講了實話：50%？你在逗我？就這么少的量？然后他舉出例子：

某個公司的某個頁面的某個接口，每分鐘訪問量是1.2萬左右，這里面有都少正常用戶呢？50%？60%？正確答案是：500個以下，那我們來算算爬蟲占比：（12000-500）/12000=95.8%

沒錯95.8%，這是一位反爬蟲工程師給出的爬蟲占比！！！

那這么多的爬蟲它們在互聯網上做什么呢？答案當然是：孜孜不倦的爬取爬取網頁信息。今天我們就來講講組成互聯網的重要部分之一：HTML網頁。

一、起源與發展

前面我們介紹HTTP的時候，給大家講過是萬維網的發明者，互聯網之父計算機科學家蒂姆·伯納斯·李，在他最初的構想組成中就有：提出使用HTML超文本標記語言(Hypertext Markup Language)作為創建網頁的標準。

大家千萬記住HTML并不是一種編程語言，而是一種標記語言 (markup language)，由W3C（萬維網聯盟）制定標準，然后由個大瀏覽器廠商自己去實現支持！

下面我們來看看HTML標準的發展歷史：

二、組成部分

我們常說的網頁就是HTML頁面，而構成HTML頁面的東西有很多，如：html標簽、數據、css樣式、js等，那我們就主要講講以下這幾個組成部分。

1.HTML標簽

HTML標簽是構成HTML頁面的主要組成部分，我們來看一個HTML實際例子：

<!--注冊頁-->
<html>
	<!--網頁頭-->
	<head>
		<meta charset="utf-8" />
		<title>注冊頁</title>
	</head>
	<!--網頁體-->
	<body>
		<!--表單標簽-->
		<form action="/register" method="post">
			<div>用戶名：<input type="text" name="username"/></div>
			<div>性 別：
				<input name="sex" type="radio" checked="checked"/>男
				<input name="sex" type="radio" />女
			</div>
			<div>密 碼：<input type="text" name="password"/></div>
			<br/>
			<input type="submit" value="注冊" style="width:150px;" />
		</form>
	</body>
</html>

上面是一個非常簡陋的用戶注冊頁面（用于教學），用戶可以輸入用戶名性別和密碼然后點注冊就提交到服務器，下面我們來稍微講解以下這個頁面。

html標簽對限定了文檔的開始點和結束點，所有的元素和標簽都應該放在他們之間。
head標簽對表示網頁頭部信息，其中包含了網頁標題、網頁編碼、網站ico、網站引入的一些靜態資源（css、js）以及網站關鍵字SEO相關信息等。
body標簽對表示網頁體，幾乎所有的網頁內容都在這里展現。
form標簽對表示創建表單，表單用于向服務器傳輸數據，能夠包含 input 元素，比如文本字段、復選框、單選框、提交按鈕等等。
div標簽對是目前網頁中比較流行的標簽，在七八年年流行使用table來構思一個網頁，把一個網頁想象成多少行多少列，這種構思靈活性和維護性極差，并且Table標簽構思的網頁對google爬蟲和百度等這種搜索引擎收錄性很差，遇到多層表格嵌套時，會跳過嵌套的內容或直接放棄整個頁面。所以目前前端流行使用div+css來構思網頁，這樣的優點是代碼精簡、有很好的靈活性和可維護性。
input標簽用于搜集用戶信息，它可以根據不同的 type 屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等等。

其他的HTML標簽豬哥就不多講，希望大家自己去網上學習。

在有些初級web工程師面試中，面試過程中可能會讓你手寫一個用戶注冊功能，這里豬哥給大家講講大概的流程：

用戶點擊注冊連接（一般是get請求/register），然后服務器響應此請求返回一個注冊頁面
用戶輸入用戶名密碼、圖形驗證碼等信息，提交注冊信息（一般是post請求/register）
服務端收到信息后對信息做校驗（一般是前后端雙校驗），然后存入數據庫，返回注冊成功提示

2.數據

互聯網主要起到了信息交流的作用，而網頁作為主要的信息交換載體，標簽的主要作用就是包裹數據，讓數據能夠以人類可視的方式展現。

尤其是一些新聞網站，他們主要以展示新聞信息為主，我們以頭條網頁來講講：

在紅色框中圈出來的這些新聞，他們是把數據包裹在html標簽中，然后以列表的形式展示給用戶，接著我們來看看網頁代碼：

我們可以看到新聞標題被a標簽包圍，還有一些如縮略圖、評論數、時間等信息構成了一條新聞簡述，然后多個新聞（li標簽）構成了一個列表（ul）。

那服務器是如何將數據與封裝到頁面中去的呢？

前后端未分離：前后端沒有分離的公司，一般是先由前端工程師寫好頁面（數據寫死），然后由后端程序員合頁面（就是將寫死的數據去掉，然后加上數據字段）。
前后端分離：前后端沒分離最大的問題就是同一個頁面可能前后端開發同學都會去修改，修改的人少還行，但是如果開發人員一多，大家改來改去全亂了，而且發布也會有一定的限制，所以目前流行前后端分離，后端同學只需要提供數據，前端同學搭一個nodejs后臺自己渲染頁面。

拿上面我們的簡陋的注冊頁面來講講前后端未分離時具體返回頁面步驟，假設我們用戶注冊成功然后登錄，登錄成功我們直接跳轉用戶主頁展示用戶名和性別，頁面如上圖，步驟如下：

用戶登錄成功，在數據庫中讀取用戶信息。
讀取到用戶數據后進行頁面渲染
返回渲染后的頁面給瀏覽器

3.CSS樣式

html標簽+數據構成了整個網頁的骨架，但是只有數據和html標簽的網頁是奇丑無比的

層疊樣式表(英文全稱：Cascading Style Sheets 簡稱CSS)是一種用來表現HTML等文件樣式的計算機語言。css可以定義html現實的樣式，可以實現很多不同的效果、排版等等，html中所有的元素幾乎都需要css來管理樣式，而且現在越來越流行div+css搭配控制頁面排版和樣式，css主要通過三大選擇器來修飾html標簽。

沒有css的頁面將會是雜亂無章或缺少美感的頁面，我們以上面簡單的用戶主頁為例子演示如何使用css以及css的功能。

效果：

代碼：

css：

4.js

css使頁面有了很好看的樣式，但是卻沒有很好的交互性，何為交互性？就是用戶在使用產品時的瀏覽、點擊、切換使之方便、快捷、平滑都很合理，很友好。

而js（JavaScript）則是增加網頁的動態功能，它定義了網頁的行為，提高用戶體驗。比如js可以監控到用戶的點擊，滑動等動作，然后根據用戶的這些動作來做一些操作。

我們還是以上面簡單的用戶主頁為例子，用js（或jquery）來實現用戶修改用戶名或者性別信息。

代碼：

效果：

一個大概的修改用戶信息流程：

點擊修改后通過js現實出輸入框
在用戶輸入的時候用js監聽輸入框內容，及時提醒用戶新的用戶名是否可用
再用戶點擊提交后，用ajax提交，并且做防止重復提交的操作
服務端反饋后用js做提示即可

上面只是給大家做了一個非常簡單的js效果，給零基礎的朋友演示js是什么，有什么功能，但是js的功能遠不止這些，現在的js已經在前端、后端以及app中占據著重要的地位，當然還有使用在反爬蟲的js混淆。

三、總結

由于篇幅原因，豬哥這里只給大家演示一些非常基礎非常簡單的功能，如果想學習網頁的制作同學們可以自己去網上學習，這里推薦一個學習網站：菜鳥教程，希望大家都學習一些前端知識，因為爬蟲的第一步就是分析網頁，然后再根據網頁數據是內嵌在html標簽中，還是js動態加載，或者網站使用加密或混淆的反扒技術。當遇到反扒高手時，我們就需要去仔仔細細的分析js，這也被稱為解毒的過程（反扒工程師在代碼里投毒）。所以爬蟲與反扒的斗爭可謂其樂無窮！

本篇文章開始成哥將帶大家一起學習一下前端的基礎知識，我們先講解前端的基礎HTML與CSS，這個講完我們將講解VUE前端框架，最后我們再講講Ant Design的VUE前端框架，從而形成前端一個系列的教程，下面就開始我們今天的內容吧！

01 HTML簡介

HTML的英文全稱是 Hyper Text Markup Language，即超文本標記語言。

HTML是由Web的發明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創立的一種標記語言，它是標準通用化標記語言SGML的應用。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統平臺(如UNIX， Windows等)。

使用HTML語言，將所需要表達的信息按某種規則寫成HTML文件，通過專用的瀏覽器來識別，并將這些HTML文件"翻譯"成可以識別的信息，即現在所見到的網頁。HTML 不需要編譯，可以直接由瀏覽器執行，非常方便開發時調試。

02 HTML實例

我們現在創建一個典型的HTML結構具體如下：

1. <!DOCTYPE html>  
2. <html lang="ch">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>HTML實例</title>  
6. </head>  
7. <body>  
8.   <h1>我是標題</h1>  
9.   <p>我是段落。</p>  
10. </body>  
11. </html>

如上頁面中各個標簽代表的意思如下：

1）<!DOCTYPE html>是文檔聲明頭，它告訴游覽器當前處理的內容是HTML頁面

2）html是 HTML 頁面的根元素，用于標識HTML內容的開始與結束

3） head是HTML頁面的頭，包含了文檔的一些屬性。其中meta是元數據這邊charset="UTF-8"標識當前頁面編碼格式為UTF-8，title為文檔的標題

4）body是HTML主體也是游覽器在顯示頁面時的內容。h1是body內容中定義的標題，p是body內容中定義的段落

我們現在通過游覽器打開編寫的HTML內容，具體內容如下

在HTML中的內容可以通過以下格式進行內容注釋具體如下：

03 HTML標簽、元素、屬性、實體編碼與事件

（1）HTML標簽

HTML 標簽是 HTML 語言中最基本的單位，HTML 標簽是 HTML（標準通用標記語言下的一個應用）最重要的組成部分。HTML標簽具有如下特點：

1）標簽一般是成對出現的如:<div></div>;也有空標簽如:<br />

2）標簽由<>包括,分為開始標簽(開放標簽)和結束標簽(閉合標簽)

3）標簽不區分大小寫,根據W3C(萬維網聯盟)推薦,統一使用小寫字母

標簽的示列如下：

標簽按照<>的對數可以分為如下兩類分別為雙標簽與單標簽，下面我們具體來了解一下這兩類標簽。

1）雙標簽

雙標簽指由開始和結束兩個標記符組成的標記。其基本語法格式如下：

1. <標記名></標記名>

常見的雙標簽有如下幾種：

1. <html></html>  
2. <head></head>  
3. <title></title>  
4. <body></body>  
5. <h1></h1>  
6. <p></p>  
7.   
8. <!-- 塊級元素 -->  
9. <div></div>  
10. <span></span>  
11.   
12. <!-- 超鏈接元素 -->  
13. <a></a>  
14.   
15. <!-- 列表元素 -->  
16. <ul></ul>

2）單標簽

單標簽是指用一個標記符號即可完整地描述某個功能的標記。其基本語法格式如下：

1. <標記名/>

常見的單標簽有如下幾種：

1. <!-- 換行標簽 -->  
2. <br />  
3.   
4. <!-- 分隔線標簽 -->  
5. <hr />  
6.   
7. <!-- 圖片標簽 -->  
8. <img />

（2）HTML元素

HTML 元素指的是從開始標簽（start tag）到結束標簽（end tag）的所有代碼，如<p>段落</p>。元素可以進行嵌套具體如下：

1. <div>  
2.   <h1>我是標題</h1>  
3.     
4.   <div>  
5.     <p>元素嵌套示列</p>  
6.   </div>  
7.   
8. </div>

（3）HTML屬性

屬性為 HTML 元素提供附加信息，可分為全局屬性（即所有元素均可使用的屬性，如id,class等）和元素屬性（部分元素可使用的屬性，例如<a href="http://www.baidu.com">搜索</a>），屬性通常由屬性名="屬性值"構成,存在于開始標簽中，示列如下:

（4）HTML實體編碼

對于部分不易通過鍵盤輸入的或和HTML沖突的部分符合,引入對應的"實體編碼"，如< <> >空格。

（5）HTML事件

通過某個動作,執行某個操作/JS腳本的能力。如點擊按鈕,改變顏色，事件可以分為多類比多鼠標點擊、鼠標聚焦等，下面我看看看一個事件編寫示列：

04 HTML常用標簽示列

（1）h標簽

h 標簽有六種分別為h1、h2、h3、h4、h5、h6，這六個分別對應六種樣式的標題，我們現在來編寫這六種h標簽，演示代碼如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <h1>H1標題</h1>  
9.   <h2>H2標題</h2>  
10.   <h3>H3標題</h3>  
11.   <h4>H4標題</h4>  
12.   <h5>H5標題</h5>  
13.   <h6>H6標題</h6>  
14. </body>  
15. </html>

我們來運行該HTML文件，來看看這六種h標簽有什么樣式差異，從示列中可以發現h1標簽字體最大然后依次減小。

（2）p標簽

p 標簽是文本標簽，現在我們來編寫一段含有p標簽的html文本，然后運行了看看p標簽的樣式具體操作如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <h4>標題一</h4>  
10.   <p>我是段落1</p>  
11.   
12.   <h4>標題二</h4>  
13.   <p>我是段落2</p>  
14.   
15. </body>  
16. </html>

（3）a標簽

a標簽是超鏈接標簽，點擊a標簽可以跳轉到其設置的網站，具體示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <div>  
9.     <a href="http://www.baidu.com">點我跳轉到百度頁面</a>  
10.   </div>  
11.   
12.   <div>  
13.     <a href="http://www.qq.com">點我跳轉到騰訊頁面</a>  
14.   </div>  
15.   
16. </body>  
17. </html>

（4）div標簽

div標簽是一個塊級元素，它可用于組合其他 HTML 元素的容器。可以把div看成一個盒子，我們可以為這個盒子設置各種各樣屬性（如高度、寬度、顏色等），下面我們編寫一個div標簽并設置其長為300px，寬度為200px，同時給其一個背景顏色，具體如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <div style="width: 200px;height: 300px;background: #2eabff">我是div元素</div>  
10.   
11. </body>  
12. </html>

（5）列表標簽

列表作為網頁設計的重要內容之一，能夠用來制作導航欄和新聞列表等。HTML 列表分為：有序列表（ol），無序列表（ul）以及自定義列表（dl）

1）有序列表ul

有序列表的順序是有序的，默認情況下會以數字來排列，但也可以通過設置其type屬性以大寫字母、小寫字母、大寫羅馬數字、小寫羅馬數字來排列，我們現在來寫一個示列，具體如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <!--  有序列表，以默認方式數字排列 -->  
10.   <p>有序列表默認方式數字排列</p>  
11.   <ol>  
12.     <li>列表1</li>  
13.     <li>列表2</li>  
14.     <li>列表3</li>  
15.   </ol>  
16.   
17.   <!--  有序列表，以大寫字母排列 -->  
18.   <p>有序列表大寫字母排列</p>  
19.   <ol type="A">  
20.     <li>列表1</li>  
21.     <li>列表2</li>  
22.     <li>列表3</li>  
23.   </ol>  
24.   
25. </body>  
26. </html>

2）無序列表ol

無序列表的順序是無序的，不會按照某個值來排序，無序列表中每個列表前默認都有一個實心圓，也可以通過type屬性來設置成空心圓或者小方塊，無序列表示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>無序列表默認type樣式</p>  
10.   <ul>  
11.     <li>列表1</li>  
12.     <li>列表2</li>  
13.     <li>列表3</li>  
14.   </ul>  
15.   
16.   <p>無序列表方塊樣式</p>  
17.   <ul type="square">  
18.     <li>列表1</li>  
19.     <li>列表2</li>  
20.     <li>列表3</li>  
21.   </ul>  
22.   
23. </body>  
24. </html>

3）自定義列表dl

自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始，其列表內容是以<dd> 開始，自定義列表前面沒有任何標識，其具體示例如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>自定義列表</p>  
10.   <dl>  
11.     <dt>東岳</dt>  
12.     <dd>泰山</dd>  
13.   
14.     <dt>南岳</dt>  
15.     <dd>衡山</dd>  
16.   
17.     <dt>西岳</dt>  
18.     <dd>華山</dd>  
19.   
20.     <dt>北岳</dt>  
21.     <dd>恒山</dd>  
22.   
23.     <dt>中岳</dt>  
24.     <dd>嵩山</dd>  
25.   </dl>  
26.   
27. </body>  
28. </html>

（6）其它標簽

1）換行標簽<br/>

在HTML中如果想給內容進行換行可以使用換行標簽，具體示列如下：

2）分割線標簽<hr/>

<hr/> 標簽用于在 HTML創建一條分割線，具體示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>我是張三</p>  
10.   <!-- 分割線標簽 -->  
11.   <hr/>  
12.   <p>我是李四</p>  
13. </body>  
14. </html>

05 總結

至此我們《HTML基礎教程上篇》就講完了，下篇內容主要講解HTML樣式、HTML表單、Tabel等，敬請期待。最后如果喜歡本篇文章不要忘了點贊、關注與轉發哦！

-END-

@IT管理局專注計算機領域技術、大學生活、學習方法、求職招聘、職業規劃、職場感悟等類型的原創內容。期待與你相遇，和你一同成長。

文章推薦：

一文秒懂Web框架基礎之WSGI協議
IT工程師都需要掌握的容器技術之掃盲篇

在線咨詢

上一篇：調試 LNK1123 轉換到 COFF 期間失敗：文
下一篇：婚禮網頁設計方案：個人也能做好

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商