制作一个用户注册表单,尽可能将常用控件都用一遍

  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.     <h2>用户注册</h2>
  11.     <!--GET: 数据在url中，文明发送，适合少量数据，不超过4k-->
  12.     <!--post: 数据在请求体中，不在url中，安全，可发送大量的数据，例如文件上传-->
  13.     <form action="check.php" method="POST" style="display: grid; gap: 0.5em">
  14.       <fieldset>
  15.         <legend>必填项</legend>
  16.         <div>
  17.           <!--单行文本框-->
  18.           <label for="username">账号</label>
  19.           <input
  20.             type="text"
  21.             id="username"
  22.             name="username"
  23.             placeholder="用户名"
  24.             required
  25.             autofocus
  26.           />
  27.         </div>
  28.         <div>
  29.           <label for="psw">密码</label>
  30.           <input
  31.             type="password"
  32.             id="psw"
  33.             name="psw"
  34.             placeholder="密码"
  35.             required
  36.             autofocus
  37.           />
  38.           <!--<button type="button" onclick="document.querySelector('#psw').type='text'" >显示密码 </button> -->
  39.         </div>
  41.         <div>
  42.           <label for="email">邮箱</label>
  43.           <input
  44.             type="email"
  45.             id="email"
  46.             name="email"
  47.             placeholder="123123@qq.com"
  48.             required
  49.             autofocus
  50.           />
  51.         </div>
  52.         <!--checked布尔属性，不需要值，只要存在就是true /真-->
  53.       </fieldset>
  54.       <!--单选框-->
  55.       <div>
  56.         <label for="secret">性别：</label>
  57.         <!--单选按钮中的name属性，必须全部一样，才能保证返回唯一值-->
  58.         <input type="radio" name="gender" id="male" value="male" />
  59.         <label for="male">男</label>
  60.         <input type="radio" name="gender" id="female" value="female" />
  61.         <label for="female">女</label>
  62.         <input type="radio" name="gender" id="secret" value="secret" checked />
  63.         <label for="secret">保密</label>
  64.         <!--checked布尔属性，不需要值，只要存在就是true /真-->
  65.       </div>
  67.       <!--复选框-->
  68.       <div>
  69.         <label for="secret">爱号：</label>
  70.         <!--单选按钮中的name属性，必须全部一样，才能保证返回唯一值-->
  71.         <!--bobby[]表示数组，可以保存一组不同类型的数据，供后端调用-->
  72.         <input type="checkbox" name="hobby[]" id="game" value="game" />
  73.         <label for="game">游戏</label>
  74.         <input type="checkbox" name="hobby[]" id="trvae" value="trvae" />
  75.         <label for="trvae">旅游</label>
  76.         <input
  77.           type="checkbox"
  78.           name="hobby[]"
  79.           id="shoot"
  80.           value="shoot"
  81.           checked
  82.         />
  83.         <label for="shoot">摄影</label>
  84.         <!--checked布尔属性，不需要值，只要存在就是true /真-->
  85.       </div>
  86.       <div>
  87.         <!--下拉列表,将变量名和多个值分开设置，由用户自己选择-->
  88.         <!--name，vlaue应该在一个标签内，但是select-->
  90.         <select name="" id="">
  91.           <option value="1">铜牌会员</option>
  92.           <option value="2">银牌会员</option>
  93.           <option value="3" selected>金牌会员</option>
  94.           <option value="4">永久会员</option>
  95.         </select>
  96.       </div>
  98.       <!--自定义下拉列表-->
  99.       <!--datalist+input-->
  100.       <div>
  101.         <label for="">搜索关键词:</label>
  102.         <input type="search" name="search" list="keywords" />
  103.         <datalist id="keywords">
  104.           <option value="html">html</option>
  105.           <option value="css">css</option>
  106.           <option value="js">js</option>
  107.           <option value="javascript">javascript</option>
  108.         </datalist>
  109.       </div>
  110.       <button>提交</button>
  111.       <!--重置不是清空，是恢复到默认值-->
  112.       <button type="reset">重置</button>
  113.       <!--不想提交，想自定义提交验证的规则，例如异步ajax提交-->
  114.     </form>
  115.   </body>
  116. </html>

2. 实例演示选择器权重的计算过程;

  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>
  9.     <!--style标签设置样式，适合于当前html文档，内部样式/文档样式-->
  10.     <style>
  11.       /*     1,浏览器默认样式
  12.       h2 {
  13.         display: block;
  14.         font-size: 1.5em;
  15.         margin-block-start: 0.83em;
  16.         margin-block-end: 0.83em;
  17.         margin-inline-start: 0px;
  18.         margin-inline-end: 0px;
  19.         font-weight: bold;
  20.       }
  21.       */
  23.       /*    2,用户自定义样式*/
  24.       /*    
  25.       h1 {
  26.         color: brown;
  27.         background-color: yellow;
  28.       }
  29.       */
  30.     </style>
  31.   </head>
  32.   <body>
  33.     hello world
  34.     <h1 id="title">hello world</h1>
  35.     <!--style属性: 行内样式，仅限于当前元素-->
  36.     <h1 style="color: tomato">hello world</h1>
  38.     <!--浏览器不检查id的唯一性，唯一性由程序员自己确保-->
  40.     <h2 id="title">大家晚上听得很认真</h2>
  41.     <style>
  42.       /*  选择器: 用于选择页面中一个或多个元素的字符串*/
  43.       /*选择器 {
  44.             声明1；
  45.             声明2；
  46.       }*/
  47.       /*  选择器 +声明块 +规则  */
  49.       /*  [id="title"] {
  50.         color: brown;
  51.         background-color: yellow;
  52.       }
  53.       */
  54.       #title {
  55.         color: #000;
  56.         background-color: turquoise;
  57.       }
  58.     </style>
  60.     <p class="demo">今晚我吃的很棒</p>
  61.     <h2 class="demo">css其实很有意思</h2>
  63.     <style>
  64.       [class="demo"] {
  65.         color: tomato;
  66.         background-color: blanchedalmond;
  67.       }
  69.       .demo {
  70.         color: blue;
  71.         background-color: crimson;
  72.       }
  73.     </style>
  75.     <h2 style="color: crimson" id="test" class="aaa">猪老师</h2>
  77.     <style>
  78.       h2 {
  79.         color: blue !important;
  80.         /*--！important 用在样式的调试--*/
  81.       }
  83.       .aaa {
  84.         color: crimson;
  85.       }
  87.       #test {
  88.         color: darkgreen;
  89.       }
  91.       /*--css里面!important大于style大于id大于class大于tag--*/
  92.     </style>
  94.     <!--三大通用属性；几乎所有的元素都可以使用的属性-->
  95.     <!--属性style id  class  背下来-->
  97.     <h3 id="a" class="b">你好啊</h3>
  99.     <style>
  100.       /*选择当前的h3有三种选择器：
  101.       标签   class  id*/
  103.       /* 将id，class，tag，想象成一个三位整数，初始为0，0，0 */
  105.       /*百位    十位     个数
  106.          id     class    tag
  107.          0        0       0  */
  109.       /*百位对应；id
  110.            十位对应：class
  111.             个位对应：tag */
  112.       /*id权重大于class大于tag*/
  113.       /*1   1   0*/
  114.       #a .b {
  115.         background-color: indigo;
  116.       }
  117.       /*1   0   0*/
  118.       #a {
  119.         background-color: indigo;
  120.       }
  122.       /*0   1   1*/
  124.       h3 .b {
  125.         background-color: goldenrod;
  126.       }
  128.       /*0 1 0*/
  129.       .b {
  130.         background-color: darkolivegreen;
  131.       }
  132.       /* 0 0 2*/
  133.       body h3 {
  134.         color: darkslategrey;
  135.       }
  136.       /*0 0 1*/
  137.       h3 {
  138.         color: dodgerblue;
  139.       }
  141.       /*为什么要学他，因为有许多框架有原始的样式表，这些不能动*/
  142.       /*element  ui ， layui  bootstrap  ....*/
  144.       .col-md-3 {
  145.       }
  147.       div.clo-md-3 {
  148.         /*这样就可以放心的写自己的代码了，不必担心原始的框架源码，为什么？因为权重最大直接覆盖*/
  149.       }

上下文选择器

  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.     <ul class="list">
  11.       <li>item1</li>
  12.       <li class="item">item2</li>
  13.       <li>item3</li>
  14.       <ul>
  15.         <li>item1</li>
  16.         <li>item2</li>
  17.         <li>item3</li>
  18.       </ul>
  19.       <li>item4</li>
  20.       <li>item5</li>
  21.       <li>item6</li>
  22.       <li>item7</li>
  23.       <li>item8</li>
  24.     </ul>
  25.     <style>
  26.       /*子元素>>>*/
  27.       .list > li {
  28.         border: 1px solid mediumblue;
  29.       }
  31.       /*后代    空格*/
  32.       .list li {
  33.         border: 1px solid mediumblue;
  34.       }
  36.       /*相邻；+*/
  37.       .list .item + * {
  38.         background-color: mediumvioletred;
  39.       }
  41.       /*所有兄弟全选中；~ */
  43.       .list .item ~ * {
  44.         background-color: mediumvioletred;
  45.       }
  46.     </style>
  47.   </body>
  48. </html>

更多相关文章

  1. HTML常用标签的用法示例
  2. 1.模态框 2.flex布局 3.grid属性
  3. CSS盒模型常用属性,单位，选择器
  4. 绝对定位、固定定位及flex,grid属性
  5. 1.box-sizing属性 2.伪类选择器 3.媒体查询
  6. Flex与grid属性思维导图
  7. Nofollow属性的介绍和使用
  8. HTML表单与选择器学习与应用
  9. CSS 元素样式来源

随机推荐

  1. 嘿，你知道新冠疫情现在什么样了吗？
  2. C#基础入门第十四天（MD5加密，WinForm）
  3. 啥是佩奇排名算法
  4. Python与Tableau相结合，万字长文搞定传统
  5. 图解LeetCode第 279 号问题： 完全平方数
  6. Android(安卓)- 引用计数（sp、wp、Refbase
  7. 时间序列&日期学习笔记大全（上）
  8. 图解LeetCode第 445 号问题： 两数相加 II
  9. 图解LeetCode第 199 号问题：二叉树的右视
  10. 使用RxJs WebSocket，HighCharts和Angular