html中的列表和表單元素

web.jpeg

列表

無序列表ul

  • 無序列表：用來表示一個(gè)列表的語義，并且每一個(gè)項(xiàng)目和項(xiàng)目之間是不分先后的
  • ul: unordered list 無序列表
  • li: list item 列表項(xiàng)
  • 無序列表是一組標(biāo)簽
  • li 標(biāo)簽是容器級(jí)標(biāo)簽，可以嵌套任何標(biāo)簽 
  <h3> 中國的城市</h3>
    <!-- 無序列表 -->
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>深圳</li>
        <li>廣州</li>
        <li>鄭州</li>
    </ul>


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

有序列表

  • 有序列表
 <ol>
        <li>我愛你中國</li>
        <li>月亮</li>
        <li>中國風(fēng)</li>
        <li>歌曲</li>
        <li>問月</li>
    </ol>
無序列表.jpg

自定義列表

  • 定義列表也是一組標(biāo)簽
  • dl 表示definition list 定義列表
  • dt表示definition title 定義標(biāo)題
  • dd表示definition description 定義表述詞兒,就是對(duì)標(biāo)題的描述 dt
    • 對(duì)dt的解釋描述，可以是多個(gè)dd 

<dl>
        <dt>北京</dt>
        <dd>國家首都，政治文化中心</dd>
        <dt>上海</dt>
        <dd>經(jīng)濟(jì)發(fā)展中心</dd>
        <dt>深圳</dt>
        <dd>經(jīng)濟(jì)特區(qū)</dd>
        <dt>鄭州</dt>
        <dd>中原經(jīng)濟(jì)</dd>
    </dl>
  • 多個(gè)dd對(duì)dt標(biāo)題的描述
<h4>自定義列表</h4>
    <dl>
        <dt>關(guān)于掠食龍</dt>
        <dd>了解掠食龍</dd>
        <dd>加入掠食龍</dd>
        <dd>聯(lián)系我們</dd>
    </dl>

比較常用的就是ul和dl列表

form表單域

  • 常用的屬性

form是一個(gè)表單的區(qū)域，在網(wǎng)頁上是不可見的，在網(wǎng)頁上顯示的事 表單元素
action：對(duì)應(yīng)的值是URL，提交表單到何處
method：post和get，設(shè)置表單一何種方式提交到服務(wù)器
1.get:一般是獲取數(shù)據(jù)，保密性較差
2.post:一般用于提交數(shù)據(jù)，作為請(qǐng)求體的部分提交到服務(wù)器
name：表單的名稱
target：對(duì)應(yīng)的值_blank,_self,_parent,_top，在何處打開action URL
enctype：application/x-www-form-urlencoded,text/plain,multipart/form-data ,在發(fā)送表單數(shù)據(jù)之前指定的編碼方式

表單控件
  • type對(duì)應(yīng)的類型，決定這個(gè)控件是什么
  • 輸入框text

name是控件的名稱，在提交表單到服務(wù)器的時(shí)候會(huì)用到
placeholder 暫未屬性

<input type="text" name="username" maxlength="30" placeholder="請(qǐng)輸入姓名">
  • password密碼框
<input type="password" name="pwd" placeholder="請(qǐng)輸入密碼">
  • email 郵箱
<input type="email" name="email" ">
  • file文件域

multiple 屬性可以選擇多個(gè)文件

<input type="file" name="file">
  • radio單選框

name屬性是控件的名稱，同時(shí)也是保持 單選框的唯一性
checked默認(rèn)選中的狀態(tài)

<input type="radio" name="sex" value="man"> 男 
<input type="radio" name="sex" value="woman"> 女
<input type="radio" name="sex" value="bm" checked> 保密
  • checkbox多選框
<input type="checkbox" name="checkbox" value="read"> 讀書 
<input type="checkbox" name="checkbox" value="xeuxi"> 學(xué)習(xí)
<input type="checkbox" name="checkbox" value="ios"> 代碼
  • select下拉列表

selected默認(rèn)中的
multiple屬性多選
size屬性 是在界面上顯示幾個(gè)

 <select name="select" id=""  >
                        <!-- selected是默認(rèn)選擇狀態(tài) -->
                        <option value="qing" selected>請(qǐng)選擇</option>
                        <option value="beijing" >北京</option>
                        <option value="shanghai">上海</option>
                        <option value="henan">河南</option>
   </select>

也可以是分組 optgroup

 <!--  下拉列表 分組 多項(xiàng)選擇 -->
    <select name="" id="">
        <optgroup label="華北">
            <option value="bejing">北京</option>
            <option value="bejing">河北</option>
            <option value="bejing">東北</option>
        </optgroup>
        <optgroup label="華東">
            <option value="shanghai">上海</option>
            <option value="bejing">南京</option>
            <option value="bejing">浙江</option>
        </optgroup>
    </select>
  • image 圖像域按鈕
  <!-- 圖像域 -->
  <input type="image" name="img_button" src="../images/H5/10.jpeg">
  • hidden 隱藏域
<!-- 隱藏域  在提交到服務(wù)器的時(shí)候 這個(gè)消息就會(huì)傳給服務(wù)器-->
<input type="hidden" name="hidden" value="這是注冊(cè)信息">
  • textarea 文本域
 <textarea name="textarea" id="" cols="30" rows="10" placeholder="請(qǐng)輸入"></textarea>

label標(biāo)簽和input控件結(jié)合使用，在點(diǎn)擊文字的時(shí)候，稱為第一響應(yīng)者
for屬性 和 input的id綁定

  <label for="123">車大家:<input id="123" type="text" value="測試好幾十"></label>
image.png
 <h2 align="center">注冊(cè)信息</h2>
    <hr color="#336699">
    <form action="action.php" method="GET" name="register">
        <table align="center" width="600px" bgcolor ="f2f2f2">
            <tr>
                <td>姓名:</td>
                <td><input type="text" name="username" maxlength="30" placeholder="請(qǐng)輸入姓名"></td>
            </tr>
            <tr>
                <td>郵箱:</td>
                <td><input type="email" name="email" value="@163.com"></td>
            </tr>
            <tr>
                <td>密碼:</td>
                <td><input type="password" name="pwd" placeholder="請(qǐng)輸入密碼"></td>
            </tr>
            <tr>
                <td>上傳照片:</td>
                <td><input type="file" name="file" multiple></td>
            </tr>
            <tr>
                <td>性別:</td>
                <!-- 在單選框中name屬性相同 是互斥的 就是選擇唯一性 checked默認(rèn)選中的狀態(tài) -->
                <!-- value在單選框中 被選中的時(shí)候，就講value的值 傳到服務(wù)器上-->
                <td><input type="radio" name="sex" value="man"> 男 <input type="radio" name="sex" value="woman"> 女 <input type="radio" name="sex" value="bm" checked> 保密</td>
            </tr>
            <tr>
                <!-- 多選 -->
                <td>愛好:</td>
                <!-- 多選中的value值 在被選中的時(shí)候，也是提交到 服務(wù)器上的，說明你選中了什么 -->
                <!-- name屬性值盡量相同 這樣在提交到服務(wù)時(shí)，可以根據(jù)name的值 判斷 -->
                <td><input type="checkbox" name="checkbox" value="read"> 讀書 <input type="checkbox" name="checkbox" value="xeuxi"> 學(xué)習(xí) <input type="checkbox" name="checkbox" value="ios"> 代碼</td>
            </tr>
            <tr>
                <td>城市:</td>
                <td>
                    <!-- size屬性 是在界面上顯示幾個(gè) -->
                    <!-- multiple屬性 在下拉菜單 是多項(xiàng)祖選擇 -->
                    <select name="select" id=""  >
                        <!-- selected是默認(rèn)選擇狀態(tài) -->
                        <option value="qing" selected>請(qǐng)選擇</option>
                        <option value="beijing" >北京</option>
                        <option value="shanghai">上海</option>
                        <option value="henan">河南</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" value="button按鈕">  <input type="submit" > <input type="reset">
                     <!-- 圖像域 -->
                    <input type="image" name="img_button" src="../images/H5/10.jpeg">
                    <!-- 隱藏域  在提交到服務(wù)器的時(shí)候 這個(gè)消息就會(huì)傳給服務(wù)器-->
                    <input type="hidden" name="hidden" value="這是注冊(cè)信息">
                </td>
            </tr>

        </table>
       
    </form>

在form表單域里面 使用了table 主要是設(shè)計(jì)到大量的數(shù)據(jù)處理 方便

WX20190708-112042.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1. 列表標(biāo)簽（重點(diǎn)） 學(xué)習(xí)目標(biāo) 理解無序列表的應(yīng)用場景自定義列表的應(yīng)用場景 應(yīng)用無序列表語法自定義列表語法 問？...
    jovelin閱讀 1,321評(píng)論 0贊 0
  • 第一章 1、使用瀏覽器去訪問的程序，叫網(wǎng)頁 2、web代碼存放在服務(wù)器 代碼分為兩種：① 運(yùn)行在瀏覽器端：前端代...
    fastwe閱讀 3,570評(píng)論 0贊 2
  • 一，有序列表、無序列表、自定義列表如何使用？寫個(gè)簡單的例子。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）？...
    kingBirds閱讀 898評(píng)論 0贊 0
  • html是什么：超文本標(biāo)記語言 html的唯一作用就是：給指定的文本添加語義。 html的標(biāo)準(zhǔn)格式： <!DOCT...
    Lins7閱讀 1,082評(píng)論 0贊 2
  • 0.B/S結(jié)構(gòu) 瀏覽器服務(wù)器模式,web瀏覽器是客戶端最主要的應(yīng)用軟件.將客戶端使用web進(jìn)行統(tǒng)一,系統(tǒng)功能實(shí)現(xiàn)集...
    liusong007閱讀 1,203評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容