Created on 2017年1月16日
第1课 上节回顾 38minutes
第2课 HTML概要 10minutes
HTML
CSS
JS
第3课 HTML请求流程 9minutes
第4课 HTML代码结构分析 22minutes
HTML：DOCTYPE HTML
顶部加上这个：
<!DOCTYPE html>
<meta 写编码设定>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
这里通过name定义关键字
<meta content="always" name="referrer">
刷新和跳转
<meta http-equiv="Refresh" Centent="30"> 本页面30秒刷新一次
<meta http-equiv="Refresh" Centent="5",Url="http://www.baidu.com"/> 过5秒跳到其他页面
IE兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
CSS/JS同理
<link rel="stylesheet" type="text/css" href="css/common.css">
<title> test </title>
<link 这里定义头部的小图标>
第5课 HTML之块级标签和内联标签 25minutes
第6课 HTML之p和br以及a标签 20minutes
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>页面1</title>
</head>
<body>
<!-- 注释内容 -->
<div>块级标签div，占用一行</div>
<h1>块级标签h1</h1>
<p>块级标签p</p>
<span>内联标签span，占用内容字节的空间</span>
<span>内联标签1，直接在后面添加，堆叠</span>
<select>内联标签select</select>
各种符号
<div><div>  表示空格nbsp</div>
<p> 段落<p></p>
换行<br/><br/>
以下是a标签的说明：
target='_blank' 在新页面打开，可自定义标签<br>
<a href='http://www.baidu.com' target='_blank'>这是测试a标签,在新页面打开 </a>
<br>
目录：
<div>
<a href="#id1">第一章</a><br>
<a href="#id2">第二章</a><br>
<a href="#id3">第三章</a><br>
</div>
内容：
<div id="id1">111111</div>
<div id="id2">222222</div>
<div id="id3">333333</div>
</body>
</html>
Created on 2017年1月17日
第7课 HTML之h和select标签 9minutes
<h2>Select标签</h2>
size用于前端显示几个
multiple用于多选
这两个标签会导致页面显示多个选项卡内容
<select multiple="multiple">
<option value="1">shanghai</option>
<option value="1">beijing</option>
<option value="1">guangzhou</option>
</select>
<br>
optgroup用于分组，Option用于单项
<select>
<optgroup label="上海">
<option>松江</option>
<option>静安</option>
</optgroup>
</select>
第8课 HTML之input标签 12minutes
<h2>input标签</h2>
输入 text<input type="text" />输入
密码 password<input type="password" /><br/>
复选框checkbox<input type="checkbox" /><br/>
单选框radio,name属性设置相同，就只能单选，不设定会导致多选<br/>
男：<input type="radio" name="gender"/>
女：<input type="radio" name="gender"/>
<br/>
<h4>button,等 同submit</h4>
<input type="button" value="提交"/>
<input type="submit" value="提交"/>
<h4>上传文件 file</h4>
<input type="file"/>
第9课 HTML之form表单 21minutes
<h2>FORM表单</h2>
button不会提交表单,不用提交数据到后台。
submit提交表单到后台<br>
method:GET/POST
<form action="/" method="POST">
姓名：<input name="username" type="text" /><br>
性别：<input name="sex" type="text" /><br>
年龄：<input name="age" type="text" /><br>
<input type="button" value="button">
<input type="submit" value="提交">
</form>
第10课 HTML之for和table标签 17minutes
<h2>Lable</h2>
lable 和 id 绑定，就可以点击姓名直接输入了
<lable for="username">
姓名：<input id="username" type="text" >
</lable>
<h2>列表 ul ol dl</h2>
<ul>
<li>ul li 1</li>
<li>ul li 2</li>
</ul>
<ol>
<li>ol li 1</li>
<li>ol li 2</li>
</ol>
<dl>
<dt>dl dt河北省</dt>
<dd>dl dd石家庄</dd>
<dt>dl dt山西省</dt>
<dd>dl dd太原</dd>
</dl>
<h2>Table</h2>
<h5>边框：border="1"</h5>
<h5>标题 ：th 默认加粗居中</h5>
<h5>合并两列<td colspan='2'></h5>
<h5>合并两行<td rowspan='2'></h5>
<table border="1">
<tr>
<th>IP</th>
<th>IP</th>
<th>IP</th>
</tr>
<tr>
<td colspan='2'>1</td>
<td>1</td>
</tr>
<tr>
<td rowspan='2'>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>21</td>
<td>21</td>
</tr>
</table>
第11课 HTML之fieldset标签 5minutes
<h2>fieldset标签</h2>
显示一个大框，可以将内容放在框中，正常登录页面可以这么做
<fieldset>
<legend>登录</legend>
姓名：<input name="username" type="text" /><br>
性别：<input name="sex" type="text" /><br>
年龄：<input name="age" type="text" /><br>
</fieldset>
form上传文件：
在Form中要加这个enctype="multipart/form-data"
第12课 CSS之样式概要和各种选择器 30minutes
CSS三种方式：
直接使用：<div style="background-color:red;">sss</div>
class选择器：.log
id选择器：#log
关联选择器：层级选择
组合选择器：中间加逗号
属性选择器：就是input下的属性选择
.logo{
background-color:green;
}
<div class='logo'>ssdfsdfsds</div>
<!--#id 是找等于此名称的id -->
#id{
background-color:whilt;
}
div id='id'>#号调用调用</div>
找所有div标签，标注为红色,可同时设置为多个
div,a,table{
color:red;
}
<!--层级显示div下的a标签应用此CSS -->
div a{
color:while;
}
<!--应用input[type='text'] -->
input[type='text']{
color:brown
}
第13课 CSS之样式背景图片 15minutes
背景颜色：background-color:whilt;
背景图片：background-image:css.jpg;background-repeat:no-repeat
正常情况使用DIV加图片，如果图片较小，会在当前行重复，可用no-repeat不重复
<div style="background-image:url('c.png');height:80px;"></div>
<div style="background-image:url('c.png');height:80px; background-repeat:norepeat"></div>
可将Background的属性放在一块：
<div style="background:url('c.png') no-repeat;height:80px;"></div>
可通过height: 18px; 21px对图片进行剪切
<div style="background:url('css.jpg') no-repeat;height: 18px; 21px;"></div>
第14课 CSS之样式边框和内外边距 18minutes
<div style="border:3px solid red;height:49px;40px;">sss
border:1px 边框线粗细
solid 实线
red 边框线红色
height:49px;40px; 长宽
margin-left 外边距
<div style="height:30px;background-color:green;margin-left: 11px;margin-right: 11px;margin-top: 20px;margin-bottom: 20;">ddd</div>
padding-top 内边距
<div style="height:30px;background-color:green;padding-top: 35px;">ddd</div>
第15课 CSS之样式position 52minutes
<h3>display</h3>
display:none 隐藏标签，用于自己开发系统的标题栏-需参考
<style>
.hide {
display:none;
}
</style>
display:block <br>
<span style="background-color:red;">内联标签</span>
<span style="display:block; background-color:red;">display:block内联标签变块级标签</span>
<div style="display:inline;">块级标签变内联标签 display:inline</div>
<br>
cursor鼠标属性
<span style="cursor:pointer">pointer</span> 变小手
浮动 float,将块级标签叠加<br>
可用width/height 加相对宽度来布局<br>
子类中如果有Float，父标签中的属性失效<br>
<div style="background-color:green;" class="clearfix">
<div style="float:left;">块</div>
<div style="float:left;">块</div>
<!-- <div style="clear:both;">使用clear:both可让父属性生效</div> -->
<!--
</div>
可采用两种方去解决
1. <div style="clear:both;">使用clear:both可让父属性生效 <br>
2. class="clearfix" <br>
.clearfix:after{ <br>
content:"."; <br>
display:block; <br>
height:0; <br>
clear: both; <br>
visibility: hidden;} <br>
<h2>position</h2>
position:fixed 固定
top:0px 固定在顶部，可调整数字
-->
<div style="position:fixed;height:45px;100%;
background-color:green;top:0px;">
</div>
<div style="margin-top:30px">
<div style="float:left;20%;position:fixed;mrigin-top:20px">left</div>
<div style="float:right;80%">
<p>qqqqqqqqqqqqqqqq</p>
</div>
</div>
<br>
这两个一起使用relative/absolute 绝对和相对
<div style='position:relative;500px;height:200px;
background-color:red'>
<div style='200px;position:absolute;top:0;
left:0;bottom:0;background-color:green;'>ss</div>
</div>
<div style='200px;position:absolute;top:300;
left:0;bottom:0;background-color:green;'>ss</div>
第16课 模态对话框Demo 27minutes
可以将两个的Display都设置为None
同时将Z-index指定值，以确认层级关系，值大放上面
<style>
.shade{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background-color:#333;
opacity:0.6;
display:none;
}
.delete{
position:fixed;
top:50%;
left:50%;
300px;
height:200px;
background-color:green;
margin-top:-100px;
margin-left:-150px;
display:none;
}
</style>
</head>
<body>
<table>
<tr>
<th>IP</th><th>编辑</th>
</tr>
<tr><td>1.1.1.1</td><td>Delete</td></tr>
<tr><td>1.1.1.1</td><td>Delete</td></tr>
<tr><td>1.1.1.1</td><td>Delete</td></tr>
<tr><td>1.1.1.1</td><td>Delete</td></tr>
</table>
<div class="shade"></div>
<div class="delete">
<div>DELETE</div>
<div>Are you sure?</div>
<div>
<input type='botton' value="No"/>
<input type='botton' value="Yes"/>
</div>
</div>
第17课 作业 8minutes
TAB页面
登录注册页面，前面显示同意
第9课整理
Head里的内容：
以下两个页面自动刷新和跳转未能成功执行-------------需检查
页面自动刷新
<meta http-equiv="Refresh" Centent="30"> 本页面30秒刷新一次
过5秒跳到其他页面
<meta http-equiv="Refresh" Centent="5",Url="http://www.baidu.com"/>
<meta 写编码设定>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
这里通过name定义关键字-----------------还不知道干嘛的
<meta content="always" name="referrer">
IE兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
导入CSS文件/JS同理
<link rel="stylesheet" type="text/css" href="css.css">
BODY里的内容：
HTML
<!-- 注释内容 -->
<div>块级标签div，占用一行</div>
<h1>块级标签h1</h1>
<p>块级标签p</p>
<span>内联标签span，占用自身空间，可直接叠加</span>
下拉选项Select,size用于前端显示几个,multiple="multiple"用于多选
<optgroup label="group2"> 用于分组显示,lable显示分组名称,有点像列表显示的dl-dd-dt,不过这是显示,不是选择
<select>内联标签select
<optgroup label="group2">
<option>aa</option>
</optgroup>
</select>
<dl> <dt>河北省</dt> <dd>石家庄</dd> <dt>山西省</dt> <dd>太原</dd> </dl>
符号
lt表示小于号，gt表示大于号 nbsp表示空格nbsp，三个前面都要加&
a标签 target='_blank'
<a target='_blank'>标签</a>
页面内链接,通过#名称找到当前页面的内容,像书签
<div>
<a href="#id1">第一章</a><br>
<a href="#id2">第二章</a><br>
<a href="#id3">第三章</a><br>
</div>
内容：
<div id="id1">111111</div>
<div id="id2">222222</div>
<div id="id3">333333</div>
INPUT标签
<input type='text'>文本框
<input type='password'>密码框
<input type='checkbox'>复选框
<input type='radio' name='aaa'>单选框 radio,name属性设置相同，就只能单选，不设定会导致多选
<input type='button' value="Button">Button
<input type='submit'>Submit
<input type='file'>上传文件
在Form中要加这个enctype="multipart/form-data"
lable 和 id 绑定，就可以点击姓名直接输入了
<lable>
<lable for="username">
姓名：<input id="username" type="text" >
</lable>
列表,后面都要加li
ul无序列表
ol有序列表
<ul> <li>1111</li> <li>2222</li> </ul>
<ol> <li>1111</li> <li>2222</li> </ol>
dl分组显示
<dl>
<dt>河北省</dt>
<dd>石家庄</dd>
<dt>山西省</dt>
<dd>太原</dd>
</dl>
Table表格
边框：border="1"
标题 ：th 默认加粗居中
合并两列colspan='2'
合并两行rowspan='2'
<table border='1'>
<tr>
<th>列名1</th>
<th>列名2</th>
<th>列名3</th>
</tr>
<tr>
<td colspan='2'>111</td>
<td rowspan='2'>333</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
</tr>
</table>
FORM表单
button不会提交表单,不用提交数据到后台。
submit提交表单到后台<br>
method:GET/POST
在Form中要加这个enctype="multipart/form-data"
<form action=''>
用户名:<input type="text">
密码:<input type="password">
<input type="submit">
</form>
fieldset标签
显示一个大框，可以将内容放在框中，正常登录页面可以这么做
<legend>设置大框的名称
<fieldset>
<legend>Login</legend>
用户名:<input type="text">
密码:<input type="password">
<input type="submit">
</fieldset>
CSS
三种使用方式:标签内置,单独写CSS,外部CSS文件
选择器:
class选择器：.log 页面中可以用 class="log" 调用
id选择器：#log
关联选择器：层级选择
组合选择器：中间加逗号
属性选择器：就是input下的属性选择
.log{
background-color:red;}
#log1{
background-color:green;}
div a{
color:while;}
input[type='text']{
color:brown;}
样式图片:
背景颜色：background-color:whilt;
背景图片：background-image:css.jpg;background-repeat:no-repeat
正常情况使用DIV加图片，如果图片较小，会在当前行重复，可用no-repeat不重复
可通行切割过宽度和高度对图片进
<div style="background-image:url('c.png');height:20px;background-repeat:no-repeat">
<div style="background:url('c.png') no-repeat;height:20px;"> 同上
边框:
border:1px 边框线粗细
solid 实线
red 边框线红色
height:49px;40px; 长宽
<div style="border:1px solid red;200px;height:100px">
外边距margin--------有点和position的absolut相似,但内边距只能往下移动,不可以左右移动
上面是指离上文的距离,不是顶部
<div style="background-color:green;height:200px;margin-bottom:0px;margin-right:px;">
内边距padding
<div style="background-color:green;height:200px;margin-top:30px;margin-left:30px;">
<div style="height:30px;background-color:red;padding-buttom: 0px;padding-right:0px">
DISPLAY
display:none 隐藏标签
.hide {
display:none;}
display:block 内联标签--->块标签
display:inline 块标签--->内联标签
FLOAT浮动
子类中如果有Float，父标签中的属性失效,可添加一个空的,style="clear:both"
<div style="background-color:brown">
<div style="float:left;20%;height:40px;background-color:red"></div>
<div style="float:right;70%;height:40px;background-color:green"></div>
<div style="clear:both"></div>
</div>
也可使用以下样式操作:
<div style="background-color:brown" class="clearfix">
.clearfix:after{
content:".";
display:block;
height:0;
clear: both;
visibility: hidden;
}
cursor鼠标属性
<span style="cursor:pointer">pointer</span> 变小手
POSITION
position:fixed 固定
top:0x 固定在顶部,可调整
<div style="background-color:brown;position:fixed;height:45px;100%;top:0px">
这两个一起使用relative/absolute 绝对和相对
<div style="position:relative;500px;height:300px;background-color:red;margin-left:200px">
<div style="position:absolute;30px;height:30px;background-color:green;right:0;bottom:0;"></div>
</div>
模态对话框Demo
可以将两个的Display都设置为None
同时将Z-index指定值，以确认层级关系，值大放上面
<style>
.shade{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background-color:#333;
opacity:0.6;
display:none;
}
.delete{
position:fixed;
top:50%;
left:50%;
300px;
height:200px;
background-color:green;
margin-top:-100px;
margin-left:-150px;
display:none;
}
</style>
<table>
<tr>
<th>IP</th><th>编辑</th>
</tr>
<tr><td>1.1.1.1</td><td>Delete</td></tr>
<tr><td>1.1.1.1</td><td>Delete</td></tr>
<tr><td>1.1.1.1</td><td>Delete</td></tr>
<tr><td>1.1.1.1</td><td>Delete</td></tr>
</table>
<div class="shade"></div>
<div class="delete">
<div>DELETE</div>
<div>Are you sure?</div>
<div>
<input type='botton' value="No"/>
<input type='botton' value="Yes"/>
</div>
</div>