简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > Emmet语法与注册表单课程作业
Blogger Information
Blog 5
fans 0
comment 1
visits 1647
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Emmet语法与注册表单课程作业
张金明学PHP
Original
239 people have browsed it

Emmet语法 与 注册表单课程作业

通过今天的学习,我学到了以下内容

1. Emmet 语法

  1. 1:创建html5 结构使用 ! 2:创建文本 h3.title{hello 张金明} 对应的文本是:
  2. <h3 class="titte">hello 张金明</h3>
  3. 3:创建带有属性的文本 属性处用[]括住后填写在里面 举例:h3[title]{hello 张金明}
  4. 对应的文本是:
  5. <h3 class="title">hello 张金明</h3>
  6. 4:高频属性:id class的写法 实例:id="hello 张金明" === [id="hello 张金明"] ===
  7. #hello 张金明 class="hello 张金明" === [class="hello 张金明"]=== .hello 张金明
  8. 5:重复内容 使用* 举例: tr*3 得出
  9. <tr></tr>
  10. <tr></tr>
  11. <tr></tr>
  12. 加上内容:tr*3{hello 张金明} 得出
  13. <tr>
  14.   hello 张金明
  15. </tr>
  16. <tr>
  17.   hello 张金明
  18. </tr>
  19. <tr>
  20.   hello 张金明
  21. </tr>
  22. 6:写个导航 举例:ul.nav>li.time*2>a{张金明} 得出
  23. <ul class="nav">
  24.   <li class="time"><a href="">张金明</a></li>
  25.   <li class="time"><a href="">张金明</a></li>
  26. </ul>

2.注册表单

  1. 1.form.method方式为设置提交方式,默认为get类型,常规情况下带有账号密码及敏感数据的,需使用post类型.
  2. 2.form.action 意思是提交给服务器处理的数据脚本文件.
  3. 3.如果想实现点击表单外的文字,鼠标光标能自动跳到输入框内,需要绑定fro的id,具体写法为在input内增加id=""属性,且id属性需要与for内的属性一致.
  4. 其中autofocus 设置在谁的后面,就是意味着当网页刷新后光标自动落到那一行.
  5. 4.在input.type中 -账号输入 `text`为明文输入; 示例:
  6. <div class="username">
  7.   <label for="uname">用户名:</label>
  8.   <input
  9.     type="test"
  10.     id="uname"
  11.     name="uname"
  12.     placeholder="大写+小写+数字的8位组合"
  13.     autofocus
  14.   />
  15. </div>
  17. -密码输入 `password`为密文输入; 示例:
  18. <div class="psw">
  19.   <label for="psw">密码:</label>
  20.   <input type="password" id="psw" name="password" />
  21. </div>
  23. -邮箱输入 `email`为邮箱(验证); 示例:
  24. <div class="email">
  25.   <label for="email">邮箱:</label>
  26.   <input type="email" id="email" email="email" placeholder="user@126.com" />
  27. </div>
  29. -日期输入 `date`为日期控件;
  30. <div class="birthday">
  31.   <label for="bir">生日</label>
  32.   <input
  33.     type="date"
  34.     id="sbirthday"
  35.     name="birthday"
  36.     value="2008-10-08"
  37.     min="2007-08-09"
  38.     max="2023-08-08"
  39.   />
  40. </div>
  42. -数字输入 `number`为数字输入; `min`为最小数字限制;
  43. `max`为最大数字限制;`value`默认值; 示例:
  44. <div class="age">
  45.   <label for="age">年龄:</label>
  46.   <input type="number" id="age" name="age" min="18" max="80" value="19" />岁
  47. </div>
  49. -单选框 `radio`为单选框属性; `checked`
  50. 为单选框中的默认选中属性在`input.type.radio`中
  51. `name`属性是提交到服务器上的变量名,只有全部相同,才能保证单选按钮属性的唯一性.
  52. 示例:
  53. <div class="sex">
  54.   <label for="male">性别:</label>
  55.   <input type="radio" name="sex" value="male" id="male" /><label for="male"
  56.     >男</label
  57.   >
  58.   <input type="radio" name="sex" value="famale" id="famale" /><label
  59.     for="famale"
  60.     >女</label
  61.   ><input type="radio" name="sex" value="bm" id="bm" checked /><label
  62.     for="famale"
  63.     >保密</label
  64.   >
  65. </div>
  67. -多选框 `checkbox`为多选框属性 在`input.type.checkbox`中
  68. name属性可以相同,但需加[]数组标识符号,不然传输到服务器上就是只有一个属性. 示例:
  69. <div class="hobby">
  70.   <label>爱好</label>
  71.   <input
  72.     checked
  73.     type="checkbox"
  74.     name="hobby[]"
  75.     value="lvyou"
  76.     id="lvyou"
  77.   /><label for="lvyou">旅游</label>
  78.   <input type="checkbox" name="hobby[]" value="dushu" id="dushu" /><label
  79.     for="dushu"
  80.     >读书</label
  81.   >
  82.   <input type="checkbox" name="hobby[]" value="banzhuan" id="banzhuan" /><label
  83.     for="banzhuan"
  84.     >搬砖</label
  85.   >
  86. </div>
  88. -下拉列表 `edu`为下拉列表属性 `option`为下来列表属性值 `selected`是下拉列表中的默认选择项;`disabled`是下拉列表中的禁用属性
  89. 示例:
  90. <div class="edu">
  91.           <label for="">学历</label>
  92.           <select name="edu" id="">
  93.             <option value="" selected disabled>请选择就读学校</option></option>
  94.             <option value="1">张庄小学</option></option>
  95.             <option value="2">南顿四中</option></option>
  96.             <option value="3">项城二高</option></option>
  97.           </select>
  98.         </div>

3.注册表单作业

  • 作业源码
  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>用户注册</title>
  8.   </head>
  9.   <body>
  10.     <form action="zhuc.php" method="post">
  11.       <fieldset style="display: inline-grid; gap: 1em">
  12.         <legend>新用户注册</legend>
  13.         <div class="username">
  14.           <label for="uname">用户名:</label
  15.           ><input
  16.             type="test"
  17.             id="uname"
  18.             name="uname"
  19.             placeholder="大写+小写+数字的8位组合"
  20.             autofocus
  21.           />
  22.         </div>
  23.         <div class="email">
  24.           <label for="email">邮箱:</label>
  25.           <input
  26.             type="email"
  27.             id="email"
  28.             email="email"
  29.             placeholder="user@126.com"
  30.           />
  31.         </div>
  32.         <div class="psw">
  33.           <label for="psw">密码:</label>
  34.           <input type="password" id="psw" name="password" />
  35.         </div>
  36.         <div class="age">
  37.           <label for="age">年龄:</label>
  38.           <input
  39.             type="number"
  40.             id="age"
  41.             name="age"
  42.             min="18"
  43.             max="80"
  44.             value="19"
  45.           />岁
  46.         </div>
  47.         <div class="birthday">
  48.           <label for="bir">生日</label>
  49.           <input
  50.             type="date"
  51.             id="sbirthday"
  52.             name="birthday"
  53.             value="2008-10-08"
  54.             min="2007-08-09"
  55.             max="2023-08-08"
  56.           />
  57.         </div>
  58.         <div class="sex">
  59.           <label for="male">性别:</label>
  60.           <input type="radio" name="sex" value="male" id="male" /><label
  61.             for="male"
  62.             >男</label
  63.           >
  64.           <input type="radio" name="sex" value="famale" id="famale" /><label
  65.             for="famale"
  66.             >女</label
  67.           ><input type="radio" name="sex" value="bm" id="bm" checked /><label
  68.             for="famale"
  69.             >保密</label
  70.           >
  71.         </div>
  72.         <div class="hobby">
  73.           <label>爱好</label>
  74.           <input
  75.             checked
  76.             type="checkbox"
  77.             name="hobby[]"
  78.             value="lvyou"
  79.             id="lvyou"
  80.           /><label for="lvyou">旅游</label>
  81.           <input
  82.             type="checkbox"
  83.             name="hobby[]"
  84.             value="dushu"
  85.             id="dushu"
  86.           /><label for="dushu">读书</label>
  87.           <input
  88.             type="checkbox"
  89.             name="hobby[]"
  90.             value="banzhuan"
  91.             id="banzhuan"
  92.           /><label for="banzhuan">搬砖</label>
  93.           <!-- <input type="checkbox" name="hobby" value="lvyou" id="lsvyou"><label for="lvyou">旅游</label> -->
  94.         </div>
  95.         <div class="edu">
  96.           <label for="">学历</label>
  97.           <select name="edu" id="">
  98.             <option value="" selected disabled>请选择就读学校</option></option>
  99.             <option value="1">张庄小学</option></option>
  100.             <option value="2">南顿四中</option></option>
  101.             <option value="3">项城二高</option></option>
  102.           </select>
  103.         </div>
  104.         <button>提交注册</button>
  105.       </fieldset>
  106.     </form>
  107.   </body>
  108. </html>
  • 作业效果图

作业出处:张金明的 blog

今日心情:店里的门头被我接错变压器 烧掉了,等待换货中~
今日天气:大风吹
授业老师:PHP 中文网:朱老师

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！