每个 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 提供