Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML表单常用知识点以及css选择器权重学习
Blogger Information
Blog 3
fans 0
comment 0
visits 1858
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
HTML表单常用知识点以及css选择器权重学习
骏沃
Original
529 people have browsed it

表单常用知识点

先看下输出效果，下面对应代码有关键点注释，学习练手有不对的地方还请指正

  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.       .main {
  10.         width: 500px;
  11.         margin: auto;
  12.         padding: 0;
  13.         text-align: center;
  14.       }
  15.       label.xrequired:before {
  16.         content: "*";
  17.         color: red;
  18.       }
  19.       .main .div-left {
  20.         width: 480px;
  21.         float: left;
  22.         text-align: left;
  23.       }
  24.     </style>
  25.   </head>
  26.   <body>
  27.     <div class="main">
  28.       <h1>用户注册</h1>
  29.       <!-- method：一个是get，另一个是post；get是通过URL明文传输，适合少量数据，一般不超过4K；POST数据是在请求体中，直观上看不到不在URL中，安全性上比较好，关键是可以传输大量的数据，比如文件上传 -->
  30.       <form action="check.php" method="POST">
  31.         <!-- 表单分组 -->
  32.         <fieldset>
  33.           <legend>必填项</legend>
  34.           <div class="div-left">
  35.             <!-- label通过for属性和input对应的id绑定，实现点击文字也可以对焦到对应的输入框 -->
  36.             <label class="xrequired" for="username">账号：</label>
  37.             <!-- required代表必填，autofocus页面加载是自动获得焦点，placeholder输入提示 -->
  38.             <input
  39.               type="text"
  40.               id="username"
  41.               name="username"
  42.               value=""
  43.               placeholder="请输入您的真实姓名"
  44.               required
  45.               autofocus
  46.             />
  47.           </div>
  48.           <div class="div-left">
  49.             <label class="xrequired" for="psw">密码：</label>
  50.             <input type="password" id="psw" name="password" value="" placeholder="请输入密码" required />
  51.             <!-- 通过点击动作改变对应id的type属性 -->
  52.             <button type="button" onclick="document.querySelector('#psw').type='text'">显示密码</button>
  53.           </div>
  54.           <div class="div-left">
  55.             <label class="xrequired" for="email">邮箱：</label>
  56.             <input type="email" id="email" name="email" value="" placeholder="请输入邮箱" required />
  57.           </div>
  58.         </fieldset>
  59.         <fieldset>
  60.           <legend>选填项</legend>
  61.           <div class="div-left">
  62.             <label for="tel">电话：</label>
  63.             <input type="tel" id="tel" name="tel" value="" placeholder="请输入联系电话" />
  64.           </div>
  65.           <div class="div-left">
  66.             <label for="file">头像：</label>
  67.             <input type="file" id="file" name="file" value="" />
  68.           </div>
  69.           <!-- 下面是单选，单选的name必须是一致的 -->
  70.           <div class="div-left">
  71.             <label for="secret">性别：</label>
  72.             <input type="radio" name="gender" id="male" value="male" />
  73.             <label for="male">男</label>
  74.             <input type="radio" name="gender" id="female" value="female" />
  75.             <label for="female">女</label>
  76.             <input type="radio" name="gender" id="secret" value="secret" checked />
  77.             <label for="secret">保密</label>
  78.           </div>
  79.           <div class="div-left">
  80.             <label for="">生日：</label>
  81.             <input type="date" name="birthday" id="" />
  82.           </div>
  83.           <!-- 下面是多选，name名称后面加中括号，表示是一个数组，可以保存一组不同的数据供后端调用 -->
  84.           <div class="div-left">
  85.             <label for="">爱好：</label>
  86.             <input type="checkbox" name="hobby[]" id="" value="paobu" checked />跑步
  87.             <input type="checkbox" name="hobby[]" id="" value="huaxue" />滑雪
  88.             <input type="checkbox" name="hobby[]" id="" value="qixing" checked />骑行
  89.             <input type="checkbox" name="hobby[]" id="" value="other" />其他
  90.           </div>
  91.           <div class="div-left">
  92.             <label for="">工龄：</label>
  93.             <select name="gongling" id="">
  94.               <option value="1">应届生</option>
  95.               <option value="2" selected>1-2年</option>
  96.               <option value="3">3-5年</option>
  97.               <option value="4">5年以上</option>
  98.             </select>
  99.           </div>
  100.           <div class="div-left">
  101.             <label for="jianjie">简介：</label>
  102.             <textarea name="jianjie" id="jianjie" cols="25" rows="3"></textarea>
  103.           </div>
  104.         </fieldset>
  105.         <button type="submit">提交</button>
  106.         <button type="reset">重置</button>
  107.       </form>
  108.     </div>
  109.   </body>
  110. </html>

下面为表单input的type属性值列表收集

值 描述
button 定义可点击的按钮（大多与 JavaScript 使用来启动脚本
checkbox 定义复选框
color 定义拾色器
date 定义日期字段（带有 calendar 控件）
datetime 定义日期字段（带有 calendar 和 time 控件）
datetime-local 定义日期字段（带有 calendar 和 time 控件）
month 定义日期字段的月（带有 calendar 控件）
week 定义日期字段的周（带有 calendar 控件）
time 定义日期字段的时、分、秒（带有 time 控件）
email 定义用于 e-mail 地址的文本字段
file 定义输入字段和 “浏览…” 按钮，供文件上传
hidden 定义隐藏输入字段
image 定义图像作为提交按钮
number 定义带有 spinner 控件的数字字段
password 定义密码字段。字段中的字符会被遮蔽。
radio 定义单选按钮。
range 定义带有 slider 控件的数字字段。
reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值。
search 定义用于搜索的文本字段。
submit 定义提交按钮。提交按钮向服务器发送数据。
tel 定义用于电话号码的文本字段。
text 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
url 定义用于 URL 的文本字段。

CSS选择器权重学习

css选择器

要编辑页面某个样式，就需要选中指定被编辑的对象，这就要使用css选择器，选择器一般有以下几种：
1.标签选择器

比如 div

2.类别选择器

class属性 在style中，前面用‘.’来标志

3.ID选择器

ID属性，具有唯一性，同一id在同一文档页面中只能出现一次；在style中，前面用‘#’来标志

4.后代选择器

这个也称为包含选择器，用来选择指定元素的后代，需要注意的事，只要是父元素下满足条件的元素都会被选择上；在style中，将父元素放在前面，需要选择的后代放在后面，中间加上一个空格分开；

5.子选择器

子选择器和上面的后代不同，它只作用于第一个后代；在style中，将父元素放在前面，需要选择的后代放在后面，中间加上一个‘>’分开；

6.伪类选择器

:hover 鼠标悬停
:visited 已被点击
:link 所有未被点击的链接
:active 鼠标已经在它上面按下，但是还没释放的元素

7.通用选择器

用‘*’号标志，选择HTML中所有的元素，一般用于初始化设定

权重

权重遵循下面原则

!important 行间样式 id class/属性选择器/伪类选择器 标签选择器 通配符
强制，无穷大 1000（千位） 100（百位） 10（十位） 1（个位） 0

案例演示

  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>CSS基础知识</title>
  8.     <style>
  9.       h1,
  10.       h2 {
  11.         color: darkmagenta;
  12.         font-size: 16px;
  13.         font-weight: bold;
  14.       }
  15.     </style>
  16.   </head>
  17.   <body>
  18.     <!-- 默认 -->
  19.     <h1>兴趣爱好</h1>
  20.     <!-- 行内样式，仅限于当前元素 -->
  21.     <h1 style="color: cadetblue">我喜欢听音乐</h1>
  22.     <!-- ID选择器 -->
  23.     <h1 id="title">我喜欢游泳</h1>
  24.     <style>
  25.       /* 1-0-1 */
  26.       h1#title {
  27.         font-size: 16px;
  28.       }
  29.       /* 1-0-0 */
  30.       #title {
  31.         color: darkorange;
  32.         font-size: 32px;
  33.       }
  34.     </style>
  35.     <!-- class选择器 -->
  36.     <h2 id="aa" class="bb">我喜欢跑步</h2>
  37.     <style>
  38.       /* 0-0-2 */
  39.       body h2 {
  40.         color: aqua;
  41.       }
  42.       /*0-0-1 !important强制属性，权限最高 */
  43.       h2 {
  44.         color: teal;
  45.         font-style: italic;
  46.         border-color: green !important;
  47.       }
  48.       /* 1-1-1 */
  49.       h2#aa.bb {
  50.         font-size: 16px;
  51.       }
  52.       /* 1-1-0 */
  53.       #aa.bb {
  54.         font-size: 32px;
  55.         background-color: darksalmon;
  56.       }
  57.       /* 0-1-0 */
  58.       .bb {
  59.         background-color: red;
  60.         font-size: 28px;
  61.         border: 8px solid red;
  62.       }
  63.     </style>
  64.   </body>
  65. </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.   </head>
  9.   <body>
  10.     <div>
  11.       <ul class="list">
  12.         <li>item1</li>
  13.         <li>item2</li>
  14.         <li>item3</li>
  15.         <li class="title">
  16.           item4
  17.           <ul>
  18.             <li>item4-1</li>
  19.             <li>item4-2</li>
  20.             <li>item4-3</li>
  21.           </ul>
  22.         </li>
  23.         <li>item5</li>
  24.         <li class="title2">item6</li>
  25.         <li>item7</li>
  26.         <li>item8</li>
  27.         <li>item9</li>
  28.       </ul>
  29.     </div>
  30.     <style>
  31.       ul {
  32.         width: 300px;
  33.         list-style: none;
  34.         color: black;
  35.       }
  36.       /* 子元素选择中间加 >  */
  37.       .list > li {
  38.         color: red;
  39.       }
  40.       /* 后代 中间加空格 */
  41.       .list li {
  42.         border: 1px solid red;
  43.       }
  44.       /* 相邻所有兄弟  使用‘~ *’*/
  45.       .list .title2 ~ * {
  46.         background-color: cyan;
  47.       }
  48.       /* 下一个/相邻 使用加号 ‘+ *’ */
  49.       .list .title + * {
  50.         background-color: blue;
  51.       }
  52.     </style>
  53.   </body>
  54. </html>
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