电子商务商人应该知道的9个HTML代码

2021年2月24日03:47:47 发表评论 25 次浏览

运营电子商务商店可能意味着戴很多帽子。有时, 这意味着将一些HTML代码放入你的网站。对HTML的基本了解可以为你的网站开辟新天地。通过这种了解, 你可以将照片嵌入网站, 在此处添加链接或在其中添加按钮, 单击页面即可从页面的一个部分跳到另一部分, 等等。

以下是九种常见HTML代码的列表, 它们可以增强大多数网站的功能。

1.嵌入图片

要嵌入图像, 你将使用下面的代码行, 并根据你的规范调整某些元素。

<img src =" http://www.idahostockimages.com/images/stock1.jpg" alt ="山脉" width =" 200" height =" 137" hspace =" 5" vspace =" 5" align ="左" />

嵌入任何图像之前, 请确保通过创建压缩的jpeg或位图文件来对其进行优化, 以便将其快速加载到你的网站上。

这就是代码在外行看来的含义:

  • " img src"是指向你要嵌入的图像的HTML属性;它缩写为"图像源"。
  • 你希望嵌入的图像应出现在等号之后和引号之间。在此示例中, 它读取为" http://www.idahostockimages.com/images/stock1.jpg", 这是山脉股票图像的URL地址。
  • 如果无法显示图像, 则" alt"是指向该图像的"替代文本"的属性。在此示例中, 其显示为"山脉"。对于依靠屏幕阅读器浏览网络的视障用户来说, Alt文字也至关重要。
  • " width"和" height"是用于指示图像的宽度和高度(以像素为单位)的属性。无论原始图像的大小如何, 都可以使用width和height属性设置它的大小, 并自定义图像的大小。在此示例中, 宽度设置为" 200", 高度设置为" 137"。
  • " hspace"和" vspace"分别是代表"水平空间"和"垂直空间"的属性。这些属性允许图像周围留有一定数量的空白, 因此你的文本不会碰到嵌入图像的侧面。同样, 以像素为单位。在此示例中, hspace和vspace都设置为" 5"像素。
  • "对齐"是将图片设置在网页的左侧, 右侧或中心的属性。在此示例中, 图像设置为"右"。

这行代码生成的嵌入式图像如下所示:

2.在图像周围添加黑色边框

如果需要, 使用上面的同一行代码, 你可以轻松地添加, 删除或调整图像周围的边框。所需要做的只是创建边框并调整其粗细的附加属性。该代码将如下所示:

<img src =" http://www.idahostockimages.com/images/stock1.jpg" alt ="山脉" width =" 200" height =" 137" hspace =" 5" vspace =" 5" align ="右" border =" 10" />

  • 该代码与图像嵌入代码相同, 但是添加了一个属性" border =" 10"。
  • 同样, 该属性以像素为单位。 " 10"是一个相当粗的边框, 因此在示例中很明显, 但是典型的黑色边框设置为" 1"。当嵌入到你的网站源代码中时, 它将看起来像这样:
山脉

3.将图片链接

要将你网站上的图片链接到你网站上的其他页面或完全不同的网站, 请按照以下步骤操作。此代码将合并以上代码, 并添加一些新代码。完成后, 代码将如下所示:

<a href="https://www.notlogy.com/" target="_blank"> <img src =" http://www.idahostockimages.com/images/stock1.jpg" width =" 200" height = " 137" border =" 2" alt ="山脉" </a>

  • 请注意, 我们仍以"山脉"的图片为例, 并且我们刚刚在其中添加了额外的代码行和一些周围的代码, 以使该图像成为链接。
  • " a"代表锚点, 后跟" / a"是将代码行转换为链接的过程。
  • "‘href’"属性表示你将把新链接指向特定的URL。在此示例中, 我使用" https://www.notlogy.com"作为链接到的URL。
  • "目标=" _ blank"是允许你链接的图片在新窗口而不是同一窗口中打开新URL(在本示例中为www.notlogy.com)的属性。因此, 此代码会将你的网站留在浏览器的一个标签中, 新的URL将在其自己的标签中打开。如果你希望新的URL在同一窗口中打开, 从而离开你的网站, 只需删除整个"’target =" _ blank""行。
  • HTML的其余部分看起来很熟悉-这是我们开始时的同一行代码。最终产品将如下所示。
山脉

另外, 如果你想将图片设为链接, 但不想在其周围有边框, 只需删除代码的"边框"属性部分, 然后将其显示为:

<a href="https://www.notlogy.com/" target="_blank"> <img src =" http://www.idahostockimages.com/images/stock1.jpg" width =" 200" height = " 137" alt ="山脉" /> </a>

它的外观和功能如下:

4.添加文本链接

将一段文本链接起来是直接的代码行。在此示例中, 我们将创建一个指向"实用电子商务"的文本链接。你会注意到, 下面讨论了许多先前讨论的元素:

<a href="https://www.notlogy.com/">实用电子商务</a>

  • 代码行开头的" a"和结尾的" / a"将其链接。
  • " href"指向" https://www.notlogy.com"。
  • 两个"> <"括号之间的文本将可见并可以单击, 在此示例中为"实用电子商务"。这将创建一个链接, 以在同一页面中打开新的URL。这将导致链接的外观和行为如下:

实用电子商务

如果你希望在新窗口中打开此文本链接, 只需在新的URL结束引号后的图像链接" target =" _ blank"中添加相同的代码。它看起来应该像这样:

<a href="https://www.notlogy.com/" target="_blank">实用电子商务</a>

创建一个功能如下的链接:

实用电子商务

5.使文本与图像对齐

HTML代码可让你确定网站上图像和文字的布局。代码完成后将如下所示:

<p> <img src =" http://www.idahostockimages.com/images/stock1.jpg" width =" 200" height =" 137" alt ="山脉" align =" left" />" Lorem ipsum dolor sit amet, 奉献的精英人士, eiusmod tempor incididunt ut Labore et dolore magna aliqua。 <p> Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur。

  • 你会注意到, 使用的代码与前面的示例中使用的大部分相同, 只是增加了一些格式代码。
  • 代码开头的" p"表示新段落的开头, 结尾的" / p"表示段落的结尾。
  • 注意在该示例中, 上面的代码段中有三个段落, 每个段落都有开始和结束段落属性。
  • 此代码产生的图像与窗口的左侧对齐, 并在其旁边显示三段文字。最终代码将产生一个图像和文本样式, 如下所示:

" Lorem ipsum dolor坐满了, 奉献了礼貌, 塞伊·杜伊(Eusmod tempor)indicidunt ut Labore et dolore magna aliqua。

尽量不要抽烟, 不要因抽烟而锻炼。

Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur。 "不希望出现在圣者面前的感受者, 在犯法的情况下动摇了动手能力。"

6.添加一行以分页

如果你的网站页面想要用可见的水平线分开, 则可以使用HTML代码来产生这种效果。这在"常见问题"页面或任何页面或帐单邮寄地址页面(同一页面中有多个小节)中很有用。代码如下:

<hr align =" center" width =" 100%" size =" 1" noshade />

  • " hr"表示在此HTML行中正在创建水平线。
  • "对齐"然后"居中"表示正在创建的该行将在屏幕上居中–如果需要, 也可以使用"左"或"右"。
  • "宽度"与前面的示例类似, 不同之处在于, "宽度"使用百分比代替像素。在此示例中, 使用了" 100%"宽度, 因此该线延伸了整个帧, 但是你可能会发现较小的百分比在视觉上也有效。
  • "大小"与先前示例中使用的"高度"相同, 大小以像素为单位, 此处大小设置为" 1"。
  • "'noshade'"表示此线应显示为一维, 而不是带有阴影效果的二维。该代码将产生如下所示的一行:

7.添加页面跳转链接

跳至当前页面的另一部分可能是FAQ或单个页面中包含的任何种类的索引的有用部分。此跳转将允许用户单击将他们带到页面特定部分的链接。它需要两行代码, 第一行创建链接:

<a href="#articles">单击此处以跳至页面底部的相关文章</a>

第二行创建链接指向页面上的着陆点。

<a name="articles"> </a>

  • " a"和" / a"用于创建链接。
  • "‘href’"用于指示链接应指向的内容, 而不是通常的URL, 它指向页面的某些部分。该链接将使用两行中都匹配的触发词来识别页面的新部分。在此示例中, 我使用"文章"作为触发器。在第一行中, 在触发词" articles"之前需要一个井号"#"。
  • 然后, 键入你要链接的文本。对于此示例, 我使用了"单击此处以跳至页面底部的相关文章"。
  • 最后, 将第二行代码放在你要跳转到的页面上的位置。该代码将在页面上不可见, 但你的用户将可以轻松跳转。它将创建一个如下所示的链接:

单击此处跳至页面底部的相关文章

8.文字格式

要使用HTML格式代码对网页上的文本进行格式设置, 以下是基本和常见的文本格式代码的列表:

  • 制作文字大胆的, 使用标签<b>, 然后将你要加粗的单词或词组结尾, 然后以</ b>。最终结果将如下所示:粗体文字.
  • 制作文字斜体, 使用标签<i>, 然后将你要斜体化的单词或短语结尾, 然后以</ i>。最终结果将如下所示:斜体文字.
  • 制作文字下划线的, 使用标签<u>, 然后在你要打下底线的单词或短语上加上下划线</ u>。最终结果将如下所示:带下划线的文字.

9.页面格式化

通过以下简单的代码行, 使文本对齐并使其显示在所需的位置和方式:

对于标题, 有六个不同的标题标签, 全部用不同大小的文本表示:H1, H2, H3, H4, H5和H6。 H1是最大的字体, H6是最小的字体。使用其中的一种(或仅使用一种)来创建标题以分隔其余文本。这是代码示例的示例:

<H1>这是标题</ H1> <H4>这是文本正文</ H4>

它是这样显示的:

这是正文

要将文本对齐到页面的中心, 只需在适当的括号中使用单词" center", 例如:

<center>这是居中的文本。</ center>

这将创建文本, 其显示在页面中心, 如下所示:

这是居中的文本。

要产生一个回车, 而不是开始一个新的段落, 请使用标签

<BR>

你希望在任何短语的末尾输入回车符。请参见下面的示例段落:

Lorem ipsum dolor坐下, 安全地服从上等的, sed do eiusmod tempor的劳动和劳动节令。尽量不要抽烟, 不要因抽烟而锻炼。 <BR> Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat <BR> nulla pariatur。不正当发生的圣人, 在违法犯罪现场被禁止从事劳动。

标签将创建如下所示的视觉效果:

Lorem ipsum dolor坐在amet, 安全adipisicing精英, sed do eiusmod tempor

劳工和劳动者联合会。 Ut enim ad minim veniam, Quis

没问题的锻炼, 可能会导致经济损失。

Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat

nulla pariatur。准圣人occaecat cupidatat非偶然, 在culpa qui中

当然要动手制作动画。

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: