簡單小程序：登錄頁面（html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁面</title>
    /*總體的樣式*/
    <style>
    	/*盒子樣式*/
        #box{
            width: 350px; //寬
            height: 450px; //高
            border: 1px solid black; //邊框
            border-radius: 10px; //邊框弧度
            font-family: 黑體; //字體
            letter-spacing:8px; //段間距
            word-spacing: 10px; //字間距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //內(nèi)邊框
        }
        /*給'注冊(cè)'賦予樣式*/
        .register{
            width:280px ; //寬
            height: 50px; //高
            background-color: skyblue; //背景顏色
            border-radius: 10px; //邊框弧度

        }
        /*將所有邊框都改變*/
        *{
            border-radius: 5px; 邊框弧度
        }
        /*使用class選擇器，賦予number寬高和邊框*/
        .number{
            width: 185px; //寬
            height: 27px; //高
            border-width: 1px; //邊框?qū)挾?
        }
        /*id選擇器*/
        #two{
            width: 55px; //寬
            border-width: 1px; 邊框?qū)挾?        }
        /*id選擇器*/
        #phone{
            width: 103px; //寬
        }
        /*class 選擇器*/
        .boxs{
            zoom: 75%; //清除浮動(dòng)
            color: darkgray; //顏色
        }
        /*class選擇器*/
        .box_a{
            width: 50px; //寬
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景圖片
            background-repeat: no-repeat; // 是否平鋪
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相對(duì)定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>請(qǐng)注冊(cè)</h1>
<p style="color: darkgray">已有帳號(hào)?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
    <label for="name">用戶名</label>
    <input type="text" placeholder="請(qǐng)輸入用戶名" id="name" class="number"> <br>
    <label for="phone">手機(jī)號(hào)</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)" id="phone" class="number"> <br>
    <label for="mima">密?碼</label>
    <input type="password" placeholder="請(qǐng)輸入密碼" id="mima" class="number"> <br>
    <label for="mima">驗(yàn)證碼</label>
    <input type="password" placeholder="請(qǐng)輸入驗(yàn)證碼" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">閱讀并接受協(xié)議<br>
    </div>
    <input type="submit" value="注冊(cè)" class="register" >

    </form>
</div>


</body>
</html>
在這里插入圖片描述

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

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

interface HTMLInputElement extends HTMLElement {
    ...
}

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

name：表示 <input> 元素的名稱。
disabled：表示 <input> 元素是否禁止使用。在表單提交時(shí)不會(huì)包含被禁止的 <input> 元素。
autofocus：表示頁面加載時(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í)，用戶看到的報(bào)錯(cuò)信息。如果該元素不需要校驗(yàn)，或者通過校驗(yàn)，該屬性為空字符串。是只讀屬性。
willValidate：表示表單提交時(shí)，<input> 元素是否會(huì)被校驗(yàn)。是只讀屬性。
select()：選中 <input> 元素內(nèi)部的所有文本。
click()：模擬鼠標(biāo)點(diǎn)擊當(dāng)前的 <input> 元素。

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

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

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

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

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

下面創(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 類型。HTMLTextAreaElement類型繼承自 HTMLElement 接口：

interface HTMLTextAreaElement extends HTMLElement {
    ...
}

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

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

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ò)展，通過 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 開始。如果這個(gè)值比元素的 value 長度還大，則會(huì)被看做 value 最后一個(gè)位置的索引。
end：被選中的最后一個(gè)字符的下一個(gè)位置索引。如果這個(gè)值比元素的 value 長度還大，則會(huì)被看做 value 最后一個(gè)位置的索引。
direction：該參數(shù)是可選的字符串類型，表示選擇方向，可以傳入 “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)。

輸入過濾

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

屏蔽字符

有些輸入框需要出現(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è)問題需要處理：復(fù)制、粘貼及涉及Ctrl 鍵的其他功能。在除IE 外的所有瀏覽器中，前面代碼會(huì)屏蔽快捷鍵Ctrl+C、Ctrl+V 及其他使用Ctrl 的組合鍵。因此，最后一項(xiàng)檢測(cè)是確保沒有按下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ù)可以用來自定義是否允許在文本框中輸入某些字符。

處理剪貼板

IE 是第一個(gè)實(shí)現(xiàn)了剪切板相關(guān)的事件以及通過JavaScript訪問剪切板數(shù)據(jù)的瀏覽器，其它瀏覽器在后來也都支持了相同的事件和剪切板的訪問，后來 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ā)生之前，通過beforecopy、beforecut 和 beforepaste 事件可以在向剪貼板發(fā)送或從中檢索數(shù)據(jù)前修改數(shù)據(jù)。不過，取消這些事件并不會(huì)取消剪貼板操作。要阻止實(shí)際的剪貼板操作，必須取消 copy、cut和 paste 事件。

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

getData(format)：從剪貼板獲取指定格式的數(shù)據(jù)，接收的參數(shù)為指定獲取的數(shù)據(jù)格式，如果沒有指定數(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)訪問剪貼板，只能在剪貼板事件期間訪問 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事件檢查剪貼板上的文本是否無效。如果無效，可以取消默認(rèn)行為：

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

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

自動(dòng)切換

在 JavaScript 中，可以用在當(dāng)前字段完成時(shí)自動(dòng)切換到下一個(gè)字段的方式來增強(qiáng)表單字段的易用性。比如，常用手機(jī)號(hào)分為國家好加手機(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ù)通過比較用戶輸入文本的長度與 maxLength 屬性的值來檢測(cè)輸入是否達(dá)到了最大長度。如果兩者相等，就通過循環(huán)表中的元素集合找到當(dāng)前文本框，并把焦點(diǎn)設(shè)置到下一個(gè)元素。

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

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)，不填則無法提交。該屬性適用于<input>、<textarea>和<select>。如下所示：

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

也可以通過 JavaScript 檢測(cè)對(duì)應(yīng)元素的 required 屬性來判斷表單字段是否為必填項(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ì)阻止提交表單。

數(shù)值范圍

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

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

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

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

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

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

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

檢測(cè)有效性

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

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

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

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

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：如果字段值的長度超過了 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("請(qǐng)指定值.")
    } else if (input.validity.typeMismatch){
        console.log("請(qǐng)指定電子郵件地址.");
    } else {
        console.log("值無效.");
    }
}

禁用驗(yàn)證

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

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

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

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

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

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

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

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

總結(jié)

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

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

<metahttp-equiv="Windows-Target"content="_top">

<NOBR> 取消換行和<br>相反

總類（所有HTML文件都有的

--------------------------------------------------------------------------------

文件類型 <HTML></HTML> 放在檔案的開頭與結(jié)尾）

文件主題 <TITLE></TITLE> 必須放在「文頭」區(qū)塊內(nèi)）

文頭 <HEA D></HEA D> 描述性資料，像是「主題」）

文體 <BODY></BODY> 文件本體）

結(jié)構(gòu)性定義（由瀏覽器控制的顯示風(fēng)格）

--------------------------------------------------------------------------------

標(biāo)題<H?></H?>表示從16有六層選擇）數(shù)值越高字越小

標(biāo)題對(duì)齊 <H?ALIGN=LEFT|CENTER|RIGHT></H?>左對(duì)齊、居中對(duì)齊、右對(duì)齊

區(qū)分<P></P>

區(qū)分對(duì)齊<PALIGN=LEFT|RIGHT|CENTER|JUSTIFY></P>左對(duì)齊、右對(duì)齊、居中對(duì)齊、兩端對(duì)齊

引文區(qū)塊<BLOCKQUOTE></BLOCKQUOTE>通常會(huì)內(nèi)縮）

斜體 <EM></EM>

加粗 <SPONG></SPONG>

引文 <CITE></CITE>通常會(huì)以斜體顯示）

碼<CODE></CODE>顯示原始碼之用）

樣本<SA MP></SA MP>

表示一段用戶應(yīng)該對(duì)其沒有什么其他解釋的文本。要從正常的上下文抽取這些字符時(shí)，通常要用到這個(gè)標(biāo)簽。

并不經(jīng)常使用，只在要從正常上下文中將某些短字符序列提取出來，對(duì)其加以強(qiáng)調(diào)，才使用這個(gè)標(biāo)簽

鍵盤輸入<KBD></KBD>

變數(shù)<VA R></VA R>

定義<DFN></DFN>有些瀏覽器不提供）

地址<A DDRESS></A DDRESS>

3.0大字<BIG></BIG>

3.0小字<SMA LL></SMA LL>

與外觀相關(guān)的標(biāo)簽（作者自訂的表現(xiàn)方式）

--------------------------------------------------------------------------------

加粗<B></B>

斜體<I></I>

3.0底線<U></U>尚有些瀏覽器不提供）

3.0刪除線 <S></S>尚有些瀏覽器不提供）

3.0下標(biāo) <SUB></SUB>

3.0上標(biāo) <SUP></SUP>

打字機(jī)體<TT></TT>用單空格字型顯示）

預(yù)定格式<PRE></PRE>保留文件中空格的大小）

預(yù)定格式的寬度<PREWIDTH=?></PRE>以字元計(jì)算）

N1.0+向中看齊<CENTER></CENTER>文字與圖片都可以）

N1.0閃耀<BLINK></BLINK>有史以來最被嘲弄的標(biāo)簽）

N1.0字體大小<FONTSIZE=?></FONT>從17

N1.0改變字體大小<FONTSIZE=+|-?></FONT>

N1.0基本字體大小<BA SEFONTSIZE=?>從17;內(nèi)定為3

N2.0字體顏色<FONTCOLOR="#$$$$$$"></FONT>

連結(jié)與圖形

--------------------------------------------------------------------------------

鏈接 <A HREF="URL"></A >

連結(jié)到錨點(diǎn)<A HREF="URL#***"></A >如果錨點(diǎn)在另一個(gè)檔案）

<A HREF="#***"></A >如果錨點(diǎn)目前的檔案）

N2.0連結(jié)到目的視框<A HREF="URL"TA RGET="***"></A >

設(shè)定錨點(diǎn)<A NA ME="***"></A >

圖形 <IMGSRC="URL">

圖形看齊方式<IMGSRC="URL"ALIGN=TOP|BOTTOM|MIDDLE>

取代文字 <IMGSRC="URL"ALT="***">如果沒有辦法顯示圖形則顯示此文字）

點(diǎn)選圖<IMGSRC="URL"ISMA P>需要CGI程式）

N2.0點(diǎn)選圖 <IMGSRC="URL"USEMA P="URL">

N2.0地圖 <MA PNA ME="***"></MA P>描述地圖）

N2.0段落 <A REA SHA PE="RECT"COORDS=",,,"HREF="URL"|NOHREF>

3.0大小 <IMGSRC="URL"WIDTH="?"HEIGHT="?">以pixel為單位：px

N1.0圖形邊緣 <IMGSRC="URL"BORDER=?>以pixel為單位）

N1.0圖形邊緣空間 <IMGSRC="URL"HSPA CE=?VSPA CE=?>以pixel為單位）

N1.0低解析度圖形 <IMGSRC="URL"LOWSRC="URL">

N1.1用戶端拉 <META HTTP-EQUIV="Refresh"CONTENT="?;URL=URL">使用端自動(dòng)更新

N2.0內(nèi)嵌物件 <EMBEDSRC="URL">將物件插入頁面）

N2.0內(nèi)嵌物件大小 <EMBEDSRC="URL"WIDTH="?"HEIGHT="?">

分隔

--------------------------------------------------------------------------------

段落 <P>通常是兩個(gè)return

3.0段落 <P></P>新定義成容器型標(biāo)簽）

3.0文字看齊方式 <PALIGN=LEFT|CENTER|RIGHT></P>

換行 <BR>一個(gè)return

N1.0文字部份看齊方式<BRCLEA R=LEFT|RIGHT|A LL>與圖形合用時(shí)）

橫線 <HR>

N1.0橫線對(duì)齊 <HRALIGN=LEFT|RIGHT|CENTER>

N1.0橫線厚度 <HRSIZE=?>以pixel為單位）

N1.0橫線寬度 <HRWIDTH=?>以pixel為單位）

N1.0橫線比率寬度 <HRWIDTH=%>以頁寬為100%

N1.0實(shí)線 <HRNOSHA DE>沒有立體效果）

N1.0不可換行 <NOBR></NOBR>不換行）

N1.0可換行處 <WBR>如果需要，可在此斷行）

列舉（可以巢狀列舉）

--------------------------------------------------------------------------------

無次序式列舉<UL><LI></UL><LI>放在每一項(xiàng)前）

N1.0公布式列舉 <ULTYPE=DISC|CIRCLE|SQUA RE>定義全部的列舉項(xiàng)）

<LITYPE=DISC|CIRCLE|SQUA RE>定義這個(gè)及其後的列舉項(xiàng)）

有次序式列舉<OL><LI></OL><LI>放在每一項(xiàng)前）

N1.0數(shù)標(biāo)型態(tài) <OLTYPE=A |a|I|i|1>定義全部的列舉項(xiàng)）

<LITYPE=A |a|I|i|1>定義這個(gè)及其後的列舉項(xiàng)）

N1.0起始數(shù)字 <OLVA LUE=?>定義全部的列舉項(xiàng)）

<LIVA LUE=?>定義這個(gè)及其後的列舉項(xiàng)）

定義式列舉 <DL><DT><DD></DL><DT>項(xiàng)目,<DD>定義）

表單式列舉 <MENU><LI></MENU><LI>放在每一項(xiàng)前）

目錄式列舉 <DIR><LI></DIR><LI>放在每一項(xiàng)前）

背景與顏色

--------------------------------------------------------------------------------

3.0重復(fù)排列的背景 <BODYBA CKGROUND="URL">

N1.1+背景顏色 <BODYBGCOLOR="#$$$$$$">依序?yàn)榧t、綠、藍(lán)）

N1.1+文字顏色 <BODYTEXT="#$$$$$$">

N1.1+連結(jié)顏色 <BODYLINK="#$$$$$$">

N1.1+看過的連結(jié) <BODYVLINK="#$$$$$$">

N1.1使用中的連結(jié) <BODYALINK="#$$$$$$">

特殊字元（以下標(biāo)簽需用小寫）

--------------------------------------------------------------------------------

特別符號(hào) &#?;其中 ?代表 ISO8859-1編碼）

<<>>&&""

注冊(cè)商標(biāo)TM?

N1.0+注冊(cè)商標(biāo)TM®

著作權(quán)符號(hào) ?

N1.0+著作權(quán)符號(hào) ©

表單（通常需要與CGI程式配合）

--------------------------------------------------------------------------------

定義表單 <FORMACTION="URL"METHOD=GET|POST></FORM>

N2.0上傳檔案 <FORMENCTYPE="multipart/form-data></FORM>

欄位名稱 <INPUTNA ME="***">

欄位內(nèi)定值 <INPUTVA LUE="***">

已選定 <INPUTCHECKED>適用於checkbox與 radiobox

欄位寬度 <INPUTSIZE=?>以字元數(shù)為單位）

最長字?jǐn)?shù) <INPUTMA XLENGTH=?>以字元數(shù)為單位）

下拉式選單 <SELECT></SELECT>

下拉式選單名稱 <SELECTNA ME="***"></SELECT>

選單項(xiàng)目數(shù)量 <SELECTSIZE=?></SELECT>

多選式選單 <SELECTMULTIPLE>多選）

選項(xiàng) <OPTION>

內(nèi)定選項(xiàng) <OPTIONSELECTED>

文字輸入?yún)^(qū) <TEXTA REA ROWS=?COLS=?></TEXTA REA >

輸入?yún)^(qū)名稱 <TEXTA REA NA ME="***"></TEXTA REA >

N2.0輸入?yún)^(qū)換行方式 <TEXTA REA WRA P=OFF|VIRTUA L|PHYSICA L></TEXTA REA >

表格

--------------------------------------------------------------------------------

3.0定義表格 <TA BLE></TA BLE>

3.0表格框線 <TA BLEBORDER></TA BLE>有或沒有）

N1.1表格框線 <TA BLEBORDER=?></TA BLE>可以設(shè)定數(shù)值）

N1.1儲(chǔ)存格左右留白 <TA BLECELLSPA CING=?>

N1.1儲(chǔ)存格上下留白 <TA BLECELLPA DDING=?>

N1.1表格寬度 <TA BLEWIDTH=?>以pixel為單位）

N1.1寬度比率 <TA BLEWIDTH=%>頁寬為100%

3.0表格列<P></P>

3.0表格列內(nèi)容看齊 <PALIGN=LEFT|RIGHT|CENTERVA LIGN=TOP|MIDDLE|BOTTOM>

3.0儲(chǔ)存格<TD></TD>須與列并用）

3.0儲(chǔ)存格內(nèi)容看齊 <TDALIGN=LEFT|RIGHT|CENTERVA LIGN=TOP|MIDDLE|BOTTOM>

3.0不換行 <TDNOWRA P>

N3.0儲(chǔ)存格背景顏色 <TDBGCOLOR=#$$$$$$>

3.0儲(chǔ)存格橫向連接 <TDCOLSPA N=?>

3.0儲(chǔ)存格縱向連接 <TDROWSPA N=?>

N1.1儲(chǔ)存格寬度 <TDWIDTH=?>以pixel為單位）

N1.1儲(chǔ)存格寬度比率 <TDWIDTH=%>頁寬為100%

3.0表格標(biāo)題 <TH></TH>跟<TD>一樣，不過會(huì)對(duì)中并加粗）

3.0表格標(biāo)題對(duì)齊 <THALIGN=LEFT|RIGHT|CENTERVA LIGN=TOP|MIDDLE|BOTTOM>

3.0表格標(biāo)題不換行 <THNOWRA P>

3.0表格標(biāo)題占幾欄 <THCOLSPA N=?>

3.0表格標(biāo)題占幾列 <THROWSPA N=?>

N1.1表格標(biāo)題寬度 <THWIDTH=?>以pixel為單位）

N1.1表格標(biāo)題比率寬度<THWIDTH=%>頁寬為100%

3.0表格抬頭 <CA PTION></CA PTION>

3.0表格抬頭看齊 <CA PTIONALIGN=TOP|BOTTOM>表格之上/之下）

視框（定義與控制螢?zāi)簧系奶囟▍^(qū)域）

--------------------------------------------------------------------------------

N2.0視框格式總定義 <FRA MESET></FRA MESET>取代<BODY>

N2.0視框行長度分配 <FRA MESETROWS=,,,></FRA MESET>pixel或 %

N2.0視框行長度分配 <FRA MESETROWS=*></FRA MESET>*=相對(duì)大小）

N2.0視框欄寬度分配 <FRA MESETCOLS=,,,></FRA MESET>pixel或 %

N2.0視框欄寬度分配 <FRA MESETCOLS=*></FRA MESET>*=相對(duì)大小）

N2.0定義個(gè)別視框 <FRA ME>定義個(gè)別視框）

N2.0個(gè)別視框內(nèi)容 <FRA MESRC="URL">

N2.0個(gè)別視框名稱 <FRA MENA ME="***"|_blank|_self|_parent|_top>

N2.0邊緣寬度 <FRA MEMA RGINWIDTH=?>「左」與「右」邊界）

N2.0邊緣高度 <FRA MEMA RGINHEIGHT=?>「天頂」與「地底」邊界）

N2.0卷動(dòng)條 <FRA MESCROLLING="YES|NO|A UTO">

N2.0不可改變大小 <FRA MENORESIZE>

N2.0無視框時(shí)的內(nèi)容 <NOFRA MES></NOFRA MES>如果瀏覽器不提供視框功能的話）

雜項(xiàng)

--------------------------------------------------------------------------------

說明 瀏覽器不會(huì)顯示）

檔案型態(tài)聲明 <!DOCTYPEHTMLPUBLIC"-//IETF//DTDHTML2.0//EN">

3.0檔案型態(tài)聲明 <!DOCTYPEHTMLPUBLIC"-//W3O//DTDW3HTML3.0//EN">

可搜尋 <ISINDEX>指示可搜尋的索引項(xiàng)）

N1.0提示 <ISINDEXPROMPT="***">要求輸入的提示文字）

送出搜尋條件 <A HREF="URL?***"></a>其中的問號(hào)不是數(shù)字，而是「問號(hào)」）

基本檔案的URL<BA SEHREF="URL">必須放在「文頭」區(qū)段內(nèi)）

N2.0基本視窗名稱 <BA SETA RGET="***">必須放在「文頭」區(qū)段內(nèi)）

相關(guān)性 <LINKREV="***"REL="***"HREF="URL">必須放在「文頭」區(qū)段內(nèi)）

背景資訊 <META >必須放在「文頭」區(qū)段內(nèi)）

HTML標(biāo)簽

HTML標(biāo)簽通常是英文詞匯的全稱（如塊引用:blockquot或縮略語（如“p代表Paragragh但它與一般文本有區(qū)別，因?yàn)樗旁趩螘?hào)里。故Paragragh標(biāo)簽是<p>,塊引用標(biāo)簽是<blockquote>有些標(biāo)簽說明頁面如何被格式化（例如，<p>開始一個(gè)新段落）其他則說明這些詞如何顯示(<b>使文字變粗)還有一些其他標(biāo)簽提供在頁面上不顯示的信息－例如標(biāo)題。

關(guān)于標(biāo)簽，需要記住的成雙出現(xiàn)的每當(dāng)使用一個(gè)標(biāo)簽－如<blockquote>,則必須以另一個(gè)標(biāo)簽</blockquote>將它關(guān)閉。注意“blockquot前的斜杠，那就是關(guān)閉標(biāo)簽與打開標(biāo)簽的區(qū)別。

基本HTML頁面以<html>標(biāo)簽開始，以</html>結(jié)束。之間，整個(gè)頁面有兩部分－標(biāo)題和正文。

標(biāo)題詞－夾在<head>和</head>標(biāo)簽之間－這個(gè)詞語在打開頁面時(shí)出現(xiàn)在屏幕底部最小化的窗口。正文則夾在<body>和</body>之間－即所有頁面的內(nèi)容所在頁面上顯示的任何東西都包含在這兩個(gè)標(biāo)簽之中。

那么讓我建立一個(gè)簡單的范例吧，非常容易的第一步，當(dāng)然是要建立一個(gè)新的文本文件（記住，如果你使用比較復(fù)雜的文字處理器，就應(yīng)該用“純文本”或“普通文本”來保存）將它命名為“xxxx.html隨便你起一個(gè)什么名字,但記住,要用英文)

然后你可以用瀏覽器將它打開，會(huì)看見最簡單的自己做的頁面。

.<html></html>

2.<head></head>

3.<body></body>

4.<title></title>

Html英文 HyperTextMarkupLanguag縮寫，中文意思是超文本標(biāo)志語言”用它編寫的文件(文檔)擴(kuò)展名是.html或.htm可供瀏覽器解釋瀏覽的文件格式。您可以使用記事本、寫字板或 FrontPagEditor等編輯工具來編寫Html文件。Html語言使用標(biāo)志對(duì)的方法編寫文件，既簡單又方便，通常使用<標(biāo)志名></標(biāo)志名>來表示標(biāo)志的開始和結(jié)束(例如<html></html>標(biāo)志對(duì))因此在Html文檔中這樣的標(biāo)志對(duì)都必須是成對(duì)使用的此教程中，先講一下Html基本標(biāo)志：

1.<html></html>

<html>標(biāo)志用于Html文檔的最前邊，用來標(biāo)識(shí)Html文檔的開始。而</html>標(biāo)志恰恰相反，放在Html文檔的最后邊，用來標(biāo)識(shí)Html文檔的結(jié)束，兩個(gè)標(biāo)志必須一塊使用。

2.<head></head>

<head>和</head>構(gòu)成Html文檔的開頭部分，此標(biāo)志對(duì)之間可以使用<title></title><script></script>等等標(biāo)志對(duì)，這些標(biāo)志對(duì)都是描述Html文檔相關(guān)信息的標(biāo)志對(duì)，<head></head>標(biāo)志對(duì)之間的內(nèi)容是不會(huì)在瀏覽器的框內(nèi)顯示出來的兩個(gè)標(biāo)志必須一塊使用。

3.<body></body>

<body></body>Html文檔的主體部分，此標(biāo)志對(duì)之間可包含<p></p><h1></h1><br><hr>等等眾多的標(biāo)志，所定義的文本、圖像等將會(huì)在瀏覽器的框內(nèi)顯示出來。兩個(gè)標(biāo)志必須一塊使用。<body>標(biāo)志中還可以有以下屬性：屬性

用途

示例

<bodibgcolor="#rrggbb">設(shè)置背景顏色。<bodibgcolor="red">紅色背景

<boditext="#rrggbb">設(shè)置文本顏色。<boditext="#0000ff">藍(lán)色文本

<bodilink="#rrggbb">設(shè)置鏈接顏色。<bodilink="blue">鏈接為藍(lán)色

<bodivlink="#rrggbb">設(shè)置已使用的鏈接的顏色。<bodivlink="#ff0000">

<bodialink="#rrggbb">設(shè)置正在被擊中的鏈接的顏色。<bodialink="yellow">

說明:以上各個(gè)屬性可以結(jié)合使用，如<bodibgcolor="red"text="#0000ff">引號(hào)內(nèi)的rrggbb用六個(gè)十六進(jìn)制數(shù)表示的RGB即紅、綠、藍(lán)三色的組合)顏色，如#ff0000對(duì)應(yīng)的紅色。此外，還可以使用Html語言所給定的常量名來表示顏色：BlackWhiteGreenMaroonOliveNaviPurplGraiYellowLimeAguaFuchsiaSilverRedBlue和Teal如<boditext="Blue">表示<body></body>標(biāo)志對(duì)中的文本使用藍(lán)色顯示在瀏覽器的框內(nèi)。

4.<title></title>

使用過瀏覽器的人可能都會(huì)注意到瀏覽器窗口最上邊藍(lán)色部分顯示的文本信息，那些信息一般是網(wǎng)頁的主題”要將您的網(wǎng)頁的主題顯示到瀏覽器的頂部其實(shí)很簡單，只要在<title></title>標(biāo)志對(duì)之間加入您要顯示的文本即可。注意：<title></title>標(biāo)志對(duì)只能放在<head></head>標(biāo)志對(duì)之間。

下面是一個(gè)綜合的例子，仔細(xì)閱讀，您便可以了解以上各個(gè)標(biāo)志對(duì)在一個(gè)Html文檔中的布局或所使用的位置。

例1Html文檔中基本標(biāo)志的使用

<html>

<head>

<title>顯示在瀏覽器最上邊藍(lán)色條中的文本</title>

</head>

<bodibgcolor="red"text="blue">

</body>

</html>

1.<p></p>

2.<br>

3.<blockquote></blockquote>

4.<dl></dl><dt></dt><dd></dd>

5.<ol></ol><ul></ul><li></li>

6.<div></div>

上一個(gè)教程中我講了Html文檔的基本標(biāo)志，但我還不知道怎樣在瀏覽器中顯示文本之類的東西，這正是教程二中將要談到學(xué)習(xí)之前，必須強(qiáng)調(diào)一下，這個(gè)教程中所講的格式標(biāo)志統(tǒng)統(tǒng)都是用于<body></body>標(biāo)志對(duì)之間的

1.<p></p>

<p></p>標(biāo)志對(duì)是用來創(chuàng)建一個(gè)段落，此標(biāo)志對(duì)之間加入的文本將按照段落的格式顯示在瀏覽器上。另外，<p>標(biāo)志還可以使用align屬性，用來說明對(duì)齊方式，語法是<palign=""></p>align可以是Left左對(duì)齊)Center居中)和Right右對(duì)齊)三個(gè)值中的任何一個(gè)。如<palign="Center"></p>表示標(biāo)志對(duì)中的文本使用居中的對(duì)齊方式。

2.<br>

<br>一個(gè)很簡單的標(biāo)志，沒有結(jié)束標(biāo)志，因?yàn)樗脕韯?chuàng)建一個(gè)回車換行，這么一說我想您該會(huì)使用了吧。<br>使用上還有一定的技巧，如果您把<br>加在<p></p>標(biāo)志對(duì)的外邊，將創(chuàng)建一個(gè)大的回車換行，即<br>前邊和后邊的文本的行與行之間的距離比較大，若放在<p></p>里邊則<br>前邊和后邊的文本的行與行之間的距離將比較小，您不妨試試看。

3.<blockquote></blockquote>

<blockquote></blockquote>標(biāo)志對(duì)之間加入的文本將會(huì)在瀏覽器中按兩邊縮進(jìn)的方式顯示出來。

4.<dl></dl><dt></dt><dd></dd>

<dl></dl>用來創(chuàng)建一個(gè)普通的列表，<dt></dt>用來創(chuàng)建列表中的上層項(xiàng)目，<dd></dd>用來創(chuàng)建列表中最下層項(xiàng)目，<dt></dt>和<dd></dd>都必須放在<dl></dl>標(biāo)志對(duì)之間。看一下下邊的例子您就會(huì)明白了

例2創(chuàng)建一個(gè)普通列表

<html>

<head>

</head>

<boditext="blue">

<dl>

</dl>

</body>

</html>

此例在瀏覽器中的顯示如下:

中國城市

北京

上海

廣州

美國城市

華盛頓

芝加哥

紐約

5.<ol></ol><ul></ul><li></li>

<ol></ol>標(biāo)志對(duì)用來創(chuàng)建一個(gè)標(biāo)有數(shù)字的列表；<ul></ul>標(biāo)志對(duì)用來創(chuàng)建一個(gè)標(biāo)有圓點(diǎn)的列表；<li></li>標(biāo)志對(duì)只能在<ol></ol>或<ul></ul>標(biāo)志對(duì)之間使用，此標(biāo)志對(duì)用來創(chuàng)建一個(gè)列表項(xiàng)，若<li></li>放在<ol></ol>之間則每個(gè)列表項(xiàng)加上一個(gè)數(shù)字，若在<ul></ul>之間則每個(gè)列表項(xiàng)加上一個(gè)圓點(diǎn)。請(qǐng)看下邊的例子：

例3標(biāo)有數(shù)字或圓點(diǎn)的列表

<html>

<head>

</head>

<boditext="blue">

<ol>

</ol>

<ul>

</ul>

</body>

</html>

此例在瀏覽器中的顯示如下:

中國城市

北京

上海

廣州

美國城市

華盛頓

芝加哥

紐約

6.<div></div>

<div></div>標(biāo)志對(duì)用來排版大塊Html段落，也用于格式化表，此標(biāo)志對(duì)的用法與<p></p>標(biāo)志對(duì)非常相似，同樣有align對(duì)齊方式屬性，讀者可以自己試試看。

html標(biāo)簽的用法=======================================================================================

一、基本概念：

網(wǎng)頁、網(wǎng)站、瀏覽器、IE/NetScape

HTML超文本標(biāo)記語言，什么是超文本、什么是標(biāo)記語言。

HTML內(nèi)容怎樣顯示出來。

二、HTML語法：

三、<body>一些屬性：

什么是屬性：

text:設(shè)定整個(gè)網(wǎng)頁中文字的色彩

link:用于設(shè)定一般超鏈接文本的顯示色彩

alink:用于設(shè)定鼠標(biāo)移動(dòng)到超鏈接上并按下鼠標(biāo)是超文本的顯示色彩

vlink:設(shè)置訪問過的超鏈接的色彩

background:設(shè)定背景圖片，可以是絕對(duì)路徑也可以是相對(duì)路徑。

bgcolor:用戶設(shè)定背景色，當(dāng)已設(shè)定background時(shí)這個(gè)屬性會(huì)失去作用

leftmargin:左邊距

topmargin:上邊距

四、注釋與特殊字符：

注釋的內(nèi)容不會(huì)被顯示出來

注釋不能被嵌套。

注冊(cè)符號(hào)

版權(quán)符號(hào)

"TM

空格

五、格式標(biāo)簽

<p></p>:用來創(chuàng)建一個(gè)段落,可以用align屬生來設(shè)置段落的對(duì)齊方式

<br/>:單標(biāo)記直接在>前加一個(gè)“/表示結(jié)束標(biāo)記，顯示一個(gè)換行

<center></center>:對(duì)之間的圖形或文本在水平方向居中顯示

<marquee></marquee>:移動(dòng)圖片或文本。direct屬性：內(nèi)容的移動(dòng)方向（left,right,down,up;behavior指定內(nèi)容的移動(dòng)行為（scroll,alternate,slid

<dl></dl><dt></dt><dd></dd>用來創(chuàng)建一個(gè)普通列表。

<ol></ol><ul></ul><li></li>:<ol></ol>創(chuàng)建一個(gè)標(biāo)有數(shù)字的列表;<ul></ul>對(duì)創(chuàng)建的列表標(biāo)有一個(gè)圓點(diǎn);<li></li>只能在<ol></ol>或<ul></ul>之間使用，表示列表項(xiàng)

<pre></pre>:對(duì)文本進(jìn)行預(yù)格式處理

六、文本標(biāo)簽：

<h1></h1>......<h6></h6>:把文本以標(biāo)題方式顯示。

<b></b><i></i><u></u>:分別對(duì)應(yīng)粗體，斜體，下劃線

<sub></sub><sup></sup>:分別對(duì)應(yīng)下上標(biāo)的顯示

<cite></cite>:引用方式的字體，通常是斜體

<em></em>:顯示需要強(qiáng)調(diào)的文本，通常是斜體加粗

<strong></strong>:用來顯示加重文本，通常是加粗顯示

<font></font>:對(duì)字體、字號(hào)、顏色進(jìn)行改變。face屬性：字體;Size屬生：大小; Color屬生：色彩

七、圖像標(biāo)簽：

<img/>

src屬性：必不可少，用來設(shè)置圖像文件所在位置。

alt屬性：當(dāng)鼠標(biāo)移到圖像上顯示的提示文本，當(dāng)圖像無法顯示時(shí)，所顯示的代替文字

align屬性：設(shè)置圖像與周圍文本的對(duì)齊方式。top,bottom,left,right

border屬性：設(shè)置圖像的邊框?qū)挾?/p>

width和height設(shè)置圖像的長寬高

<hr/>:HTML文檔中加入一條水平線。

size:線的粗細(xì)

color:線的色彩

width:線的長度

noshade:陰影顯示

八、超鏈接標(biāo)簽：

通一資源定位符：URL;

如：http://www.sina.com

http所使用的協(xié)議;www.sina.net要訪問的主機(jī)名;80端口號(hào)

<ahref=""></a>:把中間標(biāo)記的內(nèi)容作為超鏈接顯示，href內(nèi)容作為超連接點(diǎn)擊后轉(zhuǎn)向的頁面。

如：<ahref="http://www.sina.com">新浪網(wǎng)</a>

<ahref=http://www.jungjaehyung.com/uploadfile/2024/0807/20240807032535142.gif"></a>

href屬性是不可少的

target屬性：指明在瀏覽器的哪個(gè)窗口打開新頁面。

<aname="">錨點(diǎn)標(biāo)記，同一網(wǎng)頁中設(shè)置多個(gè)錨點(diǎn)便于超鏈接的瀏覽。

如：<ahref="#標(biāo)記１">跳轉(zhuǎn)到第一個(gè)標(biāo)記上</a>

mailto:打開電子郵件:

<ahref="mailto:ldc_5588@163.comsubject=hello&body=您好">聯(lián)系我</a>

九、<mapname=""></map>圖像地圖將一個(gè)圖像分成多個(gè)部分，各部分分別指向不同的鏈接。

<areashape="形狀"coords="坐標(biāo)"href="url">給圖像分塊

shape屬性可以是以下幾種形狀：

rect:矩形，此時(shí)的coord為矩形的左上角個(gè)右下角的坐標(biāo)

poly:多邊形，此時(shí)的coord為多邊形的各個(gè)頂點(diǎn)

circle:圓，此時(shí)coord為圓習(xí)坐標(biāo)及半徑

如：

<imgsrc="chinagif"usemap="mymap"/>

<mapname=mymap>

<areashape="rect"href="a.html"coords="140,20,280,60">

<areashape="poly"href="b.html"coords="100,100,180,80,200,400">

<areashape="circle"href="c.html"coords="10,100,60">

</map>

十、表格標(biāo)簽：<table></table><tr></tr><td></td>

這三個(gè)標(biāo)簽的層次結(jié)構(gòu)：

<table></table>定義一個(gè)表格的開始和結(jié)束

<tr></tr>定義一行的開始和結(jié)束

<td></td>定義一個(gè)單元格的開始和結(jié)束

<table></table>屬性：

bgcolor:設(shè)置表格的背景色彩

border:設(shè)置表格的邊框的寬度

bordercolor:設(shè)置表格邊框色彩

bordercolorlight:設(shè)置表格邊框明亮部分的色彩

bordercolordark:設(shè)置表格邊框昏暗部分的色彩

cellspacing:設(shè)置單元格之間的間隔

cellpad設(shè)置單元格內(nèi)部的內(nèi)容與邊框的間隔

width:表格的寬度

height:表格的高度

align:整行單元格的內(nèi)容水平對(duì)齊方式left,center,right

valign:整行單元格的內(nèi)容豎直對(duì)齊方式topmiddle,bottom

bgcolor:設(shè)置這一行的色彩

width:單元格的寬度（大小）

height:單元格的高度

align:單元格內(nèi)部內(nèi)容的水平對(duì)齊方式

valign:單元格內(nèi)部內(nèi)容的豎直對(duì)齊方式

colspan:設(shè)置一個(gè)單元格跨占的列數(shù)

rowspan:設(shè)置一個(gè)單元格跨占的行數(shù)

nowrap:禁止單元格內(nèi)的內(nèi)容自動(dòng)換行

<th></th>與<td></td>類似只不過里面顯示的內(nèi)容是黑體居中的

十一、框架標(biāo)簽<frameset></frameset><frame></frame>

什么是框架：將一個(gè)窗口分割成多部分，每一部分顯示一個(gè)獨(dú)立的頁面。

框架只是分割窗口。

<frameset></frameset>定義一個(gè)框架集：

rows:將窗口豎直拆分時(shí)窗口的大小比例

cols:將窗口水平拆分窗口的大小比例

<frame></frame>定義一個(gè)具體的框架窗口：

src:要顯示網(wǎng)頁的ＵＲＬ

name:框架窗口的名子

taget:該框架中的超鏈接默認(rèn)的打開窗口_blank,_parent,_self,_top

scrolling:否在框架邊上出現(xiàn)滾動(dòng)條yes,no,auto

noresize:禁止用戶拖動(dòng)分隔線來調(diào)整框架的大小,直接將該屬生放入就可以了

name:框架窗口的名子

src:框架窗口中所顯示的新的網(wǎng)頁

十二、表單標(biāo)簽：

什么時(shí)表單？

<form></form>:定義表單的開始和結(jié)束位置<略講>

action:處理表單內(nèi)容的服務(wù)器程序的ＵＲＬ

method:提交給服務(wù)器處理表單信息的方式

get:將表單信息以ＵＲＬ參數(shù)的形式附在actionＵＲＬ后面

set:將表單信息以ＨＴＴＰ消息實(shí)體發(fā)送給ＷＥＢ服務(wù)器

target:設(shè)置服務(wù)器返回結(jié)果顯示的窗口

title:當(dāng)鼠標(biāo)放在表單上的時(shí)候以黃色的泡泡進(jìn)行提示

<inputtype="submit">定義一個(gè)提交按鈕

action:指定ＵＲＬ所指定的服務(wù)器程序

value:按鈕上的文字

<inputtype="reset">:定義一個(gè)重新填寫的按鈕。

value:按鈕上的文字

<inputtype="text">:定義一個(gè)單行文本框

size:輸入?yún)^(qū)域的寬度，以字符個(gè)數(shù)為單位

value:文本框的內(nèi)容

maxlength:用戶能夠輸入的最大字符串長度

readonly:屬性存在時(shí)，文本框可以獲得焦點(diǎn)，但用戶不能更改里面的內(nèi)容。

disable:屬性存在時(shí)，文本框不能獲得焦點(diǎn)，也不能更改里面的內(nèi)容。

<inputtype="checkbox">:定義一個(gè)復(fù)選框

name:復(fù)選框的名，同一組復(fù)選框用同一個(gè)名子

checked:該復(fù)選框是否被選中

value:指定復(fù)選框被選中時(shí)，這個(gè)復(fù)選框的后臺(tái)值

<inputtype="radio">:定義一個(gè)單選按鈕

name:單選按鈕的名，同一組單選按鈕用同一個(gè)名子

value:指定單選按鈕被選中時(shí)，這個(gè)單選按鈕的后臺(tái)值

<inputtype="hidden">表單上添加一個(gè)隱式的字段的元素，瀏覽器不會(huì)顯示這個(gè)字段

name:名子

value:值

當(dāng)表單提交的時(shí)候會(huì)以name=valu形式提交到服務(wù)器上去。

<inputtype="button">:表單上定義一個(gè)普通的按鈕，這個(gè)按鈕通常與某個(gè)腳本代碼下關(guān)聯(lián)

<inputtype="password">:表單上定義一個(gè)密碼輸入?yún)^(qū)域.

<inputtype="file">:用來從本機(jī)向服務(wù)器傳文件

<inputtype="image">:表單上創(chuàng)建一個(gè)圖像元素。

圖像的源文件由src屬性來指定，沒有valu屬性。

圖像元素在某些情況下可以代替submit按鈕來使用

單擊圖像元時(shí)就會(huì)將表單信息和單擊處的x,y值一起發(fā)送到服務(wù)器

<select></select>創(chuàng)建一個(gè)下拉列表框或可以復(fù)選的列表框。

size:設(shè)置列表框中可見選項(xiàng)的數(shù)目。默認(rèn)值是１，這時(shí)顯示的下拉列表框。

mutipl屬性：這是一個(gè)不且賦值的屬性，定義列表框是否可以多選。

列表框中定義各項(xiàng)是用<option></option>來實(shí)現(xiàn)的

<option></option>為列表框中添加項(xiàng)目

value:項(xiàng)目的后臺(tái)值

selected:指定項(xiàng)目是否被選定

<textarea></textarea>創(chuàng)建一個(gè)可輸入多行文本的文本框

cols:文本框的列數(shù)

rows:文本框的列數(shù)

十三、分區(qū)標(biāo)簽：

<div></div>:區(qū)域標(biāo)簽，層

<span></span>:區(qū)域標(biāo)簽

十四、頭元素:

<base>標(biāo)簽：用于指定網(wǎng)頁中超鏈接的基準(zhǔn)地址。網(wǎng)頁中所有超鏈接的相對(duì)地址都以該地址為基準(zhǔn)地址。

該標(biāo)簽只能放在<head></head>標(biāo)簽之間。

如：<basehref="http://www.sina.com/image"target="_blank">

name屬性主要用于在網(wǎng)頁中加入一些關(guān)于網(wǎng)頁的描述信息，例如，網(wǎng)頁的關(guān)鍵字，網(wǎng)頁的描述信息等

http-equiv屬性主要用于在HTML文檔中模擬HTTP頭。

什么是HTTP頭？

通過訪問網(wǎng)頁時(shí)，服務(wù)器除了返回網(wǎng)頁文件本身的內(nèi)容（也就是瀏覽器中用查看源文件能看到東西）之外，還在返回網(wǎng)頁文件內(nèi)容之前，傳送一部分被稱為HTTP頭的內(nèi)容給瀏覽器，這部分肉容是瀏覽器的查看源文件中看不到HTTP頭的內(nèi)容相當(dāng)于服務(wù)器發(fā)送給瀏覽器的一些暗號(hào)指令，通知瀏覽器查看該網(wǎng)頁時(shí)應(yīng)使用的字符編碼、否本地緩存、網(wǎng)頁的期時(shí)間、否間隔一定時(shí)間以后刷新頁面或跳到其它頁面等。

name屬性的設(shè)置：

Keywords:網(wǎng)頁的關(guān)鍵字，以便于在搜索引擎中進(jìn)行收集信息。

<metaname="keywords"content="軟件工程師培訓(xùn),清華IT,華育國際">

Descript網(wǎng)頁描述信，以便于搜索。

Gener用于編輯此頁所用的工具名，content中填入所用的網(wǎng)頁編輯軟件。

Author用于說明網(wǎng)頁的作者，content中填入作者的姓名。

http-equiv屬性設(shè)置：

Content-Type:用于說明網(wǎng)頁內(nèi)容的類型以及文本內(nèi)容所使用的字符集編碼。

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">

Refresh:告訴瀏覽器定時(shí)自動(dòng)刷新網(wǎng)頁

<metahttp-equiv="Content-Type"content="1;url=http://www.sina.com.cn">

通知瀏覽器過一秒后跳轉(zhuǎn)到新浪網(wǎng)上去。

Expires:用于設(shè)定網(wǎng)頁的期時(shí)間。為了提高效率，瀏覽器可以被設(shè)置成緩存以前訪問的頁面，當(dāng)再次訪問該頁面時(shí)，瀏覽器不會(huì)再去服務(wù)器上訪問，而是直接在本地緩存中讀到如果將其Content設(shè)為0則禁止瀏覽器使用緩存頁面。

<metahttp_equiv="Expires"content=""Mon,12,May,200700:00:00GMT>

Windows-Target:強(qiáng)制頁面在某個(gè)窗口顯示。例如要防止別人把你網(wǎng)頁作為frame頁面調(diào)用：

在線咨詢

上一篇：前端常用meta標(biāo)簽的作用以及全面整理
下一篇：如何在GitHub正確地使用 Curl 下載文件？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

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

整合營銷服務(wù)商

簡單小程序：登錄頁面（html）

選擇文本

select 事件

取得選中的文本

選中部分文本

輸入過濾

屏蔽字符

處理剪貼板

自動(dòng)切換

HTML5

必填字段

更多輸入類型

數(shù)值范圍

輸入模式

檢測(cè)有效性

禁用驗(yàn)證

總結(jié)

您的項(xiàng)目需求