当前位置:首页 > 营销观察 > 正文

使用任何 CMS 需要了解的关于 HTML 的事情

使用任何 CMS 需要了解的关于 HTML 的事情

当您购买汽车时,您不一定需要知道如何拆开发动机并将其重新组装起来。 但是,如果您可以自己更换轮胎和机油,它会有所帮助。 同样的原则适用于您网站上的 HTML 代码。 您...

当您购买汽车时,您不一定需要知道如何拆开发动机并将其重新组装起来。 但是,如果您可以自己更换轮胎和机油,它会有所帮助。 同样的原则适用于您网站上的 HTML 代码。

您绝对可以拥有一个网站,而无需接触 HTML 代码。 但是迟早会有一些烦人的小问题会阻碍您的网站和完美。

某些标题可能会出现问题,您添加的链接可能适用于错误的文本,或者您的列表格式可能不正确。 有时您需要做的就是稍微调整 HTML 以使您的页面或帖子发光。

如果我坚持汽车类比,了解 HTML 就像了解如何驾驶手动档。 您可以坐在任何车轮后面,无需过多担心特定型号的特性。

在这篇文章中,我将教您基础知识:如何使用标题、列表、文本样式元素、表格、链接、图像、iframe 等。但在我们开始之前,您需要了解一些内容。

HTML 的重要经验法则

目录

HTML 或(超文本标记语言)用于创建 Web 上的几乎所有页面,并由开始和结束标记构建。 为了保持内容和布局干净,您应该始终遵循的经验法则是:

如果有一个开始标记 (<>),那么也应该有一个结束标记 (</>)。

如您所见,除法符号表示您正在关闭标签。 看——我们刚刚了解了关于 HTML 的第一个事实。 那一点也不难。 现在我们已经学会了不要让标签保持打开状态,让我们继续了解其他更有趣的信息。

标题

标题用于划分和活跃内容。 它们帮助您将您的观点带给读者,并且通常使您的内容更易于理解。

为了页面搜索引擎优化,以正确的方式使用标题曾经是非常重要的。 但根据最近的一项研究,搜索引擎变得更加智能,现在您可以自然地坚持在标题中使用文本。

h1 标签是最大的标题,通常用于页面名称。 从 h2 到 h6 的标题大小递减。

以下是在 HTML 中创建标题的方法:

<h1> H1 标题</h1>

<h2> H2 标题</h2>

<h3> H3 标题</h3>

<h4> H4 标题</h4>

<h5> H5 标题</h5>

<h6> H6 标题</h6>

以下是它们在您网站前端的大小有何不同:

链接

几乎所有网站的存在都围绕着链接、反向链接和锚文本,因为这些是在搜索中排名更高的最重要因素。

在这一点上,很难想象现代 CMS 中的文本编辑器没有创建链接的按钮。

但是我确信您的机器已经让您失败了很多次,并且您的链接被添加到错误的锚文本中。 或者您只需要将锚文本移动一个字符,这可能会很棘手。 因此,有时在 HTML 中进行编辑会更容易。

以下是使用 <a> 标签编辑锚文本的方法:

<a href=”your_link_here”>锚文本在这里</a>

您还可以设置链接将在其中打开的目标。 例如,如果您希望它在新选项卡中打开,您可以添加如下标签:

<a href="your_link_here" target="_blank">此处为锚文本</a>

图片

尽管 CMS 文本编辑器已经取得了长足的进步,但通过媒体管理器添加的图像通常很难在内容中移动。 很难操纵它们,编辑它们的尺寸等。

为了减轻您的压力,每当您在处理图像时遇到困难时,请切换到 HTML 编辑器并像这样添加您的图片:

<img src=”你的图片的url在这里” alt=”如果图片由于某种原因不显示将会出现的文本” >

内嵌框架

iframe 就像是从您的站点到其他站点的窗口,您可以通过它来显示内容。 假设您需要拍摄一个 YouTube 视频并将其整齐地显示在您的网站上。

您的目标是说明一些内容,以便让访问者在页面上停留更长时间,而不是将他们重定向到 YouTube。 您可以为此使用 <iframe> 标记。

一个随时可用的 iframe 看起来像这样:

<iframe src="link to what you'd like to display">这里有一些文字,如果你想在 iframe 内容之前有文字</iframe>

YouTube、Vimeo、Twitter 和 Facebook 等大型资源都可以选择以 iframe 格式共享视频。 因此,您可以在内容中使用此策略,而无需进行任何额外编辑。

有序和无序列表

您随时可以使用两种列表:有序列表和无序列表。 这是他们的 HTML 标签:

<ol> 此处为有序列表</ol>

<ul> 这里是无序列表</ul>

两种列表类型的列表项以相同的方式添加:

<li> 列表项内容</li>

因此,一个可供使用的有序列表如下所示:

<ol>

<li>我列出项目</li>

<li> II 列表项</li>

<li> III 列表项</li>

</ol>

一个无序列表看起来像这样:

<ul>

<li>我列出项目</li>

<li> II 列表项</li>

<li> III 列表项</li>

</ul>

表格有点棘手,因此您需要更加专注于这项技术。 但是一旦你弄清楚了,这个过程就会一直伴随着你,有点像骑自行车。 任何表格都包含在<table> 标签中,例如,<table>此处表格的内容</table>。

在 table 标签内,您可以添加多个打开和关闭的 table 行标签,如下所示:<tr>table column tags here</tr>。

在表格行中,您要添加表格数据(单元格),其添加方式如下:<td>此处的单元格数据</td>。

不管每个 <tr> 中有多少 <td> 标签,这就是行中有多少列。 例如:

<表>

<tr>

<td>吉尔</td>

<td>史密斯</td>

<td>50</td>

</tr>

<tr>

<td>夏娃</td>

<td>杰克逊</td>

<td>94</td>

</tr>

</table>

结果如下:

内联样式

不要告诉任何专业的编码员或程序员我教过你这个! 但是,如果您现在需要为元素设置样式,而您无权访问站点的 CSS 文件,则可以使用内联样式。

内联样式不利于您网站的管理和维护。 将来,要找出网站究竟从哪里获得这些样式将变得更加困难,尤其是在新人接手一个项目的情况下。

因此,请谨慎使用内联样式,并且仅当周围没有人为您的问题实施更好的解决方案时才使用。

您可以直接在 HTML 代码中向几乎任何元素添加任何样式声明。 内联样式是一个肮脏的黑客。 它不是满足您的造型需求的最复杂的解决方案,但在紧急情况下,它可以完成工作。

例如,您有一个段落,您希望其颜色与所有其他段落不同。 并且您希望它向右移动 30 像素。

这些更改的代码如下所示:

<p style="color:orange; margin-left:30px;">你的段落文本在这里</p>

所以在开始标签中添加 style=""。 在大括号之间添加您的 CSS 样式声明,例如边距、填充、颜色和边框。

文本样式元素

当您需要消除由默认 CMS 编辑器的缺陷引起的一些问题时,您还可以直接在 HTML 中添加几乎任何文本样式标签。

以下是最常见的文本样式标签:

<b>此处为粗体</b>

<i>此处为斜体文本</i>

<u>此处有下划线</u>

<sub>下标</sub>

<sup>上标</sup>

纽扣

直到今天,在大多数没有任何插件或模块的 CMS 中添加按钮可能是一个挑战。 幸运的是,这个过程有一个 HTML 标签。 使用 <button type="button"></button> 标签在页面上快速创建简单的按钮。

将按钮文本放在开始和结束标记之间。 如果你想让你的按钮打开一个链接,把它放在一个 <a href=””> 标签中,如下所示:

<a href=”你的链接在这里”><button type=”button”>点击我!</button></a>

您还可以应用本文前面介绍的内联样式和链接定位知识。

ID 和类

如果您只需要将某些样式应用于站点上的特定 HTML 元素或一小部分元素,则可以使用选择器,例如 ID 和类。

ID 是您添加到一个 HTML 元素的选择器,以便稍后将其样式添加到 CSS 中。 您可以根据需要向任意数量的元素添加一个类,以便以后向它们添加类似的样式或功能。

如果您只是创建一个简单的博客,则没有理由为您的许多元素添加自定义 ID 和类。

这些选择器对于一直在进行大量代码更改的大型项目来说更具优势。 然而,它们值得了解。

Div 和 Span

将 div 和 span 标签视为页面的构建块。 在任何页面上创建布局时,它们都是最重要的元素之一,因此了解它们的外观以及如何使用它们很重要。

要记住的一个重要事实是,诸如 <p>、<h1> 和 <div> 之类的元素占据了整行,而诸如 <span> 之类的内联元素仅占用其内容所需的空间。

编码人员在非常基本的层面上使用 span 和 div 来分隔内容部分并创建布局。 因此,您可以在这些标签中添加列表、段落、图像、表单和各种其他内容。

以下是它们在前端的外观:

您可以在此处阅读有关使用块和内联元素的更多信息。

总结

现在您知道了最重要的 HTML 标签以及如何在 CMS 紧急情况下使用它们。 但如果您仍然渴望知识,可以在此处查看所有当前标签。 如果我遗漏了什么,请随时在下面分享您的 HTML 技巧和最喜欢的 CMS 标签。

,

最新文章