HTML的全稱是超文本語言(Hyper Text Markup Language)。雖然這個名字聽起來像是專業技術人員才能操作的,但事實上HTML是最簡單的代碼形式之一并且應用很廣泛。
簡而言之,HTML可以允許亞馬遜賣家對產品描述進行排版(比如說添加粗體和斜體,換行,以及加入bullet points等),讓買家能更清晰了解產品的賣點。
看到這里,你可能會問了:沒有用HTML寫出來的產品描述就不能用了嗎?
答案是當然可以的,但是我們來對比一下不用HTML(圖1)與使用HTML(圖2)的產品描述的效果差異:
▲圖片來源:亞馬遜Bosch
▲圖片來源:亞馬遜Bosch
是不是看到沒有用HTML的產品描述時只覺得雜亂無章,想要馬上關掉這個頁面呢?而用了HTML的產品描述更有條理,看起來更專業,可以讓顧客很快地找到自己需要了解的內容。
在這個信息碎片化的時代,大家對同一件事情的注意力不會持續太久,沒有人有耐心去讀堆在一起的文字。如果顧客沒有很快地得到自己想要的信息,他們會立馬關閉頁面去瀏覽別人更清晰明了的listing。因此,賣家需要用更好的listing內容來留住客戶,吸引消費者下單購買。
想用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是什么?——零基礎自學網頁制作》這篇教程,請按照其中說明創建一個txt文件。具體過程如下:
step1:在您方便的磁盤中建立一個文件夾,命名為"零基礎自學網頁制作"。例如我在D盤中建立了"零基礎自學網頁制作"文件夾。
step2:在文件夾中創建"HTML框架.txt"文件。鼠標移動到空白處點擊右鍵選擇"文本文檔"。
命名為"html框架",如下圖所示。
如果您的電腦沒有顯示".txt"后綴的話,請做如下操作:點擊"工具",找到"文件夾選項"
菜單如下:點擊"查看選項"。
下拉滑條,找到"隱藏已知文件類型的擴展名"選項,將前面的對勾去掉。
如果您使用的是win10的話請參考《邊學邊做網頁篇------初識HTML》,這也是我做的教程,不過以后都使用這個賬號來發了。
step3:把"HTML框架"復制粘貼到"html框架.txt"文件中。HTML框架代碼如下:
<!DOCTYPE HTML> <html> <head> </head><body> </body> </html>
代碼講解請參照《HTML是什么?——零基礎自學網頁制作》這篇教程中的講解。
粘貼后效果如下:使用CTRL+s組合鍵保存文件。
step4:復制"html框架.txt"文件,更名為"第一個網頁.txt"。原始的"html框架.txt"文件為以后備用。
如圖所示:
step5:把"第一個網頁.txt"的后綴名".txt"改為".html"。
首先將光標放在"第一個網頁.txt"文件上,點擊右鍵,選擇"重命名"。如圖:
選擇".txt"
更改為".html",敲擊回車鍵。這時會彈出一個對話框,如圖:
大膽的點擊"是"即可。
修改后文件是這樣的,如圖:因為我的默認瀏覽器是360,所以,".html"文件圖標顯示為360瀏覽器的圖標,顯示其他瀏覽器的圖標也沒有問題。
step6:將鼠標移動到"第一個網頁.html"文件上,單擊右鍵,選擇打開方式,如圖:
選擇任何一個瀏覽器打開即可,我使用的是火狐瀏覽器(Firefox),打開后如圖所示:空白一片。
點擊鍵盤F12鍵,看一下控制臺,如圖:查看器中已經顯示我們的代碼框架了。成功!
如果網頁是一道菜,那么,html框架我們可以理解為裝菜的白盤子,所以我們打開框架時,瀏覽器顯示一片白。下面我們為盤子中加些簡單的"菜"。
首先我們為頁面添加"標題"
在添加標題前,我們來看一下html框架代碼中的內容,在<html></html>標簽中有<head></head>和<body></body>兩個兄弟標簽。
我們在頁面中看到的所有的內容都是添加到<body></body>標簽中間!
<head></head>標簽中的內容并不會顯示在頁面中。
那么如何添加"標題"呢?
標題在HTML中用<h></h>標簽表示。在<h></h>中間加入文字內容即可。如下所示:
<h>第一個頁面</h>
右鍵,使用"記事本"打開"第一個網頁.html"文件。如圖所示:如果您的"打開方式"中沒有"記事本"請點擊"選擇默認程序"
在"其他程序"中找到"記事本"。點擊"確定"。從此,"記事本"就一直存在于"打開方式"中了。
我們把這句代碼粘貼到<body></body>之間。如下所示:保存后使用瀏覽器打開。
<!DOCTYPE HTML><html><head> </head> <body> <h>第一個頁面</h> </body> </html>
然后,使用瀏覽器打開,如圖所示:標題出現在頁面中了。
下面,我們來添加段落內容。
段落在HTML中使用<p></p>標簽添加。代碼如下
<p>千里之行始于足下</p>
請各位自行將代碼添加到"第一個網頁.html"文件中吧!示例代碼如下:
<!DOCTYPE HTML> <html> <head> </head> <body> <h>第一個網頁</h><p>千里之行始于足下</p> </body> </html>
結果如圖所示:
通過這個練習,我們可以發現一個規律,在<body></body>中,子元素代碼的上下順序代表了它在頁面中顯示的排版順序。
這也簡單回答了代碼結構與排版的關系,html的標簽語句只是標記了它所承載的信息的屬性和版面位置。
基于這個特性,html被稱為超文本標記語言。
下一期我們具體討論頁面中文字編輯的技巧。
喜歡的小伙伴請加關注,有任何問題請給我留言,歡迎大家給與指正!感激不盡!
HTML序章(學習目的、對象、基本概念)——零基礎自學網頁制作
HTML是什么?——零基礎自學網頁制作
HTML頁面中head標簽有啥用?——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2(路徑詳解)——零基礎自學網頁制作
使用HTML添加表格1(基本元素)——零基礎自學網頁制作
使用HTML添加表格2(表格頭部與腳部)——零基礎自學網頁制作
使用HTML添加表格3(間距與顏色)——零基礎自學網頁制作
使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作!為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3(下拉列表、多行文字輸入)——零基礎自學網頁制作
HTML表單4(form的action、method屬性)——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
可能不知道什么叫做富文本編輯器,什么叫做標記語言,但如果你有計劃想成為一名 SaaS 服務商,又或者你想編寫一下當前很火的 AI 提示詞之類的,那么 Markdown 標記語言是你無法避開的「技術」。
本文不會很深入去教你使用 Markdown 語言(本人也懂得不多),或者說 Markdown 根本也沒有很深入的用法(雖然懂得不多,還是得裝下去),為什么這么說呢,我們來對比一下,平時我們用 Office Word 或 WPS 文字設置文字作為標題1、標題2、標題3等樣式,一般是這樣操作:
如果用 Markdown 來做同樣的排版則是這樣的:
可以看出,在 WPS 是借助強大的富文本編輯器,結合鼠標的拖拽,就能很容易地完成排版。換成 Markdown 標記語言的話,貌似全程不需要怎樣借助鼠標,就是輸入一個個「# + 空格」,三個標題的樣式排版就神奇般完成了。
是的,這就是 Markdown 標記語言,用「# ` -」這些字符結合空格、回車來完成大部分的排版。我再舉多幾個例子,就能更加明白了。
我在左邊已經預置好文字,只要加上這些標記符,右邊就能實時看到效果。全程只是用鍵盤,在已有文字附近輸入一些簡單的符號,就能完成樣式的輸出。
特別是有序和無序排列,在 Office 當中沒有「苦練」一段時間的鼠標,都不敢拖拉生成這種排序,而且按個回車還要小心翼翼,生怕破壞格式。在 Markdown 就沒有那么矯情了,只要是按照標準輸入的,輸出就一定也是標準的。
這個 Markdown 標記語言不是新生的事物,它誕生于 2004年,在 Github 這個開源平臺全面支持 Markdown 之后,IT圈就開始流行這個標記語言了。所以,我們作為 SaaS 服務商的身份,對這個語言的掌握是必要的。
比如,我們在一些云平臺社區,論壇發帖是支持 Markdown 語法的。
在比較知名的問答平臺,寫個文章,也是支持 Markdown 語法的。
這些平臺,特別是 IT 相關的,幾乎都開始兼容 Markdown 語法了。當然,Markdown 雖然創始人規范了一些使用符號,但是在實際的應用當中,許多平臺或者開發者也會自定義一些符號,產生更多的效果,這個要仔細看每個平臺的幫助說明。一旦掌握基本的原理,再去適應更多的符號也是相當于容易的。
Markdown 文件的后綴名是 .md,在最大的開源平臺 Github 上面,所有的項目文檔說明 README.md 都是用 Markdown 標記語言編寫的文檔。
比如流行的面板:1Panel 的說明文檔。
許多新的開源程序,比如一些論壇,或者博客程序,默認編輯器不再是之前的那些富文本 HTML 編輯器了,取代的就是支持 Markdown 語法的編輯器。
在 Windows 平臺,有許多支持 Markdown 語法的客戶端,當然在 Mac 蘋果端也有。Windows 比較著名的有:Typora,后來轉成收費軟件之后,也產生了許多取代的。
比如:MarkText,還有火到不行的:Obsidian,后面有機會我再起篇章寫這些客戶端的應用。
因為 Markdown 語法簡單,通過簡單的字符就能輸出 HTML 排版,加上 CSS 主題,所輸出的樣式就十分靈活了。甚至,用 Markdown 寫公眾號推文也是可行的,只是要先在客戶端寫好,再通過轉換樣式拷貝上去。這也是在后面有機會分享給大家。
當然,微軟的 Visual Studio Code 這款免費的編輯器,裝上插件,就是神一般存在的 Markdown 的利器,本文的預覽演示就是用它生成的。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。