本帖最后由 小石姐姐 于 2018-1-24 15:03 编辑
day01
一.HTML基本
1.概述:超文本标记语言
2.作用:html是用来制作页面的(静态页面)
3.使用:扩展名为.html或者.htm的文件
4.结构标签:
<html></html>
<head></head> 标签头
<body></body> 标签体
二.html几种基本的标签
1.<font></font> 字体标签
属性:color 颜色
size 字体的大小
face:字体
2.<h1>...<h6> 标题标签 大小从小到大
3.<p></p> 段落标签
4.<b></b> 加粗标签
5.<i></i> 斜体标签
6.<u></u> 下划线标签
7.<center></center>居中标签
三.HTML有标准:
1. HTML4
* <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2.HTML5:支持视频播放,支持CSS3,支持定位,扩展标签...
* <!DOCTYPE html>
3.<hr/>
四.常用的标签
1) 图片标签 <img>
src:图片的路径
width:图片的宽度
height:图片的高度
alt :图片找不到显示的内容
图片的引入路径:
如果使用相对路径(../代表上一级)(../../代表上上一级)
2) 有序列表 <ol></ol>
使用: <ol>
<li></li>
</ol>
3) 无序列表 <ul></ul>
使用: <ul>
<li></li>
</ul>
4) html超链接 <a></a>
属性:
href:链接的路径
target: 打开的方式
a. _self :在自身页面打开
b. _blank:新窗口打开
五.table标签
<table></table> *表格标签
<tr> *行
<td></td> *列
</tr>
属性:
width:宽度
height:高度
border:边框
align:表格的水平位置
*left 居左
*center 居中
* right 居右
td的属性:
colspan="列数"
rowspan="行数"
六.form标签
<form>
action:提交的路径
method:请求方式,默认是get
区别:
get:数据会显示到地址栏中,get提交的方式有大小的限制
post: 数据不会显示到地址栏中,post 无提交大小的限制
* <input type=”text”> :文本框.
* 常用属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :文本框的默认值.
* size :文本框的长度.
* maxlength:文本框输入的最大长度.
* readonly:只读文本框.
* <input type=”password”> :密码框.
* 常用属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :密码框的默认值.
* size :密码框的长度.
* maxlength:密码框输入的最大长度.
* <input type=”radio”> :单选按钮.
* 常用的属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :单选按钮的默认值.
* checked:单选按钮默认被选中.
* <input type=”checkbox”> :复选按钮.
* 常用的属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :单选按钮的默认值.
* checked:单选按钮默认被选中.
* <input type=”button”> :普通按钮.没有任何功能的按钮.
* <input type=”submit”> :提交按钮.
* <input type=”reset”> :重置按钮.
* <input type=”file”> :文件上传的表单项.
* <input type=”hidden”> :隐藏字段.
* <input type=”image”> :图片按钮
* <select> :下拉列表.
* <textarea> :文本域.
七.框架标签
框架标签:<frameset >
注意:标签与body标签是冲突,有frameset就可以没有body.
* 属性:
* rows
* cols
使用<frame>标签，frame代表切分的每个部分.
八.特殊字符标签
1) 空格
2) < ;<
3) > '>
九.案例
1.网站首页的显示
2.网站的注册的页面显示
span:默认在同一行
css
选择器,声明
引入方式
1.行内引入
2.内部页面引入
3.外部引入
选择器:
1.元素选择器
2.ID选择器
3.类选择器
大小关系 元素选择器<类选择器<ID选择器
css浮动
css其他选择器
属性选择器
后代选择器
子类选择器
并列选择器
css盒子模型
css伪类
一.javascript
DOM
BOM
ECMAscript
二.js的基本语法
区分大小写
声明变量 var
";"结尾可写可不写
js的基本类型
原始类型
undefined:未定义类型
boolean :布尔类型
number: 数字类型
String: 字符串类型
null:空
引用类型
JS的运算符
三js的开发步骤
定义函数
function(){
函数体
}
匿名函数
window.onload=function(){
函数体
}
常用的事件
onclick(只能有一个) ondblclick onmousedown onsubmit
引入方式
一.<script></script>
二.将js代码编写在一个.js的文件中
正则表达式
1.reg.test(str)正则对象
2.str.match("")
一.什么是JQuery
1.概述:是一个js的框架(库),对传统的js进行了封装
现在的企业的开发往往不适用传统的js开发,通常都会使用js框架来开发
2.js的常用框架
JQuery,ExtJS,DWR,PhotoType....
3.JQ对象和JS对象的区别
加载速度:
JQ比JS加载更快,效率更高
js是绘制完图形后才执行
jq是dom树加载就执行
加载次数
js可以多次加载,js.onload只能加载一次
问题:可不可以有两个window.onload事件
可以,但是只执行最后一个
注意事项:jq是一堆js
jq只能调用js属性和方法
jq只能调用jq的属性和方法
4.js对象和jq对象的互相转换
js-->jq
用$(js对象)
jq-->js
使用jq对象的索引取得js对象
二.案例一.广告的定时探入弹出
1.显示和隐藏
show();
使用一:jq对象.show();
使用二:jq对象.show(属性); 属性代表快慢
使用三:jq对象.show(毫秒值):几秒中显示出来
使用四:jq对象.show(毫秒值,function(){});
hide();
使用同show();
slideDown():向下滑动
使用同show()
slideUp():向上滑动
使用同show();
fadeIn():淡入
使用同show();
fadeOut():淡出
使用同show();
animate():自定义动画
toggle():单击切换函数
jq对象.toggle(函数1,函数2):单击第一下执行函数1,单击第二下执行函数2
对属性的操作
attr();添加属性
使用一$("").attr("src");
使用二$("").attr("src","...");
使用三$("").attr("属性":"属性值","属性","属性值");
removeattr();移除属性
prop(); 添加属性(jq1.6以上)
使用一$("").attr("src");
使用二$("").attr("src","...");
使用三$("").attr("属性":"属性值","属性","属性值");
removeprop();移除属性
问题:prop 和css的区别?
css是添加style里面的属性
prop是添加style以外的属性
addClass 添加样式
removeClass 移除样式
append()添加..
append与html的区别
append添加
html是覆盖
A.appendTo(B)把A添加到B
insertBefore()
insertAfter()
remove()
JQ元素的遍历
i 是索引
n 是索引对应的值
遍历的方式一
$.each(Objects.function(){i,n});
遍历的方式二
$("").each(function(i,n){});
| 
收藏
淘帖
踩
