search

博客列表 >HTML中的表单与CSS选择器的权重和使用

HTML中的表单与CSS选择器的权重和使用

书伟php由0到1
书伟php由0到1原创
2021年10月07日 11:00:03657浏览

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>
    11.   <h2 style="text-align: center;">用户注册</h2>
    12.   <!-- form标签是表单容器 action属性表示服务器接收地址 
    13.        method属性表示请求类型 get:明文发送 post：隐秘发送-->
    14.   <form action="check.php" method="GET" >
    15.     <!-- fieldset是表单分组 -->
    16.     <fieldset>
    17.       <legend style="text-align: center">必填项</legend>
    18.       <div>
    19.         <!-- label标签用于for属性与文本框id属性为相同值绑定 -->
    20.         <label for="username">账号：</label>
    21.         <!-- input标签表示输入数据的输入字段 text表示文本 name表示服务器上的变量 
    22.           placeholder表示提示文字 required表示此内容必填项 autofocus表示焦点落到输入框中
    23.               value表示未输入的默认值-->
    24.         <input
    25.           type="text"
    26.           id="username"
    27.           name="username"
    28.           placeholder="不少于11位"
    29.           required
    30.           autofocus
    31.           value="123"
    32.         />
    33.       </div>
    35.       <div>
    36.         <!-- label标签用于for属性与文本框id属性为相同值绑定 -->
    37.         <label for="psw">密码：</label>
    38.         <!-- input标签表示输入数据的输入字段 password表示密码 name表示服务器上的变量 
    39.           placeholder表示提示文字 required表示此内容必填项 -->
    40.         <input
    41.           type="password"
    42.           id="psw"
    43.           name="psw"
    44.           placeholder="不少于11位"
    45.           required
    46.         />
    47.         <!-- 查看已输入的密码 -->
    48.         <button
    49.           type="button"
    50.           onclick="document.querySelector('#psw').type='text'"
    51.         >
    52.           显示密码
    53.         </button>
    54.       </div>
    56.       <div>
    57.            <!-- label标签用于for属性与文本框id属性为相同值绑定 -->
    58.         <label for="email">邮箱：</label>
    59.         <!-- input标签表示输入数据的输入字段 text表示文本 name表示服务器上的变量 
    60.           placeholder表示提示文字  required表示此内容必填项-->
    61.         <input type="email" id="email" name="email"
    62.         placeholder="abc@email.com" required>
    63.       </div>
    64.     </fieldset>
    66.     <div>
    67.       <!-- 单选文本框中的name值必须完全一样，才能返回唯一值 -->
    68.       <label for="secret">性别:</label>
    69.       <input type="radio" name="gender" id="male" value="male" /><labelfor="male">男</label>
    70.       <input type="radio" name="gender" id="male" value="female" /><labelfor="female">女</label>
    71.       <!-- checked属性代表默认值 布尔属性默认true，不需要值 -->
    72.       <input type="radio" name="gender" id="secret" value="secret" checked /><labelfor="secret">保密</label>
    73.     </div>
    75.     <div>
    76.           <!-- 多选文本框-->
    77.       <label >爱好：</label>
    78.       <input type="checkbox" name="gender" id="travel" value="travel" checked /><labelfor="travel" >旅游</label>
    79.       <input type="checkbox" name="gender" id="shoot" value="shoot" /><labelfor="shoot">摄像</label>
    80.       <!-- checked属性代表默认值 布尔属性默认true，不需要值 -->
    81.       <input type="checkbox" name="gender" id="game" value="game" checked /><labelfor="game">打游戏</label>
    82.     </div>
    84.     <div>
    85.         <!-- 下拉列表     -->  
    86.       <select name="level" >
    87.           <option value="1">铜牌会员</option>
    88.           <option value="2">银牌会员</option>
    89.           <option value="3" selected >金牌会员</option>
    90.           <option value="4">永久会员</option>
    91.       </select>
    92.     </div>
    94.    <div>
    95.        <!-- 自定义下来列表 datalist+input -->
    96.       <label for="">搜索关键字</label>
    97.       <!-- search 搜索框 -->
    98.       <input type="search" name="search" list="keywords">
    99.       <datalist id="keywords">
    100.           <option value="html">html </option>
    101.           <option value="css">css </option>
    102.           <option value="js">js </option>
    103.           <option value="php">php </option>
    104.       </datalist>
    105.    </div>
    107.     <button  >提交</button>
    108.     <button type="reset">重置</button>
    109.   </form>
    110. </body>
    111. </html>
  • 效果图

css选择器的优先级权重计算

  • 示例代码

    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.   <h1 class="a" id="b">今天天气非常好</h1>
    11.   <style>
    12.     /*css的三种选择器： id，class，标签 */
    13.     /* 将id,class,:tag ,看成三位数，初始为 0，0,0 */
    14.     /* 百位  十位  个位
    15.        id    class  tag 
    16.        0      0      0 */
    18.     /* 0 , 0 , 1      */
    19.     h1 {
    20.       background-color: yellow;
    21.     }
    22.     /* 0 , 0 ,2 */
    23.     body h1 {
    24.       background-color: blue;
    25.     }
    26.     /* 0 , 0 3 */
    27.     html body h1 {
    28.       background-color: cadetblue;
    29.     }
    30.     /* 0 , 1 0 */
    31.     .a {
    32.       background-color: chocolate;
    33.     }
    34.     /* 0 , 1 , 1 */
    35.     h1.a {
    36.       background-color: crimson;
    37.     }
    38.     /* 0 , 1 ,0 */
    39.     #b {
    40.       background-color: cyan;
    41.     }
    42.     /* 0, 1 ,1 */
    43.     #b.a {
    44.       background-color: lawngreen;
    45.     }
    46.   </style>
    47. </body>
    48. </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.     <ul class="list">
  11.       <li>item1</li>
  12.       <li class="item">item2</li>
  13.       <li>item3</li>
  14.       <li>item4</li>
  15.       <li>item5</li>
  16.     </ul>
  17.     <style>
  18.       /* 子元素：>  */
  19.       .list > li {
  20.         border: 1px solid yellow;
  21.       }
  23.       /* 后代:空格 */
  24.       .list li {
  25.         border: 1px solid red;
  26.       }
  27.       /* 相邻/下一个元素： +  */
  28.       .list .item + * {
  29.         background-color: tomato;
  30.       }
  31.       /* 所有兄弟 ： ~ * */
  32.       .list .item ~ * {
  33.         background-color: turquoise;
  34.       }
  35.     </style>
  36.   </body>
  37. </html>
上一条：JS结构赋值、dom增删改查基本使用下一条：轮播图自动播放和购物车自动计算的完善
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议