不懂HTML？看這篇文章就夠了

多人都說我是一門很簡單的語言，看看書，看看視頻就能讀懂我。但是，如果你完全沒有接觸過我，就想通過看一遍教程，背背標(biāo)簽，想要完全了解我，真的有點太天真了。

我叫“超文本標(biāo)記語言"，英文名字叫HTML，我沒有變量，沒有循環(huán)，沒有函數(shù)，我只是單純的一門靜態(tài)語言而已。你可以用我來描述靜態(tài)的東西，比如標(biāo)題、段落、圖片。

工作的時候，瀏覽器大叔是播放器，我是資源，你們看到的影片是大叔根據(jù)我收藏的內(nèi)容播放出來的。

我們來看一張圖，試著用語言描述一下：

在頁面的頂部有一欄標(biāo)題欄，下面有張大圖，大圖下面三張圖和圖片介紹，圖文下面有一個標(biāo)題，標(biāo)題下面有三個圖文鏈接介紹。

這只是結(jié)合圖片來直觀的描述，但是對于瀏覽器來說，需要一個精確的描述。比如：大圖下面三張圖和圖片介紹，介紹中哪些文字需要強(qiáng)調(diào)？圖文下面的標(biāo)題是主標(biāo)題還是二級標(biāo)題？

這些都是我作為HTML要表述的。配上CSS來精確的描述字體的顏色，粗細(xì)，大小，圖片的寬高，按鈕的位置。

其實了解我并不是一件難事，什么時候?qū)W習(xí)都不晚。這取決于你是否有足夠的興趣和毅力去堅持你的選擇問題。如果你要學(xué)習(xí)的話，那要確定自己是否堅定地走“敲代碼”這條不歸路。

入門容易，精通難，且學(xué)且珍惜。

在這里推薦一個我認(rèn)為比較好的練習(xí)HTML的方法：拋開CSS，做純粹的代碼練習(xí)。其實就是單純的書寫HTML，最終的目的是他人可以通過閱讀這個HTML文件理解到頁面是怎樣的結(jié)構(gòu)，甚至可以通過HTML代碼來畫出大概的頁面。

以下是HTML基本（常用）標(biāo)簽的整理，希望對你有幫助。

基本

<html>…</html> 定義 HTML 文檔

<head>…</head> 文檔的信息

<title>…</title> 文檔的標(biāo)題

<body>…</body> 可見的頁面內(nèi)容

注釋

文本

<h1>...</h1> 標(biāo)題字大?。╤1~h6）

<b>...</b> 粗體字

<strong>...</strong> 粗體字(強(qiáng)調(diào))

<i>...</i> 斜體字

<em>...</em> 斜體字(強(qiáng)調(diào))

<u>...</u> 下劃線

<del>...</del> 刪除線(表示刪除)

<center>…</center> 居中文本

<ul>…</ul> 無序列表

<ol>…</ol> 有序列表

<li>…</li> 列表項目

<a href=”…”>…</a> 超鏈接

<font> 定義文本字體尺寸、顏色、大小

<sub> 下標(biāo)

<sup> 上標(biāo)

<br> 換行

<p> 段落

圖形

<img src=’”…”> 定義圖像

<hr> 水平線

表格

<table>…</table> 定義表格

<th>…</th> 定義表格中的表頭單元格

<tr>…</tr> 定義表格中的行

<td>…</td> 定義表格中的單元

其它

<form>…</form> 定義供用戶輸入的 HTML 表單

<frame> 定義框架集的窗口或框架

TML元素

這一節(jié)以及以后幾節(jié)我們將對HTML中<body>標(biāo)簽中的各種元素進(jìn)行一個概述，并對一些基本元素進(jìn)行練習(xí)。

HTML元素：指的是從開始標(biāo)簽到結(jié)束標(biāo)簽的所有代碼。

舉個例子，在《第一個HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作》這一節(jié)中，我們寫了這樣一個頁面"第一個頁面.html"。后面的練習(xí)我們都在這個文件中進(jìn)行。

<!DOCTYPE HTML> 
  <html> 
  <head> 
  </head> 
  <body> 
  <h>第一個網(wǎng)頁</h>
  <p>千里之行始于足下</p> 
  </body>
  </html>

其中"<h>第一個網(wǎng)頁</h>"整個代碼就可以看做是一個html元素，<h></h>叫做標(biāo)題標(biāo)簽，加上"第一個網(wǎng)頁"這段文字共同構(gòu)成一個HTML元素。

HTML元素非常多，因為我們可以在頁面中顯示各種各樣的信息，不同的信息載體對應(yīng)不同的元素。

下面我們就介紹幾個常用的html元素。

HTML常用元素使用練習(xí)1

NO.1:<h></h>與<hr>

<h></h>這個用來添加標(biāo)題的元素大家比較熟悉了，這里要介紹一個新的用法。示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網(wǎng)頁</title>
  </head> 
  <body>
  <h1>第一個網(wǎng)頁</h1>
  <h2>第一個網(wǎng)頁</h2>
  <h3>第一個網(wǎng)頁</h3>
  <h4>第一個網(wǎng)頁</h4>
  <h5>第一個網(wǎng)頁</h5>
  <h6>第一個網(wǎng)頁</h6>
  <p>千里之行始于足下</p>
  </body> 
  </html>

頁面顯示效果如圖：

大家通過觀察可以看出h后面的編號用來控制標(biāo)題字號大小，僅僅是標(biāo)題有這種預(yù)設(shè)，其他元素如果要調(diào)整字號的話我們放在以后CSS里講。

下面看<hr>,示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網(wǎng)頁</title>
  </head> 
  <body>
  <h1>第一個網(wǎng)頁</h1><hr>
  <h2>第一個網(wǎng)頁</h2><hr>
  <h3>第一個網(wǎng)頁</h3><hr>
  <h4>第一個網(wǎng)頁</h4><hr>
  <h5>第一個網(wǎng)頁</h5><hr>
  <h6>第一個網(wǎng)頁</h6><hr>
  <p>千里之行始于足下</p><hr>
  </body> 
  </html>

效果如下：

<hr>標(biāo)簽可以為它前面的元素添加分割線，大家注意的是分割線不是下劃線，添加下劃線的操作我們會在CSS樣式表中詳細(xì)講解。

NO.2:<p></p>與<br>

<p></p>元素是添加段落的。示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網(wǎng)頁</title>
  </head> 
  <body>
  <h1>第一個網(wǎng)頁</h1><hr>
  <p>千里之行始于足下值得注意的是我們沒有必要一一講解HTML中的所有元素以及每個元素的各個屬性，
因為每個元素的使用都是大同小異，我們完全可以通過幾個常用案例對HTML全部元素及屬性的指定形成一
個整體認(rèn)識，以后可以根據(jù)需求通過查詢手冊來自己學(xué)習(xí)其他元素及其屬性的用法。</p><hr>
</body>
</html>

效果如圖所示：

通過觀察發(fā)現(xiàn)，即使我們在代碼中對段落的文字進(jìn)行回車操作，但是出現(xiàn)在頁面中是沒有回車的效果的，文字按照順序長長的排列在顯示器上，非常不利于閱讀，因此我們就要介紹常常和p標(biāo)簽連用的<br>換行標(biāo)簽。

示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head>
  <title>第一個網(wǎng)頁</title>
</head> 
<body>
  <h1>第一個網(wǎng)頁</h1><hr>
<p>千里之行始于足下<br>
  值得注意的是我們沒有必要一一講解HTML中的所有元素以及每個元素的各個屬性，<br>
  因為每個元素的使用都是大同小異，我們完全可以通過幾個常用案例對HTML全部元<br>
  素及屬性的指定形成一個整體認(rèn)識，以后可以根據(jù)需求通過查詢手冊來自己學(xué)習(xí)其他<br>
  元素及其屬性的用法。</p><hr>
</body>
</html>

效果如圖所示：

喜歡的小伙伴請關(guān)注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標(biāo)簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

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

跟隨我們，不管你有多白，都可以逐步進(jìn)入網(wǎng)絡(luò)安全行業(yè)，并最終在這個行業(yè)找到高薪職業(yè)。

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

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

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

語言

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

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

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

代碼

了解了語言之后，我們就再來看一看，什么是代碼，那代碼跟我們?nèi)粘Ｉ钪械倪@種能夠聯(lián)系起來的又是什么東西呢？

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

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

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

程序

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

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

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

HTML叫做超文本標(biāo)記語言

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

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

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

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

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

在這里瀏覽器是吧？提到了瀏覽器，那么這時候我們就知道了HTML語言啊它是一種與瀏覽器之間進(jìn)行交流的這么一種語言。就是我們?nèi)懸恍┐a，那么寫這些代碼的目的是什么呢？目的就是為了和瀏覽器去交流，只要我們寫的這個東西瀏覽器能看得懂，他就會根據(jù)我們寫的代碼呈現(xiàn)出最終的網(wǎng)頁。這就是HTML語言的一個基本概念。

HTML的語法規(guī)則

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

（2）HTML當(dāng)中的標(biāo)簽分為單標(biāo)簽和雙標(biāo)簽。

（3）單標(biāo)簽格式為<名稱/>，雙標(biāo)簽格式為<名稱></名稱>。

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

然后，我們可以對照一下HTML的基本結(jié)構(gòu)

HTML網(wǎng)頁基本結(jié)構(gòu)需要如下標(biāo)簽組成：

（1）<html></html>

（2）<body></body>

（3）<head></head>

（4）<title></title>

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

單擊窗口圖片，在列表中找到記事本

然后在記事本中輸入<html></html>,這表示告訴瀏覽器，這是一個標(biāo)準(zhǔn)的HTML網(wǎng)頁。

在記事本中輸入<html></html>

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

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

分開html開始和結(jié)束標(biāo)簽

我們接著往下看，第二個標(biāo)簽?zāi)亟凶?lt;body></body>,里面的單詞呢表示的是身體，那么它呢表示的就是網(wǎng)頁的主體，這個網(wǎng)頁的主體也屬于基本結(jié)構(gòu)，那么它在哪兒呢？注意啊網(wǎng)頁的主體也屬于網(wǎng)頁，那么它呀要放在<html></html>的中間。

將<body></body>標(biāo)簽插入到<body></body>中

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

在<body></body>標(biāo)簽的上方插入<head></head>

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

好了，整理一下格式

插入<title></title>標(biāo)簽

我們來看4個基本結(jié)構(gòu)的組成標(biāo)簽，我們都已經(jīng)寫到了這個文檔里面了。

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

那么到現(xiàn)在為止呀我們這個網(wǎng)頁的基本結(jié)構(gòu)就算是真正寫完了，我們把它保存一下。現(xiàn)在這個文檔里邊啊我們寫的是網(wǎng)頁的程序，雖然很簡單，但它也是一個完整的網(wǎng)頁了。

那么既然是一個網(wǎng)頁，那我們?nèi)绾文艽蜷_它看這個網(wǎng)頁呢？注意這個HTML寫出來的這個程序啊需要放在HTML文件里邊，

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

將.txt格式改成.html格式

雙擊“網(wǎng)頁.html”，就會打開一個網(wǎng)頁。

用代碼創(chuàng)建的第1個初始網(wǎng)頁

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

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

我現(xiàn)在要想在里邊簡單的寫點文字，哎我看看我這個網(wǎng)頁是否能夠正常顯示。

那么在哪兒能夠?qū)懳淖帜兀扛蠹艺f一下，

在我們這個基本結(jié)構(gòu)里啊有兩個地方是可以寫內(nèi)容的，一個就是<body></body>主體，另外一個呢就是<title></title>標(biāo)題，這兩個地方中是可以寫文字內(nèi)容的。

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

用記事本打開html文件

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

標(biāo)簽中間插入文字，讓網(wǎng)頁中有內(nèi)容

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

用代碼創(chuàng)建的第1個網(wǎng)頁

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

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

在線咨詢

上一篇：python學(xué)習(xí)筆記(基本語法+腳本)
下一篇：JavaScript代碼怎樣引入到HTML中？

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

不懂HTML？看這篇文章就夠了