如果您是HubSpot CMS的频繁用户,您可能已经获得一些HTML (超文本标记语言)一路走来的技能。

HTML是在web上显示文档的标准编程语言。学习HTML的基础知识可以让你作为一名数字营销人员的工作变得更容易,因为你会感到有能力去做更新你公司的网站raybet电子竞技靠你自己。

因此,您不必等待独立营销活动的推进。

利用HubSpot的WordPress网站工具来发展你的业务

下面,我们将介绍一些基本的HTML代码,这些代码将允许您正确地在您的网站上呈现信息,并按照预期的方式交流您的信息。

一旦理解了为什么某些HTML代码要这样输入的上下文,就会更容易回忆和使用它们。

HTML文本代码

当你发布一个网页时,你希望文本保持与预期相同的格式,包括粗体、斜体和下划线。

HTML代码可以使你的网站上的文本样式与你在网站外的文字处理器上的样式相同。您只需要了解一点点语言,就可以根据您的规范定制文本。

  • 对于大胆的文本,使用:文本< / em >
  • 对于斜体文本,使用:<我>文本< / i >
  • 对于带下划线的文本,请使用:文本< / u >

文本格式的大多数其他方面都涉及到CSS的使用。

要创建HTML链接代码,请使用<一>(“锚”)标签。

这个HTML链接代码的一个例子涉及如下内容:

< a href = "网站“>链接文本< / >

这个href属性指定单击链接后将到达的特定目的地。用户看到的文本,作为列出完整网站地址的更方便用户的替代,应该在第一个标记和结束标记之间键入(本例中的链接文本)。

除了定义链接应带用户到的位置外,还可以指定链接是否应在同一浏览器选项卡中打开,或者是否应在新的浏览器选项卡中打开。当涉及到将流量定向到外部链接的公认最佳实践时,这一区别非常重要——理想情况下,外部链接的目标是新的浏览器选项卡。

HTML链接代码的定义目标是在新的浏览器选项卡中打开链接,看起来像这样:

target=“\u blank”< / > >链接文本

当我们谈到这个话题的时候,让我们来讨论一下可以添加到链接中来触发其他应用程序的两个前缀:

1) 邮寄地址:启动用户的主电子邮件应用程序,打开一个新的电子邮件草稿到指定的电子邮件地址,例如:email@address.com
" > email@address.com < / >

2) Tel:提示你的设备在链接中拨这个前缀后面的号码,例如<img src= " imageURL.png " alt= "图像描述" /> .png

键入图像或链接代码时要小心-指向所引用文件的链接区分大小写。

HTML颜色代码

作为HTML元素的一部分,在CSS的帮助下执行,你可以使用它预定义的名称(如“红色”、“橙色”、“灰色”)指定颜色,或者应用它的RGB、HEX或HSL。

下面是对每种颜色系统的简要说明,以及是什么使它滴答作响。

RGB

RGB值根据颜色的红色、绿色和蓝色部分定义颜色。使用的公式是:rgb(红色、绿色、蓝色)。这些参数以0到255的比例表示每个当前颜色的强度。

RGBA是RGB值的扩展,使用alpha通道来指定不透明度。公式如下:rgb(红,绿,蓝,alpha)。alpha值是一个介于0.0和1.0之间的数字。当它是0.0时,颜色是完全透明的;在1.0版本,它是完全不透明的。

十六进制

HEX值(十六进制值)用于指定颜色,格式为#rrggbb,其中红色、绿色和蓝色用00到ff之间的十六进制值表示。

HSL

HSL值是指颜色的色相、饱和度和亮度。使用的公式是:hsl(色相,饱和度,亮度)。Hue由0到360之间的值表示——红色是0,绿色是120,蓝色是240。饱和度和亮度都是百分比值。零饱和度显示灰色的阴影,而100%显示全色。零亮度显示黑色,100%亮度显示白色。

HSLA是HSL值的扩展,包括一个alpha通道来定义不透明度(类似于RGBA)。

方法 公式 示例(红色)
颜色名称 N/A 红色
RGB rgb(红、绿、蓝) rgb(255,0,0)
十六进制 # rrggbb # ff0000
HSL hsl(色调、饱和度、亮度) hsl(0100%,50%)

大多数开发人员选择特定的格式或格式组合并坚持使用它。您也应该这样做,以避免混淆,并使您在编码时更容易区分颜色。

HTML空间代码可以用特殊字符实现。暂时薄空间,使用 或& # 8201;。对于一个在空间,使用&ensp;或 ;。为了电磁空间,使用&empsp;或 。

在没有使用这些特殊字符的适当格式的情况下,HTML将所有空格字符(如制表符和空格)压缩为一个字符。如果没有HTML Space标记,知道如何使用HTML Space代码会让您对HTML间距的控制。

当您需要在文本中添加空格时,您可以使用适当的特殊字符, CSS,或<前>在HTML标签。在描述实体时,您可以使用实体名称或数字。

不换行空格字符是最常用的。使用此方法创建的空格确保两边的两个单词保持在同一行,即使文本换行到新行。

这个例子可以帮助你理解如何使用特殊字符来添加HTML空间代码:

  • 没有空间
  •  或& # 8201;
  •  或& # 8194;
  • &empsp;或& # 8195;

HTML空间代码示例

控件还可以发布预格式化的内容<前>HTML中的标记。这样,内容将保留外部字处理工具上的格式。这意味着内容将在您输入时显示在浏览器中。

HTML空间代码示例源代码

最佳HTML代码生成器

最好的HTML代码生成器可以帮助您更快地编写代码,而不是从头开始编写所有的HTML代码,它可以为您想要的任何代码提供必要的结构,从而减少工作。

学习一切你需要知道的HTML与我们的免费指南:初学者指南的HTML和CSS为营销者.

以下是一些可供设计人员使用的最好的HTML代码生成器,您也可以使用它们来简化编码工作。

1.HTML5样板

HTML5样板是一个很受欢迎的选择。这是一个简单的,圆滑的模板,与所有的要点建立一个网站与HTML,是一个伟大的地方,为营销人员谁开始探索HTML开始。

它的突出特性包括优化的谷歌Analytics片段和一个index.html文件,该文件经过优化以提高移动适应性。集成Normalize.css帮助处理任何潜在的浏览器样式不一致。

本视频可以帮助您了解如何使用HTML5样板文件。

2.独自创立

独自创立是另一种流行的HTML代码生成器。虽然HTML5样板是前端模板,但后者是前端组件库。有趣的是,每个人都声称自己是“世界上最受欢迎的”称号。

Bootstrap提供的不仅仅是一个具有布局、排版、内容、UI组件和工具提示功能的模板。它不仅功能丰富——你可以限制你下载的文件只包含你认为对你的项目有用的元素。

3.HTML5模板生成器

顾名思义,HTML5模板生成器被设计者用来生成HTML5模板。由法国开发人员Shikiryu开发,生成器具有各种常见的网站元素的一系列功能。

使用HTML5 Template Generator,你可以在几秒钟内轻松构建基本的HTML代码。从长远来看,嵌入网站名称、元描述、作者详细信息和图标的选项可以节省时间。JavaScript用户也可以使用这个工具添加jQuery和谷歌分析到他们的网站。

最佳HTML代码测试人员

HTML代码测试人员或编辑器以各种方式帮助编写代码,如样式标记、突出显示和颜色编码。当你使用编辑器时,你可以预期你的打字速度会提高,当涉及到网页设计任务时帮助你更有效率。

这些编辑器允许您优化web页面,而无需高级HTML技能。

它们都有“所见即所得”(WYSIWYG)特性,可以让您预览代码结果,就像它们发布时显示的那样。实时结果,以及拖放功能,使您的代码编辑快速和容易。

基于Web的HTML代码测试人员提供了跳过环境安装和设置的便利。下面是一些最好的代码测试人员/编辑器。

代码笔

代码笔是前端web开发中最流行的代码测试人员之一。它为使用HTML、CSS和JavaScript的开发人员提供了一种轻松测试、编辑和展示代码的方法。

除了代码编辑/测试之外,Codepen还是一个学习环境和社区。您可以使用它与平台上与您同级或更高级别的其他人进行交互,从而提高您的基本编码技能。

Adobe Dreamweaver

顾名思义,Adobe Dreamweaver是Adobe的产品。它是一个流行的所见即所得代码编辑器,可以帮助您设计、发布和管理您的网站,而不需要什么技术技能。虽然它的许多功能可能会让初学者感到难以承受,但Adobe使入职过程尽可能轻松,具有深度教程.

Dreamweaver定期更新功能和用户界面,是一个成熟的管理软件,任何认真的开发人员、设计师或有设计眼光的营销人员都应该考虑。雷竞技苹果下载官方版

JSFIDLE

JSFiddle是网站设计师和开发者最古老的代码平台之一。尽管它的名字,JSFIDLE并不局限于JavaScript代码编辑。它还可以用来测试HTML和CSS代码(或这三种编码语言的任何组合)。

JSFiddle允许任何人公开分享他们的代码,许多代码专家也这样做。但是,您不仅可以测试自己的代码,还可以浏览平台上其他程序员的工作代码示例。只要记住在使用原始作者的代码时给予适当的赞扬!

还有许多其他工具可以帮助您测试代码。前选择包括:

这些工具中的大多数都提供了免费计划。

如果您评估此短名单之外的选项,请确保它们满足所有HTML代码测试人员的以下基本功能:

  • Autocomplete,它自动填充HTML元素和属性,节省您的击键次数
  • 内置文件传输协议(FTP),帮助传输文件更快
  • HTML实体库
  • 分屏以方便查看代码
  • 搜索功能允许您从网站上的任何文件中查找任何单词
  • 语法错误突出显示,让您轻松发现错误

基本的HTML知识每一个互联网营销人员应该有的

如果你学习了基本的HTML技巧,可以让你在动态中处理网站的变化,那么你就可以为公司节省生产力,避免员工不得不通过其他人来完成工作。raybet电子竞技

让HTML成为您在2020年添加到个人营销堆栈中的技术技能。快乐编码!

在你的WordPress网站上使用HubSpot工具,无需处理代码就可以连接两个平台。点击这里了解更多。

在你的WordPress网站上使用HubSpot工具,无需处理代码就可以连接两个平台。点击这里了解更多。

最初发布于2010年2月18日下午2:30:00,更新于2020年3月31日

话题:

网站开发