亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 12
粉絲 0
評(píng)論 0
訪問(wèn)量 10379
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
第三課:在編寫(xiě)簡(jiǎn)單的表單的過(guò)程上體驗(yàn)emmet
屈世明
原創(chuàng)
761人瀏覽過(guò)

今天主要學(xué)習(xí)的是emmet的使用和簡(jiǎn)單表單的制作,下課后主要思考點(diǎn)是,如何用emmet快速來(lái)寫(xiě)出一個(gè)表單代碼來(lái),成品效果如下:

表單成品

基本代碼如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>用戶(hù)注冊(cè)</title>
  8.   </head>
  9.   <body>
  10.     <!-- action屬性:處理腳本 method:提交方式, -->
  12.     <form action="register.php" method="post">
  13.       <!-- 表單控件分組 -->
  14.       <fieldset style="display: grid; grid-gap: 1em">
  15.         <legend>用戶(hù)注冊(cè)</legend>
  16.         <br />
  17.         <div class="uname">
  18.           <label for="uname">用戶(hù)名:</label>
  19.           <input
  20.             id="uname"
  21.             type="text"
  22.             name="uname"
  23.             placeholder="用戶(hù)名不得含有特殊字符,總長(zhǎng)度不少于6位"
  24.             autofocus
  25.             required
  26.           />
  27.         </div>
  29.         <div class="psw">
  30.           <label for="psw">密碼:</label>
  31.           <input
  32.             id="psw"
  33.             type="password"
  34.             name="psw"
  35.             placeholder="密碼不少于6位,不得包括特殊字符"
  36.             required
  37.           />
  38.         </div>
  40.         <div class="email">
  41.           <label for="myEmail">郵箱:</label>
  42.           <input
  43.             type="email"
  44.             name="myEmail"
  45.             id="myEmail"
  46.             placeholder="請(qǐng)輸入正確的郵箱"
  47.           />
  48.         </div>
  50.         <div class="birthday">
  51.           <label for="birthday">生日:</label>
  52.           <input
  53.             id="birthday"
  54.             value="2022-01-01"
  55.             min="2020-01-01"
  56.             type="date"
  57.           />
  58.         </div>
  60.         <div class="sex">
  61.           <label for="male3">性別</label>
  62.           <input type="radio" name="sex" id="male" value="male" /><label for="male">男</label>
  63.           <input type="radio" name="sex" id="famale" value="famale" /><label for="famale">女</label>
  64.           <input type="radio" name="sex" id="secret" value="secret" checked /><label for="secret">保密</label>
  65.         </div>
  67.         <div class="hobby">
  68.           <label for="">愛(ài)好:</label>
  69.           <input type="checkbox" name="hobby[]" value="yuwen" id="yuwen" /><label for="yuwen">語(yǔ)文</label>
  70.           <input type="checkbox" name="hobby[]" value="shuxue" id="shuxue" /><label for="shuxue">數(shù)學(xué)</label>
  71.           <input type="checkbox" name="hobby[]" value="yingyu" id="yingyu" /><label for="yingyu">英語(yǔ)</label>
  72.         </div>
  74.         <div class="edu">
  75.           <label for="">學(xué)歷:</label>
  76.           <!-- 下拉列表,從一組預(yù)置的值選擇一個(gè)或多個(gè)值 -->
  77.           <!-- 變量的名與值不在同個(gè)元素上,name設(shè)置以select上,value設(shè)置在option上 -->
  78.           <select name="edu" id="">
  79.             <option value="" selected disabled>請(qǐng)選擇</option>
  80.             <option value="1">中學(xué)</option>
  81.             <option value="2">高中</option>
  82.             <option value="3">大學(xué)</option>
  83.           </select>
  84.         </div>
  86.         <button style="width:100px">提交</button>
  87.       </fieldset>
  88.     </form>
  89.   </body>
  90. </html>

除了這些基本代碼,我關(guān)注的是如何才能寫(xiě)的更快,更對(duì),比如在對(duì)sex這一功能的代碼上,最終代碼要求如下:

  1.         <div class="sex">
  2.           <label for="male3">性別</label>
  3.           <input type="radio" name="sex" id="male" value="male" /><label for="male">男</label>
  4.           <input type="radio" name="sex" id="famale" value="famale" /><label for="famale">女</label>
  5.           <input type="radio" name="sex" id="secret" value="secret" checked /><label for="secret">保密</label>
  6.         </div>

三種Emmet寫(xiě)法比較:

1.一步到位:直接輸入下面的代碼

  1. .sex>label+(inp[type="radio"][name="sex"][value=""][id=""]+label{item})*3

生成的代碼沒(méi)有問(wèn)題,但我生成的代碼是一長(zhǎng)長(zhǎng)的行,導(dǎo)致后面的編輯特別困難,所以,放棄.

2.分成兩批,第一隊(duì)先生成div和label,第二步用input:radio+label生成單獨(dú)的radio項(xiàng),之后通過(guò)復(fù)制行或多重選擇操作,相應(yīng)代碼和快捷鍵如下:

  1. .sex>label
  2. input:radio+label{item}

快速?gòu)?fù)制行:shift+alt+上/下
多重選擇,用alt+單擊
整體感覺(jué)比上一個(gè)好很多,但還是覺(jué)得亂.

3.分成三批,第一層,先div,其次再label,最后再單獨(dú)兩次分別生成input和label,相應(yīng)代碼如下:

  1. .sex
  2. label
  3. inp
  4. radio{男}

最后相比較,還是最后一個(gè)看上去步驟多,但寫(xiě)出來(lái)的代碼既清楚,手寫(xiě)的代碼量也最少.

有些時(shí)候也許最簡(jiǎn)單的反而更快.

本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
作者最新博文
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)