目录：
1.1 web开发的三把利器介绍返回顶部
1. HTML ：可以比作一个赤裸裸的人站在这里（就是自身带有一些属性）
1、-- 20个标签
2、-- HTML实质就是浏览器能够认识的规则
3、开发者：
- 写html文件（充当模板的作用）
- 数据库获取数据，然后替换到html文件指定位置（web框架）
2. CSS ：就是=给这个人穿上华丽的衣服
-- 颜色
-- 位置
3. JS ：让这个人可以动
1.2 网页头部head标签中几个常用标签返回顶部
1、Head标签之<meta>标签
1. 页面编码（告诉浏览器是什么编码）
<meta charset="UTF-8"> <!-- 这种不成对的叫自闭合标签 -->
2. 刷新和跳转
<meta http-equiv="refresh" content="3"> <!-- 每3秒刷新一次页面 -->
<meta http-equiv="refresh" content="3;Url=http://www.baidu.com.cn"> <!-- 3s自动跳转到指定页面 -->
3. 关键字搜索
<meta name="keywords" content="关键字1，关键字2">
4. X-UA-Compatible：IE兼容性问题
说明：优先使用IE9对网页渲染，如果不是IE9再使用IE8
<meta http-equiv=”X-UA-Compatible” content=”IE=IE9;IE=IE8;″ />
2、head中其他标签
<title> Title </title>
<link rel="stylesheet" type="text/css" href="base.css" />
<style> </style>
<script src="base.js"> </script>
1.3 html常用标签归类返回顶部
1、行内标签
1. <span>
2. <a>
3. <input>
4. <pre> {{ enroll_obj.enrolled_class.contract.template }} </pre> #数据库文本格式什么样就在前端怎样显示
2、可以提交数据到后台的标签
1. Form表单中有两个参数：
1） action : 指定将表单中数据提交到哪个服务器
2） method : 指定使用post（字典）或者get（url）提交数据
2. input中的属性
1） type="text" --- 提交单行文本文件
2） type="password" --- 提交密码
3） type="file" --- 提交文件
4） type="submit" --- 将数据提交
5） type="radio" --- 单选框
6） type="checkbox" --- 多选框
7） type="button" --- 按钮标签
8） type="rest" --- 将所有自己填的数据全部重置
3. <textarea>默认内容</textarea> //多行文本输入
4. <select> <option>选项值 </option> </select> //下拉菜单
3、块级标签
1. <p>
2. <div>
3. <h1>
4. <img>
5. <ol><li> </li></ol>
<ul><li> </li></ul>
6. <table> </table>
1.4 input系列标签返回顶部
1、form标签中三个参数
<form action="http://localhost:8888/index" method="POST" enctype="multipart/form-data">
2、单选框、多选框、下拉菜单
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://localhost:8888/index" method="POST" enctype="multipart/form-data">
<h5>1、单选</h5>
男：<input type="radio" name="gender" value="1" />
女：<input type="radio" name="gender" value="2"checked="checked"/> <h5>2、多选</h5>
男球：<input type="checkbox" name="faver" value="1" />
足球：<input type="checkbox" name="faver" value="2" />
皮球：<input type="checkbox" name="faver" value="3" /> <h5>3、下拉菜单</h5>
<!--<select name="city" size="2" multiple="multiple">-->
<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
</select>
</form>
</body>
</html>
单选框、多选框、下拉菜单
3、多行文本输入
<textarea> </textarea> ---可以输入多行文字
1.5 HTML其他标签返回顶部
1、a标签（行内标签）
1. 跳转
<a href="http://www.baidu.com" target="_blank">超链接</a>
2. 锚：点击第一章标题就跳到第一章内容
<body>
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<div id="i1" style="height:600px">第一章内容</div>
<div id="i2" style="height:600px">第二章内容</div>
<div id="i3" style="height:600px">第三章内容</div>
</body>
a标签中锚的使用
2、img标签（块级标签）
1. src="1.jpg" : 指定图片本地路径
2. title="萌娃" : 当鼠标移动到图片位置就会显示 萌娃 两个字
3. alt="小萌娃" ：当找不到图片路径时会显示 小萌娃 ，有图片则不显示
4. a href ：可以给图片添加一个超链接，点击图片链接到对应网址
<a href="http://www.oldboyedu.com">
<img src="1.jpg" title="萌娃" style="height: 200px; width: 200px;" alt="小萌娃">
</a>
img标签
3、ol、ul、dl 有序无序标签
<ol> <!--ol有序-->
<li> ol是以数字作为行号1,2,3 </li>
<li> ol是以数字作为行号1,2,3 </li>
</ol> <ul> <!--ul无序-->
<li> ul是以圆点 . 作为行号 </li>
<li> ul是以圆点 . 作为行号 </li>
</ul> <dl> <!--dt标题，dd标题中的内容-->
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dt>标题2</dt>
<dd>内容3</dd>
<dd>内容4</dd>
</dl>
有序无序标签
4、table标签
1. table标签行列合并
<table border="1">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="2">行合并</td>
<td>1</td>
<!--<td>1</td>-->
</tr>
<tr>
<td rowspan="2">列合并</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<!--<td>1</td>-->
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
table标签行列合并
2. 常规table表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.table th,td{
text-align:center;
width:200px;
height: 28px;
}
</style>
</head>
<body>
<table class="table" border='1'cellspacing="0" cellpadding="0" >
<thead>
<tr>
<th>课名</th>
<th>期数</th>
<th>开课日期</th>
<th>考勤</th>
</tr>
</thead>
<tbody>
<tr>
<td>python</td>
<td>14</td>
<td>2012-12-12</td>
<td>签到</td>
</tr>
</tbody>
</table>
</body>
</html>
常规table表格
3. 另一种table表格样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.table{
border-spacing: 0;
border-collapse: collapse;
}
.table thead tr th,td{
padding: 20px;
padding-left: 50px;
vertical-align: top;
border-top: 1px solid #ddd;
}
td,th{
display: table-cell;
}
</style>
</head>
<body>
<table class="table table-striped">
<thead>
<tr>
<th>课名</th>
<th>期数</th>
<th>开课日期</th>
<th>考勤</th>
</tr>
</thead>
<tbody>
<tr>
<td>python</td>
<td>14</td>
<td>2012-12-12</td>
<td>签到</td>
</tr>
</tbody>
</table>
</body>
</html>
另一种table表格样式