傻瓜基本HTML指南

最後更新時間為05年2020月XNUMX日


Twenty years ago, even if you are just a hobby blogger, you had to know some web coding to protect yourself or to add a simple function to your site.二十年前,即使您只是一個業餘博客作者,您也必須知道一些Web編碼來保護自己或為您的網站添加簡單的功能。 But now there are so many editors and plugins available that even knowing the basics of HTML is no longer required.但是現在有太多的編輯器和插件可用,甚至不再需要了解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代碼。
HTML“代碼”。

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

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

HTML是當今互聯網的骨幹。 數以百萬計的網站共同構成了互聯網。 HTML在哪裡 所有這些網站的基礎.

在我們開始之前...

1.什麼是HTML?

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

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

2.為什麼需要HTML?

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

這就是你需要HTML的原因。

3. HTML是否區分大小寫?

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

創建第一個HTML文件的步驟

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

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

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

這是你需要做的事情:

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

你準備好了!

代碼編輯器Atom的示例
代碼編輯器– Atom

1.世界您好!

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

代碼:

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

輸出:

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

理解HTML結構

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

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

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

2. HTML標記

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

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

(2a)頭標籤

所有的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"

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

代碼:

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

代碼:

唉! 腳本被禁用。

(2b)正文標籤

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

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

代碼:

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

輸出:

格式化標籤

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

代碼:

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

輸出:

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

示例:

You can comment out any code by surrounding them in this way -->

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

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

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

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

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

代碼:

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

輸出:

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

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

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

示例:

這是2014年500月的Googleplex。 該圖像的寬度為375像素,高度為0像素。

輸出:

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

要么

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

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

代碼:

這是一個有序列表: 項目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。

以下是一些有用的資源: