傻瓜基本HTML指南

更新時間:2022-06-02 / 文章作者:Jerry Low
HTML 代碼 - 示例
HTML“代碼”。

HTML 是當今互聯網的支柱。 數以百萬計的網站共同組成了互聯網。 HTML 是所有這些網站的構建塊。 二十年前,即使你只是一個愛好博主,你也必須了解一些網絡 編碼 保護您自己或為您的網站添加一個簡單的功能。 但是現在有如此多的編輯器和插件可用,甚至不再需要了解 HTML 的基礎知識。

The problem with this is that if you don't know a few basics, you can easily get into real trouble in your blog and have to hire a pricey developer to fix what may be a minor problem.這樣做的問題是,如果您不了解一些基礎知識,則很容易在博客中遇到真正的麻煩,而不得不僱用昂貴的開發人員來解決可能是一個小問題。 Not only that, but creating changes to your blog such as adding a custom text widget requires a little knowledge.不僅如此,而且要對博客進行更改(例如添加自定義文本小部件)需要一點知識。

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

另請閱讀

在我們開始之前...

1.什麼是HTML?

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

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

2.為什麼需要HTML?

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

這就是你需要HTML的原因。

3. HTML是否區分大小寫?

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

創建第一個HTML文件的步驟

記事本+ +

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

你需要一個代碼編輯器。 一個好的代碼編輯器將使編寫和組織大型代碼變得更加容易。 我使用並推薦 記事本+ + (免費和開源)用於編寫Web語言。 您可以使用其他編輯器 石灰文本, 原子 等。

這是你需要做的事情:

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

你準備好了!

1.世界您好!

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

HTML代碼

我的第一個網頁你好世界!

輸出:

HTML 代碼 - Hello World

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

理解HTML結構

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

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

  • =向瀏覽器宣告這是HTML文件。 您必須在標籤。
  • =這是HTML文件的根元素。 您編寫的所有內容都介於和。
  • =這是瀏覽器的元信息部分。 此標記內的代碼沒有可視輸出。
  • =這是Web瀏覽器呈現的部分。 您在網站上確切看到的是代碼之間的呈現和。

2. HTML標記

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

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

頭部標籤

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

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

代碼:

我的第一個網頁
標題標籤-HTML示例
標題標記顯示在瀏覽器頂部。

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

代碼:

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

代碼:

<meta name="description" content="This is the short description that search engines show"

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

代碼:

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

代碼:

唉! 腳本被禁用。

身體標籤

所有的身體標籤之間和。 他們有視覺輸出。 這是完成最多工作的地方。 您必須使用這些標籤來構造主頁內容。

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

代碼:

這是H1標題這是H1標題這是H1標題這是H2標題這是H2標題這是H2標題

輸出:

到

格式化標籤

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

代碼:

您可以通過多種方式突出顯示文本。 您可以加粗,下劃線,斜體, 標記,下標,上標等等!

輸出:

格式化標籤

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

示例:

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

其他重要的 HTML 標籤

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

結構相同。 它有一個開合部分。 您要定位的文字介於和之間。

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

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

代碼:

點擊此處轉到Google。 它將在新選項卡中打開。 請點擊這裡。 它還會帶您到Google,但會在當前標籤中打開。

輸出:

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

是一個自動關閉標籤。 它不需要像。 在正確使用它之前,您需要了解一些屬性。

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

輸出:

<img width=

提示:是否要插入可點擊的圖片? 用標籤包裝圖像代碼。 看看進展如何。

要么

列表標籤用於創建項目列表。 代表有序列表(編號列表),並且代表無序列表(項目符號)。

裡面的清單項目要么被標記為。 李代表名單。 你可以有很多如你所願要么標籤。

代碼:

這是一個有序列表: 項目1 項目2 項目3 這是一個無序列表: 項目1 項目2 項目3

輸出:

要么

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

是外部父代碼。 在這個標籤中代表表格行, 代表表格欄和代表表頭。

代碼:

名稱年齡職業喬27 商人頌歌26 護士西蒙妮39 教授

輸出:

注意:第一個中的值是標題。 所以,我們用將粗體文本效果應用於文本。

表分組

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

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

表分組標籤是:

  • =用於包裹桌子的標題。 它打印到表的每個拆分頁面。
  • =用於包裝表的主要數據。 你可以有很多根據需要。 一種標籤表示一組單獨的數據。
  • =用於包裝表的頁腳信息。 它打印到表的每個拆分頁面。

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

這是我們如何將示例表分組為, 和:

代碼:

名稱年齡職業約翰27 商人頌歌26 護士西蒙妮39 教授總人數: 3

輸出:

表單元素用於創建網頁的交互式表單。 HTML表單包含幾個連續的元素。 例如:, , 等等

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

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

表單的輸入有很多類型。 最基本的輸入類型是文本。 它寫為。 類型也可以是單選,複選框,電子郵件等。 底部應有一個提交類型輸入,用於創建一個提交按鈕。

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

代碼:

名字: 姓: 簡短的簡歷: 性別: 男女

輸出:

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

3. HTML屬性

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

屬性看起來像attributename =””,位於開頭的HTML標記中。 該屬性的值位於雙引號之間。

id =””和class =“””

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

代碼:

這是主標題

href =””

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

代碼:

谷歌

src =””

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

代碼:

alt =””

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

代碼:

樣式=””

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

代碼:

這是另一個標題

4.代碼顯示:塊與內聯

有些元素總是從新行開始,並佔據全部可用寬度。 這些是“塊”元素。

例如: , , -- ,表格等。

某些元素僅佔用所需的空間,而不以新行開頭。 這些是“內聯”元素。

例如: 、、 , 等等

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

代碼:

我的第一個網頁這是H2標題。 它具有塊顯示。 這是另一個H2標題。 下劃線標籤具有內聯顯示。

輸出:

塊與內聯

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

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

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

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

6.語義HTML與非語義HTML

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

為什麼HTML5更好? 在以前的版本中,HTML元素由ID /類名稱標識。 例如: 被視為文章。

在HTML5中, 標籤將自己表示為商品,而無需任何id / class標識符。

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

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

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

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

我的第一個網頁菜單8 菜單1 這是文章的標題約翰·杜(John Doe)發表文章內容在這裡版權所有2 John Doe

7. HTML驗證

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

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

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

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

8.其他有用的資源

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

以下是一些有用的資源:

關於Jerry Low

WebHostingSecretRevealed.net (WHSR) 的創始人 - 他的托管評論文受到 100,000 用戶的信任和使用。 在網絡託管、聯盟營銷和 SEO 方面擁有超過 15 年的經驗。 ProBlogger.net、Business.com、SocialMediaToday.com 等的貢獻者。