初學者的權威HTML指南

最新更新於15 May 2018

二十年前,即使你只是一個業餘愛好博客,你也必須知道一些網絡編碼來保護自己或為你的網站添加一個簡單的功能。 但現在有很多編輯器和插件可供使用,甚至不再需要了解HTML的基礎知識 建立一個網站 or 經營一個博客.

這樣做的問題是,如果您不了解一些基礎知識,您可以輕鬆地在您的博客中遇到麻煩,並且必須聘請昂貴的開發人員來解決可能是一個小問題。 不僅如此,而且創建對博客的更改(例如添加自定義文本小部件)需要一些知識。

如果您遇到內容佈局看起來不正確,HTML知識可以讓您回到正軌。

以下是我們為博主和非技術在線企業主提供的HTML指南版本。

HTML是當今互聯網的支柱。 數百萬個網站共同構成了互聯網。 HTML是所有這些網站的構建塊。

初學者的問答

1-什麼是HTML?

HTML是。的縮寫 Hyper T分機 MArkupe Language。 它是標記Web瀏覽器內容的標準語言。

HTML由“Elements”表示。 元素也稱為“標籤”。

2-為什麼需要HTML?

Web瀏覽器只能在用支持的語言編寫時呈現網站。 HTML是最常用的標記語言,對Web瀏覽器的接受程度最高。

這就是你需要HTML的原因。

3- HTML是否區分大小寫?

HTML不區分大小寫。 但最好的做法是用適當的案例編寫HTML。

創建第一個HTML文件的步驟

您可以使用計算機上的記事本創建基本HTML文件。 但是編寫許多代碼行會很痛苦。

你需要一個代碼編輯器。 一個好的代碼編輯器可以更容易地編寫和組織大型代碼。

我使用並推薦 記事本+ + (免費和開源)用於編寫Web語言。 您可以使用其他編輯器 崇高的文字, 原子 等。

這是你需要做的事情:

  1. 安裝代碼編輯器
  2. 打開它
  3. 創建一個新文件
  4. 將其另存為.html文件

你準備好了!


返回頂部

1- Hello World!

將以下代碼複製並粘貼到新的HTML文件中並保存。 現在在您的Web瀏覽器上運行它。

代碼:

<!DOCTYPE html> <html> <head> <title>我的第一個網頁</ title> </ head> <body> <p> Hello World!</ p> </ body> </ html>

輸出:

恭喜! 您已經創建了第一個HTML文件。 此時您無需了解它。 我們將很快介紹它。

理解HTML結構

每個HTML文件都有一個共同的裸結構。 一切都在這裡開始。 修剪後,每個大頁面的代碼都會進入這個結構。

所以讓我們嘗試從“Hello World!”代碼中理解它。 以下元素是每個HTML文件的必需部分。

  • <!DOCTYPE html> =瀏覽器聲明這是一個HTML文件。 您必須在<html>標記之前指定它。
  • <html> </ html> =這是HTML文件的根元素。 你寫的所有東西都在<html>和</ html>之間。
  • <head> </ head> =這是瀏覽器的元信息部分。 此標記內的代碼沒有可視輸出。
  • <body> </ body> =這是Web瀏覽器呈現的部分。 您在網站上看到的是在<body>和</ body>之間呈現代碼。


返回頂部

2- HTML標籤

HTML是數百種不同標籤的協作。 你需要了解它們的工作原理。 您還必須確保他們以正確的方式使用它們。

HTML標記通常具有開始和結束標記。 開始標記的關鍵字由小於(<)和大於(>)的符號包圍。 結束標記具有相同的一切,但在小於(<)符號後面有一個額外的正斜杠(/)。

(2a)頭標籤

所有頭標籤都在<head>和</ head>之間。 它們包含Web瀏覽器和搜索引擎的元信息。 他們基本上沒有視覺輸出。

<title> </ title>

標題標籤定義在瀏覽器選項卡上可見的網頁標題。 該信息由Web程序和搜索引擎使用。 每個HTML文件可以擁有最高的一個標題。

代碼:

<title>我的第一個網頁</ title>
標題標記顯示在瀏覽器頂部。

<鏈路>

鏈接標記將您的HTML頁面與外部資源相關聯。 它的主要用途是將HTML頁面與CSS樣式錶鍊接起來。 它是一個自動關閉標籤,不需要結束</ link>。 這裡rel表示與文件的關係,src表示源。

代碼:

<link rel =“stylesheet”type =“text / css”src =“style.css”>

的<meta>

Meta是另一個自動關閉標記,它提供html文件的元信息。 搜索引擎和其他Web服務使用這些信息。 如果您想為搜索引擎優化頁面,則必須使用元標記。

代碼:

<meta name =“description”content =“這是搜索引擎顯示的簡短描述”

<script> </ script>

腳本標記用於包括服務器端腳本或鏈接到外部腳本文件。 它在開始標記中可以有兩個屬性。 一個是類型,另一個是源(src)。

代碼:

<script type =“text / javascript”src =“scripts.js”> </ script>

<noscript> </ noscript>

在Web瀏覽器中禁用腳本時,Noscript標記有效。 它使頁面與不允許在其Web瀏覽器中使用腳本的用戶兼容。

代碼:

<NOSCRIPT> <P>唉! 腳本被禁用。</ p> </ noscript>

(2b)正文標籤

所有的body標籤都在<body>和</ body>之間。 他們有視覺輸出。 這是完成大部分工作的地方。 您必須使用這些標記來構建主頁面內容。

<h1> </ h1>到<h6> </ h6>

這些是標題標籤。 最重要的標題用<h1>標記,最不重要用<h6>標記。 您應該在正確的層次結構中使用它們。

代碼:

<h1>這是一個h1標題</ h1> <h2>這是一個h2標題</ h2> <h3>這是一個h3標題</ h3> <h4>這是一個h4標題</ h4> <h5 >這是一個h5標題</ h5> <h6>這是一個h6標題</ h6>

輸出:

格式化標籤

可以使用許多格式標籤格式化html文件中的文本。 當您想要突出顯示內容中的單詞或行時,將是必要的。

代碼:

<p>您可以通過多種方式突出顯示文字。</ p> <p>您可以<strong>加粗</ strong>,<u>加下劃線</ u>,<em>斜體</ em>,<標記>標記</ mark>,<sub>下標</ sub>,<sup>上標</ sup>等等!</ p>

輸出:

<! - - >

您可以使用comment標記將某些代碼與rending區分開來。 代碼將顯示在源代碼中,但不會呈現。 此標記的主要用途是創建html文件的文檔以供將來參考。

示例:

<! -  <p>您可以通過以這種方式包圍它們來註釋掉任何代碼</ p>  - >

(2c)其他重要的HTML標籤

<a> </a>

Anchor是一個無價的標籤,幾乎無處不在。 沒有至少一個錨鏈接,您將不會在線看到任何網頁。

結構是一樣的。 它有一個開口<a>和一個關閉部分</a>。 要錨定的文本介於<a>和</a>之間。

有一些屬性可以定義用戶點擊後的位置和方式。

  • ahref =“” =它定義目標鏈接。 鏈接在雙引號之間。
  • target =“” =它定義URL是在新瀏覽器選項卡中還是在同一選項卡中打開。 target =“_ blank”用於新選項卡,target =“_ self”用於在同一選項卡中打開。
  • rel =“” =它定義當前頁面與鏈接頁面的關係。 如果您不信任鏈接頁面,則可以定義rel =“nofollow”。

代碼:

<p> <a target="_blank" href="https://www.google.com/">點擊此處</a>轉到Google。 它將在新標籤頁中打開。</ p> <p> <a target="_self" href="https://www.google.com/">點擊此處</a>。 它還會將您帶到Google,但會在當前標籤中打開。</ p>

輸出:

<img />

圖像標記是另一個重要的標記,沒有它,您無法想像許多基於圖像的網站。

<img />是一個自動關閉的標籤。 它不需要傳統的結束,如</ img>。 在正確使用它之前,您需要了解一些屬性。

  • src =“” =這用於定義圖像的源鏈接。 將鏈接放在雙引號之間。
  • alt =“” =它代表替代文字。 當您的圖像未加載時,此文本將為用戶提供有關丟失圖像的信息。
  • width =“” =它以像素為單位定義圖像的寬度。
  • 高度=“” =它以像素為單位定義圖像的高度。

示例:

<p>這是8月2014中的Googleplex。</ p> <p>此圖片的寬度為500像素,高度為375像素。</ p> <img src =“https://upload.wikimedia。 org / wikipedia / commons / 0 / 0e / Googleplex-Patio-Aug-2014.JPG“alt =”Google總部八月2014“width =”500“height =”375“/>

輸出:

提示:想要插入可點擊的圖片嗎? 使用<a>標籤包裝圖像代碼。 看看它如何。

<ol> </ ol>或<ul> </ ul>

列表標記用於創建項目列表。 <ol>代表有序列表(編號列表),<ul>代表無序列表(項目符號點)。

<ol>或<ul>中的列表項標有<li> </ li>。 li代表清單。 您可以在父<ol>或<ul>標記內包含任意數量的<li>。

代碼:

<p>這是一個有序列表:</ p> <ol> <li>項目1 </ li> <li>項目2 </ li> <li>項目3 </ li> </ ol> <p>這是一個無序列表:</ p> <ul> <li>項目1 </ li> <li>項目2 </ li> <li>項目3 </ li> </ ul>

輸出:

<table> </ table>

表標記用於創建數據表。 有一些內部級別標籤定義表頭,行和列。

<table> </ table>是外部父代碼。 在此標記中,<tr>代表表格行,<td>代表表格列,<th>代表表格標題。

代碼:

<table> <tr> <th>名稱</ th> <th>年齡</ th> <th>職業</ th> </ tr> <tr> <td> Jo <td> 27 </ td> < td>商人</ td> </ tr> <tr> <td> Carol </ td> <td> 26 </ td> <td>護士</ td> </ tr> <tr> <td> Simone < / td> <td> 39 </ td> <td>教授</ td> </ tr> </ table>

輸出:

注意:第一個<tr>中的值是標題。 因此,我們使用<th>將粗體文本效果應用於文本。

表分組

您可以使用表分組元素擴展表的功能。 有時您需要創建分成多個頁面的大型表。

將表數據分組到頁眉,正文和頁腳中,您可以允許獨立滾動。 標題和正文部分將打印到表格所跨越的每個頁面。

表分組標籤是:

  • <thead> </ thead> =用於包裹桌子的標題。 它打印到表的每個拆分頁面。
  • <tbody> </ tbody> =用於包裝表的主數據。 您可以根據需要擁有盡可能多的<tbody>。 <tbody>標記表示一組單獨的數據。
  • <tfoot> </ tfoot> =用於包裝表的頁腳信息。 它打印到表的每個拆分頁面。

請注意,使用分組不是強制性的。 您可以使用它來使更大的表更具可讀性。 雖然一些特殊的開發人員明顯使用這些標籤作為CSS選擇器。

以下是我們如何將示例表分組為<thead>,<tbody>和<tfoot>:

代碼:

<table> <thead> <tr> <th>姓名</ th> <th>年齡</ th> <th>職業</ th> </ tr> </ thead> <tbody> <tr> <td> John </ td> <td> 27 </ td> <td>商人</ td> </ tr> <tr> <td> Carol </ td> <td> 26 </ td> <td>護士</ td> </ tr> <tr> <td> Simone </ td> <td> 39 </ td> <td>教授</ td> </ tr> </ tbody> <tfoot> <tr> <td>總人數:</ td> <td> 3 </ td> </ tr> </ tfoot> </ table>

輸出:

<form> </ form>

表單元素用於為網頁創建交互式表單。 HTML表單包含多個連續元素。 例如:<label>,<input>,<textarea>等。

表單中的action屬性非常重要。 它指向用於處理信息的服務器端或第三方頁面。 對於處理,您需要首先定義方法。

您可以使用兩種方法之一,獲取或發布。 獲取發送郵件在郵件正文中發送信息的URL格式的所有信息。

表單的輸入有很多種類型。 最基本的輸入類型是文本。 它寫為<input type =“text”>。 類型也可能是廣播,複選框,電子郵件等。 底部應該有一個提交類型輸入,用於創建提交按鈕。

<label>標籤用於創建標籤並將其與輸入相關聯。 將標籤與輸入相關聯的規則是在for =“”label屬性和id =“”輸入屬性中具有相同的值。

代碼:

<form action =“#”> <label for =“firstname”>名字:</ label> <input type =“text”id =“firstname”> <br> <label for =“lastname”>姓氏: </ label> <input type =“text”id =“lastname”> <br> <label for =“bio”>簡短生物:</ label> <textarea id =“bio”rows =“10”cols =“ 30“placeholder =”在此處輸入您的簡歷...“> </ textarea> <br> <label>性別:</ label> <br> <label for =”male“>男性</ label> <輸入類型= “radio”name =“gender”id =“male”> <br> <label for =“female”>女性</ label> <input type =“radio”name =“gender”id =“female”> <br > <input type =“submit”value =“Submit”> <form>

輸出:

注意:我已將操作指向null值,因為它未連接到任何服務器來處理信息。


返回頂部

3- HTML屬性

屬性是HTML標記的一種修飾符。 他們為HTML標記添加了新配置。

屬性看起來像attributename =“”並且位於開始的HTML標記中。 屬性的值介於雙引號之間。

id =“”和class =“”

id和class是HTML標記的標識符。 使用標識符將不同的名稱指定給不同的HTML元素。 您可以為多個元素使用一個類標識符。 但是你不能為多個元素使用一個id標識符。

代碼:

<h1 class =“heading”>這是主標題</ h1>

HREF =“”

href代表超文本參考。 他們指向用戶引用鏈接。 錨標記<a>使用href將用戶發送到目標URL。

代碼:

<a href="https://www.google.com/"> Google </a>

SRC =“”

src代表來源。 它定義了您在HTML文件中使用的媒體或資源的來源。 源可以是本地或第三方URL。

代碼:

<img src =“https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG”/>

ALT =“”

alt代表替代方案。 它是在無法加載HTML元素時使用的備份文本。

代碼:

<img src =“https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG"alt =”Google總部“/>

風格=“”

style屬性通常用於HTML標記。 它在HTML標記中完成CSS的工作。 您的樣式屬性介於雙引號之間。

代碼:

<h2 style =“color:red”>這是另一個標題</ h2>


返回頂部

4-代碼顯示:阻止與內聯

有些元素總是從一個新行開始,並採用完整的可用寬度。 這些是“塊”元素。

例如:<div>,<p>,<h1> - <h6>,表格等。

某些元素僅佔用所需空間,不會在新行上啟動。 這些是“內聯”元素。

例如:<a>,<span>,<br>,<strong>,<img>等

當您使用CSS樣式時,您需要將塊元素與內聯區分開來。 在本HTML指南中,它不是非常必要的。

代碼:

<!DOCTYPE html> <html> <head> <title>我的第一個網頁</ title> </ head> <body> <h2>這是一個H2標題。 它有塊顯示。</ h2> <h2>這是<u>另一個</ u> H2標題。 這裡的下劃線標籤有內聯顯示。</ h2> </ body> </ html>

輸出:


返回頂部

5-雙引號與HTML中的單引號

這個問題非常明顯。 你應該在HTML中使用什麼? 單引號還是雙引號? 人們似乎同時使用哪一個,但哪一個是正確的?

在HTML中,單引號和雙引號是相同的。 它們對輸出沒有任何影響。

你可以使用你喜歡的任何人。 但是在一頁代碼中混合兩者被認為是一種不好的做法。 你應該與他們中的任何一個保持一致。


返回頂部

6-語義HTML與非語義HTML

語義HTML是HTML的最新版本,也稱為HTML5。 它是非語義HTML和XHTML的開發版本。

為什麼HTML5更好? 在以前的版本中,HTML元素由id / class名稱標識。 例如:<div id =“article”> </ div>被認為是一篇文章。

在HTML5中,<article> </ article>標記將自身表示為文章而不需要任何id / class標識符。

為了HTML5,現在搜索引擎和其他Web應用程序可以更好地理解網頁。 事實證明,語義網站對SEO做得更好。

以下是一些流行的HTML5標記列表:

  • <main> </ main> =這是用於包裝要向觀看者顯示的主要內容。
  • <header> </ header> =這用於標記內容的標題部分,例如title或author meta。
  • <article> </ article> =它為您的觀眾指定用戶定義或獨立的內容。
  • <section> </ section> =它可以對任何代碼進行分組,例如頁眉,頁腳或側邊欄。 你可以說,它是div的語義形式。
  • <footer> </ footer> =這是您的頁腳內容,免責聲明或版權文本所屬的地方。
  • <audio> </ audio> =它使您可以插入音頻文件,而不會有任何插件問題。
  • <video> </ video> =與<audio>一樣,您可以使用此標記插入視頻而不會出現插件問題。

一個簡單的HTML5結構如下所示:

<!DOCTYPE html> <html> <head> <meta charset =“utf-8”/> <title>我的第一個網頁</ title> </ head> <body> <header> <nav> <ul> < li>菜單1 </ li> <li>菜單2 </ li> </ ul> </ nav> </ header> <main> <article> <header> <h2>這是文章的標題</ h2> <p> John Doe發表</ p> </ header> <p>文章的內容在這裡</ p> </ article> </ main> <footer> <p>版權所有2017 John Doe </ p> </ footer> </ body> </ html>


返回頂部

7- HTML驗證

大多數網絡專業人員在完成後驗證他們的代碼。 為什麼在代碼工作正常時驗證代碼是否必要?

驗證代碼有兩種可能的原因:

  1. 它將幫助您使代碼跨瀏覽器和跨平台兼容。 代碼可能不會在您當前的瀏覽器中顯示任何錯誤,但可能在另一個瀏覽器中顯示。 代碼驗證將修復它。
  2. 如果您的頁面有錯誤,搜索引擎和其他網絡程序可能會停止抓取您的網頁。 您可以通過驗證確認您沒有任何重大錯誤。

W3C驗證 是最受歡迎的代碼驗證服務。 他們有幾種驗證代碼的方法。 您可以上傳文件或直接在其驗證引擎中輸入代碼。


返回頂部

8-其他有用的資源

HTML是一個不斷學習的主題。 更新版本的HTML可能會更快到來。 所以你必須保持更新並繼續練習。 實踐是什麼aces HTML。

以下是一些有用的資源: