form表单
#from 的属性设置 action 是提交地址，method是提交方式，也叫请求方式
如果是传图片：enctype="multipart/form-data
input框
<form action="" method="" >
## 文本框
<div>
用户名 <input type="text" name="user" value="123" hidden/>
</div>
<div>
密码：<input type="password" name="pwd">
</div>
#单选，name属性一致，表示是一组的
<div>
性别:<input type="radio" name="sex" value="1" >男
<input type="radio" name="sex" value="0" checked >女
</div>
#多选
<div>
爱好：<input type="checkbox" name="hobbies" value="bsk" checked/>篮球
<input type="checkbox" name="hobbies" value="sing" checked />唱
<input type="checkbox" name="hobbies" value="jump"/>跳
<input type="checkbox" name="hobbies" value="rap"/>rap
</div>
#上传文件
<div>
头像：<input type="file" name="arator">
</div>
#提交按钮
<input type="submit" value="登入">
#重置按钮
<input type="reset" value="重置">
#普通按钮
<input type="button" value="我是按钮">
</form>
select下拉框，可单/多选
<div>
<select name="city" id="city" multiple>
<option value="1" selected="selected">北京</option>
<option value="2" selected="selected">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</div>
textarea，多行输入框
<div>
<textarea name="memo" cols="300" rows="10"> jjlkjdaflsdflsadklfsdfklsdlkfsdklkl </textarea>
</div>
CCS的引入方式
<head>
<meta charset="UTF-8">
<title>Title</title>
#内部样式
<style>
.a{
10px;
height: 20px;
background-color: yellow;
}
</style>
#外部样式
<link rel="stylesheet" href="b.css">
</head>
#行内样式（内联样式）
<body>
<div style=" 10px;height: 20px;background-color: red"></div>
<div class="a"></div>
<div class="b"></div>
</body>
标签的嵌套
#块级元素占一整行
#通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
<div>123
<div>123213</div>
</div>
#p标签不能包含块级标签，p标签也不能包含p标签。
<p>asdasd<p>我是p</p> <div>asdasd</div></p>
选择器
#id选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#a{
color: red;
}
</style>
</head>
<body>
<div id="a">asdasd</div>
<div>asdasd</div>
</body>
#类选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.p{
color:red ;
}
.a{
font-size: 36px;
}
</style>
</head>
<body>
<div class="p a">
asdasd
</div>
</div>
<div class="a">wo s </div>
</body>
#后代选择器，选择范围包括所有后代
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*div .a{*/
/*color: red;*/
/*}*/
/*#b .a{*/
/*color: red;*/
/*}*/
div div{
color: red;
}
</style>
</head>
<body>
<div id="b" class="c">asda
<div>我是第一个儿子</div>
<div class="a">我是第二个儿子
<div>我是孙子</div>
</div>
</div>
</body>
#儿子选择器，选择下一级，但是注意有些属性会继承
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a>div{
/*background-image:url("1.jpg") ;*/ #背景图片不能继承，像字体属性，子标签会继承父标签
}
</style>
</head>
<body>
<div class="a">我是爸爸
<div class="b">我是儿子
<p class="b" >我是孙子</p>
</div>
</div>
</body>
#兄弟选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span~.a{ #不包括span本身
color: red;
}
</style>
</head>
<body>
<div>
<span>span</span>
<h1 class="a">h1</h1>
<h2 class="a">h2</h2>
<p>p</p>
<h4 class="a">h4</h4>
</div>
<p class="a">sdsd</p>
</body>
#标签选择器，标签选择器，只要是这个标签都会被选中
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
/*color: red;*/
color: red;
}
</style>
</head>
<body>
<div>dasdasda
<div>而知</div>
</div>
<div>asdasd</div>
</body>
#毗邻选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div+p{
color: red;
}
</style>
</head>
<body>
<div>
dasd
</div>
<p>ppppp</p>
<p>2ppp</p>
</body>
#组合选择器，使用符号“，”
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*div,p{*/
/*color: red;*/
/*}*/
/*div .a{*/
/*color: red;*/
/*}*/
div .b .a,p,.c{
color: red;
}
</style>
</head>
<body>
<div>
<div class="b">345
<div class="a">123</div>
</div>
<div class="a">
678
</div>
</div>
<p>p</p>
<div class="c">9098</div>
</body>
#通用选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
color:red;
}
</style>
</head>
<body>
<div>asdasd</div>
<span>sdasd</span>
<p>asdasd</p>
</body>
#伪类选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link{ #未点击
color: yellow;
}
a:hover{ #悬停
color: red;
}
a:active{ #选中
color: green;
}
/*a:visited { color:pink } #已点击过
</style>
</head>
<body>
<a href="伪类选择器.html">点我</a>
</body>
#属性选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
/*div[name]{*/
/*color: red;*/
/*}*/
div[name="123"]{
color: red;
}
</style>
</head>
<body>
<div name="123"> div</div>
<div name="455">我是div</div>
<div>没有属性的div</div>
#伪类元素选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:first-letter { font-size: 48px; color: red; }
body{
font-size: 16px; color: red;
}
p:before { font-size: 48px; color: red; }
body{
font-size: 16px; color: red;
}
p:after { font-size: 48px; color: red; }
body{
font-size: 16px; color: red;
}
span{
color: blue;
}
</style>
</head>
<body>
<p>我<span style="color: pink">爱</span>你</p>
</body>
#选择器的优先级
内联样式 > id选择器 > 类选择器 > 元素选择器
宽高属性
#可以使用像素数，或者占屏幕百分比
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{ #块级元素可以设置宽高，行内元素不能设置宽高，但是会随着行内元素字体的大小改变
20%;
height: 200px;
background: yellow;
}
span{
20%;
height: 200px;
background: pink;
}
</style>
</head>
<body>
<div>div</div>
<span>span</span>
</body>
字体属性
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#非重点 哪种字体
/*body{*/
/*font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif */
/*}*/
#字体的大小
/*span{*/
/*font-size: 17px;*/
/*}*/
#字体的粗细
/*span{*/
/*font-weight: normal;*/
/*}*/
#字体的颜色
span{
/*color: yellow;*/ #四种方式
/*color:#3333;*/
/*color: rgb(255,0,255);*/
/*color: rgba(255,0,255,0.5);*/
}
</style>
</head>
<body>
<span>我是span</span>
</body>