开发工具：
普通青年：Dremweaver
文艺青年：sublime
高手和傻子：用记事本
<p></p>一个段落
<hr />水平
线标签 单标记
<img src=”图像路径” /> 单标签
Autplay自动播放 loop循环播放
<base target=”_blank”/> 所有网站在新标签中打开
© 版权符号
Mate标签用法
<mate char=”utf-8”>防止乱码
Charset:字符集
Utf-8：编码格式
Gbk
Gb2312
Big5
<meta name=”keywords” content=””>
<meta name=”keywords” content=”网上购物,女装”>
设置网页关键字
3设置网页描述信息
<meta name=”description” content=”描述信息”>
给搜索引擎看的
4网页重定向
<meta http-equiv=”refresh” content=”3; http://www.baidu.com”>
Link标签
1设置网页图标（在head标签里）
<link rel=”icon” href=””>(rel 格式 href图标位置 不一定是ico（小图标 ）格式 大部分都是)
注意事项：1最好将图标放到根目录下
2设置引用外部样式表:<link rel=”stylesheet” href=”1.css”>
列表
无序列表：（经常用无序列表）
<ul type=”square”>
<li>列表项</li>
</ul>
有type属性
Type=”circle”空心圆 Type=”disc”实心圆 <--默认 Type=”square”实心方块
有序列表：
<ol type=””>
<li>列表项</li>
</ol>
属性Type 默认123 type=”a” ttype=”I ”
自定义列表：
<dl>
<dt>标题</dt>
<dd>列表项</dd>
</dl>
注意：1dt标签中只能包含行内元素
2 dd标签中可以包含所有的标签
3 网页结尾处的列表处的列表使用自定义列表
路径介绍：
分类 两类
绝对路径：-cUserasusDesktop 413day01codea.jpg
-http://www.baidu.com/b.jpg 完全的加盘符
相对路径 一个文件相对另一个文件的位置 三种写法
1在一个路径下 直接写文件名称 <img src=”a.jpg” alt = “这是一个美女”>
2 图片在html的下层路径
在Html文件中，使用img文件夹下的a.jpg
把两个的绝对路径都拿出来 找相同的部分
。。。。。 4.html
。。。。。 imga.jpg
在html中使用图片 4.html和img在一个路径下 简单地说 图片在html的下层路径
Imga.jpg
3 图片在html文件上层路径
首先把两个的绝对路径都拿出来
。。。。 code4.html
。。。。 c.jpg
怎么表示上层目录路径 ../ 表示相同的部分 表示上层的上层../../
超链接
<a href = “链接到的资源路径”>显示在上面的内容</a>
href 链接的资源地址 href=”#”不做任何处理
target=”_blank” 设置打开的方式 _blank 在新标签打开 _self 当前页 默认
定位资源
<a href=”top”>顶部</a> 回到这个位置 <a href=”#top”>回到顶部</a>
<pre></pre> 格式标签 原样输出
表格
<!--cellspacing默认值是2(内行与外行距离) 文字默认在表格最左侧 cellpadding设置内容与td左侧的距离-->
<caption>设置标题</caption>
表格中的标签介绍：设置表头<th></th> （表格里面第一行）
快速生成：
table[boder="1" width="100"]>tr*4>td*4
表格结构介绍：
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
纵向合并 roespan
横向合并 colspan
表单
作用：收集用户信息
组成：
提示信息
表单控件（重点）
表单域
<form action=”” method=”” > action提交地址默认提交到当前界面
</form> method get安全性 大小限制 携带数据 post
文本输入框：
<input type=”text” mexlength=”6” readonly>
属性：
Maxlength 设置最大长度
Readonly 设置控件为只读
Disabled 禁止用户输入
Name 设置控件名称
Value 设置默认值
Id 控件编号
Placeholder ：占位符Placeholder=”敬清秋”
autocomplete autocomplete=”on”:输入框有历史记录自动完成 ；off无历史记录
required 必须输入填写不然提交不了
密码输入框
<input type=”password”>
属性：
Maxlength 设置最大长度
Readonly 设置控件为只读
Disabled 禁止用户输入
Name 设置控件名称
Value 设置默认值
Id 控件编号
单选控件
<input type=”radio”>
注意该控件实现单选效果需要给控件设置相同的name名称
属性：
Checked=”checked”默认选中项
下拉列表
<select>
<option>河北</option>
<option>北京</option>
<option>河南</option>
<option>山西</option>
<option selected>陕西</option>
</select>
属性:
Selected默认选项在option选项里
Multiple: <select multiple="multiple"> 很少有人去 用实现多选效果 按住CTRL
其他写法：
<select>
<optgroup label="河北省">
<option>张家口</option>
<option>承德</option>
<option>石家庄</option>
<option>保定</option>
<option>邯郸</option>
</optgroup>
</select>
多选控件：
<input type="checkbox" name="" checked>看书
Checked 默认选择
资源上传：
请上传图片：
<input type="file">
按钮
提交按钮：<input type=”submit”> （提交页面数据）
使用图片提交<input type=”image” src=”图片路径”>
普通按钮：<input type=”buttuon”>(普通按钮不能提交表单数据)
重置按钮：<input type=”reset”>（将数据恢复到默认值）
图片上传按钮：<input type=”image” src=”按钮.jpj”> (提交表单数据)
封装表单 分组和标题如下：
<fieldset>
<legend></fieldset>
</fieldset>
邮箱：<input type=”email” name=”em”>
数字：<input type=”number” step=”5”>只能输入数字 step每次叠加5
时间：<input type=”time”> <input type=”date”> <input type=”datetime”>手机用
<input type=”week”> <input type=”color”> <input type=”range”>
网址：<input type=”url” name=”url”>
标签语义化（了解）
文本域<textarea cols=”10” row=”10”></textarea>
隐藏项 不会显示在界面上 存于HTML中<input type=”hidden”/>
Emmet语法：
div>ul>li(+Tab)
div+p+ul>li(+Tab)
<!—重复-->：
ul>li*10(+Tab)
CSS基础
1 、css重点总结
2 、选择器
3 、盒子模型
4 、浮动
5 、定位
1.2概念：
层叠样式表或者级联样式表（Cascading Style Sheets）
层叠：CSS的特性
内嵌式写法：
外链式写法：
行内式写法：
内嵌式写法：将CSS放到HTML中去写
在<head>标签里加入style标签
<style type=”text/css”>
CSS代码
</style>
CSS语法： 选择器 {属性； 值； 属性； 值；} 选择标签的过程：标签选择器、类选择器、ID选择器、通配符选择器、交集选择器（标签指定式）、后代选择器、子代选择器、并集选择器
补充：伪类选择器、属性选择器、伪元素选择器
常用属性：
color:前景色（文字颜色）
background-color 背景色
font-size 设置文字大小
width 设置宽度
height 设置高度
px 像素 em 1em=一个文字大小
颜色表示方式
使用十六进制表示：#0-f之间
使用三原色：
RGB
R:red(0-255)
G:green(0-255)
B：blue(0-255)
扩展半透明效果：
另一种
类选择器：
.自定义类名{属性： 值；
}
使用：.p_red{ color：red；}
通过class调用类样式
<p class=”p_red”>文字1</p>
类选择器注意事项：
1 、一个类可以被多个标签同时调用
2 、一个类标签可以同时调用多个样式（人的名字）：<p class="p_red public">段落文字1</p>
类命名规范：
① 不能使用纯数字或者以数字开头定义的类名
② 不推荐使用汉字 （可以不推荐用）
③ 不能使用特殊字符或者开头（%、@、！、&）
④ 个人推荐不使用标签名
复合选择器：
1标签指定式选择器
语法：
后代选择器：
注意后代选择器之间必须是嵌套关系
选择器与选择器之间必须有空格隔开
语法
关联选择器：
<div><p>4654546</p></div>
div p{ font-color:red;
} /*标签与标签之间有空格*/
组合选择器：
<div>546545</div>
<p>456465</p>
把不同的标签改成相同的样式：
div,p{ font-color:red;
}
伪元素选择器
Css里面提供了一些定义好的，可以直接拿过来用
比如超链接
原始状态 鼠标放上去的状态
点击 点击后
<a href=”http://www.baidu,com.cn”>CSS概述和与html的结合方式超链接一</a>
原始状态: a:link{background-color:rad;}
悬浮状态：a:hover{background-color:green;}
点击状态：a:active{background-color:red;}
点击之后：a:visited{ background-color:red;}
p
{Text-indet:2em/20px(像素)} 首行缩进在选择器里
ID选择器：
#自定义名称{
}
定义：
#color{
color: red;
}
调用:
<div id ="#color">第一行</div>
注意：页面中标签的id必须唯一；一个标签只能调用一个id样式
通配符选择器：
样式初始化用
*{
Color = red；}
特点：该选择器会将页面所有标签选中
Font属性介绍：
font-size：30px；文字大小
font-weight:normal； 文字加粗
700 建议数字 400文字正常显示
bold 文字加粗
font-style：normal； （正常显示） 文字是否斜体显示
italic 斜体显示
font-family:微软雅黑 可双引号也可以不加
（注意 1一次可以设置多个字体，字体与字体中间用逗号隔开
2要设置常用字体）
文字表示方式 直接设置对应的名称
设置字体对应的英文方式
设置字体对应的编码（不常用已经落后） 浏览器控制台 escape(“宋体”)回车 %相当于
line-height：20px； 设置文字行高
font属性联写
例如：/* font-weight:700; font-style:italic; fon-size:30px;/line-height:20px; font-family:微软雅黑/
P{
font:700 italic 30px/20px 微软雅黑;.
}
注意 1属性联写中必须设置font-size、font-family
2在属性联写中font-size 必须放到font-family前面设置
3如果font 属性联写中的属性都要设置，那么按照图片中的顺序设置
(黄色例子)
布局div+css
Css的盒子模型
1边框 2内边框 3外边框
1、border：统一设置
上border-top
下border-bottom
左border-left
右border-right
border-style边框的样式 border-color颜色
2、内边距：padding统一设置
padding:20px; 使用padding统一设置也可分别设置上下左右四个内边框
分别设置：padding-top
3、外边距
margin统一设置
分别设置：margin-top:20px;….
Css的布局的漂浮
float属性值：
left:文本流向对象右边
right:文本流向对象左边
css布局定位
position:属性（广告经常使用）
absolute:将对象从文档中拖出 可以使用top、bottom等属性进行定位
relative对象不可以层叠，但将依据left、right、top，bottom等属性在正常文档中偏移位置 可以使用top、bottom等属性进行定位
#div{position:relative;
top:80px;
left:120px;
}
图文混排：
文字写进图片中 图片签名
JavaScript
是基于对象事件驱动的语言，应用于客户端
基于对象：提供了很多对象，可以直接拿来用
事件驱动：html做静态效果 ，javascript动态效果
应用于客户端：专门指的浏览器
JS特点：1、交互性：信息的动态交互 2、安全性：JS不能访问本地磁盘
3、跨平台型：(java里面跨平台 虚拟机) 能够支持JS的浏览器都能运行
组成：1、ECMAScript: ECMA:欧洲计算机协会 有ECMA制定的js语法、语句…
2、BOM：borject model:浏览器对象模型
3、DOM：document object model 文档对象模型
JS与HTML结合方式：
两种结合方式1使用一个标签：<script type=”test/javascript”></script>
2、第二种结合方式 使用script标签 引入外部的js文件
创建一个js文件，写js代码
Js的原始类型和声明变量：
Java的基本类型 byte short int long float double char Boolean
Js的原始类型：
string: var str = “abc”; number: var m = 123;
boolean: true和false var flag = true;
null: var date = new Date(); 获取对象的引用，null表示对象引用为空，所有对象的引用也是obhect
undefined: 定义一个变量没有赋值 var aa;
typeof(变量名称);
js的语句：
java里面的语句：if判断语句、switch语句、循环语句
JS里面的语句：if
switch:
Js的运算符: 不区分小数和整数
字符串的相加和相减： var str = “456”; alert(str+1)； 输出4561
做减法 变为 455
Boolean true 1 false：0
== ===区别：
== 两个等号比较的是值不在乎类型 三个等号比较的的是值和类型
页面输入值： document.write(“aaaaaaaaaa”); document.write(“<br/>”);
document.write(“<hr/”);
write里面是双引号，如果设置标签的属性使用单引号
可以输出代码和HTML代码
JS数组： 第一种：var arr ={1,2,3,4}; var ar ={1,”12”,true} ;
第二种：使用内置对象Array ：var arr1 = new Array; //定义一个数组，数组长度是5
arr1[0] = “1”；
使用内置对象Array
var arr2 = new Array{3,4,5,6};//定义一个数组，数组里面元素是3、4、5、6
数组里面有一个属性length
在JS里面定义方法有三种：
1、 使用到一个关键字 function
第一种：function方法名（参数列表）{方法体；返回值可有可无；}
第二种：匿名函数：var add = funtion(参数列表){方法体和返回值;}
第三种：(用得少，了解) 动态函数 使用到JS里面的一个内置对象Function
var add = new function(“x,y”,”var sum;sum = x+y;return sum;”);
alter(add(2,5));
②var canshu = “x,y”;
var fangfati = ” var sum;sum = x+y;return sum;”
var add = new function(canshu, fangfati);
alter(add(2,5));
局部变量和全局变量：
全局变量：在script标签里面定义的一个变量，这个变量在页面使用中js部分可以用
在方法的外部使用 在方法的内部使用 在别的script标签使用
局部变量：在方法内部定义一个变量，只能在方法内部使用
如果在方法的外部调用 会报错
Ie自带一个调试工具 ie8及其以上的版本中 按f12 在页面下方出现一个条
Script标签放置位置规范：
方法的重载：
内容总结：
css和html的四种结合方式
1、 在每个html标签上都有一个属性style，把css和html结合在一起
<div style=”background-color:red;color:green;”>
2、 使用html的一个标签实现<style>标签，写在head里面
<style type=”text/css”> css代码;</stype>
例如：<style type=”text/css”> div{ background-color:red; color:red;} </stype>
3、在style标签里面 适用语句（在某些浏览器不能用）
@import url(css文件路径);
第一步 创建一个css文件
<style type=”text/css”> @import url(div.css); </style>
4、使用头标签 link 引入外部css文件
第一步 创建一个 css文件
<link rel=”stylesheet” type=”text/css” href=”css”文件的路径/>
第三种结合方式 缺点：在某些浏览器下不起作用
优先级（一般情况下）
由上到下，由外到内，优先级由高到低
后加载优先级高
格式：选择器名称{属性名：属性值；属性名：属性值;…}
Css的基本选择器:
标签选择器 div{css 代码;}
Class选择器（类选择器） .名称{}
Id选择器 #名称{}
Css的扩展选择器（了解）
关联选择器:嵌套标签的样式的设置
组合选择器：不同标签设置的相同样式
伪元素选择器： a标签的状态
Css里面提供了一些定义好的样式，可以直接拿过来用
例如超链接状态
原始状态 鼠标放上去的状态 点击 点击后
:link :hover :active :visited
记忆方法： lv ha
Css的盒子模型
*边框:border 上下左右
*内边距：padding 上下左右
*外边距：margin 上下左右
漂浮：float:left right 定位：position:absolute relative
Javascript
*****什么是javascript 基于对象和事件驱动的语言，应用与客户端。
特点：交互性 安全性 跨平台性
Javascript 和java区别
组成（三部分）
*EAScript
*bom
*dom
**Js和html的结合方式（两种）
第一种：<script type=”text/javascript”>js代码</script>
第二种：<script type=”text/javascript” src=”js的路径”>
**Js数据类型
*五种原始类型 string number boolean null undefined
*定义变量的使用：var
**Js语句 *if *switch *for while do-while
**Js的运算符 字符穿的操作： *相加：连接 *相减：执行相减运算
*Boolean类型相加：true:1 false:0 *==和===的区别 ==判断值 ; ===判断值和类型
**Js的数组： 三种的定义方式 ** var arr = {1,2,”3”}; **var arr = new Array(9);//长度9
**var arr = new Array{1,2,3}; //元素是1,2,3 属性：length：数组的长度
** js的函数
** function add(z,b){方法体和返回值;};
** var add = function(m,n){方法体和返回值;}
** var add = new Function(“a,b”,”方法体和返回值”); ******不要忘记调用，不然不起作用
**js的全局变量和局部变量
**script标签的位置
**重载