Emmet插件 & HTML表單

1. Emmet 語法

Emmet: 快速編寫 html 文檔的神器(VSCode 內(nèi)置插件)

用法:

指令 + Tab
指令之間不能空格
語法借鑒了 CSS 選擇器

結(jié)構(gòu): !
內(nèi)容:{text}
屬性:[attr],#id,.class
重復(fù): *
父子: >
兄弟: +
父級: ^
分組: (emmet)
序號: $,$@,$@-n

2. 表單

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
      <form action="" method="post"></form>
      <fieldset style="display: inline-grid; gap: 1em">
        <div class="username">
        <label for="uname">用戶名：</label>
        <input type="text" id="uname" name="uname" value="" placeholder="please input your name" autofocus required />
    </div>
      <div class="email">
        <label for="email">email:</label>
        <input type="email" name="email" id="email" placeholder="xxx@email.com" />
      </div>
      <div class="paw">
        <lable>密碼：</lable>
        <input type="password" name="" id="" />
      </div>
      <div>
        <label for="">學(xué)號：</label>
      <input type="number" name="" id="">
      </div>
      <div>
      <!-- 注意時間 一定要8位  1982-01-01 -->
      <label for="">出生年月日：</label>
      <input type="date" name="" id="">
    </div>
    <div>
        <label for="">性別：</label>
        <input type="radio" name="sex" id="male" value="male" checked /><label for="male">男</label>
        <input type="radio" name="sex" id="fmale" value="fmale" /><label for="fmale">女</label>
        <!-- 復(fù)選框的情況下 name不可以相同，否則只會想radio 值會被覆蓋只返回一個值 -->
    </div>
    <div class="hobby">
        <label for="">愛好：</label>
        <input type="checkbox" name="hobby[]" id="shoot" value="shoot" /><label for="shoot">攝影</label>
        <input type="checkbox" name="hobby[]" id="game" value="game" /><label for="game">游戲</label>
    </div>
    <div class="edu">
        <label for="">學(xué)歷：</label>
        <select name="" id="">
            <option value="" selected disabled>please select</option>
        <option value="1">幼兒園</option>
        <option value="2">小學(xué)</option>
        <option value="3">初中</option>
    </select>
    </div>
    <button>提交</button>
    </fieldset>
  </body>
</html>

批改老師：

PHPz

批改狀態(tài)：合格

老師批語：沒什么問題

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

VSCODE 常用插件及配置

2023-03-11 14:06:39

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

Emmet插件 & HTML表單

1. Emmet 語法

2. 表單