用户注册表单以及选择器权重与上下文选择器

一、from 用户注册表单

  • 用户注册表单效果图

实例演示 from 用户注册表单

  • 代码语言
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>
  10.   <body>
  11.     <h2 class="ye">用户注册</h2>
  13.     <!-- http://127.0.0.1:5500/0922/tijiaofuwuqi.php =POST -->
  14.     <!-- http://127.0.0.1:5500/0922/dome.html?username=  GET -->
  16.     <!-- 表单form用户注册 -->
  17.     <form action="tijiaofuwuqi.php" method="POST">
  18.       <!-- <fieldset></fieldset> 给表单元素周围加个边框 -->
  19.       <fieldset>
  20.         <legend style="text-align: center">必填项</legend>
  21.         <!-- 单行文本 -->
  22.         <!-- 绑定账号标签 -->
  23.         <div>
  24.           <label for="username"> 账号：</label>
  25.           <!-- 文本框 -->
  26.           <!-- *绑定ID -->
  27.           <input
  28.             type="text"
  29.             id="username"
  30.             name="username"
  31.             placeholder="不超过8位"
  32.             required
  33.             autofocus
  34.             value="1827673"
  35.           />
  36.         </div>
  37.         <div>
  38.           <label for="password"> 密码：</label>
  39.           <input
  40.             type="password"
  41.             id="passtword"
  42.             name="password"
  43.             placeholder="不超过8位"
  44.             required
  45.           />
  46.           <!-- 显示密码 -->
  47.           <!-- <button type="button" onclick="document.querySelector('#password').type='text'">显示密码</button> -->
  48.           <!-- 按钮 -->
  49.         </div>
  50.         <div>
  51.           <label for="email"> 邮箱：</label>
  52.           <input
  53.             type="email"
  54.             id="email"
  55.             name="email"
  56.             placeholder="demo@email.com"
  57.             required
  58.           />
  59.         </div>
  60.       </fieldset>
  62.       <!-- 单选按钮 -->
  63.       <div>
  64.         <label for="secret">性别</label>
  65.         <!-- 单选按钮中的name属性，必须全部一样，才能保证返回唯一值 -->
  66.         <input type="radio" name="gender" id="male" value="male" /><label
  67.           for="male"
  68.           >男</label
  69.         >
  70.         <input type="radio" name="gender" id="female" value="female" /><label
  71.           for="female"
  72.           >女</label
  73.         >
  74.         <!-- checked布尔属性，不需要值，只要存在就是true -->
  75.         <input
  76.           type="radio"
  77.           name="gender"
  78.           id="secret"
  79.           value="secret"
  80.           checked
  81.         /><label for="secret">保密</label>
  82.       </div>
  84.       <!-- 复选框 -->
  85.       <!-- []表示数组，可以保存一组不同类型的数据，供后端使用 -->
  86.       <div>
  87.         <label>爱好</label>
  88.         <!-- 单选按钮中的name属性，必须全部一样，才能保证返回唯一值 -->
  89.         <input
  90.           type="checkbox"
  91.           name="hobby[]"
  92.           id="game"
  93.           value="game"
  94.           checked
  95.         /><label for="game">游戏</label>
  96.         <input type="checkbox" name="hobby[]" id="trave" value="trave" /><label
  97.           for="trave"
  98.           >旅游</label
  99.         >
  100.         <!-- checked布尔属性，不需要值，只要存在就是true -->
  101.         <input
  102.           type="checkbox"
  103.           name="hobby[]"
  104.           id="shoot"
  105.           value="shoot"
  106.           checked
  107.         /><label for="shoot">摄影</label>
  108.       </div>
  110.       <div>
  111.         <!-- 下拉列表，将变量名和多个值分开设置，由用户自己选择 -->
  112.         <!-- name,value应该在一个标签内，但是select  -->
  113.         <select name="level">
  114.           <option value="1">铜牌会员</option>
  115.           <option value="2">银牌会员</option>
  116.           <option value="3" selected>金牌会员</option>
  117.           <option value="4">永久会员</option>
  118.         </select>
  119.       </div>
  121.       <!-- 自定义下拉列表 -->
  122.       <!-- datalist+ input -->
  123.       <div>
  124.         <label for="">搜索关键字：</label>
  125.         <input type="search" name="search" list="keywords" />
  126.         <datalist id="keywords">
  127.           <option value="html">html</option>
  128.           <option value="css">css</option>
  129.           <option value="css">css</option>
  130.           <option value="css">css</option>
  131.         </datalist>
  132.       </div>
  134.       <button>提交</button>
  135.       <!-- 重置按钮 重置不是清空-->
  136.       <button type="reset">重置</button>
  137.     </form>
  138.   </body>
  139. </html>

二、选择器权重

选择器的特殊性值表述为 3 个部分，用 0,0,0 表示。或者百[id]，十[class]，个[tag]/标签
ID 选择器，1,0,0。
class 类选择器，0,1,0。
标签，0,0,1。
通配选择器*对特殊性没有贡献，即 0,0,0。
最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，通常 !important 用在样式调试的时候 。

  • 选择器权重效果图

实例演示 权重关系

  • 代码语言
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <style>
  9.       /* 选择当前的h3有三种选择器；
  10.          标签，class,id  */
  11.       /* 将id,class,tag,想像成一个三位整数，初始为0，0，0 */
  12.       /* 百位   十位   个数 */
  13.       /* id    class   tag */
  14.       /* 0       0      0 */
  15.       /* 百位对应：id
  16.          十位对应：class
  17.          个位对应：tag */
  19.       /* 当前权重0，0，1 */
  20.       h3 {
  21.         background-color: burlywood;
  22.       }
  24.       /* 当前权重0，0，2 */
  25.       body h3 {
  26.         background-color: coral;
  27.       }
  29.       /* 当前权重0，0，3 */
  30.       html body h3 {
  31.         background-color: cornflowerblue;
  32.       }
  34.       /* 当前权重0，1，0 */
  35.       .b {
  36.         background-color: crimson;
  37.       }
  39.       /* 当前权重0，1，1 */
  40.       h3.b {
  41.         background-color: darkblue;
  42.       }
  44.       /* 当前权重1，0，0 */
  45.       #a {
  46.         background-color: darkorange;
  47.       }
  49.       /* 当前权重1，1，0 */
  50.       #a.b {
  51.         background-color: deeppink;
  52.       }
  53.     </style>
  54.   </head>
  55.   <body>
  56.     <!-- *权重关系 -->
  57.     <h3 id="a" class="b">人生苦短，我学PHP</h3>
  58.   </body>
  59. </html>

三、上下文选择器

  • 上下文选择器效果图

    实例演示 上下文选择器

  • 代码语言

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <style>
  9.       /* 子元素选择器 > */
  11.       .list > li {
  12.         border: 1px solid red;
  13.       }
  15.       /* 后代选择器 空格 */
  16.       .list li {
  17.         border: 1px solid black;
  18.       }
  20.       .list .liem {
  21.         background-color: aquamarine;
  22.       }
  24.       /* 相邻选择器 /下一个+ */
  25.       .list .liem + li {
  26.         background-color: bisque;
  27.       }
  29.       /* 所有兄弟选择器 */
  30.       .list .liem ~ * {
  31.         background-color: rebeccapurple;
  32.       }
  33.     </style>
  34.   </head>
  36.   <body>
  37.     <ul class="list">
  38.       <li>ltem1</li>
  39.       <li class="liem">ltem2</li>
  40.       <li>
  41.         ltem3
  42.         <!-- <ul>
  43.                 <li>ltem1</li>
  44.                 <li>ltem2</li>
  45.             </ul> -->
  46.       </li>
  47.       <li>ltem4</li>
  48.       <li>ltem5</li>
  49.       <li>ltem6</li>
  50.       <li>ltem7</li>
  51.       <li>ltem8</li>
  52.     </ul>
  53.   </body>
  54. </html>

更多相关文章

  1. 表单制作和选择器
  2. HTML表单与选择器学习与应用
  3. html注册页面-表单
  4. 网站外链建设注意事项有哪些
  5. 域名对SEO优化到底有多大影响！
  6. 如何优化网站权重页？
  7. html表单、元素的来源及csss外部样式和上下文选择器
  8. html练习之表单标签使用
  9. HTML表单内容的详细介绍

随机推荐

  1. android proground混淆编译
  2. Android(安卓)中的BroadCastReceiver
  3. AudioRecord||AudioTrack
  4. android的唯一性
  5. 上官网学android之二（Building your First
  6. Android(安卓)属性动画（二）
  7. Android(安卓)- Handler is abstract, ca
  8. Android ID
  9. Android下so注入汇总
  10. android 神奇的android:clipChildren属性