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

WordPress

HTML是互联网上几乎所有内容的基础,它也是构建互联网内容的基石,并且已经存在发展了数十年。虽然我之前有说过,即使你不懂任何代码知识,也能做好一个wordpress网站。但是如果没有对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>

在浏览器中呈现时,它看起来像这样:

The title of the webpage would go here.

This is the page's title that shows up to people

Content

More content

Even more content

Section break

A link to our Divi page

正如您所看到的,HTML并不那么令人困惑。事实上,即使您以前从未见过任何HTML代码,我敢打赌您可以通过上下文找出每个标记的含义。有了这个,让我们来看看你在网络上看到过最常见的基本HTML代码。

粗体

当您将文本包装在标记中时,您告诉浏览器将文本加粗。你也可以简单地使用,但是对于谷歌和其他喜欢语义编码的搜索引擎,你会更安全

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

斜体

代表强调,它是在HTML中使用斜体的语义方式。您也可以使用来执行此操作。

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

强调

这同样适用于和下划线。一般来说,这个用户很少使用,因为链接带有下划线和带下划线的文本,你无法点击它会给用户带来糟糕的体验。

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

标题

可能所有基本HTML代码中使用最多的是各种标题。使用<h1><h2><h3>等等将内容划分为多个部分。

请务必按层次顺序使用它们。Google希望您嵌套标题,因此请确保仅在下使用<h1>,而不是<h2><h3>。

虽然大多数网页只有一个<h1>,但Google不再因为拥有更多内容而惩罚您。请记住,使用重置页面的嵌套(或至少页面的那一部分)。

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

此页面上HTML元素的所有标题都是h2

图片

插入图像是HTML最有用的事情之一。它打破了互联网的野蛮风格,走上了今天的道路。您需要做的就是拥有所需图像的URL,并放置一个(代表图像源标记。就像这样:

<img src="https://www.freeluffy.com/Basic-HTML-Codes.jpg" alt="a picture from freeluffy">

请注意,您无需关闭图像标记,并且图像不需要引号来显示。许多人仍然使用它们来使代码更具可读性。

该属性是显示了用于辅助功能目的的文本,它也被搜索引擎收录。对于使用屏幕阅读器和其他设备的人来说,使用互联网绝对需要替代文字。它总是有你的图片替代文本的最佳做法。

链接

好的。链接。有很多关于链接的事情。或者说,你可以用链接做很多事情。在最基本的情况下,您将把它与标签放在一起。该表明它是一个链接,以及简直是超文本引用(URL)您所连结的位置。

<a href="http://www.freeluffy.com/">A link to our freeluffy, and this is the anchor text.</a>

您只需使用关闭链接代码,就可以在那里使用任何文本。这将是可点击链接本身,称为锚文本

它在页面上呈现如下:指向Divi页面的链接,这是锚文本。

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

更多链接属性

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

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

删除线文字

如果你像我一样,有时候你 需要想用肆无忌惮的话开个玩笑。或者你可能需要在列表中标记(或删除,如代码本身所说)。或者你需要一条线来运行文本的任何其他东西。

那是你在想要浏览的文本周围使用<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代码就介绍到这里啦~看吧,也不是很难哦。

推荐VPN(目前最稳定的VPN之二,国内可直接访问获取):

推荐VPS(搭建SS专用服务器,性价比堪称无敌口碑爆棚):

Vultr
点击上图进入Vultr搭建SS教程
搬瓦工搭建SS
点击上图进入搬瓦工搭建SS教程

联系博主

梦想家路飞

梦想家路飞

8090后,自由职业,摩羯座,
跑者,骑行者,旅行者,WP爱好者,
独立摄影师,非专业平面设计师,网站设计师。

了解更多关博主

打赏博主

写作不易 请予鼓励

微信扫一扫请博主喝杯咖啡

微信打赏

说点什么

avatar
  订阅  
提醒