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

HTML中使用的 <input> 元素在 JavaScript 中對(duì)應(yīng)的是 HTMLInputElement 類(lèi)型。HTMLInputElement 繼承自 HTMLElement 接口：

interface HTMLInputElement extends HTMLElement {
    ...
}

HTMLInputElement 類(lèi)型有一些獨(dú)有的屬性和方法：

• name：表示 <input> 元素的名稱(chēng)。
• disabled：表示 <input> 元素是否禁止使用。在表單提交時(shí)不會(huì)包含被禁止的 <input> 元素。
• autofocus：表示頁(yè)面加載時(shí)，該元素是否會(huì)自動(dòng)獲得焦點(diǎn)。
• required：表示表單提交時(shí)，該 <input>元素是否為必填。
• value：表示該 <input> 元素的值。
• validity：返回一個(gè) ValidityState 對(duì)象，表示 <input> 元素的校驗(yàn)狀態(tài)。是只讀屬性。
• validationMessage：表示 <input> 元素校驗(yàn)失敗時(shí)，用戶(hù)看到的報(bào)錯(cuò)信息。如果該元素不需要校驗(yàn)，或者通過(guò)校驗(yàn)，該屬性為空字符串。是只讀屬性。
• willValidate：表示表單提交時(shí)，<input> 元素是否會(huì)被校驗(yàn)。是只讀屬性。
• select()：選中 <input> 元素內(nèi)部的所有文本。
• click()：模擬鼠標(biāo)點(diǎn)擊當(dāng)前的 <input> 元素。

而在上述介紹 HTMLInputElement 類(lèi)型中的屬性時(shí)，type 屬性要特別關(guān)注一下，因?yàn)楦鶕?jù) type 屬性的改變，可以改變<input>的屬性。

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

當(dāng) type 的值為text/password/number/時(shí)，會(huì)有以下屬性對(duì) <input> 元素有效。

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

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

HTML 使用的 <textarea> 元素在 JavaScript 中對(duì)應(yīng)的是 HTMLTextAreaElement 類(lèi)型。HTMLTextAreaElement類(lèi)型繼承自 HTMLElement 接口：

interface HTMLTextAreaElement extends HTMLElement {
    ...
}

HTMLTextAreaElement 類(lèi)型有一些獨(dú)有的屬性和方法：

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

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

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

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

選擇文本

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

select(): void

下面看一個(gè)示例：

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

也可以在文本框獲得焦點(diǎn)時(shí)，選中文本框的內(nèi)容：

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

select 事件

當(dāng)選中文本框中的文本或使用 select() 方法時(shí)，會(huì)觸發(fā) select 事件。

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

取得選中的文本

HTML5 對(duì) select 事件進(jìn)行了擴(kuò)展，通過(guò) selectionStart 和 selectionEnd 屬性獲取文本選區(qū)的起點(diǎn)偏移量和終點(diǎn)偏移量。如下所示：

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

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

選中部分文本

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

setSelectionRange(start, end, direction): void;

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

下面看一個(gè)例子：

<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>

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

輸入過(guò)濾

不同文本框經(jīng)常需要保證輸入特定類(lèi)型或格式的數(shù)據(jù)，或許數(shù)據(jù)需要包含特定字符或必須匹配某個(gè)特定模式。而文本框并未提供驗(yàn)證功能，因此要配合 JavaScript 腳本實(shí)現(xiàn)輸入過(guò)濾功能。

屏蔽字符

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

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

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

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

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

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

最后這個(gè)改動(dòng)可以確保所有默認(rèn)的文本框行為不受影響。這個(gè)技術(shù)可以用來(lái)自定義是否允許在文本框中輸入某些字符。

處理剪貼板

IE 是第一個(gè)實(shí)現(xiàn)了剪切板相關(guān)的事件以及通過(guò)JavaScript訪(fǎng)問(wèn)剪切板數(shù)據(jù)的瀏覽器，其它瀏覽器在后來(lái)也都支持了相同的事件和剪切板的訪(fǎng)問(wèn)，后來(lái) HTML5 將其納入了規(guī)范。以下是與剪切板相關(guān)的 6 個(gè)事件：

• beforecopy：發(fā)生復(fù)制操作前觸發(fā)。
• copy：發(fā)生復(fù)制操作時(shí)觸發(fā)。
• beforecut：發(fā)生剪切操作前觸發(fā)。
• cut：發(fā)生剪切操作時(shí)觸發(fā)。
• beforepaste：發(fā)生粘貼操作前觸發(fā)。
• paste：發(fā)生粘貼操作時(shí)觸發(fā)。

剪切板事件的行為及相關(guān)對(duì)象會(huì)因?yàn)g覽器而異。在 Safari、Chrome 和 Firefox 中，beforecopy、beforecut 和 beforepaste 事件只會(huì)在顯示文本框的上下文菜單時(shí)觸發(fā)，但 IE 不僅在這種情況下觸發(fā)，也會(huì)在 copy、cut 和 paste 事件在所有瀏覽器中都會(huì)按預(yù)期觸發(fā)。

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

剪貼板的數(shù)據(jù)通過(guò) clipboardData 對(duì)象來(lái)獲取，且clipboardData 對(duì)象提供 3 個(gè)操作數(shù)據(jù)的方法：

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

而 clipboardData 對(duì)象在 IE 中使用 window 獲取，在 Firefox、Safari 和 Chrome 中使用 event 獲取。為防止未經(jīng)授權(quán)訪(fǎng)問(wèn)剪貼板，只能在剪貼板事件期間訪(fǎng)問(wèn) clipboardData 對(duì)象；IE 會(huì)在任何時(shí)候都暴露 clipboardData 對(duì)象。因此，要兼容兩者，最好在剪貼板事件期間使用該對(duì)象。

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);
    }
}

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

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

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

自動(dòng)切換

在 JavaScript 中，可以用在當(dāng)前字段完成時(shí)自動(dòng)切換到下一個(gè)字段的方式來(lái)增強(qiáng)表單字段的易用性。比如，常用手機(jī)號(hào)分為國(guó)家好加手機(jī)號(hào)。因此，我們?cè)O(shè)置 2 個(gè)文本框：

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

當(dāng)文本框輸入到最大允許字符數(shù)后，就把焦點(diǎn)移到下一個(gè)文本框，這樣可以增加表單的易用性并加速數(shù)據(jù)輸入。如下所示：

<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() 函數(shù)通過(guò)比較用戶(hù)輸入文本的長(zhǎng)度與 maxLength 屬性的值來(lái)檢測(cè)輸入是否達(dá)到了最大長(zhǎng)度。如果兩者相等，就通過(guò)循環(huán)表中的元素集合找到當(dāng)前文本框，并把焦點(diǎn)設(shè)置到下一個(gè)元素。

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

HTML5

HTML5 新增了一些表單提交前，瀏覽器會(huì)基于指定的規(guī)則進(jìn)行驗(yàn)證，并在出錯(cuò)時(shí)顯示適當(dāng)?shù)腻e(cuò)誤信息。而驗(yàn)證會(huì)基于某些條件應(yīng)用到表單字段中。

必填字段

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

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

也可以通過(guò) JavaScript 檢測(cè)對(duì)應(yīng)元素的 required 屬性來(lái)判斷表單字段是否為必填項(xiàng)：

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

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

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

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

更多輸入類(lèi)型

HTML5 為 <input> 元素增加了幾個(gè)新的 type 值。如下所示：

這些輸入表名字段應(yīng)該輸入的數(shù)據(jù)類(lèi)型，并且提供了默認(rèn)驗(yàn)證。如下所示：

<input type="email" name="email">
<input type="url" name="homepage">

要檢測(cè)瀏覽器是否支持新類(lèi)型，可以在 JavaScript 中創(chuàng)建 <input> 并設(shè)置 type 屬性，之后讀取它即可。老版本中會(huì)將我只類(lèi)型設(shè)置為 text，而支持的會(huì)返回正確的值。如下所示：

let input = document.createElement("input");
input.type = "email";
let isEmailSupported = (input.type == "email");

數(shù)值范圍

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

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

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

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

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

輸入模式

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

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

注意模式的開(kāi)頭和末尾分別假設(shè)有^和$。這意味著輸入內(nèi)容必須從頭到尾都嚴(yán)格與模式匹配。

與新增的輸入類(lèi)型一樣，指定 pattern 屬性也不會(huì)阻止用戶(hù)輸入無(wú)效內(nèi)容。模式會(huì)應(yīng)用到值，然后瀏覽器會(huì)知道值是否有效。通過(guò)訪(fǎng)問(wèn) pattern 屬性可以讀取模式：

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

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

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

檢測(cè)有效性

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

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

要檢查整個(gè)表單是否有效，可以直接在表單上調(diào)用checkValidity()方法。這個(gè)方法會(huì)在所有字段都有效時(shí)返回true，有一個(gè)字段無(wú)效就會(huì)返回false：

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

validity 屬性會(huì)返回一個(gè)ValidityState 對(duì)象，表示 <input> 元素的校驗(yàn)狀態(tài)。返回的對(duì)象包含一些列的布爾值的屬性：

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

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

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

禁用驗(yàn)證

通過(guò)指定 novalidate 屬性可以禁止對(duì)表單進(jìn)行任何驗(yàn)證：

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

也可以在 JavaScript 通過(guò) noValidate 屬性設(shè)置，為 true 表示屬性存在，為 false 表示屬性不存在：

document.forms[0].noValidate = true; // 關(guān)閉驗(yàn)證

如果一個(gè)表單中有多個(gè)提交按鈕，那么可以給特定的提交按鈕添加formnovalidate 屬性，指定通過(guò)該按鈕無(wú)需驗(yàn)證即可提交表單：

<form method="post" action="/foo">
    <!-- 表單元素 -->
    <input type="submit" value="注冊(cè)提交">
    <input type="submit" formnovalidate name="btnNoValidate"
value="沒(méi)有驗(yàn)證的提交按鈕">
</form>

也可以使用 JavaScript 設(shè)置 formNoValidate 屬性：

// 關(guān)閉驗(yàn)證
document.forms[0].elements["btnNoValidate"].formNoValidate = true;

總結(jié)

以上總結(jié)了 <input> 和 <textarea> 兩個(gè)元素的一些功能，主要是 <input> 元素可以通過(guò)設(shè)置 type 屬性獲取不同類(lèi)型的輸入框，可以通過(guò)監(jiān)聽(tīng)鍵盤(pán)事件并檢測(cè)要插入的字符來(lái)控制文本框的內(nèi)容。

還有一些與剪貼板相關(guān)的事件，并對(duì)剪貼的內(nèi)容進(jìn)行檢測(cè)。還介紹了一些 HTML5 新增的屬性和方法和新增的更多的 <input> 元素的類(lèi)型，和一些與驗(yàn)證相關(guān)的屬性和方法。

、系統(tǒng)結(jié)構(gòu)：

① B/S架構(gòu)：Browser/Server（瀏覽器/服務(wù)器的交互形式。）

• Browser支持的語(yǔ)言：HTML、CSS、JavaScript；S是服務(wù)器端Server支持的語(yǔ)言有：C、C++、Java等
• B/S架構(gòu)系統(tǒng)有什么優(yōu)點(diǎn)和缺點(diǎn)？ 優(yōu)點(diǎn)：升級(jí)方便，只升級(jí)服務(wù)器代碼即可，維護(hù)成本低。缺點(diǎn)：速度慢、體驗(yàn)不好、界面不炫酷
• 企業(yè)大部分使用B/S架構(gòu)
• B/S架構(gòu)的系統(tǒng)代表有：京東、百度、天貓等

② C/S架構(gòu)：Client/Server（客戶(hù)端/服務(wù)器的交互形式。）

• C/S架構(gòu)的優(yōu)點(diǎn)和缺點(diǎn)？
• 優(yōu)點(diǎn)：速度快、體驗(yàn)好、界面炫酷（娛樂(lè)性多數(shù)是C/S架構(gòu)）
• 缺點(diǎn)：升級(jí)麻煩、維護(hù)成本較高。
• C/S架構(gòu)的系統(tǒng)代表有：QQ、微信、支付寶等

2、 HTML概述

① 什么是HTML？② 怎么開(kāi)發(fā)HTML？③ 怎么運(yùn)行HTML?

• ① HTML：Hyper Text Markup Language（超文本標(biāo)記語(yǔ)言）

?由大量的標(biāo)簽組成，每一個(gè)標(biāo)簽都有開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽。

?超文本：圖片、聲音、視頻等

• ② HTML開(kāi)發(fā)使用普通的文本編輯器就行，創(chuàng)建擴(kuò)展名是.html或.htm

?編輯器有：HBuilder、vscode等

③ 直接采用瀏覽器打開(kāi)HTML文件就能運(yùn)行

④ HTML是誰(shuí)制定的？

• ④ W3C：世界萬(wàn)維網(wǎng)聯(lián)盟

?W3C制定了HTML的規(guī)范：每個(gè)瀏覽器生產(chǎn)廠家都會(huì)遵守規(guī)范。HTML也會(huì)按照規(guī)范去寫(xiě)代碼

?HTML規(guī)范目前最高的版本是：HTML5.0，簡(jiǎn)稱(chēng)H5

?我們現(xiàn)在主要學(xué)的HTML4.0（基本用法）

• 為了方便中國(guó)Web前端程序員開(kāi)發(fā)，提供了大量幫助文檔。為開(kāi)發(fā)提供方便。

?w3school：先出現(xiàn)的，和W3C無(wú)關(guān)

?w3cschool：后出現(xiàn)的，和W3C無(wú)關(guān)

?W3C制定了很多規(guī)范：HTML/XML/http協(xié)議/https協(xié)議……

3、 第一個(gè)HTML

4、基本標(biāo)簽

• p：段落標(biāo)記
• h1~h6：標(biāo)題字，與word的標(biāo)題字相同
• br：換行標(biāo)記（獨(dú)目標(biāo)記）
• hr：橫線(xiàn)（獨(dú)目標(biāo)記）
• color：橫線(xiàn)顏色
• width：橫線(xiàn)寬度（可以px和%）
• pre：預(yù)留格式
• del：刪除字
• ins：插入字（有下劃線(xiàn)）
• b：粗體字
• i：斜體字
• sup：上標(biāo)
• sub：下標(biāo)
• font：字體標(biāo)簽
• color：字體顏色
• size：字體大小（1~7）

頁(yè)面效果圖：

5、實(shí)體符號(hào)：為了避免和標(biāo)簽沖突，所以需要使用實(shí)體符號(hào)

• <：<
• >：>
• 空格：
• 注：html中按多個(gè)空格鍵，在網(wǎng)頁(yè)中只顯示一個(gè)空格。

6、HTML表格

• table：表格
• tr：行
• td：列
• th：列（比td加粗居中）
• 合并行：rowspan（一個(gè)格占兩個(gè)位置）
• 注：row合并的時(shí)候，刪除下面的單元格
• 合并列：colspan（一個(gè)格占兩個(gè)位置）
• 注：col合并的時(shí)候，刪除哪個(gè)沒(méi)有要求

7、thead、tbody、tfoot標(biāo)簽

• thead、tbody、tfoot不是必須的，便于后期JS編寫(xiě)。

8、body的背景顏色和背景圖片

• bgcolor：背景色
• background：背景圖片
• 背景圖片在背景色的上面

9、img標(biāo)簽

• src：圖片的路徑
• 只設(shè)置width，height會(huì)等比例縮放
• 只設(shè)置height，不起作用
• title：鼠標(biāo)懸停時(shí)顯示的信息
• alt：設(shè)置圖片加載失敗時(shí)顯示的提示信息

10、 超鏈接或熱鏈接

• href：hot references 熱引用；
• 后面一定是一個(gè)資源的地址。
• 后面的路徑可以是絕對(duì)路徑也可以是相對(duì)路徑，可以是網(wǎng)絡(luò)某個(gè)資源的路徑。
• target：
• _blank：新窗口
• _self：當(dāng)前窗口（默認(rèn)）
• _top：頂級(jí)窗口
• _parent：父級(jí)窗口

超鏈接的作用：

通過(guò)超鏈接可以從瀏覽器向服務(wù)器發(fā)送請(qǐng)求。

11、request與response的概念

• request：瀏覽器向服務(wù)器發(fā)送數(shù)據(jù)（請(qǐng)求）
• B --》S
• response：服務(wù)器向?yàn)g覽器發(fā)送數(shù)據(jù)（響應(yīng)）
• S--》B

12、列表

• 有序列表：ol
• type：1、A、a、I、i
• 無(wú)序列表：ul
• type：circle（○）、square（□）、disc（●）

13、表單（重點(diǎn)）

• action：寫(xiě)提交的URL地址
• method：默認(rèn)get；還有post
• 表單有什么用？
• 答：收集用戶(hù)的信息。表單展現(xiàn)之后，用戶(hù)填寫(xiě)表單，點(diǎn)擊提交。 （submit）
• 怎么畫(huà)一個(gè)表單？
• 答：用form標(biāo)簽
• 一個(gè)網(wǎng)頁(yè)可以有多個(gè)表單form
• 表單最終是需要提交數(shù)據(jù)給服務(wù)器的，form標(biāo)簽有一個(gè)action屬性，這個(gè)屬性用來(lái)指定服務(wù)器地址。
• action屬性用來(lái)指定數(shù)據(jù)提交給哪個(gè)服務(wù)器
• action屬性和超鏈接中的href屬性一樣。都可以向服務(wù)器發(fā)送請(qǐng)求（request）
• http://192.168.111.3:8080/oa/save 這是請(qǐng)求路徑，
• 表單提交數(shù)據(jù)最終提交給192.168.111.3機(jī)器上的8080端口對(duì)應(yīng)的軟件。
• input中的type取值:
• radio：?jiǎn)芜x控件
• checkbox：多選控件
• submit：提交控件
• reset：重置控件
• button：普通控件
• text：文本控件
• password：密碼控
• file：文件控件
• 上傳文件專(zhuān)用
• hidden：隱藏域
• 網(wǎng)頁(yè)上看不到，但是表單提交的時(shí)候數(shù)據(jù)會(huì)自動(dòng)提交給服務(wù)器。
• input中的value屬性用來(lái)指定按鈕上顯示的文本信息。
• 超鏈接a與表單form的區(qū)別？
• 答：表達(dá)form可以收集信息，而超鏈接a無(wú)法收集信息。
• 表單提交里面的按鈕input中屬性必須定義name，不然提交不了。
• 表單是以什么格式提交數(shù)據(jù)給服務(wù)器的？
• 格式：action?name=value&name=value&name=value..
• HTTP協(xié)議規(guī)定的，必須以這種格式提交給服務(wù)器
• java中String split('&');
• 重點(diǎn)強(qiáng)調(diào)：表單項(xiàng)寫(xiě)了name屬性的，一律會(huì)提交給服務(wù)器。不想提交就不要寫(xiě)name屬性。
• 文本框和密碼框的value不需要程序員指定，用戶(hù)輸入什么value就是什么。
• 當(dāng)name沒(méi)有寫(xiě)的時(shí)候，該項(xiàng)不會(huì)提交給服務(wù)器
• 但是當(dāng)value沒(méi)有寫(xiě)的時(shí)候，value的默認(rèn)值是空字符串"",將空字符串提交給服務(wù)器。java代碼得到的是：String s = "";

效果圖：

地址欄提交的信息：

?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我沒(méi)有value屬性；&position=ln&myFile=&myHidden=

14、表單的說(shuō)明：

• ① 用戶(hù)手動(dòng)輸入的文本框，都不需要給value賦值
• ② textarea沒(méi)有value屬性
• ③ radio、checkbox默認(rèn)選項(xiàng)需要使用，checked="checked"（簡(jiǎn)寫(xiě)：checked）
• ④ select中的option屬性：? selected="selected" 為默認(rèn)選中 ?size：顯示條目數(shù)量
• multiple="multiple" 支持多選(select的屬性)
• ⑤ input的屬性
• readonly和disabled：
• 都是只讀不能修改
• 數(shù)據(jù)不會(huì)提交
• maxlength：設(shè)置文本框中輸入的字符數(shù)量。

15、HTML中的結(jié)點(diǎn)

• 在HTML文檔中，任何元素（結(jié)點(diǎn)）都有id屬性，id屬性是該節(jié)點(diǎn)的唯一標(biāo)識(shí)。所以在同一個(gè)HTML文檔中id值不能重復(fù)。
• 注意：表單提交數(shù)據(jù)的時(shí)候，只和name有關(guān)系，和id無(wú)關(guān)
• id有什么作用？
• javascript語(yǔ)言：可以對(duì)HTML文檔中的任何節(jié)點(diǎn)進(jìn)行增刪改操作。
• 獲取節(jié)點(diǎn)時(shí)，通常通過(guò)id來(lái)獲取節(jié)點(diǎn)
• HTML文檔是一棵樹(shù)，樹(shù)上有很多節(jié)點(diǎn)，每一個(gè)節(jié)點(diǎn)都有唯一的id（DOM樹(shù)）

16、div和span

• div和span有什么用？
• div和span都可以稱(chēng)為圖層。
• 有什么用？
• 圖層的作用為了保證頁(yè)面可以靈活的布局。
• div和span是可以定位的，只要定下div的左上角的x軸和y軸坐標(biāo)即可。
• div和span的區(qū)別？
• di獨(dú)占一行
• span不會(huì)獨(dú)占一行

現(xiàn)表單控件的只讀和禁用設(shè)置。

先來(lái)看一個(gè)案例，在填寫(xiě)"流調(diào)信息表"時(shí)，當(dāng)點(diǎn)擊輸入框控件，光標(biāo)會(huì)在輸入框里閃爍，等待我們輸入內(nèi)容。此時(shí)，稱(chēng)這個(gè)輸入框獲得了焦點(diǎn)。刷新一下頁(yè)面，再點(diǎn)擊一下這個(gè)輸入框控件左側(cè)的標(biāo)題文本，發(fā)現(xiàn)這個(gè)輸入框也獲得了焦點(diǎn)，用戶(hù)填寫(xiě)表單的體驗(yàn)明顯增強(qiáng)了。

使用 HTML 如何實(shí)現(xiàn)這一功能呢?

實(shí)現(xiàn)這一功能，只需要在表單中添加 label 標(biāo)簽就可以了。

label 是表單標(biāo)簽的意思，基本語(yǔ)法為：尖角號(hào) label，尖角號(hào)/label。label 標(biāo)簽對(duì)屏幕閱讀器用戶(hù)很有用，因?yàn)楫?dāng)用戶(hù)關(guān)注輸入元素時(shí)，屏幕閱讀器會(huì)大聲讀出標(biāo)簽。

label 還可以幫助我們點(diǎn)選難以點(diǎn)擊的 非常小的區(qū)域，比如單選按鈕或復(fù)選框，當(dāng)用戶(hù)點(diǎn)擊 label 元素內(nèi)的文本時(shí)，它可以切換單選按鈕或復(fù)選框。

我們來(lái)演示一下。

打開(kāi)編輯器，新建一個(gè) label.html 文件，自動(dòng)補(bǔ)全基礎(chǔ)代碼，在body標(biāo)簽內(nèi)部編寫(xiě)一個(gè) form 表單標(biāo)簽，在 form 標(biāo)簽里面添加文本請(qǐng)輸入用戶(hù)名： (冒號(hào)讀出來(lái)) ，緊接著添加一個(gè) input 標(biāo)簽，type 屬性的值為 text。用 lable 標(biāo)簽把 "請(qǐng)輸入用戶(hù)名" 包裹起來(lái)，保存。

在瀏覽器中打開(kāi)頁(yè)面，點(diǎn)擊文本，輸入框控件并沒(méi)有出現(xiàn)光標(biāo)，哪里出現(xiàn)了問(wèn)題？

原來(lái)，單純的使用 label 標(biāo)簽還不夠，需要為 label 標(biāo)簽添加 for 屬性，作用就是用來(lái)定義與 label 關(guān)聯(lián)的表單控件，它的值為表單控件的 id 屬性值。

這里需要注意，id 屬性值具有唯一性，一個(gè)頁(yè)面中不能出現(xiàn)兩個(gè)相同的 id 屬性值。

返回編輯器中，我們給 input 輸入框定義 id 屬性，值設(shè)置為 username，再為 label 添加 for 屬性，它的值要設(shè)置為輸入框 id 屬性的值： username。保存頁(yè)面。

返回瀏覽器，刷新，再次點(diǎn)擊文本，輸入框獲得了焦點(diǎn)，效果實(shí)現(xiàn)了。

繼續(xù)回到"流調(diào)信息表"案例，在手機(jī)號(hào)輸入框中，默認(rèn)已經(jīng)填入了手機(jī)號(hào)碼，現(xiàn)在我們?cè)噲D更改它，卻發(fā)現(xiàn)無(wú)法修改，這個(gè)控件是只讀的。

只讀輸入框控件雖然內(nèi)容不能被輸入和修改，卻可以復(fù)制控件里面原有的文本 (這里有操作，錄音時(shí)可以慢點(diǎn))。

在提交表單時(shí)，只讀控件的值可以被收集并發(fā)送給后端，這個(gè)特點(diǎn)我們將來(lái)再介紹。另外，textarea 多行輸入框控件也可以設(shè)置成只讀的。

如何實(shí)現(xiàn)這個(gè)效果呢？

其實(shí)很簡(jiǎn)單，給控件定義一個(gè) readonly 只讀屬性就可以實(shí)現(xiàn)了。

回到編輯器，我們改一下文件名，添加單詞 readonly。

繼續(xù)在原文檔里編寫(xiě)代碼。在輸入框后面添加一個(gè) br 標(biāo)簽，書(shū)寫(xiě)文本 "您的手機(jī)號(hào):" ，并在文本后面添加 input 標(biāo)簽，type 的取值設(shè)置 為text。

為了在瀏覽器中默認(rèn)顯示一個(gè)手機(jī)號(hào)碼，需要為它定義一個(gè) value 屬性，value 的含義是值的意思，作用是給輸入框一個(gè)默認(rèn)值，可以在瀏覽器中顯示給用戶(hù)。

最后再定義一個(gè) readonly 屬性。

回到瀏覽器，刷新。此時(shí)試圖修改手機(jī)號(hào)，是修改不了的。

再次回到"流調(diào)信息表"案例，在性別選擇時(shí)，性別保密單選控件是灰色的，使用鼠標(biāo)點(diǎn)擊不能選中它。

這種效果是如何實(shí)現(xiàn)的呢?

實(shí)現(xiàn)這個(gè)效果，我們需要給表單控件添加一個(gè) disabled 屬性。disabled 是禁用的意思。一個(gè)禁用的表單控件是不可用和不可點(diǎn)擊的。

當(dāng)提交表單時(shí)，禁用的表單控件值是不會(huì)被收集和發(fā)送給后端的。disabled 屬性可以添加給任何的表單控件。

回到編輯器，我們?cè)俑囊幌挛募砑訂卧~ disabled。

繼續(xù)在原文檔里編寫(xiě)代碼。再添加一個(gè) br 標(biāo)簽，書(shū)寫(xiě)文本"選擇性別"，使用 emmet 語(yǔ)法 input，中括號(hào)，type 等于 radio，空格，name 等于 gender，乘以3，按下 tab 鍵補(bǔ)全代碼，(input[type=radio name=gender]*3) 在 input 后面分別添加男、女、保密。給最后一個(gè)控件再定義一個(gè) disabled 屬性。保存。

回到瀏覽器，刷新，一組單選框就做好了。性別的男、女可以點(diǎn)選，保密控件被禁用了，灰色顯示，點(diǎn)擊也不能被選中。

lable 標(biāo)簽以及表單控件的只讀禁用設(shè)置就講完了，大家自己動(dòng)手實(shí)現(xiàn)一下吧！

文章配套視頻「鏈接」