蓟县建站:每个WordPress用户需要知道的基本HTML代码

2019.07.02 蓟县网站建设

153

什么是HTML?

以下是快速版本:HTML代表超文本标记语言,这意味着它并不完全是一种编程语言。HTML不命令计算机通过脚本运行。相反,它使用您在页面上的文本,并将其标记出来。斜体,粗体,对齐,大小等等。HTML还提供了包含图像和链接的能力,使用HTML 5,最新版本以令人兴奋的新方式操作它们和文本。

HTML代码包含在标志中,非常容易阅读。一个简单的HTML页面可能如下所示:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
<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代码,您将在整个职业生涯中在网络上使用这些代码。

大胆

当您将文本包装在<strong>标签,您是在告诉浏览器用粗体显蓟县建站示文本。您也可以简单地使用<b>也是如此,但是由于Google和其他搜索引擎对语义编码有更好的偏好,所以您可以更安全地使用<strong>

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

斜体

<Em>代表强调,这是在HTML中使用斜体的语义方式。您也可以使用<i>这样做。

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

下划线

同样的也适用于<u>和下划线。一般来说,这个链接很少使用,因为链接是带下划线和下划线的文本,您不能点击这些链接会给用户带来糟糕的体验。

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

标题

在所有基本HTML代码中,最常用的可能是各种标题。使用<h1>, <h2>, <h3>, <h4>, <h5>, <h6>将你的内容分成几个部分。

确保按层次顺序使用它们。Google希望你嵌套标题,所以一定要使用<h2>只在下面<h1>,不在下面<h3>.

而大多数页面只有一个<h1>,谷歌不再惩罚你拥有更多。请记住,使用<h1>重置页面的嵌套(或至少该页的该部分)。

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

此页面上HTML元素的所有标题为氢.

影象

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

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

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

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

链接

好吧。链接。链接有很多。或者,更确切地说,你可以用链接做很多事情。在他们最基本的,你将把它与一个<a href>标签。这个<a>指示它是一个链接,并且<href>实际上是超文本引用(URL)到您要链接的位置。

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

您将使用简单的</a>,你可以在那里之间使用任何你想要的文本。这将是可点击的链接本身,并被称为锚文本.

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

此外,您也可以嵌套HTML代码。您可以通过插入<img src>标记在链接标志之间。

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


更多链接属性

您还可以在链接中包含相当多的不同属性,以便它们以特定的方式运行(例如,将您的URL隐藏起来,使其不受引用者的影响,或者在新窗口中打开链接)。对你最有用的是

  • 雷尔

    指示链接及其目标的某种关系。比如

    不推荐人

    以防止查询流量追溯到您。
  • 目标

    告诉浏览器打开链接的位置:

    空白

    例如,将在空白选项卡中打开它。
  • 不跟随

    顺其自然

    雷尔

    并告诉搜索引擎,您不想传递任何链接果汁到目标网站。当链接到有争议的内容时,这是很好的。它还可以防止人们在你的评论中发送垃圾链接,这样你的内容就可以被看作是公正的,因为除了曝光和点击率之外,你并没有提供任何额外的好处。

有更多,但这些是你可能会经常看到的。蓟县建站

01
<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>围绕着你想要通过的文字。对于一些人来说,这是非常常见的代码,而另一些人可能永远不使用它。无论如何,这是一个很容易记住的。

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

列表

列表是当今网络内容的另一个主要部分。它们不仅给了你大量的空白,打破了文字的墙,而且还让你把你的思想组织成可消化的部分。

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

将每个列表包装成任意一个<ul><ol>对于无序或有序的列表。列表中的每一项都应该包装在<li>.

01
02
03
04
05
06
07
08
09
10
<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>开始和结束标签,你就可以走了。

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

这就是它在页面上的样子:

这个文本将出现与特殊的样式,以表明它是一个引号。

段落

段落HTML有点奇怪。根据您使用的CMS和构建器,它可能会自动地将每一行中断呈现为一个单独的段落。WordPress在输入HTML时会这样做。然而,并不是每件事都能做到这一点。所以,如果你需要把段落分开,而不是有一堵墙的文字,请把每一段都包装在一起。<p>..然后浏览器将知道如何将每个文本块显示为一个单独的段落,而不是一个连续的块。默认情况下,除非另有说明,否则浏览器将忽略换行。

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

线和线中断蓟县建站

您可能希望在段落和节之间进行其他分隔。这时,您可以使用<hr><br/>标签。

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

这个<br/>标签是断线。您可以使用<br/>在一个<p>在没有进入新段落的情况下打破一条线(为了块样式和组织的缘故)。<br/>是一个自结束标记,这意味着它中没有任何内容。这由代码末尾的斜杠表示。

虽然您可以通过将文本和段落插入到想要中断的位置来分解文本和段落,但这并不是一个很好的做法,而且随着HTML、CSS和JavaScript的发展,您需要针对段落元素来完成某些事情。你可以读得更多关于这里的区别.


热门分享

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP