【石家庄校区】web阶段笔记 - 黑马程序员技术交流社区

1.概述:超文本标记语言

2.作用:html是用来制作页面的(静态页面)

3.使用:扩展名为.html或者.htm的文件

<head></head> 标签头

<body></body> 标签体

二.html几种基本的标签

1.<font></font> 字体标签

属性:color 颜色

size 字体的大小

2.<h1>...<h6> 标题标签大小从小到大

3.<p></p> 段落标签

4.<b></b> 加粗标签

5.<i></i> 斜体标签

6.<u></u> 下划线标签

7.<center></center>居中标签

三.HTML有标准:

* <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2.HTML5:支持视频播放,支持CSS3,支持定位,扩展标签...

四.常用的标签

1) 图片标签 <img>

src:图片的路径

width:图片的宽度

height:图片的高度

alt :图片找不到显示的内容

图片的引入路径:

如果使用相对路径(../代表上一级)(../../代表上上一级)

2) 有序列表 <ol></ol>

3) 无序列表 <ul></ul>

4) html超链接 <a></a>

href:链接的路径

target: 打开的方式

a. _self :在自身页面打开

b. _blank:新窗口打开

<table></table> *表格标签

align:表格的水平位置

colspan="列数"

rowspan="行数"

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.

使用<frame>标签，frame代表切分的每个部分.

八.特殊字符标签

1.网站首页的显示

2.网站的注册的页面显示

div: 默认一个div占用一行

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("")

day05 jq

一.什么是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){});