day45-form表单、CSS选择器

目录

• id和name命名规范
• form表单
  • 参数
  • input
    • text
    • password
    • date
    • radio
    • checkbox
    • hidden
    • file
    • button
    • reset
    • submit
  • select
  • textarea
  • 其他
    • 选择的标签如何默认选中
    • 能触发form表单提交数据动作的两个标签
    • name属性
    • 提交文件
• CSS
  • 注释
  • 语法结构
  • css引入的三种方式
    • link标签
    • head内直接书写
    • 行内式
  • css查找
    • 元素选择器
    • id选择器
    • 类选择器
    • 通用选择器
    • 后代选择器
    • 儿子选择器
    • 弟弟选择器
    • 毗邻选择器
    • 属性选择器
    • 分组和嵌套
    • 伪类选择器
    • 伪元素选择器
    • 选择器优先级

id和name命名规范

ID和NAME令牌必须以字母（[A-Za-z]）开头，后跟任意数量的字母，数字（[0-9]），连字符（“-”），下划线（“ _”）

form表单

能够获取用户输入（输入，选择，上传的文件）

并将用户输入的内容全部发送给后端

参数

#action
控制数据提交的地址
1.不写，默认朝当前页面所在地址提交数据
2.写全路径
3.只写路径后缀（/index/）


#method
控制数据提交的方式
get form表单默认是get请求
post

input

input通常结合label一起使用

disabled属性，禁用input框

value属性，设置默认值

<label for="d1">用户名：<input type="text" id="d1"></label>
<!--绑定id之后点击label标签内任何位置都可以自动选中input框-->

text

普通文本

password

输入的内容，会变成密文

date

日期

radio

圆圈选择

将多个radio的name设置成同一个，可变单选

<label for="d1">这是选择 男<input type="radio" id="d5" name="gender" checked></label>
<label for="d1">这是选择 女<input type="radio" id="d6" name="gender"></label>

checkbox

多选，打勾

<p>爱好
    唱<input type="checkbox" name="" checked>
    跳<input type="checkbox" name="">
    rap<input type="checkbox" name="">
</p>

hidden

隐藏

<!--隐藏-->
<p>这是隐藏<input type="hidden"></p>

file

传文件

<p>这是上传文件
    <input type="file">
</p>

button

普通按钮，可以绑定js事件

<input type="button" value="点着玩">

reset

重置按钮

<input type="reset" value="重置">

submit

提交按钮，自动触发form表单提交数据的动作

<input type="submit" value="提交数据">

select

下拉框

一个option标签就是一个选项，默认是单选

添加multiple参数，可变多选

<!--下拉框多选-->
<p>前女友
    <select name="" id="" multiple>
        <option value="">小苍</option>
        <option value="">小波</option>
    </select>
</p>

textarea

获取大段文本

<p>这是大段文本
    <textarea name="" id="" cols="30" rows="10"></textarea>
</p>

其他

选择的标签如何默认选中

checked="checked"

当属性名和属性名相同的时候，可以只写属性名

能触发form表单提交数据动作的两个标签

input标签 type="submit"

button标签

name属性

所有获取用户输入的标签，都应该有name属性

name属性就类似于字典的key

input获取到的用户输入都会放到input框的value属性中

针对选择框，传到后端的数据，由value属性决定

提交文件

enctype="multipart/form-data" （form属性）

CSS

层叠样式表，控制html标签的样式

注释

/*单行注释*/

/*
多行注释
多行注释
*/

语法结构

/*
选择器 {属性1：属性值}
*/

css引入的三种方式

link标签

最正规用法

<link rel="stylesheet" href="02%20小米css样式.css">

head内直接书写

<style>
	h1 {
			color: green;
		}
</style>

行内式

<h1 style="color: orange">我是Oscar</h1>

css查找

• 基本选择器

  1. 元素选择器
  2. id选择器
  3. 类选择器
  4. 通用选择器

• 组合选择器

  1. 后代选择器
  2. 儿子选择器
  3. 弟弟选择器
  4. 毗邻选择器

元素选择器

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

id选择器

 /*id选择器   #+id值*/
        #d1 {
            color: green;
        }

类选择器

 /*类选择器   .+类值*/
        .c1 {
            color: pink;
        }

通用选择器

 /*通用选择器  了解*/
        * {
            color: orange;
        }

后代选择器

/*后代选择器  只要在标签内部都算作该标签的后代*/
         div span {  /*空格表示后代*/
           color: red;
        }

儿子选择器

/*儿子选择器*/
        div>span {  /*大于号表示儿子*/
            color: green;
        }

弟弟选择器

/*弟弟选择器  同级别下面所有的*/
        div~span {	/*和div同级别下的所有span*/
            color: orange;
        }

毗邻选择器

/*毗邻选择器 紧挨着的同级别下面的那一个*/
        div+span {
            color: aqua;
        }

属性选择器

<style>
        /*
        1.含有某个属性名的标签
        2.含有某个属性名并且属性值是...的标签
        3.找p标签并且含有某个属性名并且属性值是...的标签
        */
        [password] {
            color: red;
        }

        /*[username='jason'] {*/
            /*color: black;*/
        /*}*/

        /*span[username='jason'] {*/
            /*color: red;*/
        /*}*/
        span[password] {
            color: red;
        }
</style>

分组和嵌套

 <style>
        /*#d1 {*/
            /*color: red;*/
        /*}*/
        /*.c1 {*/
            /*color: red;*/
        /*}*/
        /*p {*/
            /*color: red;*/
        /*}*/
        div,
        span,
        p {
            color: blue;
        }

		/*以逗号隔开，相当于或*/
        #d1,.c1,p { 
            color: orange;
        }
    </style>

伪类选择器

<style>
        a:link {  /*鼠标在a标签之外的地方*/
            color: red;
        }
        a:hover {  /*hover表示的就是悬浮的意思*/
            color: black;
        }
        a:active {	/*按下a标签未弹起*/
            color: orange;
        }
        a:visited {	/*点击a标签之后*/	/*如果404，则不回变色*/
            color: pink;
        }
        input:focus {	/*聚焦之后*/
            background-color: orange;
        }
        span:hover {	/*悬停*/
            background-color: pink;
        }
    </style>

伪元素选择器

<style>
        p:first-letter {	/*文本首字母变大*/
            font-size: 48px;
            color: red;
        }
        p:before {	/*在文本之前加上’*‘*/
            content: '*';
            color: green;
        }
        p:after {	/*在文本之后加上’？‘*/
            content: '?';
            color: blue;
        }

选择器优先级

行内选择器 > id选择器 > 类选择器 > 标签选择器