亚马逊运营必备技能，一分钟学会HTML「附各HTML工具测评」

么是HTML

HTML的全称是超文本语言（Hyper Text Markup Language）。虽然这个名字听起来像是专业技术人员才能操作的，但事实上HTML是最简单的代码形式之一并且应用很广泛。

简而言之，HTML可以允许亚马逊卖家对产品描述进行排版（比如说添加粗体和斜体，换行，以及加入bullet points等），让买家能更清晰了解产品的卖点。

效果展示

看到这里，你可能会问了：没有用HTML写出来的产品描述就不能用了吗？

答案是当然可以的，但是我们来对比一下不用HTML（图1）与使用HTML（图2）的产品描述的效果差异：

▲图片来源：亚马逊Bosch

是不是看到没有用HTML的产品描述时只觉得杂乱无章，想要马上关掉这个页面呢？而用了HTML的产品描述更有条理，看起来更专业，可以让顾客很快地找到自己需要了解的内容。

在这个信息碎片化的时代，大家对同一件事情的注意力不会持续太久，没有人有耐心去读堆在一起的文字。如果顾客没有很快地得到自己想要的信息，他们会立马关闭页面去浏览别人更清晰明了的listing。因此，卖家需要用更好的listing内容来留住客户，吸引消费者下单购买。

常用的HTML编码

想用HTML却对代码一无所知的卖家不用慌，你只需花几分钟了解最基础的HTML代码，就可以对自己的产品描述进行HTML编码了。如果卖家不想自己手动写HTML代码，还可以使用相关软件直接对自己的产品描述内容自动进行HTML编码。

那有了自动编码的软件，我们为什么还要推荐手动的呢?

因为亚马逊平台对HTML代码有诸多限制，很多代码经过我们的测试，是不被亚马逊支持的。

卖家使用手动编码软件来编写自己的产品描述会确保HTML编码的准确度和后续的顺利上传。所以对于到底是手动编码还是使用自动编码软件，卖家要根据自己的需求和具体情况来决定。

手动编写HTML

卖家只需了解以下这几个HTML代码就可以上手写产品描述了：

- <h1>标题</h1>

- <p>段落</p>

- <br> = 换行

- <b>粗体</b>

- <li> = 列表项

- <i>斜体</i>

- <ul></ul> = 无序列表

- <ol></ol> = 有序列表

使用这些代码时，要注意代码的完整性与准确性。比如说<b> </b>，不要只使用一部分。<b> 代表粗体开始的地方，</b>代表粗体结束，如果使用不完整，可能会造成无法对文字进行粗，或者所有字体都变成粗体。

在这里，我们推荐大家一个写HTML的免费工具W3 Schools（www.w3schools.com）。

网上可以找到很多免费的HTML编辑器，但是W3 Schools非常简单便捷，运行速度快，而且也不会像有些编辑器一样产生乱码现象。

那么怎么使用工具写出HTML格式的产品描述呢？

▲ 打开 W3 Schools HTML Editor。

▲ 将你为产品写的非HTML的文字描述粘贴到左侧框，再加入相应的代码进行排版（当然卖家也可以边写内容边用HTML代码排版，不过这样可能会扰乱思路）：

1. 将标题加入<h1></h1>中间

2. 每个段落的开头加<p>，结尾加</p>

3. 将<br>放到需要换行的文字前，想要换几次行就输入几个<br>即可

4. 将需要加粗的文字放到<b></b>中间

5. 将需要变成斜体的文字放到<i> </i>中间

6. 在bullet points的所有的内容前面添加上<ul>；然后在每一个bullet point之前要加入<li>；在bullet points内容后添加</ul>(如下图所示)

▲编码界面

▲显示界面

7.在有序列表的所有内容前添加<ol>；然后在每项之前要加入<li>；在有序列表内容后添加</ol>(如下图所示)

▲编码界面

▲显示界面

▲ 编排完内容后，点击RUN就可以在右侧看到你编排好的产品内容预览了。

▲ 仔细检查，确认无误之后，就可以将左侧栏中的内容复制粘贴到你的卖家平台上了。

□ 使用软件自动编写HTML

如果卖家选择用相关工具将产品描述自动变成HTML格式，我们推荐大家使用Html-Online工具（html-online.com/editor/）

下面用图片为大家进行简单地演示：

可以看到，卖家只需要在左侧输入产品内容再进行相应排版，即能在右侧得到HTML的代码，再将这些代码直接复制并粘贴到卖家平台进行保存，买家浏览时就会看到和左侧框的一模一样的内容版式，是不是非常简单方便呢？

在这里，经过我们的测试，亚马逊的卖家需要注意：在亚马逊上打造listing过程中，修改字体颜色、字体背景、添加表情、添加下划线、修改字体类型、调整字体大小、添加特殊符号、添加超链接和添加图片现在是不被允许的。但是我们都知道，亚马逊的规则实时都在变化，因此关注这些规则，收藏好这篇文章和工具以备未来之需！

毫无疑问，如果卖家进行了品牌注册并可以做EBC(A+)的话是最好不过了，但是如果你还没有在亚马逊上注册品牌或者还在等待品牌注册的商标申请，那么HTML将会是你提升产品内容描述的有力帮手！

福利时间

如果您还想要了解各类编辑HTML的工具，我们在同名微信公众号上添加了福利噢！在公众号后台回复【HTML】即可免费领取HTML工具测评汇总！

、html概述

1、html标签是用来给文本添加语义的，而不是用来修饰文本的；

2、<meta charset="GBK">指定字符集（GB2312、UTF-8），html保存和指定字符一样，才不会乱码；

3、<!DOCTYPE html> DTD文档申明告诉浏览器我用的什么协议来写的，不是html标签；

4、webstorm快捷键大全：https://www.cnblogs.com/yeminglong/p/5995421.html

二、基础标签

1、h、p 和 hr 标签

三个标签都是占一行

2、注释：

3、图片：<img src=" ">

不会独占一行；
保证不变形，指定宽或者高即可；
title 和 alt 属性；
src 可以是相对路径（../ 上一级）和绝对路径，路径中尽量不含中文，相对路径不可跨盘符，路径分隔统一写 / ，绝对路径的可移植性不好；

4、换行：<br> 用于内容未完的换行

5、跳转：<a href=" "></a>

支持文字和图片的跳转；
地址必须加 http 或者 https；
href 可以指定本地的地址；
target（_self 和 _blank）属性控制跳转是否打开新的选项卡；
title 提示作用；

6、base 标签：<base target="_self ">

统一指定 a 标签怎么打开，写在 head 中

7、假链接：点击不会跳转

a 标签的 href 属性值为 # 或者 javascript
# 会跳转到页面的顶部，而 js 不会

8、锚点：<a href="#id值"><\a>

可以跳转到页面的指定位置
可以跳转到其他页面的指定位置，只需在 # 前面加上页面的路径即可
跳转无过度动画

三、列表标签

1、无序列表（!）

<ul><li><\li><\ul>；
整体不可分割；
ul 除了 li 不建议再加其他的标签，li 标签中可以放其他标签来丰富内容；
li 中还可嵌套列表；
ws快捷生成 ul>li*3>h2+p；

2、有序列表（*）

<ol><li><\li><\ol>；

3、定义列表

dt 是标题，dd 是具体的描述；
推荐一个 dt 一个 dd ，也可以一个 dt 对多个 dd 或者没有 dd；
dl 中不建议加其他标签，二 dt 和 dd 可以加；
应用：网站尾部，图文混排（仿京东做个网站的尾部）；

四、表格标签

1、格式

表格的边框默认不显示（border）

2、属性

（1）宽高

table 和 td 可用；
默认高宽根据内容调整；
td 设置高宽只会改变当前单元格的状态，而不会改变 table 的高宽；

（2）水平和垂直对齐（align 和 valign）

水平对齐三个都可以用，而垂直对齐针对 tr 和 td；
table 设置 align 控制表格在水平方向的对齐，给 tr 和 td 设置都是控制单元格里的内容的对齐方式，不过 tr 影响一行，td 影响一个，tr 和 td 都设置 td 会覆盖 tr 的效果；
tr 和 td 设置 valign 都是控制单元格内容的垂直方向的对齐，不过 tr 影响一行，td 影响一个，tr 和 td 都设置 td 会覆盖 tr 的效果；

（3）内边距和外边距（cellpadding 和 cellspacing）

两个属性都是 table 的；
外边距是指格子与格子之间的空隙，而内边距是指格子与文字之间的间隙；

（4）细线表格

先给 table 设置 bgcolor；
再给 tr 设置 bgcolor；
最后 table 设置 cellspacing；

3、表格的其他标签

（1）caption：表格的标题标签，必须写在 table 内而且需紧跟 table

（2）th：th 和 td 同级，th 有加粗的效果

4、表格的结构

（1）组成：caption 标题、thead 表头、tbody 主体、tfoot 尾部

（2）说明：

浏览器自动添加 tbody；
table 设置高度后，tfoot 和 thead 的高度是不会变化的；

5、单元格的合并

（1）水平方向：td 属性 colspan = "2"；

（2）垂直方向：td 属性 rowspan = "2"；

五、表单标签

1、格式

2、input 标签

（1）type = text：

（2）password：

（3）radio：互斥要设置 name 相同；默认选中 checked

（4）checkbox：选中 checked

（5）button：

（6）image：

（7）reset：value 修改标题

（8）submit：

form 的 action 确定提交的地址
提交数据加 name 属性

（9）hidden：

-----------------------------------------------------------------------------------------------------------------------

*相关标签：

label 标签：让文字与 input 标签绑定；两种绑定的方式：

datalist 标签：给输入框绑定输入的提示：<datalist><option>haha</option></datalist>
h5 中新增的 input 标签：email 、url 、number 、color、date（浏览器的支持不好）

3、非 input 标签

（1）select

（2）textarea

cols 和 rows 指定输入的行列，但是还是可以无限输入
默认可拉伸，也可通过 css 固定大小

4、练习

（1）表单标签除了 button 外都可以用 value 来指定提交的值

（2）表单添加边框可以在 form 中添加 fieldset 来实现

六、多媒体标签

1、video 标签

（1）格式：<video src=" " autoplay="autoplay"></video>；

（2）属性：controls（控制条）poster（海报）loop（循环）preload（预加载，与autoplay冲突）muted（静音）width/height；

（3）另一种 video 格式：解决浏览器的兼容

（4）让所有的浏览器支持 video 标签：通过 js 框架来实现

2、audio 标签

（1）使用基本和 video 一样，属性只有宽高和 poster 不能用，也是两种格式

3、details 和 summary 标签

（1）格式：

4、marquee标签（跑马灯效果）

（1）w3c 不推荐，但是浏览器的支持好

（2）属性：direction（方向）scrollamount（滚动的速度）loop（滚动次数，默认-1）behavior（滚动类型 slide）

（3）废弃的标签：<br><hr><font><b>加粗<u>下划线<i>斜体<s>删除线（无语义）

替代的标签：<strong><ins><em><del>（加入了语义）

5、字符实体

（1）&nbsp；空格 &lt；&gt； &copy；版权符号

（2）理解：html 占用了的不显示的特殊字符用另外的代替符号表示，使他们正常在 html 页面上显示

一部分：HTML简介

什么是HTML？

HTML代表超文本标记语言（Hypertext Markup Language）。它是一种用于构建网页的标记语言。HTML文件包含一组标签，这些标签用于定义网页的结构和内容。浏览器读取HTML文件，并根据标记中的指示呈现网页内容。

HTML的主要作用是定义文本内容、图像、链接和其他媒体的排列方式，并提供交互元素，例如表单和按钮。

HTML的基本结构

每个HTML文档都应该遵循以下基本结构：

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
</head>
<body>
    <!-- 内容在这里 -->
</body>
</html>

让我们逐步解释这个结构：

<!DOCTYPE html>：这是文档类型声明，它告诉浏览器正在使用的HTML版本。<!DOCTYPE html>表示使用HTML5。
<html>：HTML文档的根元素。所有其他元素都包含在<html>标签内。
<head>：包含与文档相关的元信息，如页面标题、字符集声明和外部样式表链接。
<title>：定义网页的标题，显示在浏览器标签页上。
<body>：包含网页的主要内容，如文本、图像和其他媒体。

HTML标签和元素

HTML标签是由尖括号括起来的名称，例如<p>表示段落，<img>表示图像。标签通常成对出现，有一个开始标签和一个结束标签。例如：

<p>这是一个段落。</p>

<p>是开始标签，</p>是结束标签，文本位于两个标签之间。标签定义了元素的类型和结构。

有些HTML标签是自封闭的，不需要结束标签，例如<img>用于插入图像。

HTML注释

在HTML中，你可以使用注释来添加说明性文字，注释不会在浏览器中显示。HTML注释使用结尾，如下所示：

<!-- 这是一个注释 -->

注释通常用于添加文档说明、调试代码或标记未来的修改。

第二部分：HTML基本元素

文本

HTML中的文本通常包含在段落、标题、列表等元素中。以下是一些常见的文本元素：

<p>：定义一个段落。
<h1>到<h6>：定义标题，<h1>是最高级别的标题，<h6>是最低级别的标题。
<strong>：定义强调文本，通常以粗体显示。
<em>：定义强调文本，通常以斜体显示。
<a>：定义超链接，允许用户点击跳转到其他页面。

示例：

<p>这是一个段落。</p>
<h1>这是一个标题</h1>
<p><strong>这是强调文本。</strong></p>
<p><em>这是斜体文本。</em></p>
<p>访问<a href="https://www.example.com">示例网站</a></p>

图像

要在网页中插入图像，可以使用<img>标签。它是一个自封闭标签，需要指定图像的src属性来指定图像文件的路径。

示例：

htmlCopy code
<img src="image.jpg" alt="图像描述">

src：指定图像文件的路径。
alt：提供图像的替代文本，用于无法加载图像时的文字描述。

链接

通过使用<a>标签，可以在网页中创建链接。链接通常包含在文本或图像中，并使用href属性指定目标URL。

示例：

<a href="https://www.example.com">访问示例网站</a>

href：指定链接的目标URL。

列表

HTML支持有序列表（<ol>）、无序列表（<ul>）和定义列表（<dl>）。

无序列表

无序列表使用<ul>标签定义，每个列表项使用<li>标签。

示例：

<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>

有序列表

有序列表使用<ol>标签定义，每个列表项使用<li>标签。

示例：

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

定义列表

定义列表使用<dl>标签定义，每个定义项目使用<dt>标签定义术语，使用<dd>标签定义描述。

示例：

<dl>
    <dt>术语1</dt>
    <dd>描述1</dd>
    <dt>术语2</dt>
    <dd>描述2</dd>
</dl>

第三部分：HTML表单

HTML表单允许用户与网页进行交互，提交数据。以下是HTML表单的基本元素：

<form>元素

<form>元素用于创建表单，可以包含文本字段、复选框、单选按钮、下拉列表等。

示例：

<form action="submit.php" method="post">
    <!-- 表单元素在这里 -->
</form>

action：指定表单数据提交的目标URL。
method：指定提交方法，通常是"post"或"get"。

输入字段

输入字段用于接收用户输入的数据，常见的输入字段类型包括文本框、密码框、单选按钮、复选框等。

文本框

文本框使用<input>标签，type属性设置为"text"。

示例：

<input type="text" name="username" placeholder="用户名">

type：指定字段类型。
name：指定字段的名称。
placeholder：设置文本框的占位符文本。

密码框

密码框使用<input>标签，type属性设置为"password"。

示例：

htmlCopy code
<input type="password" name="password" placeholder="密码">

单选按钮

单选按钮使用<input>标签，type属性设置为"radio"。

示例：

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

name：指定单选按钮组的名称。
value：指定每个选项的值。

复选框

复选框使用<input>标签，type属性设置为"checkbox"。

示例：

<input type="checkbox" name="subscribe" value="yes">订阅新闻

下拉列表

下拉列表使用<select>和<option>标签创建。<select>定义下拉列表，而<option>定义选项。

示例：

<select name="country">
    <option value="us">美国</option>
    <option value="ca">加拿大</option>
    <option value="uk">英国</option>
</select>

name：指定下拉列表的名称。
每个<option>标签表示一个选项，使用value属性定义选项的值。

第四部分：HTML样式和CSS

HTML用于定义网页的结构和内容，但要使网页看起来更吸引人，需要使用CSS（层叠样式表）。CSS允许你定义字体、颜色、布局等样式。

内联样式

可以在HTML元素内部使用style属性来定义内联样式。

示例：

<p style="color: blue; font-size: 16px;">这是一个蓝色的段落。</p>

外部样式表

外部样式表将样式规则保存在独立的CSS文件中，并通过<link>标签将其链接到HTML文档。

示例（style.css）：

/* style.css */
p {
    color: blue;
    font-size: 16px;
}

在HTML中链接外部样式表：

<link rel="stylesheet" type="text/css" href="style.css">

这使得可以在整个网站上共享相同的样式。

总结

HTML是构建现代网页的基础。通过学习HTML的基本语法和元素，你可以创建吸引人且功能强大的网页。无论是文本、图像、链接还是表单，HTML提供了丰富的工具来呈现内容和实现用户交互。

这篇文章提供了HTML的基础知识，但HTML是一个广泛的主题，还有许多高级特性和技巧等待你探索。希望这篇文章对你入门HTML有所帮助，让你能够开始创建自己的网页。继续学习和实践，你将成为一个熟练的网页开发者。

在线咨询

上一篇：微软大发善心！IE11居然升级了：可屏蔽VB脚本
下一篇：听说过CSS in JS，那你听说过JS in CSS吗

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商