每個 WordPress 用戶都需要知道的基本 HTML 代碼

已發表: 2019-04-24

HTML 是互聯網上幾乎所有內容的基礎。 它是構建互聯網內容的基石，並且已經存在了幾十年。 如果對 HTML 沒有紮實的理解，您使用 WordPress 或任何其他網頁設計和開發所做的一切都會受到阻礙。 幸運的是，從初學者到老手的每個 WordPress 用戶幾乎每天都會使用大量基本的 HTML 代碼。 讓我們分解它們，讓您快速上手。

訂閱我們的 YouTube 頻道

什麼是 HTML？

這是快速版本：HTML 代表超文本標記語言，這意味著它不是一種編程語言。 HTML 不會命令您的計算機通過腳本運行事物。 相反，它需要您在頁面上的文本，並對其進行標記。 斜體、粗體、對齊、大小等。 HTML 還使您能夠包含圖像和鏈接，而在 HTML5 中，最新版本以令人興奮的新方式處理它們和文本。

HTML 代碼包含在標誌中，非常易於閱讀。 一個簡單的 HTML 頁面可能如下所示： 

<html>
  <head>
    <title>The title of the webpage would go here.</title>
  </head>
  <body>
    <h1>This is the page's title that shows up to people</h1>
      <p>Content</p>
      <p>More content</p>
      <p>Even more content</p>
    <h2>Section break</h2>
      <p><img src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/04/tagline-featured-image.jpg"></p>
      <p><a href="https://elegantthemes.com/divi">A link to our Divi page</a></p>
  </body>
</html>

在瀏覽器中呈現時，它看起來像這樣：

基本 HTML 代碼

如您所見，HTML 並沒有那麼令人困惑。 事實上，即使您以前從未見過任何 HTML 代碼，我打賭您可以僅通過上下文就知道每個標籤的含義。 順便說一下，讓我們看看您將在整個網絡職業生涯中使用的最常見的基本 HTML 代碼。

膽大

當您將文本包裹在<strong>標籤中時，您是在告訴瀏覽器將文本加粗。 你也可以簡單地使用<b> ，但是谷歌和其他搜索引擎偏愛語義編碼，你使用<strong>更安全

You can make <strong>text bold</strong> by using this tag.

斜體

<Em>代表強調，它是在 HTML 中使用斜體的語義方式。 您也可以使用<i>來執行此操作。

You can put <em>text in italics<em> by using this tag.

強調

<u>和下劃線也是如此。 一般來說，這個用處很少，因為鏈接帶有下劃線，並且無法點擊的帶下劃線的文本會給用戶帶來糟糕的體驗。

You can <u>underline</u> by using this tag.

標題

可能在所有基本 HTML 代碼中最常用的是各種標題。 使用<h1>、<h2>、<h3>、<h4>、<h5>、<h6>將您的內容分成幾個部分。

請務必按層次順序使用它們。 Google 希望您嵌套標題，因此請確保僅在<h1>下方使用<h2 > ，而不是在<h3>下方使用。

雖然大多數頁面只有一個<h1> ，但谷歌不再因為擁有更多而懲罰你。 請記住，使用<h1> 會重置頁面（或至少頁面的該部分）的嵌套。

<h2>H2 is the most commonly used header tag.</h2>

此頁面上所有 HTML 元素的標題都是h2 。

圖片

插入圖像是 HTML 所做的最有用的事情之一。 它打破了互聯網的野獸派風格，走上了今天的道路。 您需要做的就是擁有您想要的圖像的 URL，並放置一個<img src> （代表圖像源標籤。像這樣：

<img src="https://elegantthemes.com/picture.png" alt="a picture from elegant themes">

請注意，您不需要關閉圖像標籤，並且圖像顯示不需要引號。 許多人仍然使用它們來使代碼更具可讀性。

<alt>屬性是出於可訪問性目的而顯示的文本，它也被搜索引擎索引。 對於擁有屏幕閱讀器和其他設備的人來說，替代文字對於使用互聯網是絕對必要的。 為您的圖像提供替代文本始終是最佳做法。

鏈接

好的。 鏈接。 鏈接有很多事情要做。 或者，更確切地說，您可以使用鏈接做很多事情。 在最基本的情況下，您將把它與<a href>標籤放在一起。 <a>表示它是一個鏈接，而<href>從字面上看是指向鏈接位置的超文本引用（URL）。

<a href="http://elegantthemes.com/divi">A link to our Divi page, and this is the anchor text.</a>

您只需使用</a>關閉鏈接代碼，並且您可以在其中使用任何您想要的文本。 這將是可點擊的鏈接本身，稱為錨文本。

它在頁面上呈現如下：指向我們 Divi 頁面的鏈接，這是錨文本。

此外，您也可以嵌套 HTML 代碼。 您可以通過在鏈接標誌之間插入<img src>標籤來使圖像可點擊。

<a href="http://elegantthemes.com"><img src="https://elegantthemes.com/picture.png"""></a>

您可以在此處查看可點擊圖像鏈接的呈現方式：

圖片盜鏈的基本 HTML 代碼

更多鏈接屬性

您還可以為鏈接添加許多不同的屬性，以便它們以特定方式運行（例如隱藏您的 URL 使其不被引用或在新窗口中打開鏈接）。 一些對你最有用的將是

  • rel表示鏈接及其目標的某種關係。 例如noreferrer以防止推薦流量被追溯到您。
  • target告訴瀏覽器在哪裡打開鏈接：例如， _blank將在空白選項卡中打開它。
  • nofollow與rel一起使用，並告訴搜索引擎您不想將任何鏈接汁傳遞到目標站點。 這在鏈接到有爭議的內容等時很好。 它還可以防止人們在您的評論中發送垃圾郵件鏈接，並使您的內容可以被視為公正的，因為除了曝光和點擊之外，您不會為特色提供任何獎勵。

還有更多，但這些是您可能最常看到的。

<a href="https://www.elegantthemes.com/blog/divi-resources/get-a-free-mortgage-broker-layout-pack" rel="nofollow" target="_blank">Free Mortgage Broker Layout</a>

刪除線文本

如果你像我一樣，有時你需要想用刪掉的字開個玩笑。 或者，您可能需要從列表中標記事物（或刪除，正如代碼本身所說）。 或者其他任何你需要一行貫穿文本的東西。

那是當您在要刪除的文本周圍使用<del> 時。 對於某些人來說，這是非常常見的代碼，而其他人可能永遠不會使用它。 無論如何，這很容易記住。

You can use <del>this code</del> for strikethrough text in HTML.

列表

如今，列表是 Web 內容的另一個主要部分。 它們不僅為您提供大量的空白空間並打破文本牆，而且還讓您將您的想法組織成易於理解的片段。

您可以使用基本的 HTML 代碼製作兩種列表。 編號為 1、2、3 等的有序列表。 無序列表使用項目符號或符號（取決於您的站點設計）而不是數字。

對於無序列表或有序列表，您可以分別用<ul>或<ol>將每個列表包裝起來。 並且列表中的每一項都應該被包裹在<li> 中。

<ul>
  <li>This is part of an unordered list.</li>
  <li>So is this.</li>
</ul>

<ol>
  <li>And this is how you set up an ordered list.</li>
  <li><a href="https://elegantthemes.com">This is a link in a list.</a></li>
  <li><strong>And this link text is bold</strong>, but this part isn't.</li>
</ol>

這些代碼像這樣呈現以顯示差異：

  • 這是無序列表的一部分。
  • 這也是。
  1. 這就是您設置有序列表的方式。
  2. 這是列表中的鏈接。
  3. 這個鏈接文本是粗體的，但這部分不是。

您也可以在列表中嵌套其他代碼。 因此，您可以加粗文本、插入鏈接等。

大宗報價

在您的 WordPress 職業生涯中，您將需要引用其他人的網站。 這就是<blockquote> 的用武之地。只需用<blockquote>開始和結束標記將您複製/粘貼（和屬性）的任何文本括起來，就可以了。

<blockquote>This text will appear with special styling to indicate that it's a quote./blockquote>

這是它在頁面上的樣子：

此文本將以特殊樣式顯示，以表明它是引用。

段落

段落 HTML 有點奇怪。 根據您使用的 CMS 和構建器，它可能會自動將每個換行符呈現為單獨的段落。 當您輸入 HTML 時，WordPress 會執行此操作。 然而，並非一切都如此。 因此，如果您需要將段落分開並且沒有文字牆，請將每個段落包裹在<p> 中。 然後瀏覽器將知道將每個文本塊顯示為單獨的段落而不是一個連續的塊。 默認情況下，除非另有說明，否則瀏覽器會忽略換行符。

<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>

換行和換行

您可能需要段落和節之間的其他分隔。 那時您可以使用<hr>和<br/>標籤。

<hr>在任何位置插入分隔線。 許多人使用它來分隔側邊欄中的小部件或網頁的主要部分。

<br/>標籤是一個換行符。 您可以在<p>中間使用<br/>來換行而不進入新段落（為了塊樣式和組織）。 <br/>是一個自閉合標籤，這意味著其中不能包含任何內容。 這由代碼末尾的斜杠表示。

雖然您可以使用它通過將文本和段落插入到需要中斷的位置來拆分文本和段落，但這並不是一個好習慣，而且隨著您對 HTML、CSS 和 JavaScript 的了解越來越深入，您將需要定位段落元素做某些事情。 您可以在此處閱讀有關區別的更多信息。

包起來

HTML對於與互聯網交互是絕對必要的。 每個人都以相同的方式使用它們，無論您是剛開始從事 Web 開發和設計的人，還是在 JavaScript 出現之前的老手。 我們仍在使用基本的 HTML 代碼來運行我們所有網站的基礎。 無論該網站多麼花哨或它的功能多麼先進，當鏈接斷開或出現不應該的粗體時，您仍然會四處尋找<a href>或<strong>標籤是否是做得好。

這些天你最常用的基本 HTML 代碼是什麼？

文章特色圖片由 enterlinedesign/shutterstock.com 提供