亞馬遜運營必備技能，一分鐘學會HTML「附各HTML工具測評」

么是HTML

HTML的全稱是超文本語言（Hyper Text Markup Language）。雖然這個名字聽起來像是專業(yè)技術人員才能操作的，但事實上HTML是最簡單的代碼形式之一并且應用很廣泛。

簡而言之，HTML可以允許亞馬遜賣家對產品描述進行排版（比如說添加粗體和斜體，換行，以及加入bullet points等），讓買家能更清晰了解產品的賣點。

效果展示

看到這里，你可能會問了：沒有用HTML寫出來的產品描述就不能用了嗎？

答案是當然可以的，但是我們來對比一下不用HTML（圖1）與使用HTML（圖2）的產品描述的效果差異：

▲圖片來源：亞馬遜Bosch

是不是看到沒有用HTML的產品描述時只覺得雜亂無章，想要馬上關掉這個頁面呢？而用了HTML的產品描述更有條理，看起來更專業(yè)，可以讓顧客很快地找到自己需要了解的內容。

在這個信息碎片化的時代，大家對同一件事情的注意力不會持續(xù)太久，沒有人有耐心去讀堆在一起的文字。如果顧客沒有很快地得到自己想要的信息，他們會立馬關閉頁面去瀏覽別人更清晰明了的listing。因此，賣家需要用更好的listing內容來留住客戶，吸引消費者下單購買。

常用的HTML編碼

想用HTML卻對代碼一無所知的賣家不用慌，你只需花幾分鐘了解最基礎的HTML代碼，就可以對自己的產品描述進行HTML編碼了。如果賣家不想自己手動寫HTML代碼，還可以使用相關軟件直接對自己的產品描述內容自動進行HTML編碼。

那有了自動編碼的軟件，我們?yōu)槭裁催€要推薦手動的呢?

因為亞馬遜平臺對HTML代碼有諸多限制，很多代碼經過我們的測試，是不被亞馬遜支持的。

賣家使用手動編碼軟件來編寫自己的產品描述會確保HTML編碼的準確度和后續(xù)的順利上傳。所以對于到底是手動編碼還是使用自動編碼軟件，賣家要根據自己的需求和具體情況來決定。

手動編寫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過程中，修改字體顏色、字體背景、添加表情、添加下劃線、修改字體類型、調整字體大小、添加特殊符號、添加超鏈接和添加圖片現在是不被允許的。但是我們都知道，亞馬遜的規(guī)則實時都在變化，因此關注這些規(guī)則，收藏好這篇文章和工具以備未來之需！

毫無疑問，如果賣家進行了品牌注冊并可以做EBC(A+)的話是最好不過了，但是如果你還沒有在亞馬遜上注冊品牌或者還在等待品牌注冊的商標申請，那么HTML將會是你提升產品內容描述的有力幫手！

福利時間

如果您還想要了解各類編輯HTML的工具，我們在同名微信公眾號上添加了福利噢！在公眾號后臺回復【HTML】即可免費領取HTML工具測評匯總！

、html概述

1、html標簽是用來給文本添加語義的，而不是用來修飾文本的；

2、<meta charset="GBK">指定字符集（GB2312、UTF-8），html保存和指定字符一樣，才不會亂碼；

3、<!DOCTYPE html> DTD文檔申明告訴瀏覽器我用的什么協(xié)議來寫的，不是html標簽；

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

二、基礎標簽

1、h、p 和 hr 標簽

三個標簽都是占一行

2、注釋：

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

不會獨占一行；
保證不變形，指定寬或者高即可；
title 和 alt 屬性；
src 可以是相對路徑（../ 上一級）和絕對路徑，路徑中盡量不含中文，相對路徑不可跨盤符，路徑分隔統(tǒng)一寫 / ，絕對路徑的可移植性不好；

4、換行：<br> 用于內容未完的換行

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

支持文字和圖片的跳轉；
地址必須加 http 或者 https；
href 可以指定本地的地址；
target（_self 和 _blank）屬性控制跳轉是否打開新的選項卡；
title 提示作用；

6、base 標簽：<base target="_self ">

統(tǒng)一指定 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 設置高寬只會改變當前單元格的狀態(tài)，而不會改變 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（循環(huán)）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>標簽，可以在網頁中創(chuàng)建鏈接。鏈接通常包含在文本或圖像中，并使用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>元素用于創(chuàng)建表單，可以包含文本字段、復選框、單選按鈕、下拉列表等。

示例：

<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>標簽創(chuàng)建。<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允許你定義字體、顏色、布局等樣式。

內聯(lián)樣式

可以在HTML元素內部使用style屬性來定義內聯(lián)樣式。

示例：

<p style="color: blue; font-size: 16px;">這是一個藍色的段落。</p>

外部樣式表

外部樣式表將樣式規(guī)則保存在獨立的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的基本語法和元素，你可以創(chuàng)建吸引人且功能強大的網頁。無論是文本、圖像、鏈接還是表單，HTML提供了豐富的工具來呈現內容和實現用戶交互。

這篇文章提供了HTML的基礎知識，但HTML是一個廣泛的主題，還有許多高級特性和技巧等待你探索。希望這篇文章對你入門HTML有所幫助，讓你能夠開始創(chuàng)建自己的網頁。繼續(xù)學習和實踐，你將成為一個熟練的網頁開發(fā)者。

在線咨詢

上一篇：微軟大發(fā)善心！IE11居然升級了：可屏蔽VB腳本
下一篇：聽說過CSS in JS，那你聽說過JS in CSS嗎

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商