html回顾
常用的html标签
<html></html>
<head></head> ：head内的标签不是给用户看的，是用来定义一些配置，给浏览器看的
<body></body> ：body内的标签就是浏览器展示给用户看的
head内常用的标签：
<title></title>: 用来显示网页标题
<style></style>: 定义内部样式，内部也支持写css代码
<script></script>: 用来写js代码，也支持导入外界的js文件
<link></link>: 用来引入外部的css文件
</meta>: 定义网页原信息
meta标签介绍：
name属性：主要用于描述网页，与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的
<meta name='keywords' content='meta总结，html meta,mata属性，meta跳转'>
# keywords关键字，在搜索引擎中输入这些就会显示网页
<meta name='description' content='老男孩教育python学院'> # 描述信息
body常用标签
基本标签（块级标签和行内标签）
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p>
<h1>h1~h6标题标签</h1>
<br> 换行
<hr> 添加水平线
// 无序列表，type属性有：disc(实心圆点，默认值)、circle(空心圆圈)、square(实心方块)、none(无样式)
<ui>
<li>第一项</li>
<li>第二项</li>
</ui>
// 表格标签
<table>
<thead> # 表头
<tr>
<th></th>
</tr>
</thead>
<tbody> #表体
<tr>
<td></td>
</tr>
</tbody>
</table>
//form表单标签
表单属性：
1.action:控制数据提交目的地
1.不写的情况下，默认提交到当前的页面所在的路径
2.写全路径（http://www.baidu.com)
3.路径后缀（/index/)
2.form表单默认是get请求，通过method参数可修改为post请求
3.form表单中要想触发提交动作，可通过以下两种情况：
1.input标签type指定成submit
2.直接写button标签
4.获取用户输入（输入，选择，上传。。。）的标签，都必须有一个name属性，这个name属性 就类似于字典的key,而标签获取到的用户写入的值就类似于字典的value。
<input type="text" id="d1" name="username" value="默认值">
name就相当于是字典的key
value就是字典的值
获取都的用户输入都会被放入value属性中
5.form表单传文件的时候，需要指定enctype参数
input标签
input元素会根据不同的type属性，变化成多种形态
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框 | |
| date | 日期输入框 | |
| checkbox | 复选框 | |
| radio | 单选框 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| button | 普通按钮 | |
| hidden | 隐藏输入框 | |
| file | 文本选择框 |
text:普通文本
password:密文 不展示明文
date:日期
submit:触发提交动作
button:普通按钮 没有实际意义 但是可以通过js绑定事件实现自定义动作
reset:重置表单内容
radio:单选 可以通过checked控制默认选择(当属性值和属性名相同的情况下 可以简写 checked) checked="checked"
checkbox:多选 同上 可以设置默认值
file:获取用户上传的文件
select标签
默认是单选 可以通过multiple变成多选
如果想默认选择 用selected (selected="selected")
textarea标签
获取用户输入的大段文本
css复习
选择器
1、基本选择器
元素选择器 (标签名+样式) p是标签名
p {color:red;}
ID选择器 标签的id值+样式
#i1 {
background-color: red;
}
类选择器 点+标签class值+样式
.c1 {
color:red;
}
注意：样式类型不要用数字开头。标签中的class属性如果有多个，要用空格分隔。
通用选择器 针对于所有都会修改成这个样式
*{
color:white;
}
2、组合选择器
后代选择器
/*li内部的a标签设置字体颜色*/
li a {
color: green;
}
儿子选择器
/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {
color:white;
}
毗邻选择器
/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
margin: 5px;
}
弟弟选择器
/*i1后面所有的兄弟p标签*/
#i1~p {
border: 2px solid royalblue;
}
3、属性选择器 （下面这个title是随意取的一个名字）
/*用于选取带有指定属性的元素。*/
p[title] {
color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
color: green;
}
4、伪类选择器 (标签名：状态名)
用a标签的各种状态举例
/* 未访问的链接 */
a:link {
color: #FF0000
}
/* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
}
/* 选定的链接 */
a:active {
color: #0000FF
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/*input输入框获取焦点时样式*/
input:focus {
outline: none;
background-color: #eee;
}
6、伪元素选择器
first-letter 常用的给首字母设置特殊样式
p:first-letter {
font-size: 48px;
color: red;
}
before
/*在每个<p>元素之前插入内容*/
p:before {
content:"*"; #插入内容
color:red;
}
after
/*在每个<p>元素之后插入内容*/
p:after {
content:"[?]";
color:blue;
}
before和after多用于清除浮动
7、选择器的优先级
行内样式>id选择器>类选择器>元素选择器