明輝手游網(wǎng)中心：是一個免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

HTML body標(biāo)簽中的相關(guān)標(biāo)簽2

發(fā)表時間：2023-09-06 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]列表標(biāo)簽 ul ol dl列表標(biāo)簽分為三種：無序列表 ul有序列表 ol定義列表 dl無序列表< ul >, 無序列表中的每一項(xiàng)是 < li ><body><ul><li>張三</li><li>李四</li&...

列表標(biāo)簽 ul ol dl

列表標(biāo)簽分為三種：

  • 無序列表 ul

  • 有序列表 ol

  • 定義列表 dl

無序列表< ul >, 無序列表中的每一項(xiàng)是 < li >

<body>
    <ul>
        <li>張三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
</body>

效果：

注意：

  • li 不能單獨(dú)存在，必須包裹在ul里面；反過來說，ul的“兒子”不能是別的東西，只能有l(wèi)i。

  • ul的作用，并不是給文字增加小圓點(diǎn)的，而是增加無序列表的“語義”的。

屬性

  • type="屬性值"。 屬性值可以選：disc(實(shí)心圓點(diǎn)，默認(rèn))，square(實(shí)心方點(diǎn))，circle(空心圓)

效果如下：

有序列表< ol >，里面的每一項(xiàng)是< li >

<body>
    <ol>
        <li>張三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
</body>

效果：

屬性：

  • type="屬性值"；屬性值可以是：1，a，A，i，I; 結(jié)合start屬性表示從幾開始

定義列表< dl >

dl 沒有屬性。dl的子元素只能是 dt 和 dd

  • dt：列表的標(biāo)題，這個標(biāo)簽是必須的

  • dd：列表的列表項(xiàng)，可以不寫

備注：dt,dd只能在dl里面；dl里面只能有dt,dd

<dl>
 <dt>第一條規(guī)則</dt>
 <dd>不準(zhǔn)睡覺</dd>
 <dd>不準(zhǔn)交頭接耳</dd>
 <dd>不準(zhǔn)下神</dd>

 <dt>第二條規(guī)則</dt>
 <dd>可以泡妞</dd>
 <dd>可以找妹子</dd>
 <dd>可以看mv</dd>
</dl>

效果：

表格標(biāo)簽< table >

表格標(biāo)簽用< table >表示
一個表格<table>是由每行<tr>組成的，每行是由<td>組成的。
所以我們要記住，一個表格是由行組成的（行是由列組成的），而不是由行和列組成的。

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

< table >屬性

  • border：邊框。像素為單位

  • style="border--collapse;collapse;"：單元格的線和表格的邊框合并

  • width：寬度。像素為單位

  • height：高度。像素為單位

  • bordercolor：表格邊框的顏色

  • align：表格的水平方式。屬性值可以填：left right center

    注：這里不是設(shè)置表格里的內(nèi)容的對齊方式，如果想要設(shè)置內(nèi)容的對齊方式，要對單元格標(biāo)簽< td >進(jìn)行設(shè)置

  • cellpadding：單元格內(nèi)容到邊的距離。像素為單位。默認(rèn)情況下，文字是緊挨著左邊那條線的，即默認(rèn)情況下的值為0

  • cellspacing：單元格和單元格之間的距離(外邊距)。像素為單位，默認(rèn)下為0

  • bgcolor=""：表格的背景顏色

  • background="路徑"：背景圖片。背景圖片的優(yōu)先級大于背景顏色

< tr > 行

一個表格就是一行一行組成的

屬性

  • dir：公有屬性，設(shè)置這一行單元格內(nèi)容的排列方式�？梢匀≈担簂tr：從左到右；rtl：從右到左

  • bgcolor：設(shè)置這一行的單元格的背景顏色

  • height：一行的高度

  • align="center"：一行的內(nèi)容水平居中顯示，取值：left，center，right

  • valign="center"：一行的內(nèi)容垂直居中，取值：top，middle，bottom

< td > 單元格

屬性

  • align：內(nèi)容橫向?qū)R方式。屬性值為: left right center

  • valign：內(nèi)容的縱向?qū)R方式。屬性值為: top middle bottom

  • width：絕對值或者相對值(%)

  • height：單元格的高度

  • bgcolor：設(shè)置單元格的背景色

  • background：設(shè)置單元格的背景圖片

單元格的合并

如果要將兩個或多個單元格合并，則就要刪掉其余單元格，只留一個單元格
單元格的屬性：

  • colspan：橫向合并。如colspan="2"表示當(dāng)前單元格在水平方向上要占據(jù)兩個單元格位置

  • rowspan：縱向合并。如rowspan="2"表示當(dāng)前單元格在垂直方向上要占據(jù)兩個單元格位置

< caption > 表格的標(biāo)題。使用時和tr標(biāo)簽并列

效果：

表單標(biāo)簽 < form >

表單標(biāo)簽用< form >表示，用于與服務(wù)器的交互。表單就是收集用戶信息的，就是讓用戶填寫的，選擇的

屬性：

  • name：表單的名稱，用于JS來操作或控制表單時使用

  • id：表單的名稱，用于JS來操作或控制表單時使用

  • action：指定表單數(shù)據(jù)的處理程序，一般是PHP

  • method：表單數(shù)據(jù)的提交方式，一般取值：get(默認(rèn))和 post

action屬性就是表示，表單將提交到哪里。 method屬性表示用什么HTTP方法提交，有g(shù)et、post兩種。

get提交和post提交的區(qū)別：
GET方式：
將表單數(shù)據(jù)，以"name=value"形式追加到action指定的處理程序的后面，兩者間用"?"隔開，每一個表單的"name=value"間用"&"號隔開。
特點(diǎn)：只適合提交少量信息，并且不太安全(不要提交敏感數(shù)據(jù))、提交的數(shù)據(jù)類型只限于ASCII字符。

POST方式：
將表單數(shù)據(jù)直接發(fā)送(隱藏)到action指定的處理程序。POST發(fā)送的數(shù)據(jù)不可見。Action指定的處理程序可以獲取到表單數(shù)據(jù)。
特點(diǎn)：可以提交海量信息，相對來說安全一些，提交的數(shù)據(jù)格式是多樣的(Word、Excel、rar、img)。

Enctype：
表單數(shù)據(jù)的編碼方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。

  • Application/x-www-form-urlencoded：默認(rèn)加密方式，除了上傳文件之外的數(shù)據(jù)都可以

  • Multipart/form-data：上傳附件時，必須使用這種編碼方式。

< input > 輸入標(biāo)簽(文本框)

用于接收用戶輸入

<input type='text' />

屬性：

  • type="text"：文本類型。屬性值可以為：

    • 注：如果要限制上傳文件的類型，需要配合JS來實(shí)現(xiàn)驗(yàn)證，對上傳文件的安全檢查：一是擴(kuò)展名的檢查，二是文件數(shù)據(jù)內(nèi)的檢查

    • text(默認(rèn))：文本類型

    • password：密碼類型

    • radio：單選按鈕，名字相同的按鈕作為一組進(jìn)行單選(單選按鈕，天生不能互斥，如果想要互斥，必須要有相同的name屬性)

    • checkbox：多選按鈕，名字相同的按鈕作為一組進(jìn)行選擇

    • checked：將單選按鈕或多選按鈕默認(rèn)處于選擇狀態(tài)。當(dāng)< input >標(biāo)簽的type="radio"時，可以用這個屬性，屬性值也是checked

    • hidden：隱藏框，在表單中包含不希望用戶看見的信息

    • button：普通按鈕，結(jié)合JS代碼進(jìn)行使用

    • submit：提交按鈕，傳送當(dāng)前表單的數(shù)據(jù)給服務(wù)器或者其他程序處理，這個按鈕不需要寫value自動就會有"提交"文字，點(diǎn)擊按鈕后，這個表單就會被提交到form標(biāo)簽的action屬性中指定的我那個頁面區(qū)

    • reset：重置按鈕，清空當(dāng)前表單的內(nèi)容，并設(shè)置為最初的默認(rèn)值

    • image：圖片按鈕，和提交按鈕的功能完全一致，只不過圖片按鈕可以顯示圖片

    • file：文件選擇框

    • value="內(nèi)容"：文本框里的默認(rèn)內(nèi)容

    • size="50"：表示文本框可以顯示五十個字符，一個英文或一個中文都算一個字符

      注：size屬性值的單位不是像素

    • readonly：文本框只讀，不能編輯。因?yàn)樗膶傩灾凳莚eadonly,所以屬性值可以不寫

    • disabled：文本框只讀，不能編輯。光標(biāo)點(diǎn)不進(jìn)去，屬性值可以不寫

    < select > 下拉列表選項(xiàng)

    < select >標(biāo)簽里面的每一項(xiàng)都用< option >表示，select是"選擇"，option是
    "選項(xiàng)"

    < select >屬性：

    • mutiple：可以對下啦列表中的選項(xiàng)進(jìn)行多選，沒有屬性值

    • size=""：如果屬性值大于 1，則列表為滾動視圖，默認(rèn)屬性值為1，即下拉視圖

    < option >屬性：

    • selected：預(yù)選中。沒有屬性值

        <form>
        <select>
            <option>小學(xué)</option>
            <option>初中</option>
            <option>高中</option>
            <option>大學(xué)</option>
            <option selected="">研究生</option>
        </select>
        <br><br><br>

        <select size="3">
            <option>小學(xué)</option>
            <option>初中</option>
            <option>高中</option>
            <option>大學(xué)</option>
            <option>研究生</option>
        </select>
        <br><br><br>

        <select multiple="">
            <option>小學(xué)</option>
            <option>初中</option>
            <option selected="">高中</option>
            <option selected="">大學(xué)</option>
            <option>研究生</option>
        </select>
        <br><br><br>

    </form>

    效果：

    < textarea > 多行文本輸入框

    text是"文本"，area是"區(qū)域"

    屬性：

    • value：提交給服務(wù)器的值

    • rows=""：指定文本區(qū)域的行數(shù)

    • cols=""：指定文本區(qū)域的列數(shù)

    • readonly：只讀

    <form>
        <textarea name="txtInfo" rows="4" cols="20">路飛學(xué)城</textarea>
</form>

    以上就是HTML body標(biāo)簽中的相關(guān)標(biāo)簽2的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


    網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。