form表单
作用
能够获取用户输入（输入，选择，上传的文件），并且将用户输入的内容全部发送给后端
参数
action
控制数据提交的地址
三种书写方式：
1.不写，默认就是朝当前这个页面所在的地址提交数据
2.写全路径（https://www.baidu.com)
3.只写路径后缀（/index/)
method
控制数据提交的方式
get form表单默认是get请求
post
type
通常情况下，input需要结合label一起使用（p也可以）
<form action="" method="post">
<label for="d1">用户名：<input type="text"></label>
form表单中的input就类似于是前端的变形金刚，根据type参数的不同，展示不同的功能。
input标签可以加disable属性，禁用该input框
input标签可以加value属性，设置默认值
选择的标签如何默认选中：checked='checked'(当属性名和属性值相同的时候，可以只写属性名)
| type参数 | 功能 |
|---|---|
| text | 普通文本 |
| password | 输入的内容会变成密文 |
| date | 日期 |
| radio | 单选圆圈（要写name，不然会变成多选） |
| checkbox | 多选 打钩 |
| hidden | 隐藏 |
| file | 传文件 |
| button | 普通按钮，没有任何意义，然而却是用的最多的，可以给他绑定js事件 |
| reset | 重置按钮 |
| submit | 提交按钮，能够自动触发form表单提交数据的动作 |
select标签 下拉框：
一个个的option标签就是一个个的选项。默认是单选，可以给select标签加一个multiple参数，就可以变成多选了
textarea标签 获取大段文本
能够触发form表单提交数据的动作有两个标签可以：
input标签type=submit
button
所有获取用户输入的标签都应该有name属性：
name属性就类似于字典的key
input框获取用户输入都会放到input框的value属性中
针对选择框，传到后端的数据，由value属性决定
form表单如果要提交文件数据，就必须修改一下代码：
enctype="multipart/form-data"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="post">
<!--<label for="d1">用户名：<input type="text"></label>-->
<p>用户名：<input type="text" id="d1" name="username" value="jason" disabled></p>
<p>密码：<input type="password"></p>
<p>生日：<input type="date"></p>
<p>性别：
男<input type="radio" name="gender" value="male" checked>
女<input type="radio" name="gender" value="female">
</p>
<p>爱好：
篮球<input type="checkbox" name="hobby" value="basketball">
足球<input type="checkbox" name="hobby" value="football">
双色球<input type="checkbox" name="hobby" value="doublecolorball">
</p>
<p>省份：
<select name="province" id="">
<option value="sh">上海</option>
<option value="bj">北京</option>
<option value="sz">深圳</option>
</select>
</p>
<p>前女友：
<select name="" id="" multiple>
<option value="">芽衣</option>
<option value="">浮华</option>
<option value="">丽塔</option>
</select>
</p>
<p>自我介绍：
<textarea name="info" id="" cols="30" rows="10"></textarea>
</p>
<p>个人简历：
<input type="file" name="myfile">
</p>
<p>猜猜我在哪里：
<input type="hidden">
</p>
<p>
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
<button>我是一个button标签</button>
</p>
</form>
</body>
</html>
css
什么是css
层叠样式表，用来控制html标签样式的
注释
/*单行注释*/
/*
多行注释
多行注释
*/
通常我们在写css的时候，都会单独写一个css文件，里面只有css代码
eg:
/*这是小米网站首页的css样式文件*/
/*通用样式*/
/*导航条样式*/
/*轮播图样式*/
css的语法结构
选择器 {属性1：属性值1}
css的三种引入方式
1.通过link标签引入外部的css文件（最正规用法）
2.直接再html页面上的head内通过style标签直接书写css代码
3.行内式（直接在标签内部通过style属性直接书写）不推荐使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="02%20小米css样式.css">
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1 style="color: orange">我是Oscar</h1>
</body>
</html>
基本选择器
元素选择器
<style>
span {
color: red;
}
</style>
id选择器
<style>
#d3 {
color: aqua;
}
</style>
类选择器
<style>
.c1 {
color: chartreuse;
}
</style>
通用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
color: lawngreen;
}
</style>
</head>
<body>
<p class="c1">p</p>
<span id="d3" class="c1">span</span>
<div id="d2" class="c1">div
<span>span</span>
</div>
<p id="d1" class="c1">p
<span>span</span>
</p>
dfghj
<a href="">dfghjhgsd</a>
</body>
</html>
组合选择器
div span 后代选择器
只要在标签内部都算作该标签的后代 空格表示后代
<style>
div span{
color: red;
}
</style>
div>span 儿子选择器
大于号表示儿子 (个人理解：标签内部第一代)
<style>
div>span {
color: chartreuse;
}
</style>
div~span 弟弟选择器
同级别下面所有的
<style>
div~span {
color: yellow;
}
</style>
div+span 毗邻选择器
紧挨着的同级别下面的哪一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div+span {
color: aqua;
}
</style>
</head>
<body>
<div>div
<span>div里面的span</span>
<p>div里面的p
<span>div里面的P里面的span</span>
</p>
</div>
<span>span</span>
<p>ppp</p>
<p>ppp</p>
<span>span</span>
</body>
</html>
属性选择器
任何的标签都有自己的默认的属性 id class，标签还支持你自定义任何多的属性（也就以为这可以让标签帮你携带一些额外的数据）
含有某个属性名的标签
<style>
[password] {
color: aqua;
}
</style>
含有某个属性名并且属性值得标签
<style>
[username='jason'] {
color:chartreuse;
}
</style>
某标签含有某个属性名并且属性值得标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span[username='jason'] {
color:chartreuse;
}
</style>
</head>
<body>
<p username="jason">ppp1</p>
<p username="oscar">ppp2</p>
<p username="sean">ppp3</p>
<span username="jason">span1</span>
<span password="123">span2</span>
<div password>div</div>
</body>
</html>
分组与嵌套
分组
当多个元素得样式相同时，可以通过在多个选择器之间使用逗号分隔得分组选择器来统一设置元素样式
<style>
div,
span,
p {
color: chartreuse;
}
</style>
嵌套
多种选择器混合使用，比如：id为d1内部span标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 span {
color: red;
}
</style>
</head>
<body>
<div id="d1">div
<span>span</span>
</div>
<span class="c1">span</span>
<p class="c2">
p
</p>
</body>
</html>
伪类选择器
a标签有四种状态
1.没有被点击过
2.鼠标悬浮上面
3.点击之后不松手
4.点击之后，再回去
我们将input框鼠标点进去之后那个状态叫做 input获取焦点 聚焦 focus 鼠标移出去之后的状态 叫做input框失去焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link {/*没有被点击过*/
color: red;
}
a:hover {/*悬浮*/
color: chartreuse;
}
a:active {/*点击之后不松手*/
color: burlywood;
}
a:visited {/*点击之后，再回去*/
color:indianred;
}
input:focus {/*聚焦*/
background-color: lime;
}
span:hover {/*悬浮*/
background-color: lime;
}
</style>
</head>
<body>
<a href="https://www.luffycity.com">点你妈卖批</a>
<input type="text">
<span>span</span>
</body>
</html>
伪元素选择器
清除浮动带来的负面影响，可以通过css添加文本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:first-letter {/*第一个字*/
font-size: 48px;
color: lime;
}
p:before {/*开头插入内容*/
content: '*';
color: red;
}
p:after {/*结尾插入内容*/
content: '*';
color: red;
}
</style>
</head>
<body>
<p>认识你愈久，愈觉得你是我人生行路中一处清喜的水泽，几次想忘于世，总在山穷水尽处又悄然相见，算来即是一种不舍。我知道，我是无法成为你的伴侣，与你同行。在我们眼所能见耳所能听的这个世界，上帝不会将我的手置于你的手中。这些，我都已经答应过了。这么多年，我很幸运成为你最大的分享者，每次见面，你从不吝惜把你内心丰溢的生息倾注于我的杯。我的固执不是因为对你任何一桩现实的责难，而是对自己生命忠贞不贰的守信。你甚美丽，你一向甚我美丽。</p>
</body>
</html>
选择器优先级
选择器相同的情况下 引入的方式不同：
遵循就近原则，谁离得标签更近，就听谁的
选择器不同的情况下：
行内选择器>id选择器（其次）>类选择器（使用最频繁）>元素选择器