每个WordPress站长都需要知道的基本HTML代码

每个WordPress站长都需要知道的基本HTML代码

每个WordPress用户都需要知道的基本HTML代码
HTML是互联网上几乎所有内容的基础。它是构建互联网内容的基石,并且已经存在了数十年。如果没有对HTML的充分理解,您使用WordPress或任何其他网页设计和开发所做的一切都将受到阻碍。幸运的是,从初学者到老手的每个WordPress用户都有一大堆基本的HTML代码。让我们分解它们,让你加快速度。

什么是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>,但Google不再因为拥有更多内容而惩罚您。请记住,使用<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>关闭链接代码,就可以在那里使用任何文本。这将是可点击链接本身,称为锚文本

此外,您还可以嵌套HTML代码。您可以通过在链接标志之间插入<img src>标记来使图像可单击。

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

 

 

 

更多链接属性

您还可以为链接包含相当多的不同属性,以便它们以某种方式运行(例如将URL隐藏为引用者或在新窗口中打开链接)。一些对你最有用的

  • rel表示链接及其目标的某种关系。如noreferrer,以防止转介流量追溯到你。
  • target告诉浏览器打开链接的位置:_blank将在空白选项卡中打开它。
  • nofollowrel一起使用并告诉搜索引擎您不希望将任何链接汁传递到目标站点。链接到有争议的内容等时这很好。它还可以防止人们在您的评论中发送垃圾链接,并使您的内容可以被视为无偏见,因为除了曝光和点击之外,您没有提供任何奖励。

还有更多,但那些是你最常见到的。

<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 1 paragraph.</p>
<p>This is 2 paragraph.</p>

线条和换行符

您可能希望段落和部分之间存在其他分隔。那时你可以使用<hr><br/>标签。

<hr>在任何地方插入分隔线。许多人使用它来分隔侧边栏或网页主要部分中的小部件。

<BR/>标签是一个换行符。您可以使用<p>中间的<br/>分隔线而不进入新的段落(用于块样式和组织的缘故)。<br/>是一个自动关闭的标签,这意味着其中不能有任何内容。这由代码末尾的斜杠表示。

虽然您可以通过将文本和段落插入到需要中断的位置来分解文本和段落,但这不是一个好习惯,并且当您使用HTML和CSS和JavaScript获得更高级时,您将需要定位段落做某些事情的元素。

包起来

HTML是与互联网互动所必需的。每个人都以同样的方式使用它们,无论你是从开始进行Web开发和设计,还是从JavaScript之前的日子开始都是老手。我们仍然使用基本的HTML代码来运行我们所有网站的基础。无论网站有多么花哨或其功能有多先进,当链接中断或不应该是大胆的东西时,你仍然会四处寻找<a href><strong>标签是没事。

这些天你最常用的基本HTML代码是什么?

文章的特色图片来自enterlinedesign / shutterstock.com

分享到 :
相关推荐

发表评论

登录... 后才能评论