实战简单的注册表单以及选择器的认识

简单的注册表单实战

第一步创建一个html文件，确定我们需要的注册内容

这里以常用的注册用户名 注册密码 注册邮箱 注册性别 兴趣爱好 为例

1，首先创建一个基础的框架fieldset：

图示：

代码实现：

  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.     <fieldset>
  11.       <legend>用户注册表单</legend>
  12.       <div>注册用户名</div>
  13.       <div>注册密码</div>
  14.       <div>注册邮箱</div>
  15.       <div>注册性别</div>
  16.       <div>兴趣爱好</div>
  17.     </fieldset>
  18.   </body>
  19. </html>
2，利用label+input控件实现每一项的功能

其中input的type属性对输入的内容会有一些预设的值
比如注册用户名我们只需要用到默认的text文本值，而密码需要用的是password内置值，邮箱需要用到email内置值，不同的type内置值可以参考html手册

图示：

代码实现：

  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.     <fieldset>
  11.       <legend>用户注册表单</legend>
  12.       <div>
  13.         <label for="name">注册用户名：<input type="text" /></label>
  14.       </div>
  15.       <div>
  16.         <label for="password">注册密码：<input type="password" /></label>
  17.       </div>
  18.       <div>
  19.         <label for="email">注册邮箱：<input type="email" /></label>
  20.       </div>
  21.       <div>
  22.         <label for="sex">注册性别：<input type="radio" /></label>
  23.       </div>
  24.       <div>
  25.         <label for="love">兴趣爱好：<input type="checkbox" /></label>
  26.       </div>
  27.     </fieldset>
  28.   </body>
  29. </html>

这个样子看着是比较丑，我们在通过各种内置属性修改美化一下，大家可以参考一下html手册
我这里修改的最终版是这样的，加了两个按钮就更像样了。
图示：

代码实现：

  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>Document</title>
  8.   </head>
  9.   <body>
  10.     <fieldset>
  11.       <legend>用户注册</legend>
  12.       <form action="#" method="get">
  13.         <div>
  14.           <label for="name"
  15.             >注册用户：<input
  16.               type="text"
  17.               name="name"
  18.               id="name"
  19.               autofocus
  20.               required
  21.               placeholder="请输入用户名" /></label
  22.           ><br />
  23.           <label for="password"
  24.             >注册密码：
  25.             <input
  26.               type="password"
  27.               name="password"
  28.               id="password"
  29.               required
  30.               placeholder="请输入密码" /></label
  31.           ><br />
  32.           <label for="email"
  33.             >注册邮箱：
  34.             <input
  35.               type="email"
  36.               name="email"
  37.               id="email"
  38.               placeholder="joa@qq.com"
  39.             /> </label
  40.           ><br />
  41.           <label for="whatmen"
  42.             >身份性别： <input type="radio" name="xb" id="men" />男
  43.             <input type="radio" name="xb" id="women" />女
  44.             <input type="radio" name="xb" id="whatmen" checked />保密 </label
  45.           ><br />
  46.           <label for="love"
  47.             >兴趣爱好:
  48.             <input type="checkbox" name="love" id="game" checked />游戏
  49.             <input type="checkbox" name="love" id="lookmov" checked />看电影
  50.             <input type="checkbox" name="love" id="ganfanr" />吃饭人
  51.             <input type="checkbox" name="love" id="gogogo" />跑步 </label
  52.           ><br />
  53.           <button>注册</button>
  54.           <button>登录</button>
  55.         </div>
  56.       </form>
  57.     </fieldset>
  58.   </body>
  59. </html>

选择器的简单认识

基础选择器

1.标签选择器

利用标签选择器选择li标签的内容并更改背景色

图示：

代码实现：

  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>Document</title>
  8.   </head>
  9.   <style>
  10.     li {
  11.       background-color: blue; /*利用标签选择器选择Li标签并添加背景色蓝色*/
  12.     }
  13.   </style>
  14.   <body>
  15.     <ul>
  16.       <div>这是未选中的div标签内容</div>
  17.       <li>这是选中的Li标签内容</li>
  18.       <li>这是选中的Li标签内容</li>
  19.       <li>这是选中的Li标签内容</li>
  20.     </ul>
  21.   </body>
  22. </html>

2.元素选择器

利用元素选择器选择ID为xzid的li标签并更改背景色为红色，利用元素选择器选择class为xzclass的li标签并更改背景色为绿色

图示

代码实现：

  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>Document</title>
  8.   </head>
  9.   <style>
  10.     li[id="xzid"] {
  11.       background-color: red; /*利用元素选择器选择ID为`xzid`的li标签并更改背景色为红色*/
  12.     }
  13.     /* 或者
  14.     li#xzid{
  15.         background-color: red;
  17.     } */
  18.     li[class="xzclass"] {
  19.       background-color: green; /*利用元素选择器选择class为`xzclass`的li标签并更改背景色为绿色*/
  20.     }
  21.     /* 或者
  22.     li.class{
  23.         background-color: green;
  24.     }*/
  25.   </style>
  26.   <body>
  27.     <ul>
  28.       <li id="xzid">这是选中ID为'xzid'的Li标签内容</li>
  29.       <li id="bxzid">这是未选中ID为‘buzid’的Li标签内容</li>
  30.       <li class="xzclass">这是选中CLASS为'xzclass'的Li标签内容</li>
  31.       <li class="bxzclass">这是未选中class为'bxzclass'的li标签内容</li>
  32.     </ul>
  33.   </body>
  34. </html>
!注意：优先级排序为ID>class>tag

上下文选择器

1.后代选择器空格（选中所有ul标签的子孙后代）
图示：

代码示例：

  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>Document</title>
  8.   </head>
  9.   <style>
  10.     ul li {
  11.       background-color: greenyellow; /*后代选择器，选择所有ul标签的后代并更改背景色为浅绿色*/
  12.     }
  13.   </style>
  14.   <body>
  15.     <ul>
  16.       <li>后代儿子</li>
  17.       <li>
  18.         后代儿子
  19.         <ul>
  20.           <li>后代孙子</li>
  21.           <li>后代孙子</li>
  22.           <li>后代孙子</li>
  23.         </ul>
  24.       </li>
  25.       <li>后代儿子</li>
  26.     </ul>
  27.   </body>
  28. </html>

2，子选择器>(选中所有ul标签的儿子不选中孙子级别)
图示：

代码实现：

  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>Document</title>
  8.   </head>
  9.   <style>
  10.     ul li {
  11.       background-color: indianred; /*后代选择器，选择所有ul标签的后代并更改背景色为粉色*/
  12.     }
  13.     body > ul > li {
  14.       background-color: yellow; /*子选择器，选择ul标签的子代标签并更改背景色为黄色*/
  15.     }
  16.   </style>
  17.   <body>
  18.     <ul>
  19.       <li>后代儿子</li>
  20.       <li>
  21.         后代儿子
  22.         <ul>
  23.           <li>后代孙子</li>
  24.           <li>后代孙子</li>
  25.           <li>后代孙子</li>
  26.         </ul>
  27.       </li>
  28.       <li>后代儿子</li>
  29.     </ul>
  30.   </body>
  31. </html>

3.同级相邻选择器+(选择与class属性为class的标签相邻的一个标签)
图示:

代码实现：

  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>Document</title>
  8.   </head>
  9.   <style>
  10.     .class + li {
  11.       background-color: yellowgreen;
  12.     }
  13.   </style>
  14.   <body>
  15.     <ul>
  16.       <li>后代儿子</li>
  17.       <li>后代儿子</li>
  19.       <li>后代儿子</li>
  20.       <li class="class">选择属性的标签</li>
  21.       <li>相邻的标签</li>
  23.       <li>后代儿子</li>
  24.     </ul>
  25.   </body>
  26. </html>

4.同级所有选择器~(选择与class属性为class的标签相邻同级的素有标签)
图示：

代码实现：

  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>Document</title>
  8.   </head>
  9.   <style>
  10.     .class ~ li {
  11.       background-color: yellowgreen;
  12.     }
  13.   </style>
  14.   <body>
  15.     <ul>
  16.       <li>后代儿子</li>
  17.       <li>后代儿子</li>
  19.       <li>后代儿子</li>
  20.       <li class="class">选择属性的标签</li>
  21.       <li>相邻的所有标签</li>
  23.       <li>相邻的所有标签</li>
  24.     </ul>
  25.   </body>
  26. </html>

> 文章的一些细节没有进行描述，标签元素参考html手册不懂的可以留言，我会了解后给你解释的喔~joa，天天爱学习。

更多相关文章

  1. HTML表格标签及合并行列使用
  2. 表格标签使用
  3. 第二天 HTML标签与属性
  4. xml标签库标签-Request类-链式操作-博客实战分类搜索
  5. 值与引用传递，模板字面量与标签函数，解构赋值，对象字面量的简化，bind
  6. 【ThinkPHP框架】tp的视图标签、request请求、数据库链式查询等
  7. Thinkphp6 下载安装视图组件-增删改查-预习视图标签
  8. a.img.table标签用法
  9. html标签01

随机推荐

  1. Android(安卓)抽屉效果的导航菜单实现
  2. 华硕 Eee Pad Transformer 3G 版本台湾地
  3. Android省电策略
  4. [android] HttpURLConnection的初步学习
  5. android关于使用哪个版本开发的讨论
  6. Android状态栏和虚拟导航栏的适配总结
  7. [Android]Android SDK 2.3与Eclipse最新
  8. 自定义Seekbar拖动条式样
  9. Android(安卓)实例-个人理财工具 之一 启
  10. Android(安卓)Studio Jni 开发