整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
段時間亞馬遜日本站出公告稱賣家不能在詳情頁面上使用HTML代碼后，多位其他站點的亞馬遜賣家就開始了一連串的問候：為什么美國站并沒有這個news？為什么歐洲站并沒有這個news？是不是新規只針對日本站？
時間給出答案：歐洲站以及美國站賣家也即將不能使用HTML標簽了。
歐美站發出通知：將不再支持在詳情頁面上使用HTML標記
據了解，亞馬遜一直不建議賣家在詳情頁面上使用任何HTML內容，這一點在商品詳情頁面規則中早已經闡明，即使如此還是有不少亞馬遜賣家在商品描述頁面使用HTML。
近日，亞馬遜歐洲站和美國站相繼發出通知明確表示，將不再支持在詳情頁面上使用HTML標記。
從圖中內容可以看出，為了向消費者提供安全性以及在非HTML設備上列出產品的多功能性，2021年7月17日之后，亞馬遜將停止支持在產品詳細信息頁面上的產品說明中使用HTML標簽。美國站賣家需要按照平臺的產品詳細信息頁面規則中的規定。
亞馬遜建議賣家在上述日期之前使用HTML標簽更新商品詳情頁面，賣家可以使用賣方中心或通常的渠道進行此類更新。
2021年7月17日之后，不支持在產品詳細信息頁面中包含HTML標記的所有產品描述將停止顯示HTML格式。例如，如果賣家在產品說明的一行中使用HTML標記，則該行可能會被刪除或不使用HTML格式顯示，這取決于標記的用法。
除了美國站，歐洲站賣家也即將不能使用HTML標記了。
從中可以看出，亞馬遜對歐洲站賣家的要求和美國站賣家大差不差，只是新規生效日期不同，暨從2021年6月19日開始，如果歐洲站賣家在產品說明的任何行中使用HTML標簽，則該行將被刪除或不使用HTML格式顯示。
賣家：怎么換行？怎么加粗字體？
小編了解到，很多亞馬遜賣家一直以來都是用HTML代碼來編輯詳情頁，現在亞馬遜不讓賣家使用HTML了，多位賣家異常惆悵：還有什么辦法實現換行和段落功能嗎？
一位手工賣家表示，這個政策對手工賣家來說很糟糕，因為直到最近，我們還在大量使用HTML，現在我們不得不接受重新編輯所有這些列表的重大噩耗！
另一位亞馬遜賣家同樣抱怨連連：這太可怕了！我仍在處理白色背景圖片，并在更新照片時重新修改了我的描述，現在即使是我遵循的規則，我也必須重新更改所有內容，因為它們再次更改了規則！
實際上，這個政策也再次把品牌話題帶動了起來，用某位亞馬遜賣家自己的話說就是，亞馬遜是在逼著賣家注冊品牌，換A+，這是大勢所趨。以美國站賣家為例，亞馬遜Listing描述從7.17后不再支持HTML tags, 也就是說還不備案品牌的賣家，以后描述的頁面可能就是一堆堆的樣子，這實在是沒眼看。
小編發現，從今年4月份開始，就陸續有賣家表示用不了HTML了：
賣家A：最近英國站不能用可視化編輯器了，我最近都是手打<b>，一用那個可視化編輯器就提示無效值。
賣家B：4月份上傳了幾個產品，美國站用可視化編輯器的代碼也顯示不了分行了……
值得注意的是，政策出來后賣家在以后能否用HTML換行的問題上糾結了起來。對此政策，一位賣家認為以后詳情頁描述里面，常用的換行<br>，換段落<p>，加粗<b>這些標簽都不準再用了，趁早批量用模板更新移除，否則可能會影響listing的完整顯示。
但是也有賣家表示，政策生效后仍可以用</br>換行，因為亞馬遜表示，在特殊情況下，賣家可以在描述中根據需要使用換行符 (</br>)。
小編想說，不管怎樣，賣家還是早做準備，弄清楚亞馬遜所說的特殊情況是什么意思，以免政策生效后亡羊補牢為時已晚。
商品詳情頁面規則
除了亞馬遜將停止支持在產品詳細信息頁面上的產品說明中使用HTML標簽這個新聞值得賣家關注，廣大亞馬遜賣家還需仔細研讀商品詳情頁面規則。
買家通過商品詳情頁面了解賣家的商品，亞馬遜也對商品詳情頁面進行了嚴格規定，亞馬遜要求賣家確保每個商品詳情頁面包含單一商品，這有助于為買家提供清晰且一致的購買體驗。一般來說，賣家需要遵守以下規定:
1、遵守任何相關的風格指南，避免使用HTML、JavaScript或其他代碼。
2、排除不適宜的內容，如淫穢或攻擊性材料、鏈接或聯系信息、情節劇透、評論或評論請求以及廣告。
避免為已有詳情頁面的商品創建重復頁面。
3、準確地分類和描述商品。
4、為新商品或新版本創建新的詳情頁面。
5、僅創建與主要商品相關的有效“變體”。
在編寫商品信息時，亞馬遜方面表示商品詳情頁面的商品名稱、描述、要點或圖片中不允許出現以下任何內容:
電話號碼、地址、電子郵件地址或網站URL；
供貨情況、商品價格或狀況詳情；
評論、引用或推薦內容；
請求買家發布正面評價的言辭；
用于下訂單的其他網站鏈接或備選配送服務(如免費配送)；
在圖片、照片或視頻上加印廣告、宣傳資料或水印；
時效性信息，如宣傳活動、研討會或講座的日期；
在屬性中全部使用大寫字母，這適用于商品名稱、要點和/或商品描述，據了解，亞馬遜允許賣家僅對每個單詞的開頭使用大寫字母。
此外，賣家還需注意的是，商品名稱不得超過200個字符(包括空格，此上限適用于所有分類，某些分類的字符數可能更少。
一句話總結就是，在亞馬遜上銷售的任何商品均應遵守亞馬遜商品信息標準，如果賣家未遵守這些標準，則會導致負面買家體驗，并可能會導致賣家的銷售權限被暫時或永久取消。
HTML 標題（Heading）是通過 <h1> - <h6> 標簽來定義的.
h是英文header標題的縮寫，標題無處不在，它的應用范圍十分廣泛：網站結構、寫作文、PPT 等。
這里有六個標題元素標簽 —— <h1>、<h2> 、<h3>、<h4>、<h5>、<h6>，每個元素代表文檔中不同級別的內容：
<h1> 表示主標題（ the main heading ），<h2> 表示二級子標題（ subheadings ），<h3>表示三級子標題（ sub-subheadings ），<h4>、<h5>、<h6>字體的大小依次遞減。
<h1>這是標題1</h1>
<h2>這是標題2</h2>
<h3>這是標題3</h3>
<h4>這是標題4</h4>
<h5>這是標題5</h5>
<h6>這是標題6</h6>HTML 段落是通過標簽<p>來定義的，P是英文paragraph段落的縮寫，經常被用來創建一個段落，就和你寫作文一樣。
<p>這是一個段落。</p>
<p>這是另外一個段落。</p>HTML 鏈接是通過標簽<a>來定義的。a標簽，也叫anchor（錨點）元素，既可以用來鏈接到外部地址實現頁面跳轉功能，也可以鏈接到當前頁面的某部分實現內部導航功能。
<a href="http://www.liyadong.cn">這是一個鏈接</a>
<a href="#">這是一個空鏈接</a> HTML 圖像是通過標簽<img>來定義的。使用img元素來為你的網站添加圖片，使用src 屬性指向一個圖片的具體地址。
<img src="logonew2.png" width="206" height="36">請注意：img元素是自關閉元素，不需要結束標記。
在 HTML 中我們可以使用em（emphasis）元素來標記這樣的情況，瀏覽器默認風格為斜體：
在 HTML 中我們還可以使用<strong>(strong importance)元素來標記這樣的請況，瀏覽器默認風格為粗體：
<p>我 <em>很高興</em>你不 <em>討厭我</em>.</p>
<p>這種液體是<strong>高毒性的</strong>.</p>
<p>我就指望你<strong>不會</strong> 遲到!</p><hr> 標簽在 HTML 頁面中創建水平線。
hr 元素可用于分隔內容，使用該元素產生的水平線可以在視覺上將文檔分隔成各個部分。
<p>hr 標簽定義水平線：</p>
<hr />
<p>這是段落。</p>
<hr />
<p>這是段落。</p>
<hr />
<p>這是段落。</p>可以將注釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會忽略注釋，也不會顯示它們。
HTML 注釋可以方便地用來幫助網頁設計人員，提醒他們與程序相關的信息。
注釋寫法如下:
<!-- 這是一個注釋 -->如果您希望在不產生一個新起點的情況下進行換行（新行），請使用 <br /> 標簽。
在 HTML 語言中，<br /> 標簽定義為一個換行符，它可以理解為簡單的輸入一個空行，而不是用來對內容進行拆分：
<p>這個<br>段落<br>演示了分行的效果</p>標簽 | 描述 |
<b> | 定義粗體文本 |
<em> | 定義著重文字 |
<i> | 定義斜體字 |
<small> | 定義小號字 |
<strong> | 定義加重語氣 |
<sub> | 定義下標字 |
<sup> | 定義上標字 |
<ins> | 定義插入字 |
<del> | 定義刪除字 |
標簽 | 描述 |
<code> | 定義計算機代碼 |
<kbd> | 定義鍵盤碼 |
<samp> | 定義計算機代碼樣本 |
<var> | 定義變量 |
<pre> | 定義預格式文本 |
標簽 | 描述 |
<abbr> | 定義縮寫 |
<address> | 定義地址 |
<bdo> | 定義文字方向 |
<blockquote> | 定義長的引用 |
<q> | 定義短的引用語 |
<cite> | 定義引用、引證 |
<dfn> | 定義一個定義項目。 |
HTML <q> 元素定義短的引用。
瀏覽器通常會為 <q> 元素包圍引號。
<p>WWF 的目標是：<q>構建人與自然和諧共存的世界。</q></p>HTML <blockquote> 元素定義被引用的節。
瀏覽器通常會對 <blockquote> 元素進行縮進處理。
<p>以下內容引用自 WWF 的網站：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年來，WWF 一直致力于保護自然界的未來。
世界領先的環保組織，WWF 工作于 100 個國家，
并得到美國一百二十萬會員及全球近五百萬會員的支持。
</blockquote>HTML <abbr> 元素定義縮寫或首字母縮略語。
對縮寫進行標記能夠為瀏覽器、翻譯系統以及搜索引擎提供有用的信息。
<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>HTML <dfn> 元素定義項目或縮寫的定義。
<dfn> 的用法，按照 HTML5 標準中的描述，有點復雜：
1. 如果設置了 <dfn> 元素的 title 屬性，則定義項目：
<p><dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。</p>2. 如果 <dfn> 元素包含具有標題的 <abbr> 元素，則 title 定義項目：
<p><dfn><abbr title="World Health Organization">WHO</abbr></dfn> 成立于 1948 年。</p>3. 否則，<dfn> 文本內容即是項目，并且父元素包含定義。
<p><dfn>WHO</dfn> World Health Organization 成立于 1948 年。</p>注釋：如果您希望簡而化之，請使用第一條，或使用 <abbr> 代替。
HTML <address> 元素定義文檔或文章的聯系信息（作者/擁有者）。此元素通常以斜體顯示。大多數瀏覽器會在此元素前后添加折行。
<address>
Written by Donald Duck.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>HTML <cite> 元素定義著作的標題。
瀏覽器通常會以斜體顯示 <cite> 元素。
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>HTML <bdo> 元素定義雙流向覆蓋（bi-directional override）。
<bdo> 元素用于覆蓋當前文本方向：
<bdo dir="rtl">This text will be written from right to left</bdo>標簽 | 描述 |
<abbr> | 定義縮寫或首字母縮略語。 |
<address> | 定義文檔作者或擁有者的聯系信息。 |
<bdo> | 定義文本方向。 |
<blockquote> | 定義從其他來源引用的節。 |
<dfn> | 定義項目或縮略詞的定義。 |
<q> | 定義短的行內引用。 |
<cite> | 定義著作的標題。 |
HTML 可以通過 <div> 和 <span> 將元素組合起來。
大多數 HTML 元素被定義為塊級元素或內聯元素。
塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。
實例: <h1>, <p>, <ul>, <table>
內聯元素在顯示時通常不會以新行開始。
實例: <b>, <td>, <a>, <img>
<div> 標簽可以把文檔分割為獨立的、不同的部分。
HTML <div> 元素是塊級元素，它是可用于組合其他 HTML 元素的容器。
<div> 元素沒有特定的含義。除此之外，由于它屬于塊級元素，瀏覽器會在其前后顯示折行。
如果與 CSS 一同使用，<div> 元素可用于對大的內容塊設置樣式屬性。
<div> 元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數據。
<p>這是一些文本。</p>
<div style="color:#00FFFF">
<h3>這是一個在 div 元素中的標題。</h3>
<p>這是一個在 div 元素中的文本。</p>
</div>
<p>這是一些文本。</p>HTML <span> 元素是內聯元素，可用作文本的容器
<span> 元素也沒有特定的含義。
當與 CSS 一同使用時，<span> 元素可用于為部分文本設置樣式屬性。
<p>我有一雙
<span style="color:gold">金色</span> 的
<span style="font-size:50px">大眼睛</span>和
<span style="color:blue">藍色的頭發</span>。
</p> 標簽 | 描述 |
<div> | 定義了文檔的區域，塊級 (block-level) |
<span> | 用來組合文檔中的行內元素， 內聯元素(inline) |
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表適合成員之間無級別順序關系的情況。
無序列表使用 <ul> 標簽：
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>同樣，有序列表也是一列項目，列表項目使用數字進行標記。 有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。
有序列表適合各項目之間存在順序關系的情況。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>自定義列表不僅僅是一列項目，而是項目及其注釋的組合。
自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
自定義列表中的一個術語名可以對應多重定義或者多個術語名對應同一個定義，如果只有術語名或者只有定義也是可行的，也就是說 <dt> 與 <dd> 在其中數量不限、對應關系不限。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>表格由<table>標簽來定義。每個表格均有若干行（由<tr>標簽定義），每行被分割為若干單元格（由<td>標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
HTML 表格的基本結構：
<table>…</table>：定義表格
<th>…</th>：定義表格的標題欄（文字加粗）
<tr>…</tr>：定義表格的行
<td>…</td>：定義表格的列
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>標簽 | 描述 |
<table> | 定義表格 |
<th> | 定義表格的表頭 |
<tr> | 定義表格的行 |
<td> | 定義表格單元 |
<caption> | 定義表格標題 |
<colgroup> | 定義表格列的組 |
<col> | 定義用于表格列的屬性 |
<thead> | 定義表格的頁眉 |
<tbody> | 定義表格的主體 |
<tfoot> | 定義表格的頁腳 |
<iframe>標簽規定一個內聯框架。
一個內聯框架被用來在當前 HTML 文檔中嵌入另一個文檔。
通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。
iframe 語法：
<iframe src="URL"></iframe>該URL指向不同的網頁，將窗口內容顯示為URL地址指向頁面。
height和width屬性用來定義iframe標簽的高度與寬度。屬性默認以像素為單位, 但是你可以指定其按比例顯示 (如："80%").
<iframe src="demo_iframe.htm" width="80%" height="80%"></iframe>iframe可以顯示一個目標鏈接的頁面，目標鏈接的屬性必須使用iframe的屬性，如下實例：
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3cschool.cn" target="iframe_a">W3CSCHOOL.CN</a></p>表單是一個包含表單元素的區域。
表單元素是允許用戶在表單中輸入內容，比如：文本域 (textarea)、下拉列表、單選框 (radio-buttons)、復選框 (checkboxes)等等。
表單使用表單標簽 <form> 來設置:
<form>
.
input elements
.
</form>文本域通過 <input type="text"> 標簽來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。您可以在編程測試中創建文本輸入框！
<form>
姓名: <input type="text" name="firstname"><br>
電話號碼: <input type="text" name="lastname">
</form>密碼字段通過標簽 <input type="password"> 來定義:
<input type="radio"> 標簽定義了表單單選框選項。
<form>
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form><input type="checkbox"> 定義了復選框. 用戶需要從若干給定的選擇中選取一個或若干選項。
<form>
<input type="checkbox" name="vehicle" value="Bike">我有自行車<br>
<input type="checkbox" name="vehicle" value="Car">我有小車
</form><input type="submit"> 定義了提交按鈕.
當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。:
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>以上內容整理于網絡，如有侵權請聯系刪除。
人在51RGB網學習HTML+CSS基礎課程，記錄一些文字，方便自己回憶，也希望對大家有所幫助
基礎框架
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>標題標簽</title>
</head>
<body>
<h1>了不起的蓋茨比</h1>
<p>《了不起的蓋茨比》為那個奢靡年代的縮影。蓋茨比懷揣著對"美國夢"的期翼，投身到那個年代的燈紅酒綠之中，卻在名利場中看盡世態炎涼，以及浮華背后一切終將逝去的空虛悵惘。1925年《了不起的蓋茨比》問世。
</p>
</body>
</html>
什么是代碼注釋？代碼注釋的作用是幫助程序員標注代碼的用途，過一段時間后再看你所編寫的代碼，就能很快想起這段代碼的用途。代碼注釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的讀懂你的程序的功能，方便多人合作開發網頁代碼。
語法：
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。
<head> <title>...</title> <meta> <link> <style>...</style> <script>...</script></head>
<title>標簽
在<title>和<title>標簽之間的文字內容是網頁的標題信息，它會出現在瀏覽器的標題欄中。網頁的title標簽用于告訴用戶和搜索引擎這個網頁的主要內容是什么，搜索引擎可以通過網頁標題，迅速的判斷出網頁的主題。每個網頁的內容都是不同的，每個網頁都應該有一個獨一無二的title。
例如：
<head> <title>helloworld</title></head>
<title>標簽的內容“hello world”會在瀏覽器中的標題欄上顯示出來，如下圖所示
在網頁上要展示出來的頁面內容一定要放在body標簽中。如下圖是一個新聞文章的網頁。
如果想在網頁上顯示文章，這時就需要<p>標簽了，把文章的段落放到<p>標簽中。
語法：<p>段落文本</p>
注意一段文字一個<p>標簽，如在一篇新聞文章中有3段文字，就要把這3個段落分別放到3個<p>標簽中。如下圖所示。
文章的段落用<p>標簽，那么文章的標題用什么標簽呢？在本節我們將使用<hx>標簽來制作文章的標題。標題標簽一共有6個，h1、h2、h3、h4、h5、h6分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。并且依據重要性遞減。<h1>是最高的等級。
語法：<hx>標題文本</hx> x:1-6
注意：因為h1標簽在網頁中比較重要，所以一般h1標簽被用在網站名稱上。騰訊網站就是這樣做的。如：<h1>騰訊網</h1>
h1-h6標簽的默認樣式：
標簽代碼：
在瀏覽器中顯示的樣式：
有了段落又有了標題，現在如果想在一段話中特別強調某幾個文字，這時候就可以用到<em>或<strong>標簽但兩者在強調的語氣上有區別:
<em>表示強調，在瀏覽器中<em>默認用斜體表示
<strong>表示更強烈的強調，在瀏覽器中<strong>用粗體表示。
兩個標簽相比，目前國內前端程序員更喜歡使用<strong>表示強調。
在瀏覽器中默認樣式是有區別的：
瀏覽器中的樣子，如下圖。
語法：
<em>需要強調的文本</em>
<strong>需要強調的文本</strong>
栗子：
在網上商城中，某產品的打折后的價格是需要強調的。如下圖。
代碼實現:
語法：<span>文本</span>
我們對<em>、<strong>、<span>這三個標簽進行一下總結：
<em>和<strong>標簽是為了強調一段話中的關鍵字時使用，它們的語義是強調。
<span>標簽是沒有語義的，它的作用就是為了設置單獨的樣式用的。
如果現在我們想把上一小節的第一段話“美國夢”三個字設置成blue（藍色），但注意不是為了強調“美國夢”，而只是想為它設置和其它文字不同的樣式（并不想讓屏幕閱讀器對“美國夢”這三個字加重音讀出），所以這樣情況下就可以用到<span>標簽了。如下面例子：
<p>1922年的春天，一個想要成名名叫<em>尼克?卡拉威</em>（托比?馬奎爾TobeyMaguire飾）的作家， 離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，<strong>股票</strong>飛漲的時代。 為了追尋他的<span>美國夢</span>，他搬入紐約附近一海灣居住。</p>
我們如果想設置“美國夢”三個字設置成blue（藍色），只需要在<style>標簽中加入：
span{color:blue; }css部分，以后會聊，你能大概明白span就是能干單獨設置樣式的活，就ok了
想在你的html中加一段引用嗎？比如在你的網頁的文章里想引用某個作家的一句詩，這樣會使你的文章更加出彩，那么<q>標簽是你所需要的。
語法：<q>引用文本</q>
<p>最初知道莊子，是從一首詩<q>莊生曉夢迷蝴蝶。望帝春心托杜鵑
</q>開始的。雖然當時不知道是什么意思，只是覺得詩句挺特別。
后來才明白這個典故出自是莊子的《逍遙游》，《逍遙游》代表了莊子思想的最高境界，是對世俗社會的功名利祿及自己的舍棄。
</p>
講解:
在上面的例子中，“莊生曉夢迷蝴蝶。望帝春心托杜鵑。” 這是一句詩歌，出自晚唐詩人李商隱的《錦瑟》 。因為不是作者自己的文字，所以需要使用實現引用。
注意要引用的文本不用加雙引號，瀏覽器會對q標簽自動添加雙引號。
下圖是代碼顯示結果：
注意這里用標簽的真正關鍵點不是它的默認樣式雙引號（如果這樣我們不如自己在鍵盤上輸入雙引號就行了），而是它的語義：引用別人的話。
<blockquote>的作用也是引用別人的文本。但它是對長文本的引用，如在文章中引入大段某知名作家的文字，這時需要這個標簽。
等等，上一節<q>標簽不是也是對文本的引用嗎？不要忘記<q>標簽是對簡短文本的引用，比如說引用一句話就用到<q>標簽。
如想在我的文章中引用李白《關山月》中的詩句，因為引用文本比較長，所以使用
<blockquote>。
語法：<blockquote>引用文本</blockquote>
如下面例子：
<blockquote> 明月出天山，蒼茫云海間。長風幾萬里，吹度玉門關。漢下白登道，胡窺青海灣。由來征戰地，不見有人還。戍客望邊色，思歸多苦顏。高樓當此夜，嘆息未應閑。 </blockquote>
瀏覽器對<blockquote>標簽的解析是縮進樣式。如下圖所示：
例子，我們想讓一首詩顯示得更美觀些，如顯示下面效果：
怎么可以讓每一句詩詞后面加入一個折行呢？那就可以用到<br />標簽了，在需要加回車換行的地方加入<br />，<br />標簽作用相當于word文檔中的回車。
代碼改為：
<h2>《詠桂》</h2> <p>暗淡輕黃體性柔，<br/>情疏跡遠只香留。<br/>何須淺碧深紅色，<br/>自是花中第一流。
詩文在瀏覽器中顯示為：
在html代碼中輸入空格、回車都是沒有作用的。要想輸入空格，必須寫入。不要忘了那個分號
在html代碼中輸入空格是不起作用的，如下代碼。
在瀏覽中顯示，還是沒有空格效果。
輸入空格的正確方法：
在瀏覽器中的顯示出來的空格效果。如下圖所示。
在信息展示時，有時會需要加一些用于分隔的橫線，這樣會使文章看起來整齊些。如下圖所示：
語法：
html4.01版本<hr>
xhtml1.0版本<hr />注意：
<hr />標簽和<br />標簽一樣也是一個空標簽，所以只有一個開始標簽，沒有結束標簽。
<hr />標簽的在瀏覽器中的默認樣式線條比較粗，顏色為灰色，可能有些人覺得這種樣式不美觀，沒有關系，這些外在樣式在我們以后學習了css樣式表之后，都可以對其修改。
大家注意，現在一般使用 xhtml1.0 的版本（其它標簽也是），這種版本比較規范。
一般網頁中會有一些網站的聯系地址信息需要在網頁中展示出來，這些聯系地址信息如公司的地址就可以<address>標簽。也可以定義一個地址（比如電子郵件地址）、簽名或者文檔的作者身份。栗子：
<address>本文的作者：<ahref="mailto:zhaoliangsyn@163.com">zhaolion</a></address>
在介紹語言技術的網站中，避免不了在網頁中顯示一些計算機專業的編程代碼，當代碼為一行代碼時，你就可以使用<code>標簽了，如下面例子：
<code>var i=a + b;</code>
注意：在文章中一般如果要插入多行代碼時不能使用<code>標簽了。如果是多行代碼，可以使用<pre>標簽。
在上節中介紹加入一行代碼的標簽為<code>，但是在大多數情況下是需要加入大段代碼的，如下圖：
怎么辦？不會是每一代碼都加入一個<code>標簽吧，沒有這么復雜，這時候就可以使用<pre>標簽。
語法：<pre>語言代碼段</pre>
<pre>標簽的主要作用:預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。如下代碼：
<pre> varmessage="歡迎"; for(vari=1;i<=10;i++) { alert(message); } </pre>在瀏覽器中的顯示結果為：
在上面的例子中可以看到代碼中的空格，換行符都保留下來。如果用以前的方法，回車需要輸入<br>簽，空格需要輸入
注意：<pre>標簽不只是為顯示計算機的源代碼時用的，在你需要在網頁中預顯示格式時都可以使用它，只是<pre>標簽的一個常見應用就是用來展示計算機的源代碼。
在瀏覽網頁時，你會發現網頁上有很多信息的列表，如新聞列表、圖片列表，如下圖所示。
這些列表就可以使用ul-li標簽來完成。ul-li是沒有前后順序的信息列表。
語法：
<ul> <li>信息</li> <li>信息</li> ......</ul>
舉例：
<ul> <li>精彩少年</li> <li>美麗突然出現</li> <li>觸動心靈的旋律</li></ul>
ul-li在網頁中顯示的默認樣式一般為：每項li前都自帶一個圓點，如下圖所示：
如果想在網頁中展示有前后順序的信息列表，怎么辦呢？如，當當網上的書籍熱賣排行榜，如下圖所示。這類信息展示就可以使用<ol>標簽來制作有序列表來展示。
語法：
<ol> <li>信息</li> <li>信息</li> ......</ol>
舉例：
下面是一個熱點課程下載排行榜：
<ol> <li>前端開發面試心法</li> <li>零基礎學習html</li> <li>JavaScript全攻略</li></ol>
<ol>在網頁中顯示的默認樣式一般為：每項<li>前都自帶一個序號，序號默認從1開始，如下圖所示：
在網頁制作過程過中，可以把一些獨立的邏輯部分劃分出來，放在一個<div>標簽中，這個<div>標簽的作用就相當于一個容器。
語法：<div>…</div>
確定邏輯部分：
什么是邏輯部分？它是頁面上相互關聯的一組元素。如網頁中的獨立的欄目版塊，就是一個典型的邏輯部分。如下圖所示：圖中用紅色邊框標出的部分就是一個邏輯部分，就可以使用<div>標簽作為容器。
在上一小節中，我們把一些標簽放進<div>里，劃分出一個獨立的邏輯部分。為了使邏輯更加清晰，我們可以為這一個獨立的邏輯部分設置一個名稱，用id屬性來為<div>提供唯一的名稱，這個就像我們每個人都有一個身份證號，這個身份證號是唯一標識我們的身份的，也是必須唯一的。
如下兩圖進行比較，如果設計師把兩個圖給你，哪個圖你看上去能更快的理解呢？是不是右邊的那幅圖呢。
語法：<div id="版塊名稱">…</div>
有時候我們需要在網頁上展示一些數據，如某公司想在網頁上展示公司的庫存清單。如下表：
想在網頁上展示上述表格效果可以使用以下代碼：
創建表格的四個元素：table、tbody、tr、th、td
<table>…</table>：整個表格以<table>標記開始、</table>標記結束。
<tbody>…</tbody>：當表格內容非常多時，表格會下載一點顯示一點，但如果加上<tbody>標簽后，這個表格就要等表格內容全部下載完才會顯示。
<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。
<th>…</th>：表格的頭部的一個單元格，表格表頭。
表格中列的個數，取決于一行中數據單元格的個數。
上述代碼在瀏覽器中顯示的默認的樣式為：
總結：
table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的
表頭，也就是th標簽中的文本默認為粗體并且居中顯示
Table 表格在沒有添加 css 樣式之前，是沒有邊框的。這樣不便于我們后期合并單元格知識點的講解，所以在這一節中我們為表格添加一些樣式，為它添加邊框。代碼中加入：
<styletype="text/css">tabletrtd,th{border:1pxsolid#000;}</style>上述代碼是用 css 樣式代碼，為th，td單元格添加粗細為一個像素的黑色邊框。
結果窗口顯示出結果樣式：
表格還是需要添加一些標簽進行優化，可以添加標題和摘要。代碼如下
摘要摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。
語法：<table summary="表格簡介文本">
標題用以描述表格內容，標題的顯示位置：表格上方。語法：
<table> <caption>標題文本</caption> <tr> <td>…</td> <td>…</td> …</tr>…</table>
使用<a>標簽可實現超鏈接，它在網頁制作中可以說是無處不在，只要有鏈接的地方，就會有這個標簽。
語法 ：<a href="目標網址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>
例如：<a title="點擊進入我的博客">click here!</a>
上面例子作用是單擊click here!文字，網頁鏈接到http://www.zhaolion.com這個網頁。
title屬性的作用，鼠標滑過鏈接文字時會顯示這個屬性的文本內容。這個屬性在實際網頁開發中作用很大，主要方便搜索引擎了解鏈接地址的內容（語義化更友好)
提醒
還有一個有趣的現象不知道小伙伴們發現了沒有，只要為文本加入a標簽后，文字的顏色就會自動變為藍色（被點擊過的文本顏色為紫色），顏色很難看吧，不過沒有關系后面我們學習了css樣子就可以設置過來（a{color:#000}),后面會詳細講解。
<a>標簽在默認情況下，鏈接的網頁是在當前瀏覽器窗口中打開，有時我們需要在新的瀏覽器窗口中打開。只需要添加一個屬性target="_blank"
如下代碼：
<a href="目標網址" target="_blank">click here!</a>
<a>標簽還有一個作用是可以鏈接Email地址，使用mailto能讓訪問者便捷向網站管理者發送電子郵件。我們還可以利用mailto做許多其它事情。下面一一進行講解，請看詳細圖示：
提醒:如果mailto后面同時有多個參數的話，第一個參數必須以“?”開頭，后面的參數每一個都以“&”分隔。
下面是一個完整的實例: 在瀏覽器中顯示的一個發送按鈕
點擊鏈接會打開電子郵件應用，并自動填寫收件人等設置好的信息，如下圖：
在網頁的制作中為使網頁炫麗美觀，肯定是缺少不了圖片，可以使用<img>標簽來插入圖片。語法：[站外圖片上傳中……(48)]
舉例：<img src="myimage.gif" alt="My Image" title="My Image" />
講解：
src：標識圖像的位置；
alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本；
title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)；
圖像可以是GIF，PNG，JPEG格式的圖像文件。
網站怎樣與用戶進行交互？答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數據傳送到服務器端，這樣服務器端程序就可以處理表單傳過來的數據。
語法：<form method="傳送方式" action="服務器文件">
講解：
<form>：<form>標簽是成對出現的，以<form>開始，以</form>結束。
action ：瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php)。
method ： 數據傳送的方式（get/post）。
<formmethod="post"action="save.php"> <labelfor="username">用戶名:</label> <inputtype="text"name="username"/> <labelfor="pass">密碼:</label> <inputtype="password"name="pass"/> </form>
注意
所有表單控件（文本框、文本域、按鈕、單選框、復選框等）都必須放在<form></form>標簽之間（否則用戶輸入的信息可提交不到服務器上哦！）。
method:post/get的區別這一部分內容屬于后端程序員考慮的問題。感興趣的小伙伴可以問谷哥
當用戶要在表單中鍵入字母、數字等內容時，就會用到文本輸入框。文本框也可以轉化為密碼輸入框。
語法：
<form> <inputtype="text/password"name="名稱"value="文本"/></form>
type：
當type="text"時，輸入框為文本輸入框;
當type="password"時, 輸入框為密碼輸入框。
name：為文本框命名，以備后臺程序ASP 、PHP使用。
value：為文本輸入框設置默認值。(一般起到提示作用)
舉例：
<form> 姓名：<inputtype="text"name="myName"> <br/> 密碼：<inputtype="password"name="pass"></form>
在瀏覽器中顯示的結果：
當用戶需要在表單中輸入大段文字時，需要用到文本輸入域。
語法：<textarea rows="行數" cols="列數">文本</textarea>
<textarea>標簽是成對出現的，以<textarea>開始，以</textarea>結束。
cols ：多行輸入域的列數。
rows ：多行輸入域的行數。
在<textarea></textarea>標簽之間可以輸入默認值。
舉例：
<formmethod="post"action="save.php"> <label>聯系我們</label> <textareacols="50"rows="10">在這里輸入內容...</textarea></form>
在瀏覽器中顯示結果：
在使用表單設計調查表時，為了減少用戶的操作，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和復選框，兩者的區別是單選框中的選項用戶只能選擇一項，而復選框中用戶可以任意選擇多項，甚至全選。請看下面的例子:語法：<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
type:
當 type="radio" 時，控件為單選框
當 type="checkbox" 時，控件為復選框
value：提交數據到服務器的值（后臺程序PHP使用）
name：為控件命名，以備后臺程序 ASP、PHP 使用
checked：當設置 checked="checked" 時，該選項被默認選中
如下面代碼：
在瀏覽器中顯示的結果：
注意:同一組的單選按鈕，name 取值一定要一致，比如上面例子為同一個名稱“radioLove”，這樣同一組的單選按鈕才可以起到單選的作用。
下拉列表在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、又可以多選。如下代碼：
講解：
value：
selected="selected"：設置selected="selected"屬性，則該選項就被默認選中。
下拉列表也可以進行多選操作，在<select>標簽中設置multiple="multiple"屬性，就可以實現多選功能，在 widows 操作系統下，進行多選時按下Ctrl鍵同時進行單擊（在 Mac下使用 Command +單擊），可以選擇多個選項。如下代碼：
在瀏覽器中顯示的結果：
在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置。這一小節講解提交按鈕：當用戶需要提交表單信息到服務器時，需要用到提交按鈕。語法：<input type="submit" value="提交">
type：只有當type值設置為submit時，按鈕才有提交作用
value：按鈕上顯示的文字
舉例：
在瀏覽器中顯示的結果：
當用戶需要重置表單信息到初始時的狀態時，比如用戶輸入“用戶名”后，發現書寫有誤，可以使用重置按鈕使輸入框恢復到初始狀態。只需要把type設置為"reset"就可以。語法：<input type="reset" value="重置">
type：只有當type值設置為reset時，按鈕才有重置作用
value：按鈕上顯示的文字
舉例：
在瀏覽器中顯示的結果：
輸入賬號
單擊重置按鈕
小伙伴們，你們在前面學習表單各種控件的時候，有沒有發現一個標簽--label，這一小節就來揭曉它的作用。
label標簽不會向用戶呈現任何特殊效果，它的作用是為鼠標用戶改進了可用性。如果你在 label 標簽內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上（就自動選中和該label標簽相關連的表單控件上）。
語法：<label for="控件id名稱">
注意標簽的 for 屬性中的值應當與相關控件的 id 屬性值一定要相同。這樣你會在點慢跑標簽，即使沒有點checkbox 也能選中
例子：
<form> <a>你對什么運動感興趣：</a><br/> <labelfor="1">慢跑</label><inputtype="checkbox"name="manpao"id="1"><br/> <labelfor="2">登山</label><inputtype="checkbox"name="dengshan"id="2"><br/> <labelfor="3">籃球</label><inputtype="checkbox"name="lanqiu"id="3"><br/></form>
限時!！免費送Dreamweaver、js等前端教程
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
