HTML網頁編程之按鈕詳解

文介紹了網頁編程中的按鈕使用方法。按鈕是網頁中最常用的控件之一，點擊后會觸發某些程序。即使沒有學習過編程，大家也應該知道按鈕的概念。按鈕的最大功能是點擊后觸發程序。這篇文章主要介紹了如何在網頁中插入按鈕，并講解了按鈕的屬性和使用方法。

先來看看今天的實例效果。頁面被分為三部分：按鈕、按鈕和按鈕的共有屬性。

首先是普通按鈕，點擊后文本框的內容發生了變化，但頁面并沒有刷新。接著是重置按鈕，點擊后文本框的內容恢復到初始狀態，但頁面仍然沒有刷新。提交按鈕點擊后，頁面重新加載，提交了表單中的內容。

接著是按鈕，點擊后文本框的內容發生了變化，但頁面沒有刷新。按鈕包含一個圖片且為灰色狀態，無法點擊。

現在來看看實現的代碼。

輸入和按鈕的寫法非常相似，這里只展示了最基本的寫法。對于初學者來說，看一眼就明白了。

按鈕有三個類型：普通、重置和提交。按鈕的名稱和值會提交到服務器端。

提交時提交的是按鈕的值。ID和name是控制按鈕的命名。

點擊按鈕時會觸發onclick事件。autofocus屬性會在頁面加載完成后自動獲取焦點。

disabled屬性可以設置按鈕是否可用，不設置時默認可用。

form屬性用于設置提交到哪個URL、是否繞過驗證、以及表單的相關設置。

相關屬性的優先級高于在表單中設置的屬性。

以上就是今天的分享內容，希望對大家有所幫助。import和button在網頁中插入按鈕的功能是相同的，兩者的外觀也沒有明顯的區別，但是它們的屬性設置卻存在一定的重疊。

為什么需要這兩個標簽呢？而阿里巴巴標簽是HTML 5中新增加的標簽，它的必要性體現在哪里呢？同學們要注意，阿里巴巴標簽不是input，它不是一個封閉的標簽，而是一個唯一的標簽，可以包含文字或其他標簽。

例如，可以使用阿里巴巴標簽來插入圖片。注意，由于用戶使用的瀏覽器不同，底層的type值是必須填寫的，絕對不能使用默認值。

今天的分享就到這里，希望各位同學能夠認真練習，做到不看視頻也能夠正確地寫出代碼。所有的案例和相關文檔都可以向我索取，下期再見，想學編程就關注我吧。

TML 中使用 <input> 元素表示單行輸入框和 <textarea> 元素表示多行文本框。

HTML中使用的 <input> 元素在 JavaScript 中對應的是 HTMLInputElement 類型。HTMLInputElement 繼承自 HTMLElement 接口：

interface HTMLInputElement extends HTMLElement {
    ...
}

HTMLInputElement 類型有一些獨有的屬性和方法：

name：表示 <input> 元素的名稱。
disabled：表示 <input> 元素是否禁止使用。在表單提交時不會包含被禁止的 <input> 元素。
autofocus：表示頁面加載時，該元素是否會自動獲得焦點。
required：表示表單提交時，該 <input>元素是否為必填。
value：表示該 <input> 元素的值。
validity：返回一個 ValidityState 對象，表示 <input> 元素的校驗狀態。是只讀屬性。
validationMessage：表示 <input> 元素校驗失敗時，用戶看到的報錯信息。如果該元素不需要校驗，或者通過校驗，該屬性為空字符串。是只讀屬性。
willValidate：表示表單提交時，<input> 元素是否會被校驗。是只讀屬性。
select()：選中 <input> 元素內部的所有文本。
click()：模擬鼠標點擊當前的 <input> 元素。

而在上述介紹 HTMLInputElement 類型中的屬性時，type 屬性要特別關注一下，因為根據 type 屬性的改變，可以改變<input>的屬性。

類型	描述
text	文本輸入
password	密碼輸入
submit	表單數據提交
button	按鈕
radio	單選框
checkbox	復選框
file	文件
hidden	隱藏的字段
image	定義圖像作為提交按鈕
reset	重置按鈕

省略 type 屬性與 type="text"效果一樣， <input> 元素顯示為文本框。

當 type 的值為text/password/number/時，會有以下屬性對 <input> 元素有效。

屬性	類型	描述
autocomplete	string	字符串on或off，表示<input>元素的輸入內容可以被瀏覽器自動補全。
maxLength	long	指定<input>元素允許的最多字符數。
size	unsigned long	表示<input>元素的寬度，這個寬度是以字符數來計量的。
pattern	string	表示<input>元素的值應該滿足的正則表達式
placeholder	string	表示<input>元素的占位符，作為對元素的提示。
readOnly	boolean	表示用戶是否可以修改<input>的值。
min	string	表示<input>元素的最小數值或日期。
max	string	表示<input>元素的最大數值或日期。
selectionStart	unsigned long	表示選中文本的起始位置。如果沒有選中文本，返回光標在<input>元素內部的位置。
selectionEnd	unsigned long	表示選中文本的結束位置。如果沒有選中文本，返回光標在<input>元素內部的位置。
selectionDirection	string	表示選中文本的方向。可能的值包括forward、backward、none。

下面創建一個 type="text" ，一次顯示 25 個字符，但最多允許顯示 50 個字符的文本框：

<input type="text" size="25" maxlength="50" value="initial value">

HTML 使用的 <textarea> 元素在 JavaScript 中對應的是 HTMLTextAreaElement 類型。HTMLTextAreaElement類型繼承自 HTMLElement 接口：

interface HTMLTextAreaElement extends HTMLElement {
    ...
}

HTMLTextAreaElement 類型有一些獨有的屬性和方法：

form：只讀屬性，返回對父表單元素的引用。如果此元素未包含在表單元素中，則它可以是同一文檔中 id 屬性同 form 值的 <form> 元素，如果沒有，該值為 null。
type：只讀屬性，返回字符串textarea。
value：string類型，返回/設置控件中包含的原始值。
textLength：只讀屬性，long類型，返回<textarea>元素的value值的長度。與 value.length 相同。
defaultValue：string類型，返回/設置textarea元素的默認值。
placeholder：string類型，返回/設置 textarea 元素的占位符，作為對輸入內容的提示。
rows：unsigned long類型，返回/設置textarea元素的可見文本行數。
cols：unsigned long類型，返回/設置 textarea 元素的可見寬度。
autofocus：boolean類型，返回/設置textarea元素在頁面加載時自動獲取焦點。
name：返回/設置 textarea 元素的名稱。
disabled：boolean類型，返回/設置 textarea 元素是否應當被禁用。
HTMLTextAreaElement.labels：NodeList類型，返回與此select元素關聯的標簽元素列表。
maxLength：long類型，返回/設置元素可以輸入的最大字符數。僅在值更改時才評估此約束。
minLength：long類型，返回/設置元素可以輸入的最小字符數。僅在值更改時才評估此約束。
accessKey：boolean類型，返回/設置訪問 textarea 的鍵盤快捷鍵。
readOnly：boolean類型，返回/設置 textarea 元素是否為只讀。
required：boolean 類型，返回/設置 textarea 元素是否為必填項。
tabIndex：long類型，返回/設置 textarea 元素的 tab 鍵導航順序中元素的位置。

下面創建一個高度為 25，寬度為 5 的 <textarea> 多行文本框。它與 <input> 不同的是，初始值顯示在 <textarea>...</textarea> 之間：

<textarea rows="25" cols="5">initial value</textarea>

注意：處理文本框值的時候最好不要使用 DOM 方法，而應該使用 value 屬性。

選擇文本

<input> 與 <textarea> 都支持 select() 方法，該方法用于選中文本框中的所有內容。該方法的語法為：

select(): void

下面看一個示例：

let textbox = document.forms[0].elements["input-box"];
textbox.select();

也可以在文本框獲得焦點時，選中文本框的內容：

textbox.addEventListener("focus", (event) => {
    event.target.select();
});

select 事件

當選中文本框中的文本或使用 select() 方法時，會觸發 select 事件。

let textbox = document.forms[0].elements["textbox1"];
textbox.addEventListener("select", (event) => {
    console.log(`Text selected: ${textbox.value}`);
});

取得選中的文本

HTML5 對 select 事件進行了擴展，通過 selectionStart 和 selectionEnd 屬性獲取文本選區的起點偏移量和終點偏移量。如下所示：

function getSelectedText(textbox){
    return textbox.value.substring(textbox.selectionStart,
textbox.selectionEnd);
}

注意：在 IE8 及更早版本不支持這兩個屬性。

選中部分文本

HTML5 提供了 setSelectionRange() 方法用于選中部分文本：

setSelectionRange(start, end, direction): void;

start：被選中的第一個字符的位置索引，從 0 開始。如果這個值比元素的 value 長度還大，則會被看做 value 最后一個位置的索引。
end：被選中的最后一個字符的下一個位置索引。如果這個值比元素的 value 長度還大，則會被看做 value 最后一個位置的索引。
direction：該參數是可選的字符串類型，表示選擇方向，可以傳入 “forward”/“backward”/“none” 三個值。

下面看一個例子：

<input type="text" id="text-sample" size="20" value="Hello World!">
<button onclick="selectText()">選中部分文本</button>
<script>
    function selectText() {
        let input = document.getElementById("text-sample");
        input.focus();
        input.setSelectionRange(4, 8);    // o Wo
    }
</script>

如果想要看到選中效果，必須讓文本框獲得焦點。

輸入過濾

不同文本框經常需要保證輸入特定類型或格式的數據，或許數據需要包含特定字符或必須匹配某個特定模式。而文本框并未提供驗證功能，因此要配合 JavaScript 腳本實現輸入過濾功能。

屏蔽字符

有些輸入框需要出現或不出現特定字符。如果想要將輸入框變成只讀的，只需要使用 preventDefault()方法將按鍵都屏蔽：

input.addEventListener("keypress", (event) => {
    event.preventDefault();
});

而要屏蔽特定字符，就需要檢查事件的 charCode 屬性。如下所示，使用正則表達式實現只允許輸入數字的輸入框：

input.addEventListener("keypress", (event) => {
    if (!/\d/.test(event.key)) {
        event.preventDefault();
    }
});

還有一個問題需要處理：復制、粘貼及涉及Ctrl 鍵的其他功能。在除IE 外的所有瀏覽器中，前面代碼會屏蔽快捷鍵Ctrl+C、Ctrl+V 及其他使用Ctrl 的組合鍵。因此，最后一項檢測是確保沒有按下Ctrl鍵，如下面的例子所示：

textbox.addEventListener("keypress", (event) => {
if (!/\d/.test(String.fromCharCode(event.charCode)) &&
event.charCode > 9 &&
!event.ctrlKey){
event.preventDefault();
}
});

最后這個改動可以確保所有默認的文本框行為不受影響。這個技術可以用來自定義是否允許在文本框中輸入某些字符。

處理剪貼板

IE 是第一個實現了剪切板相關的事件以及通過JavaScript訪問剪切板數據的瀏覽器，其它瀏覽器在后來也都支持了相同的事件和剪切板的訪問，后來 HTML5 將其納入了規范。以下是與剪切板相關的 6 個事件：

beforecopy：發生復制操作前觸發。
copy：發生復制操作時觸發。
beforecut：發生剪切操作前觸發。
cut：發生剪切操作時觸發。
beforepaste：發生粘貼操作前觸發。
paste：發生粘貼操作時觸發。

剪切板事件的行為及相關對象會因瀏覽器而異。在 Safari、Chrome 和 Firefox 中，beforecopy、beforecut 和 beforepaste 事件只會在顯示文本框的上下文菜單時觸發，但 IE 不僅在這種情況下觸發，也會在 copy、cut 和 paste 事件在所有瀏覽器中都會按預期觸發。

在實際的事件發生之前，通過beforecopy、beforecut 和 beforepaste 事件可以在向剪貼板發送或從中檢索數據前修改數據。不過，取消這些事件并不會取消剪貼板操作。要阻止實際的剪貼板操作，必須取消 copy、cut和 paste 事件。

剪貼板的數據通過 clipboardData 對象來獲取，且clipboardData 對象提供 3 個操作數據的方法：

getData(format)：從剪貼板獲取指定格式的數據，接收的參數為指定獲取的數據格式，如果沒有指定數據格式或指定數據格式不存在，則此方法返回一個空字符串。
setData(format, data)：給剪貼板賦予指定格式的數據，第一個參數指定數據格式，第二個參數為第一個參數賦予數據。如果指定數據格式不存在，則將其添加到數據存儲的末尾；如果指定數據格式存在，則將數據替換在指定數據格式的位置。
clearData(format)：刪除指定格式的數據，接收的參數為指定要刪除的數據格式，如果指定格式不存在，則此方法不執行任何操作；如果此參數為空字符串或未提供，則將刪除所有格式的數據。

而 clipboardData 對象在 IE 中使用 window 獲取，在 Firefox、Safari 和 Chrome 中使用 event 獲取。為防止未經授權訪問剪貼板，只能在剪貼板事件期間訪問 clipboardData 對象；IE 會在任何時候都暴露 clipboardData 對象。因此，要兼容兩者，最好在剪貼板事件期間使用該對象。

function getClipboardText(event){
    var clipboardData = (event.clipboardData || window.clipboardData);
    return clipboardData.getData("text");
}
function setClipboardText (event, value){
    if (event.clipboardData){
        return event.clipboardData.setData("text/plain", value);
    } else if (window.clipboardData){
        return window.clipboardData.setData("text", value);
    }
}

如果文本框只有數字，那剪貼時，就需要使用paste事件檢查剪貼板上的文本是否無效。如果無效，可以取消默認行為：

input.addEventListener("paste", (event) => {
    let text = getClipboardText(event);
    if (!/^\d*$/.test(text)){
        event.preventDefault();
    }
});

注意：Firefox、Safari和Chrome只允許在onpaste事件中訪問getData()方法。

自動切換

在 JavaScript 中，可以用在當前字段完成時自動切換到下一個字段的方式來增強表單字段的易用性。比如，常用手機號分為國家好加手機號。因此，我們設置 2 個文本框：

<form>
    <input type="text" name="phone1" id="phone-id-1" maxlength="4">
    <input type="text" name="phone2" id="phone-id-2" maxlength="11">
</form>

當文本框輸入到最大允許字符數后，就把焦點移到下一個文本框，這樣可以增加表單的易用性并加速數據輸入。如下所示：

<script>
    function tabForward(event){
        let target = event.target;
        if (target.value.length == target.maxLength){
            let form = target.form;
            for (let i = 0, len = form.elements.length; i < len; i++) {
                if (form.elements[i] == target) {
                    if (form.elements[i+1]) {
                        form.elements[i+1].focus();
                    }
                    return;
                }
            }
        }
    }
    let inputIds = ["phone-id-1", "phone-id-2"];
    for (let id of inputIds) {
        let textbox = document.getElementById(id);
        textbox.addEventListener("keyup", tabForward);
    }
</script>

這里，tabForward() 函數通過比較用戶輸入文本的長度與 maxLength 屬性的值來檢測輸入是否達到了最大長度。如果兩者相等，就通過循環表中的元素集合找到當前文本框，并把焦點設置到下一個元素。

注意：上面的代碼只適用于之前既定的標記，沒有考慮可能存在的隱藏字段。

HTML5

HTML5 新增了一些表單提交前，瀏覽器會基于指定的規則進行驗證，并在出錯時顯示適當的錯誤信息。而驗證會基于某些條件應用到表單字段中。

必填字段

表單字段中添加 required 屬性，用于標注該字段是必填項，不填則無法提交。該屬性適用于<input>、<textarea>和<select>。如下所示：

<input type="text" name="account" required>

也可以通過 JavaScript 檢測對應元素的 required 屬性來判斷表單字段是否為必填項：

let isRequired = document.forms[0].elements["account"].required;

也可以檢測瀏覽器是否支持 required 屬性：

let isRequiredSupported = "required" in document.createElement("input");

注意：不同瀏覽器處理必填字段的機制不同。Firefox、Chrome、IE 和Opera 會阻止表單提交并在相應字段下面顯示有幫助信息的彈框，而Safari 什么也不做，也不會阻止提交表單。

數值范圍

而上面介紹的幾個如 number/range/datetime/datetime-local/date/month/week/time 幾個填寫數字的類型，都可以指定 min/max/step 等幾個與數值有關的屬性。step 屬性用于規定合法數字間隔，如 step="2"，則合法數字應該為 0、2、4、6，依次類推。如下所示：

<input type="number" min="0" max="100" step="5" name="count">

上面的例子是<input>中只能輸入從 0 到 100 中 5 的倍數。

也可以使用 stepUp() 和 stepDown() 方法對 <input> 元素中的值進行加減，它倆會接收一個可選參數，用于表示加減的數值。如下所示：

input.stepUp(); // 加1
input.stepUp(5); // 加5
input.stepDown(); // 減1
input.stepDown(10); // 減10

輸入模式

HTML5 還為文本添加了 pattern 屬性，用于指定一個正則表達式。這樣就可以自己設置 <input> 元素的輸入模式了。如下所示：

<input type="text" pattern="\d+" name="count">

注意模式的開頭和末尾分別假設有^和$。這意味著輸入內容必須從頭到尾都嚴格與模式匹配。

與新增的輸入類型一樣，指定 pattern 屬性也不會阻止用戶輸入無效內容。模式會應用到值，然后瀏覽器會知道值是否有效。通過訪問 pattern 屬性可以讀取模式：

let pattern = document.forms[0].elements["count"].pattern;

使用如下代碼可以檢測瀏覽器是否支持pattern 屬性：

let isPatternSupported = "pattern" in document.createElement("input");

檢測有效性

HTML5 新增了 checkValidity() 方法，用來檢測表單中任意給定字段是否有效。而判斷的條件是約束條件，因此必填字段如果沒有值會被視為無效，字段值不匹配 pattern 屬性也會被視為無效。如下所示：

if (document.forms[0].elements[0].checkValidity()){
    // 字段有效，繼續
} else {
    // 字段無效
}

要檢查整個表單是否有效，可以直接在表單上調用checkValidity()方法。這個方法會在所有字段都有效時返回true，有一個字段無效就會返回false：

if(document.forms[0].checkValidity()){
    // 表單有效，繼續
} else {
    // 表單無效
}

validity 屬性會返回一個ValidityState 對象，表示 <input> 元素的校驗狀態。返回的對象包含一些列的布爾值的屬性：

customError：如果設置了 setCustomValidity() 就返回 true，否則返回false。
patternMismatch：如果字段值不匹配指定的 pattern 屬性則返回true。
rangeOverflow：如果字段值大于 max 的值則返回true。
rangeUnderflow：如果字段值小于 min 的值則返回true。
stepMisMatch：如果字段值與 min、max 和 step 的值不相符則返回true。
tooLong：如果字段值的長度超過了 maxlength 屬性指定的值則返回true。
typeMismatch：如果字段值不是 "email" 或"url" 要求的格式則返回true。
valid：如果其他所有屬性的值都為false 則返回true。與checkValidity()的條件一致。
valueMissing：如果字段是必填的但沒有值則返回true。

因此，通過 validity 屬性可以檢查表單字段的有效性，從而獲取更具體的信息，如下所示：

if (input.validity && !input.validity.valid){
    if (input.validity.valueMissing){
        console.log("請指定值.")
    } else if (input.validity.typeMismatch){
        console.log("請指定電子郵件地址.");
    } else {
        console.log("值無效.");
    }
}

禁用驗證

通過指定 novalidate 屬性可以禁止對表單進行任何驗證：

<form method="post" action="/signup" novalidate>
    <!-- 表單元素 -->
</form>

也可以在 JavaScript 通過 noValidate 屬性設置，為 true 表示屬性存在，為 false 表示屬性不存在：

document.forms[0].noValidate = true; // 關閉驗證

如果一個表單中有多個提交按鈕，那么可以給特定的提交按鈕添加formnovalidate 屬性，指定通過該按鈕無需驗證即可提交表單：

<form method="post" action="/foo">
    <!-- 表單元素 -->
    <input type="submit" value="注冊提交">
    <input type="submit" formnovalidate name="btnNoValidate"
value="沒有驗證的提交按鈕">
</form>

也可以使用 JavaScript 設置 formNoValidate 屬性：

// 關閉驗證
document.forms[0].elements["btnNoValidate"].formNoValidate = true;

總結

以上總結了 <input> 和 <textarea> 兩個元素的一些功能，主要是 <input> 元素可以通過設置 type 屬性獲取不同類型的輸入框，可以通過監聽鍵盤事件并檢測要插入的字符來控制文本框的內容。

還有一些與剪貼板相關的事件，并對剪貼的內容進行檢測。還介紹了一些 HTML5 新增的屬性和方法和新增的更多的 <input> 元素的類型，和一些與驗證相關的屬性和方法。

用 rich text editor

您可以使用 Shopify的格式文本編輯器來對您在線商店上顯示的文本進行格式和樣式設置。

提示:

在使用格式文本編輯器時，按 enter 或 return 可以創建新的段落。若要插入換行符而不強制產生新段落，請按住 shift，然后按 enter 或 return。

（1）iPhone、Android

使用格式文本編輯器的位置

您當前可以使用 Shopify 應用中的格式文本編輯器來添加產品描述。如果您要在頁面、博客或產品系列中添加文本，則需要在 Web 瀏覽器中通過 Shopify 后臺執行此操作。

使用格式文本編輯器設置文本格式

您可以使用格式文本編輯器以多種方式設置文本格式：

1、粗體文本

若要將文本加粗，請突出顯示該文本然后點擊粗體按鈕：

2、斜體文本

若要將文本設置為斜體，請突出顯示此文本，然后點擊斜體按鈕：

3、為文本添加下劃線

若要為文本添加下劃線，請突出顯示文本，然后點擊下劃線按鈕：

4、對齊文本

步驟：

在文本編輯器中，突出顯示您要對齊的文本。

點擊對齊按鈕：

點擊某個對齊選項以選擇左對齊、居中對齊或右對齊。

提示:您可以在文本編輯器中為每一行選擇不同的對齊方式選項。

4、創建列表

可以使用文本編輯器為文本添加項目符號列表和編號列表。

步驟：

在文本編輯器中，點擊列表按鈕以顯示兩個列表選項：

點擊項目符號列表或編號列表選項，選擇您要添加的列表類型。

輸入您的列表項。在每個項目之后，點擊返回以移動到下一行并輸入其他項目。

完成輸入列表后，請雙擊返回。

使用格式文本編輯器插入鏈接

可以使用文本編輯器向文本添加鏈接：

在文本編輯器中，選擇要創建鏈接的字詞。

點擊鏈接按鈕：

在插入鏈接屏幕中，輸入鏈接的 URL。

輸入鏈接標題，此標題用于實現可訪問性和 SEO。

默認情況下，鏈接的目標內容將在同一窗口中打開。若要將鏈接設置為在其他窗口中打開，請啟用 Open link in a new window（在新窗口打開鏈接）選項。

點擊保存。

創建內部和外部鏈接：

指向您 Shopify 商店中的頁面的鏈接稱為內部鏈接。您可以使用短 URL 來創建內部鏈接。例如，URL /collections 將指向您商店的產品系列頁面。

若要鏈接到您在線商店的特定頁面（例如產品系列或產品頁面），請使用 URL 格式 /page-type/page-handle。例如，若要鏈接到您創建的名為“Summer Collection”的產品系列，請使用 URL /collections/summer-collection。

備注：要查看產品、產品系列、頁面或博客的 handle，您可以在 Shopify 后臺訪問它們的主頁，找到搜索引擎優化部分，并單擊編輯網站 SEO。

指向您 Shopify 商店以外的網站的鏈接稱為外部鏈接。外部鏈接必須以 http:// 開頭。

（2）桌面

使用格式文本編輯器的位置

您可以使用格式文本編輯器來添加或編輯您商店上多個位置中的文本：

——產品描述

——產品系列描述

——博客文章

——頁面

——商店政策

使用格式文本編輯器添加 HTML

可以使用格式文本編輯器為您的博客文章、頁面、產品描述和產品系列描述輸入 HTML 內容。

單擊顯示 HTML 按鈕在格式文本編輯器中查看內容的 HTML 代碼：

在 HTML 視圖中，您可以在格式文本編輯器中對內容進行許多更改。您可以使用 HTML 添加圖片、視頻或表格，還可以調試或微調布局和內容樣式。

嵌入媒體小組件：如果您要嵌入視頻或音樂小組件，那么您首先需要將小組件托管在 YouTube、Vimeo 或 SoundCloud 等服務上。這些服務會生成嵌入代碼，您可將該代碼復制并粘貼到 Shopify 后臺的格式文本編輯器中。

步驟：

找到您想嵌入的媒體的嵌入代碼：

單擊嵌入代碼并按 ctrl + A (PC) 或 command + A (Mac) 來選擇整個嵌入代碼。

通過按 ctrl + C (PC) 或 command + C (Mac) 以復制嵌入代碼。

在 Shopify 后臺中，單擊格式文本編輯器上的顯示 HTML 按鈕以查看您正在編輯的內容。

通過按 ctrl + V (PC) 或 command + V (Mac) 粘貼嵌入代碼。

在您正在編輯的頁面上單擊保存以保存更改。

使用格式文本編輯器設置文本格式

通過格式設置按鈕，您可以快速創建段落、標題或塊引用。使用正確的格式設置和標題級別有助于他人和搜索引擎閱讀您的網站內容。

若要為文本選擇格式，請突出顯示此文本，然后單擊格式設置按鈕：

格式設置選項：

1.段落

您網站的大部分文本內容都是段落文本。段落文本的字體大小通常為 10–12 pt，但某些模版使用的是不同的字體大小。

2.標題 (1-6)

標題用于構造內容。有 6 個標題級別。標題 1 是最重要的級別，標題 6 是最不重要的級別。

3.塊引用

塊引用用于顯示屬于其他人的文本，例如書籍或網站中的引用語或摘錄。

粗體文本：

若要將文本設置為粗體，請突出顯示文本并單擊粗體按鈕：

斜體文本：

若要將文本設置為斜體，請突出顯示文本并單擊斜體按鈕：

創建項目符號列表：

若要創建項目符號列表，請單擊項目符號列表按鈕：

可以鍵入以下內容以創建項目符號列表項：

若要創建新的列表項，請按 enter 或 return 鍵。若要結束使用列表，請按 enter 或 return 鍵兩次。

創建編號列表：

若要創建編號列表，請單擊編號列表按鈕：

可通過鍵入創建編號列表項：

若要創建新的列表項，請按 enter 或 return 鍵。若要結束使用列表，請按 enter 或 return 鍵兩次。

縮進文本：

若要縮進段落，請單擊縮進按鈕：

縮進段落會在段落左側產生邊距

取消縮進文本：

若要取消縮進或“向左縮進”段落，請單擊向左縮進按鈕：

取消縮進段落會刪除它任何已縮進的邊距。

對齊文本：

若要對齊文本，請選擇文本，單擊對齊方式按鈕，然后選擇左對齊、居中對齊或右對齊：

使用格式文本編輯器更改文本顏色

在格式文本編輯器中清除格式

若要從文本或圖片中刪除格式設置，請突出顯示內容，然后單擊清除格式按鈕：

使用格式文本編輯器插入表格

可以使用格式文本編輯器在您的博客文章、頁面、產品描述和產品系列描述中插入表格。創建表格之后，您可以將文本、圖片，甚至是視頻放入表格中。

步驟：

在格式文本編輯器中，單擊插入表格按鈕：

單擊插入表格以插入表格：

這將創建包含一行和一列的表格。

創建表格后，再次單擊插入表格按鈕以修改表格的行和列：

在上方插入行：將光標放在一行中，然后單擊此按鈕在上方插入一個新行。

在下方插入行：將光標放在行中，然后單擊此按鈕在下方插入一個新行。

在之前插入列：將光標放在列中，然后單擊此按鈕在此列之前插入一個新列。

在之后插入列：將光標放在一列中，然后單擊此按鈕在該列之后插入一個新列。

刪除行：將光標放在要刪除的行中，然后單擊此按鈕。

刪除列：將光標放在要刪除的列中，然后單擊此按鈕。

刪除表格：將光標置于表格中的任意位置，然后單擊此按鈕以刪除整個表格。

使用格式文本編輯器插入鏈接

您可以使用格式文本編輯器在博客文章、頁面、產品描述和產品系列描述中插入鏈接（超鏈接）。您可以添加將客戶引導至您 Shopify 在線商店中的頁面以及其他網站的鏈接。還可以添加打開電子郵件或撥打電話的鏈接以幫助客戶與您聯系。

步驟：

突出顯示您要轉變為鏈接的文本或圖片。

單擊插入鏈接。

在鏈接到字段中輸入此鏈接的目標 URL：

- 若要鏈接到 Shopify 商店之外的外部網站，請輸入 http:// 以及相關網址，例如 http://www.example.com。 - 若要鏈接到您的 Shopify 在線商店中的頁面，請輸入短 URL，例如 /collections/summer-collection。 - 若要創建用于打開電子郵件的鏈接，請在此電子郵件地址前輸入 mailto:，例如，mailto:example@example.com。 - 若要創建用于撥打電話的鏈接，請輸入 tel:，后跟電話號碼，例如 tel:+0-123-456-7890。

在鏈接標題框中輸入鏈接的簡短描述。

使用 Open this link in（在其中打開此鏈接）菜單選擇打開鏈接的方式：

- 同一窗口：此鏈接將在用戶當前的瀏覽器選項卡或窗口中打開。 - 新窗口：此鏈接將在新的瀏覽器選項卡或窗口中打開。

單擊插入鏈接將突出顯示的文本轉換為鏈接。

使用格式文本編輯器添加內部和外部鏈接

指向您 Shopify 商店中的頁面的鏈接稱為內部鏈接。您可以使用短 URL 來創建內部鏈接。例如，URL /collections 將指向您商店的產品系列頁面。

備注

要查看產品、產品系列、頁面或博客的 handle，您可以在 Shopify 后臺訪問它們的主頁，找到搜索引擎優化部分，并單擊編輯網站 SEO。

指向 Shopify 商店外部的網站的鏈接被稱為外部鏈接。需要輸入完整的外部鏈接，并且以 http:// 開頭。

鏈接到頁面內容中的文件

上傳文件后，您可以將此文件鏈接到格式文本編輯器中的內容，從而在產品或產品系列描述、網頁或博客文章中提供下載。

步驟：

（1）桌面

在 Shopify 后臺中，轉到設置 > 文件。

復制要鏈接的文件的 URL。

在 Shopify 后臺，單擊要在其中添加文件的產品、產品系列、網頁或博客文章。

在格式文本編輯器中，輸入或選擇鏈接文本。例如，您可以從鏈接文本添加指向 PDF 尺寸圖表的鏈接， Click here to download our sizing chart.

選擇鏈接文本。

單擊插入鏈接：

在鏈接到字段中，粘貼您要鏈接的文件的 URL。

備注:URL 需要以 http://cdn.shopify.com/ 開頭。如果看到 http://static.shopify.com，請將它替換為 http://cdn.shopify.com。

單擊插入鏈接。在格式文本編輯器中，鏈接的文本顯示為藍色，并帶有下劃線。

（2）iPhone、Android

在 Shopify 應用中，轉到商店 > 設置。

在 Store settings（商店設置）下，點擊文件。

復制要鏈接的文件的 URL。

在 Shopify 后臺，單擊要在其中添加文件的產品、產品系列、網頁或博客文章。

在格式文本編輯器中，輸入或選擇鏈接文本。例如，您可以從鏈接文本添加指向 PDF 尺寸圖表的鏈接， Tap here to download our sizing chart.

選擇鏈接文本。

單擊插入鏈接：

在鏈接到字段中，粘貼您要鏈接的文件的 URL。

備注:URL 需要以 http://cdn.shopify.com/ 開頭。如果看到 http://static.shopify.com，請將它替換為 http://cdn.shopify.com。

單擊插入鏈接。在格式文本編輯器中，鏈接的文本顯示為藍色，并帶有下劃線。

使用格式文本編輯器插入圖片

使用格式文本編輯器插入圖片的方法分為三種。您可以：

——上傳圖片

——從您的產品圖片中進行選擇

——使用公共圖片 URL。

備注：雖然每個產品最多只能有 250 張相關圖片（包括此產品的所有多屬性），但您可以在商店的其他部分使用的圖片數量沒有限制。

在格式文本編輯器中移動圖片并調整大小

在將圖片添加到產品描述、產品系列描述、網頁或博客后，您可以將它移動到內容中的其他位置。

步驟：

在 Shopify 后臺中，單擊包含要移動或要對大小進行調整的圖片的產品、產品系列、網頁或博客文章。

在格式文本編輯器中，單擊圖片。

進行更改：

- 若要移動圖片，請單擊圖片并將其拖動到內容區域中的其他位置。 - 若要調整圖片大小，請單擊并拖動圖片的一角。

單擊保存。

在格式文本編輯器中編輯圖片

您可以在格式文本編輯器中更改圖片的大小、文本環繞方式以及對齊方式。您還可以編輯圖片 URL，或者添加或編輯圖片替代文本。

步驟：

在格式文本編輯器中雙擊圖片，打開編輯圖片對話框。

使用大小和對齊方式選項來編輯圖片：

- 若要更改圖片的大小，請選擇一個尺寸選項。 - 若要更改圖請，請使用新的圖片 URL。 - 若要改善您在線商店的 SEO 和可訪問性，請添加或編輯圖片替代文字。 - 若要添加間距，請輸入每側所需留出的間距像素數。 - 若要更改圖片的對齊方式，請從代表左對齊、居中對齊或右對齊的圖標中進行選擇。 - 若要添加文字環繞方式，請選中 Wrap text around image（文字環繞圖片）。

單擊編輯圖片以保存更改。

使用格式文本編輯器插入視頻

您可以使用格式文本編輯器在博客文章、頁面、產品描述和產品系列描述中插入或嵌入視頻。

如果您想嵌入已創建的視頻，需要先將視頻上傳到視頻流網站，例如 YouTube 或 Vimeo。

YouTube 不允許禁用相關視頻，但您可以指定相關視頻應與剛才播放的視頻來自同一頻道。

步驟：

復制視頻 URL（在 PC 上按 ctrl + C，在 Mac 上按 command + C）。

提示:如果您的模版是 Brooklyn、Classic、Pop 或 Supply，那么您可以從 Youtube 或 Vimeo 復制視頻的嵌入代碼，然后跳到步驟 7。您的模版會自動使嵌入視頻做出響應。

訪問 Embed Responsively。Embed Responsively 工具可為您提供視頻的改進嵌入代碼。

備注：當您豎屏觀看使用 Embed Responsively 代碼嵌入的視頻時，某些 iPhone 機型上可能出現播放問題。

在 Embed Responsively 上，單擊以選擇視頻所在的視頻網站。

將您復制的視頻 URL 粘貼至 Embed Responsively 上的 Page URL（頁面 URL）框中（在 PC 上按 ctrl + V，在 Mac 上按 command + V）。

單擊嵌入。Embed Responsively 將為您創建嵌入代碼。

如果視頻來自 YouTube 并且您只想顯示來自同一 YouTube 頻道中的相關視頻，請在嵌入代碼中找到視頻的 URL。將 ?rel=0 復制并粘貼到引號內的末尾：

復制嵌入代碼框內的所有代碼。

在 Shopify 后臺中，單擊格式文本編輯器中的插入視頻按鈕：

將嵌入代碼粘貼到插入視頻對話框中的框內。

單擊插入視頻。

完成后單擊保存將更改保存到正在編輯的項目。

提示:您可以直接從 YouTube 中生成嵌入代碼，但嵌入的視頻不會對不同的屏幕大小做出響應。

使用格式文本編輯器插入音頻文件

您可以使用格式文本編輯器在博客文章、頁面、產品描述和產品系列描述中插入或嵌入音頻文件。

步驟：

在 Shopify 后臺，單擊設置，然后單擊文件。

單擊上傳文件，上傳要在商店中插入或嵌入的音頻文件。

從在線商店部分中，為想包含該音頻文件的頁面或博客文章打開格式文本編輯器。

復制

復制以下代碼：

在格式文本編輯器中，將此代碼粘貼至音頻播放器代碼之后，然后將 https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3 替換為您將音頻文件上傳至 Shopify 時為該音頻文件創建的 URL。您隨時都可在文件頁面上找到音頻文件的 URL。

單擊保存。

單擊查看以確保您的音頻文件可正常播放。

提示:您可以直接從 Soundcloud 嵌入音頻文件的代碼，但 Soundcloud 的音頻播放器可能無法在所有設備上都能正常工作。有關詳細信息，請訪問 Soundcloud 的幫助中心。

在格式文本編輯器中添加或刪除內部注釋

您可以對不想發布到商店的內部文本使用注釋標記。

步驟：

在格式文本編輯器中，單擊顯示 HTML 按鈕。

若要添加內部注釋，請將要隱藏的文本括在之中。例如：。

單擊保存。

包含在注釋標記中的 HTML 標記將另存為內部文本。為了使這些 HTML 標記正常工作，您需要刪除其兩邊的注釋標記。

（來源：Shopify）

以上內容屬作者個人觀點，不代表雨果網立場！如有侵權，請聯系我們。

相關鏈接：Shopify使用CSV文件文件的一些常規指導

在線咨詢

上一篇：云計算核心技術Docker教程：Docker數據卷的使用
下一篇：小白如何快速入門JavaScript？6分鐘帶你看懂快速學習的六大步驟

您的項目需求

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

類型	描述
number	數字值的輸入
date	日期輸入
color	顏色輸入
range	一定范圍內的值的輸入
month	允許用戶選擇月份和年份
week	允許用戶選擇周和年份
time	允許用戶選擇時間（無時區）
datetime	允許用戶選擇日期和時間（有時區）
datetime-local	允許用戶選擇日期和時間（無時區）
email	電子郵件地址的輸入
search	搜索（表現類似常規文本）
tel	電話號碼的輸入
url	URL地址的輸入

整合營銷服務商

HTML網頁編程之按鈕詳解

選擇文本

select 事件

取得選中的文本

選中部分文本

輸入過濾

屏蔽字符

處理剪貼板

自動切換

HTML5

必填字段

更多輸入類型

數值范圍

輸入模式

檢測有效性

禁用驗證

總結

您的項目需求