标签:
块元素：可以设置宽高，div,
行内元素:不可以设置宽高,span,image,
display:inline;//转换成行内元素
display:block;//转换成块元素
display：inline-block;//转换成行内块
display：none;//隐藏元素
行内块元素：
打开新的标签页：<a=href=”” target=”_blink”>
超链接跳转：本地跳转
链接跳转
阻止超链接跳转，在href里添加符号“#”。
特殊符号：
Css引入方式：1.行内：<div style=” XXXXXXXX”> </div>
优势：优先级最高
劣势：容易使代码混乱，结构不清晰，不建议使用
2.head内部引入<style>，就近原则
3.嵌入式：<link>，就近原则
就近原则：内部引入和嵌入式谁距离html近,谁的优先级高
分屏快捷键：Shift+Alt+需要屏幕的数字
页面：
选择器：类选择器 class：可以同时用多个类名，也可重名
TOP：1.布局：宽高：width,height
居中：auto
左浮动: float
父选择器nth-child(数字（孩子的数字）){}
表格：table标签：1.标题：<caption>
2.行：<tr>
3.列：<th>
单元格之间的缝隙 cellspacing
文本和边框之间的距离 cellpadding
文本居中：align=”center”
边框：border
表格背景色：bgcorlor
合并：行的合并：rowspan
列的合并：colspan
列表：有序列表：type=“ol”（前面有序号）
无序列表：type=”circle(默认空心圆)/square（默认实心圆）”：（前面无序号）
ul里面只可以写li，但是li里可以写任何内容
list-style:none;//去除默认黑点
list-style-image:url(图片路径);//图标代替默认黑点
list-style-position:inside;//把小黑点改变为内容区域
line-height:;//上下居中
hover：伪类选择器，鼠标经过显示里面的内容
表单：<form>
post:：传送的数据量大，安全性较高
get:传送的数据量小，安全性较低
fieldset：文本在框上面
legend:单行文本输入框
lable:密码输入框
属性：placeholder：提示输入信息
vlue=” ”:自动写入的内容
密码：for=“pwd”
下拉列表：
select：被选项
option
文本输入框：input
数字输入框：type=“number”
单选按钮：type=“radio” value=“***”
复选框：type=”checkbox
多行文本输入框：
<textarea>
按钮：普通按钮：type=”button”
提交按钮：type=”submit”
重置按钮：type=”reset”
表单中的类型——type：text（文本输入框）、password（密码输入框）、number（数字输入框）、radio（单选按钮）、checked（复选按钮）、
button（普通按钮）、submit（提交按钮）、reset（重置按钮）、
实例1：
表单效果图：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<style>
/**{
margin:0;
padding:0;
}*/
tr{
height: 30px;
width:20px;
}
td{
height:10px;
}
.zhuce{
background-color: red;
color:#fff;
width:150px;
height:40px;
}
.denglu{
font-size: 10px;
}
</style>
<body>
<table align="center">
<caption><b>青春不常在，抓紧谈恋爱</b></caption>
<form method="get post">
<tr>
<div>
<td>性别</td>
<td><label><input type="radio" name="gender" value="male"><img src="images/man.jpg" alt="">男</label>
<label><input type="radio" name="gender" value="female"><img src="images/women.jpg" alt="">女</label></td>
</div>
</tr>
<br>
<tr>
<div>
<td>生日</td>
<!-- <label><input type="text" name="" value="" placeholder="请选择年"></label> -->
<td><select id="birthday">
<option value="year">请选择年</option>
<option value="year">1997</option>
<option value="year">1996</option>
</select>
<select id="birthday">
<option value="year">请选择月</option>
<option value="year">1997</option>
<option value="year">1996</option>
</select>
<select id="birthday">
<option value="year">请选择日</option>
<option value="year">1997</option>
<option value="year">1996</option>
</select>
</td>
</div>
</tr>
<tr>
<div> <td>所在地区</td>
<td><label><input type="text" name="" value="" placeholder=""></label></td>
</div>
</tr>
<br>
<tr>
<div>
<td>婚姻状况</td>
<td><label><input type="checkbox" name="">未婚</label>
<label><input type="checkbox" name="">离婚</label>
<label><input type="checkbox" name="">丧偶</label></td>
</div>
</tr>
<br>
<tr>
<div><td>学历</td>
<td><input type="text"></td>
</div>
</tr>
<br>
<tr>
<div><td>月薪</td>
<td><label for="number"><input type="number"></label></td>
</div>
</tr>
<br>
<tr>
<div><td>手机号</td>
<td><label for=""><input type="text"></label></td>
</div>
</tr>
<br>
<tr>
<div><td>昵称</td>
<td><label for=""><input type="text"></label></td>
</div>
</tr>
<br>
<tr>
<div><td>喜欢的类型</td>
<td><label><input type="checkbox" name="">妩媚</label>
<label><input type="checkbox" name="">柔美</label>
<label><input type="checkbox" name="">可爱</label>
<label><input type="checkbox" name="">小鲜肉</label>
<label><input type="checkbox" name="">型男</label>
<label><input type="checkbox" name="">气质</label></td>
</div>
</tr>
<tr>
<div><td>自我介绍</td>
<td><label><br><textarea cols="30" rows="10" style="overflow: :scroll"></textarea></label><br>
<input type="image" src="images/btn.png">
<!-- <input class="zhuce" type="submit" name="" value="免费注册"> --><br><br>
<label><input type="radio" >我同意注册条款和会员加入标准</label>
<br>
<br>
<a href="#" class="denglu">我是会员，立即登录</a>
</td>
</div>
</tr>
<tr>
<div></div>
</tr>
</form>
</table>
</body>
</html>
实例2：
表格效果图：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
tr{
height: 50px;
}
th{
width: 100px;
}
</style>
</head>
<body>
<table border="1" align="center" cellspacing="0" cellpadding="10">
<caption><b>个人简历</b></caption>
<tr>
<th>姓名</th>
<th> </th>
<th>性别</th>
<th> </th>
<th>民族</th>
<th> </th>
<th rowspan="3">照片</th>
</tr>
<tr>
<th>出生年月</th>
<th> </th>
<th>政治面貌</th>
<th> </th>
<th>籍贯</th>
<th></th>
</tr>
<tr>
<th>毕业院校</th>
<th></th>
<th>专业</th>
<th></th>
<th>毕业时间</th>
<th></th>
</tr>
<tr>
<th>外语水平</th>
<th colspan="3"></th>
<th>计算机</th>
<th colspan="2"></th>
</tr>
<tr>
<th>电话 </th>
<th colspan="3"></th>
<th>Email</th>
<th colspan="2"></th>
</tr>
<tr >
<th >社会实践</th>
<th colspan="6"></th>
</tr>
<tr >
<th >获奖情况</th>
<th colspan="6"></th>
</tr>
<tr>
<th bgcolor="#ccc">兴趣爱好</th>
<th colspan="6" bgcolor="#ccc"></th>
<
</tr>
<tr>
<th rowspan="4">工作经历</th>
<th>时间</th>
<th>单位</th>
<th>经历</th>
<th colspan="3"></th>
</tr>
<tr>
<th>2016年3月</th>
<th></th>
<th></th>
<th colspan="3"></th>
</tr>
<tr>
<<th>2017年3月</th>
<th></th>
<th></th>
<th colspan="3"></th>
</tr>
<tr>
<th>2018年3月</th>
<th></th>
<th></th>
<th colspan="3"></th>
</tr>
<tr>
<th>项目经验</th>
<th colspan="6"></th>
</tr>
<tr>
<th>求职意向</th>
<th colspan="6"></th>
</tr>
<tr>
<th>自我评价</th>
<th colspan="6"></th>
</tr>
</table>
</body>
</html>
