form表单

能够获取用户输入的信息(文本信息, 选择信息, 上传的文件信息), 并将用户输入的信息全部发送给后端

form标签

参数:
- action, 控制数据提交的地址, 三种书写格式:
  - 不写, 默认朝当前页面所在的地址提交数据
  - 写全路径 (https://www.baidu.com)
  - 只写路径后缀 (/index/), 前面地址固定, 会自动根据后缀识别并添加前面地址
- method, 控制数据提交的方式
  - get, form表单默认是get请求
  - post
- enctype: encodetype, 编码类型
  - multipart/form-data是指表单数据有多部分构成，既有文本数据，又有文件等二进制数据
  - enctype的默认值不能用于文件上传
```
<form action="" method="post" enctype="multipart/form-data">
    
</form>
```

input标签

通常情况下input需要结合label一起使用
```
    <p>
        <label for="1">
            注册名:<input type="text" name="user_name" value="json" disabled id="1">
        </label>
    </p>
```
- 绑定id值之后点击label标签内的任何位置都可以自动选中input框
- value: 设置默认值
- disable: 使输入框不可选取
input标签中的type参数, 根据type参数的不同值展示不同的input方式:
- text: 单行普通文本
- password: 输入的内容会变成密文
- date: 日期
- radio: 单选圆圈
```
    <p>
        性别:
        男 <input type="radio" name=gender value=male>
        女 <input type="radio" name=gender value=female>
    </p>
```
  - 所有获取用户输入的标签, 都应该有name属性, 类似于字典的key
  - 用户的输入信息会放到对应标签中的value属性中
  - type = "radio" 指定name属性后, 只可点选一个, 否则可点选两个
  - type = "radio" 默认value为on
- checkbox: 打钩多选
```
    <p>
        爱好:
        篮球 <input type="checkbox">
        足球 <input type="checkbox">
    </p>
```
  - 标签默认选中checked = "checked"
  - 当属性名和属性值相同的时候, 可以只写属性名checked
- hidden: 隐藏
- file: 传文件
- button: 普通按钮, 没有任何意义, 但是用的最多, 可以绑定js事件
```
    <p><input type="button" value="蔡启龙的普通按钮"></p>
```
- reset: 重置按钮
```
    <p><input type="reset" value="重置按钮"></p>
```
- submit: 提交按钮, 能够触发form表单提交数据的动作
```
    <p><input type="submit"></p>
```
- file: 上传文件
```
    <p>个人简历: <input type="file" name="user_resume"></p>
```
- hidden: 隐藏输入框
```
    <p>猜猜我在哪: <input type="hidden"></p>
```

button标签

和input标签中的type = "submit"效果一样, 能够触发表单提交数据

select标签---下拉框选择

单选:

    <p>
        省份:
        <select>
            <option>上海</option>
            <option>北京</option>
        </select>
    </p>

多选:

    <p>
        前女友:
        <select multiple>
            <option>小苍</option>
            <option>小波</option>
        </select>
    </p>

textarea标签---多行普通文本

    <p>自我介绍: <textarea name="多行文本" cols="30" rows="10"></textarea></p>

CSS简介

CSS: 层叠样式表

用来控制html标签样式的

注释, 通常在写css代码的时候, 都会

/*单行注释*/

/*
多行注释1
多行注释2
*/

/*这是小米网站首页的css样式文件*/

/*通用样式*/

/*导航条样式*/

css的语法结构: 选择器 {属性1: 属性值1}
css的三种引入方式:
1. 在head内通过link标签引入外部的css文件(最正规的引入方式)
```
    <link rel="stylesheet" href="我的第一个CSS文件.css">
```
2. 在html页面上的head内通过style标签直接书写css代码
```
    <style>
           h1 {
               color: green;
           }
    </style>
```
3. 行内式, 在标签内部通过style属性直接书写(不推荐)
```
<h1 style="color: yellow">我是奥斯卡影帝</h1>
```
先学习如何查找标签, 再学习如何修改样式, 后面的js, jQuery的标签查找原理都是一样

基本选择器

使用选择器, 标签中的id命名不能以数字开头

元素选择器

    <style>
        /*让页面上所有的span标签变成红色, 标签选择器直接写标签名字即可*/
        span {
            color: red;
        }
    </style>

<span>span标签</span>
<div>div标签
    <span>div中的span标签</span>
</div>
<p>p标签
    <span>p中的span标签</span>
</p>

id选择器

语法: #id {}

作用于对应id值标签内的全部内容

    <style>
        #d1 {
            color: blue;
        }
    </style>

<span>span标签</span>
<div id="d1">div标签
    <span>div中的span标签</span>
</div>
<p>p标签
    <span>p中的span标签</span>
</p>

类选择器

语法: .类值 {}

一个标签中可以有多个类

    <style>
        .c1 {
        color: aqua;
        }
    </style>

<div id="d1" class = "c1 c2 c3">div标签
    <span>div中的span标签</span>
</div>

通用选择器

* {color: yellow;}

组合选择器

后代选择器, 只要在标签内都算作该标签的后代, 语法: div span {}, 空格表示后代
儿子选择器, 语法: div > span {}, 大于号表示儿子(即内部第一层)
弟弟选择器, 同级别下面所有的, 语法: div ~ span {}
毗邻选择器: 同级别下面紧挨着的, 语法: div + span {}

    <style>
        div span {
            color: red;
        }
    </style>

    <style>
        div > span {
            color: red;
        }
    </style>

    <style>
        div ~ span {
            color: red
        }
    </style>

    <style>
        div + span {
            color: red;
        }
    </style>

<span>span标签</span>
<span>span标签</span>
<div>div标签
    <span>div中的span标签</span>
    <p>div中的p标签
        <span>div中的p中的span标签</span>
    </p>
    <span>div中最下面的span标签</span>
</div>
<span>span标签</span>
<span>span标签</span>

属性选择器

任何标签都有自己默认的属性, 例如: id, class

标签还支持自定义任何多的属性, 也就意味着标签可以携带一些额外的数据

含有某个属性名的标签
含有某个属性名兴趣属性值是...的标签
找p标签并且含有某个属性名并且属性值是...的标签

    <style>
        [user_pwd] {
            color: pink;
        }
    </style>

    <style>
        [user_name = 'jason'] {
            color: blue;
        }
    </style>

    <style>
        span[user_name = 'jason'] {  /*span和中括号之间不能有空格*/
            color: green;
        }
    </style>

<p user_name='jason'>p_user_name_jason</p>
<p user_name='Oscar'>p_user_name_Oscar</p>
<span user_name="jason">span_user_name_jason</span>
<span user_pwd="123">span_user_pwd_123</span>

分组与嵌套

逗号表示同级并列关系

    <style>
        div, span, p {  /*分组*/
            color: blue;
        }
    </style>

    <style>
        #d1, span, .c2 {  /*嵌套*/
            color: purple;
        }
    </style>

<div id="d1">div标签</div>
<span calss="c1">span标签</span>
<p class="c2">p标签</p>

伪类选择器

a标签有四种状态

没有被点击过
鼠标悬浮上去
点击之后不松手
点击之后再回去

    <style>
        a:link {  /*a与link之间不能有空格*/
            color: red;
        }

        a:hover {
            color: deeppink;
        }

        a:active {
            color: blue;
        }

        a:visited {
            color: aqua;
        }
    </style>

<a href="https://www.qq.com">点我点我</a>

我们将input框鼠标点进去之后的状态叫做input框获取焦点, 也叫聚焦(focus)
鼠标一出去之后的状态, 叫做input框失去焦点

    <style>
        input:focus {  /*input和focus之间不能有空格*/
            background-color: aqua;
        }
    </style>

<input type="text">

选择器优先级

选择器相同的情况下, 引入方式不同
- 遵循就近原则, 离标签近的优先级高
选择器不同的情况下
- 行内选择器 > id选择器 > 类选择器 >元素选择器(标签选择器)

来源：https://www.cnblogs.com/-406454833/p/11879715.html

标签

input

jquery name选择器

span标签

css第一个元素

day43总结

form表单

form标签

input标签

button标签

select标签---下拉框选择

textarea标签---多行普通文本

CSS简介

CSS: 层叠样式表

基本选择器

元素选择器

id选择器

类选择器

通用选择器

组合选择器

属性选择器

分组与嵌套

伪类选择器

选择器优先级