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>
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; 200px;" alt="小萌娃"> </a>
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>
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>
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>