微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > HTML表单常用知识点以及css选择器权重学习

博主信息

博文 3

粉丝 0

访问量 2633

专题推荐

更多>

表单常用知识点

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

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单作业</title>
    <style>
      .main {
        width: 500px;
        margin: auto;
        padding: 0;
        text-align: center;
      }
      label.xrequired:before {
        content: "*";
        color: red;
      }
      .main .div-left {
        width: 480px;
        float: left;
        text-align: left;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1>用户注册</h1>
      <!-- method：一个是get，另一个是post；get是通过URL明文传输，适合少量数据，一般不超过4K；POST数据是在请求体中，直观上看不到不在URL中，安全性上比较好，关键是可以传输大量的数据，比如文件上传 -->
      <form action="check.php" method="POST">
        <!-- 表单分组 -->
        <fieldset>
          <legend>必填项</legend>
          <div class="div-left">
            <!-- label通过for属性和input对应的id绑定，实现点击文字也可以对焦到对应的输入框 -->
            <label class="xrequired" for="username">账号：</label>
            <!-- required代表必填，autofocus页面加载是自动获得焦点，placeholder输入提示 -->
            <input
              type="text"
              id="username"
              name="username"
              value=""
              placeholder="请输入您的真实姓名"
              required
              autofocus
            />
          </div>
          <div class="div-left">
            <label class="xrequired" for="psw">密码：</label>
            <input type="password" id="psw" name="password" value="" placeholder="请输入密码" required />
            <!-- 通过点击动作改变对应id的type属性 -->
            <button type="button" onclick="document.querySelector('#psw').type='text'">显示密码</button>
          </div>
          <div class="div-left">
            <label class="xrequired" for="email">邮箱：</label>
            <input type="email" id="email" name="email" value="" placeholder="请输入邮箱" required />
          </div>
        </fieldset>
        <fieldset>
          <legend>选填项</legend>
          <div class="div-left">
            <label for="tel">电话：</label>
            <input type="tel" id="tel" name="tel" value="" placeholder="请输入联系电话" />
          </div>
          <div class="div-left">
            <label for="file">头像：</label>
            <input type="file" id="file" name="file" value="" />
          </div>
          <!-- 下面是单选，单选的name必须是一致的 -->
          <div class="div-left">
            <label for="secret">性别：</label>
            <input type="radio" name="gender" id="male" value="male" />
            <label for="male">男</label>
            <input type="radio" name="gender" id="female" value="female" />
            <label for="female">女</label>
            <input type="radio" name="gender" id="secret" value="secret" checked />
            <label for="secret">保密</label>
          </div>
          <div class="div-left">
            <label for="">生日：</label>
            <input type="date" name="birthday" id="" />
          </div>
          <!-- 下面是多选，name名称后面加中括号，表示是一个数组，可以保存一组不同的数据供后端调用 -->
          <div class="div-left">
            <label for="">爱好：</label>
            <input type="checkbox" name="hobby[]" id="" value="paobu" checked />跑步
            <input type="checkbox" name="hobby[]" id="" value="huaxue" />滑雪
            <input type="checkbox" name="hobby[]" id="" value="qixing" checked />骑行
            <input type="checkbox" name="hobby[]" id="" value="other" />其他
          </div>
          <div class="div-left">
            <label for="">工龄：</label>
            <select name="gongling" id="">
              <option value="1">应届生</option>
              <option value="2" selected>1-2年</option>
              <option value="3">3-5年</option>
              <option value="4">5年以上</option>
            </select>
          </div>
          <div class="div-left">
            <label for="jianjie">简介：</label>
            <textarea name="jianjie" id="jianjie" cols="25" rows="3"></textarea>
          </div>
        </fieldset>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
      </form>
    </div>
  </body>
</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

案例演示

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS基础知识</title>
    <style>
      h1,
      h2 {
        color: darkmagenta;
        font-size: 16px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <!-- 默认 -->
    <h1>兴趣爱好</h1>
    <!-- 行内样式，仅限于当前元素 -->
    <h1 style="color: cadetblue">我喜欢听音乐</h1>
    <!-- ID选择器 -->
    <h1 id="title">我喜欢游泳</h1>
    <style>
      /* 1-0-1 */
      h1#title {
        font-size: 16px;
      }
      /* 1-0-0 */
      #title {
        color: darkorange;
        font-size: 32px;
      }
    </style>
    <!-- class选择器 -->
    <h2 id="aa" class="bb">我喜欢跑步</h2>
    <style>
      /* 0-0-2 */
      body h2 {
        color: aqua;
      }
      /*0-0-1 !important强制属性，权限最高 */
      h2 {
        color: teal;
        font-style: italic;
        border-color: green !important;
      }
      /* 1-1-1 */
      h2#aa.bb {
        font-size: 16px;
      }
      /* 1-1-0 */
      #aa.bb {
        font-size: 32px;
        background-color: darksalmon;
      }
      /* 0-1-0 */
      .bb {
        background-color: red;
        font-size: 28px;
        border: 8px solid red;
      }
    </style>
  </body>
</html>

上下文选择器

输出效果

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>上下文选择器</title>
  </head>
  <body>
    <div>
      <ul class="list">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li class="title">
          item4
          <ul>
            <li>item4-1</li>
            <li>item4-2</li>
            <li>item4-3</li>
          </ul>
        </li>
        <li>item5</li>
        <li class="title2">item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
      </ul>
    </div>
    <style>
      ul {
        width: 300px;
        list-style: none;
        color: black;
      }
      /* 子元素选择中间加 >  */
      .list > li {
        color: red;
      }
      /* 后代 中间加空格 */
      .list li {
        border: 1px solid red;
      }
      /* 相邻所有兄弟  使用‘~ *’*/
      .list .title2 ~ * {
        background-color: cyan;
      }
      /* 下一个/相邻 使用加号 ‘+ *’ */
      .list .title + * {
        background-color: blue;
      }
    </style>
  </body>
</html>