海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts

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

https://www.youtube.com/watch?v=Roquo6FTc7M

订阅我们的 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 代码。

海外社媒SNS代运营Tiktok代运营公司

胆大

当您将文本包裹在 <强> 标签,您是在告诉浏览器将文本加粗。 您也可以简单地使用 也一样,但由于 Google 和其他搜索引擎偏爱语义编码,因此您更安全 <强>


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 代码中最常用的是各种标题。 使用

将您的内容分成几个部分。

请务必按层次顺序使用它们。 谷歌希望你嵌套标题,所以一定要使用

只在下面

,不低于

.

虽然大多数页面只有一个

, 谷歌不再因为你拥有更多而惩罚你。 请记住,使用

重置页面(或至少页面的该部分)的嵌套。


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


此页面上所有 HTML 元素的标题都是 小时2.

图片

插入图像是 HTML 所做的最有用的事情之一。 它打破了互联网的野兽派风格,走上了今天的道路。 您需要做的就是拥有您想要的图像的 URL,然后放置一个 <图像源> (代表 图片来源 标签。 像这样:


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


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

<替代> 属性是出于可访问性目的而显示的文本,它也被搜索引擎索引。 对于拥有屏幕阅读器和其他设备的人来说,替代文本对于使用互联网是绝对必要的。 这是 总是 为您的图像设置替代文本的最佳做法。

链接

好的。 链接。 有很多关于链接的事情。 或者,您可以使用链接做很多事情。 在最基本的情况下,您将把它与一个 标签。 这 表示它是一个链接,并且 字面上是指向您链接的位置的超文本引用(URL)。


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


您将关闭链接代码,只需一个 ,您可以在其中使用任何您想要的文本。 这将是可点击的链接本身并被称为 锚文本.

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

此外,您也可以嵌套 HTML 代码。 您可以通过插入一个图像来使图像可点击 <图像源> 链接标志之间的标记。


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


您可以在此处查看可点击图像链接的呈现方式:

图片盗链的基本 HTML 代码

更多链接属性

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

  • 相对 表示链接及其目标的某种关系。 如 不推荐人 以防止推荐流量被追溯到您。
  • 目标 告诉浏览器在哪里打开链接: _空白的 例如,将在空白选项卡中打开它。
  • 没有关注 伴随着 相对 并告诉搜索引擎您不想将任何链接汁传递到目标站点。 这在链接到有争议的内容等时很好。 它还可以防止人们在您的评论中发送垃圾邮件链接,并使您的内容可以被视为公正的,因为除了曝光和点击之外,您不会为特色提供任何奖励。

还有更多,但这些是您可能最常看到的。


<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>


删除线文本

如果你像我一样,有时你 需要 想用删掉的字开个玩笑。 或者,您可能需要从列表中标记事物(或删除,正如代码本身所说)。 或其他任何您需要一行贯穿文本的内容。

这时候你用 <删除> 在要删除的文本周围。 对于某些人来说,这是非常常见的代码,而其他人可能永远不会使用它。 无论如何,这很容易记住。


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


列表

如今,列表是 Web 内容的另一个主要部分。 它们不仅为您提供了大量的空白空间并打破了文本墙,而且还让您将您的想法组织成易于理解的片段。

您可以使用基本的 HTML 代码制作两种列表。 有序列表 编号为 1、2、3 等。 无序列表 使用项目符号或符号(取决于您的网站设计)而不是数字。

您可以使用以下任一方式包装每个列表

    或者

      分别用于无序列表或有序列表。 并且列表中的每一项都应该被包裹在

    1. .

      
      <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>This text will appear with special styling to indicate that it's a quote./blockquote>
      
      

      这是它在页面上的样子:

      此文本将以特殊样式显示,以表明它是引用。

      段落

      段落 HTML 有点奇怪。 根据您使用的 CMS 和构建器,它可能会自动将每个换行符呈现为一个单独的段落。 当您输入 HTML 时,WordPress 会执行此操作。 然而,并非一切都如此。 因此,如果您需要将段落分开并且没有文字墙,请将每个段落包裹起来

      . 然后浏览器将知道将每个文本块显示为单独的段落而不是一个连续的块。 默认情况下,浏览器会忽略换行符,除非另有说明。

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

      换行和换行

      您可能需要段落和节之间的其他分隔。 这时候你可以使用 <小时>
      标签。

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


      标签是换行符。 您可以使用
      在一个中间

      在不进入新段落的情况下换行(为了块样式和组织)。
      是一个自闭合标签,这意味着其中不能包含任何内容。 这由代码末尾的斜杠表示。

      虽然您可以使用它通过将文本和段落插入到需要中断的位置来拆分文本和段落,但这并不是一个很好的实践,并且随着您对 HTML、CSS 和 JavaScript 的深入了解,您将需要定位段落元素做某些事情。 您可以在此处阅读有关区别的更多信息。

      包起来

      HTML对于与互联网交互是绝对必要的。 每个人都以相同的方式使用它们,无论您是刚开始从事 Web 开发和设计的人,还是在 JavaScript 出现之前的老手。 我们仍在使用基本的 HTML 代码来运行我们所有网站的基础。 无论该网站多么花哨或它的功能多么先进,当链接断开或出现不应该的粗体时,您仍然会四处寻找 或者 <强> 标签正常。

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

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

海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts