web前五天课程笔记

HTML 超文本标记语言:

扩展名为.html 或者.htm

空格:&npsp

<hr/ > 横线

<pre>:原生标签,把copy过来的内容原封不动的粘过来

字体标签

<font>文字</font>

<font>标签的属性:

color:字体的颜色

size:字体的大小

face: 字体

标题标签<h1>...<h6>

段落标签<p>

粗体标签<b>

斜体标签<i>

下划线标签<u>

居中显示<center>

图片标签<img>

属性:

src: 图片的来源路径

width: 图片的宽度

height: 图片的高度

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

图片引入的路径问题?

路径:相对路径

同一路径可以直接写文件名或 ./ 文件名

上一级目录: ../

列表标签

有序列表<ol>

<li></li>

</ol>

type属性 :

1    数字类型

a     英文类型

i      罗马字符

start : 从哪里开始,

无序列表<ul>

<li></li>

</ul>

type属性:

disc :实心点

circle:空心圆

square:方块

超链接标签

<a>

属性:

href:  链接的路径

target: 打开的方式

_self : 在自身页面打开

_blank : 新打开一个窗口

_parent :

表格标签

<table>

<tr> :行

<td> :列

属性:

width: 表格宽度

height:表格高度

border: 边框

aligh: 表格水平位置:

​        left :居左

​        right: 居右

​        center:居中

<td>的属性:

合并表格:

colspan = "列数"

rowspan = "行数"

HTML的表单标签

<from>

常用属性:

action属性: 提交的路径,如果没指定默认提交到当前页面

method属性: 请求的方式,GET和POST,默认是GET

  常问的面试题:GET和POST属性的区别?

GET: 数据会显示到地址看重 , 提交是有大小限制的,请求行里边

POST: 数据不会显示到地址栏中 . 相对来说安全一点,提交没有大小限制,请求体中

<input type = "text">

        :文本框

​                name  :  表单名称,要有名字方便后台接收

​                value  : 文本框的默认值

​                size : 设置文本框的长度

​                maxlength : 设定几个数字  就只能接收几个数字

​                readonly :  不允许输入的.只读的

<input type = "password">

        :密码框

​                name  :  表单名称,要有名字方便后台接收

​                value  : 文本框的默认值

​                size : 设置文本框的长度

​                maxlength : 设定几个数字  就只能接收几个数字

<input type = "radio">

                :单选按钮

​                name  :  表单名称,要有名字方便后台接收

​                value  :单选按钮的默认值

​                checked : 单选按钮默认被选中

<input type ="checkbox">

        :复选框

​                name  :  表单名称,要有名字方便后台接收

​                value  :单选按钮的默认值

​                checked : 单选按钮默认被选中

<input type ="button">

        :普通按钮

<input type ="submit">

        :提交按钮

<input type ="reset">

        :重置按钮

<input type ="file">

        :文件上传(可浏览上传)

<input type ="hidden">

        :隐藏字段

<input type ="image">

        :图片按钮

<select>

        : 下拉列表

<textarea>

        : 文本域HTML5扩展的表单标签(不是所有浏览器都支持)

<input type = "email">        :只能输入邮箱形式的

<input type = "date">                :只能输入日期形式的

<input type = "number">        :只能输入数字

<input type = "color">                :颜色板  可以直接选

框架标签

框架标签: frameset , 标签与body标签有冲突,有frameset就可以没有body

属性:

rows   :横着切

cols    : 竖着切

使用   frame   标签, frame代表切分的每个部分

特殊字符的标签:

空格: &nbsp(要有分号)

小于号: &lt(要有分号)

大于号: &gt(要有分号)

HTML的块标签

div :   默认占一行

span :  同一行显示

JAVASCRIPT:

JavaScriptECMAScript语法:

区分大小写

弱变量类型的语言:(与java不同)

如在java中    int  i = 3;  先定义是啥类型

在js中     var  i = 3;   根据后边赋的值决定前边是啥类型(全部用var声明变量)

分号可有可无,最好是写上

命名变量:

第一个字母必须是以字母.下划线,或美元符号&

余下的字符可以是下划线,美元符号或任何字母或数字字符

数据类型:

JS将数据类型分成两类:

原始类型:

undefined:        未定义类型

boolean:        布尔类型

number:                数字类型

string:                字符或字符串

null:                空

引用类型:

对象类型, 对象类型默认值是null

JS的运算符

JS中的运算符和java中基本一致!!!

JS中有一个  ===  全等于.全等于是类型和值都一致的情况下才为true.

JS的语句

JS中的语句与JAVA的语句是一致的!!

JS的通常开发步骤

JS 通常由一个事件触发:事件以on开头

触发一个函数,定义一个函数

定义函数:

function 函数名称(){

//函数体

}

匿名函数:  

window.onload = function(){

//函数体

}

获得操作对象的控制权

修改要操作的对象的属性或值

常用事件: onclick  点击   ondblclick, 双击

JS引入方式

1  页面内直接编写JS代码,JS代码需要使用 script标签

2  将JS 的代码编写到一个.js的文件中,在HTML中引入该JS代码即可

获得页面中的元素:

document.getElementById("");

BOM:浏览器对象模型

设置定时的方法:

HTML 中的window对象

setInterval(): 每隔多少毫秒去执行某个表达式.

setInterval("xxx()" 500)  :每隔500毫秒执行一次xxx

setTimeout():隔多少毫秒执行一次该表达式

清除定时:

clearlnterval()

clearTimeout()

alert(): 弹出框

confirm(): 弹出一个确认的窗口

prompy():弹出一个可输入的对话框

open(): 打开一个新的窗口

screenhistory 浏览器历史对象

history.go(-1)   :返回上一个页面

back():   上一个

forword(): 下一个

go(): 去某个具体页面

Location:

location.href = " [写路径] "    跳转

date:

new Date().getTime(): 毫秒值/缓存

JS的输出

document.getElementById(" ").innerHTML = "HTML的代码";

​                 //document.write("");

JS的事件

onfocus : 获得焦点

onblur : 失去焦点

onload:页面加载

onsubmit:表单提交

onchange: 下拉列表改变事件

键盘操作事件

onkeydown:  键盘按下

onkeyup : 键盘抬起

onkeypress : 键盘按下或按住

鼠标操作事件

onclick:单击事件

ondblclick: 双击事件

onmousemove: 鼠标移动时

onmouseout:鼠标从元素移开

onmouseover:鼠标移动到某元素上

onmousedown:鼠标按钮被按下

onmouseup:鼠标滚动时

onresize:窗口或框架被重新调整大小

onreset:重置按钮被点击

onselect:文本被选中

DOM的概述

DOM: 文档对象模型

将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子

Document的常用操作

整个html文档加载到内存中可以用document对象表示

获得元素:

document.getElementById():                 通过ID 获取元素(只能获取到一个元素)

document.getElementByName():        通过name属性获取元素(集合)

document.getElementByTaName():         通过标签名获取元素

创建元素:

document.createElement() :                  创建元素

document.creatrTextNode():                创建文本

添加节点

element.appendChild():        在最后添加一个节点

element.insertBefore():         在某个元素之前插入

删除节点

element.removeChild() :         删除元素

parseInt(): 转成整形

parseFloat():

编码和解码:

encodeURI():        编码

encodeURLComponent(): 编码

decodeURI():                解码

decodeURIComponent();        解码

getTime(): 返回1970-1-1至今的毫秒数

eval函数:        将内容当成JS代码执行

var sss = "alert('aaaa')";

eval(sss);   

CSS: 层叠样式表

主要用于美化HTML

HTML 相当于网站的骨架 , CSS是对骨架进行美化

CSS的基本语法通常包含两个部分: 一个是选择器,一个声明

CSS的引入方式:

行内样式: 直接在HTML的元素上使用style属性设置CSS

页面内的样式: 在HTML的 head 标签中使用  style 标签设置CSS

外部样式: 单独去定义一个.css的文件,在HTML中去引入.css文件 用 link

优先级关系: 就近原则

<link href = "(css文件的地址)"rel = "sytlesheet" type = "text/css">

CSS选择器

元素选择器: 直接写标签名

(标签名称){

border : 1px solid blue;

width:40px;

height:45px;

}

ID选择器:

井号(ID名){

border: 2px; solid red;

}

类选择器:

.divClass{

border: 2px; solid yellow;

}

后代选择器:使用空格

CSS浮动

使用float 属性可以完成div的浮动

float属性的取值:

float:right  右浮

float:left     左浮

none:默认值,元素不浮动,并会显示在其文本框出现的位置

inherit:

clear : 清除浮动

css的其他选择器

属性选择器:

<style>

input[type = "text"] {

background-color = red;

}

</style>

后代选择器

div span查找的是所有div中的所有的span元素

子元素选择器:

div > span 找这个div 中的第一层及的span元素

  并列选择器:

选择器,选择器{

}

CSS样式

背景

文本

字体

列表

CSS中的盒子模型

内边距: padding

单边内边距属性:

padding - top

padding - right

padding - bottom

padding - left

边框:border

外边距:margin

CSS中的定位

position属性设置定位

relative: 相对定位

absolute : 绝对定位

fixed:  固定

使用另外两个属性: left   top   

显示和隐藏

display:

block:显示

none:隐藏

inline:同一行

伪类

a: link{color :  # FF0000}       未访问的链接, 超链接还没被访问时候的样式

a:visited {color : #00FF00}     已访问的链接    ,已经被访问过的链接的样式

a: hover {  color : # FF00FF}   鼠标移动到链接上时候的样式

a: active {color : # 0000FF}     选定的链接    (样式自己定义)

JQuery

因为JQ效率高  所以我们使用JQ

JQ的所有的方法,必须只能是JQ的对象才能去调用

<script> 引入JQ

$ ===JQ

JQ方式:

$(function()){  });

$()   : 帮助我们得到一个JQ对象

JQ的显示和隐藏

show():显示

使用一:JQ对象   调用.show() 方法

使用二 : JQ对象.show("slow"); show, noemal,fast

使用三 : JQ对象.show(毫秒值);

使用四:         JQ.show(毫秒值,function(){});

hide():隐藏

使用一:JQ对象   调用.show() 方法

使用二 : JQ对象.show("slow"); show, noemal,fast

使用三 : JQ对象.show(毫秒值);

使用四:         JQ.show(毫秒值,function(){});

slideDown():  向下滑动

使用一:JQ对象   调用.slideDown 方法

使用二 : JQ对象.slideDown("slow"); show, noemal,fast

使用三 : JQ对象.slideDown(毫秒值);

使用四:         JQ.slideDown(毫秒值,function(){});

slideUp():  向上滑动

使用一:JQ对象   调用.slideUp 方法

使用二 : JQ对象.slideUp("slow"); show, noemal,fast

使用三 : JQ对象.slideUp(毫秒值);

使用四:         JQ.slideUp(毫秒值,function(){});

fadeOut(): 淡出

fadeIn()        : 淡入

animate():自定义动画

toggle():单击切换函数

JQuery的选择器

id 选择器

用法: $(" #id")

类选择器

用法: $(".类名")

元素选择器

用法: $("元素名称")

通配符选择器

用法: $("*")

并列选择器

用法: $("选择器,选择器,选择器")

层级选择器

后代选择器:只要是属于他的后代都会找到    使用空格

子元素选择器 : 只找第一层的div    使用>

下一个元素: 查找下一个同辈元素        使用+

兄弟元素 使用波浪线

基本过滤选择器

odd:

even:

prop: 为所有图像设置src和alt的值

JQ的遍历

遍历的方式一:

$.each(object,function(i,n){  });

$(" ").each(function(i,n){  });

Val 函数:

直接调用可以获得Val的值,

属性:

HTML代码/文本/值

HTML([val|fn]) :

text([val|fn]):

val([val|fn|arr]):

JQ的事件切换:

toggle():        单击事件的切换

hover():          鼠标悬停的切换

事件处理:

on/bind : ("事件一" "事件二")   中间用空格隔开  表示on/bind产生多个事件,事件做相同的事件

事件的委托:

delegate:适用于当前或未来的元素(新元素)

栅格系统:

Bootstrap提供了一套响应式,

使用  .row样式定义栅格的行

web前五天课程笔记

HTML 超文本标记语言:

扩展名为.html 或者.htm

空格:&npsp

<hr/ > 横线

<pre>:原生标签,把copy过来的内容原封不动的粘过来

字体标签

<font>文字</font>

<font>标签的属性:

color:字体的颜色

size:字体的大小

face: 字体

标题标签<h1>...<h6>

段落标签<p>

粗体标签<b>

斜体标签<i>

下划线标签<u>

居中显示<center>

图片标签<img>

属性:

src: 图片的来源路径

width: 图片的宽度

height: 图片的高度

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

图片引入的路径问题?

路径:相对路径

同一路径可以直接写文件名或 ./ 文件名

上一级目录: ../

列表标签

有序列表<ol>

<li></li>

</ol>

type属性 :

1    数字类型

a     英文类型

i      罗马字符

start : 从哪里开始,

无序列表<ul>

<li></li>

</ul>

type属性:

disc :实心点

circle:空心圆

square:方块

超链接标签

<a>

属性:

href:  链接的路径

target: 打开的方式

_self : 在自身页面打开

_blank : 新打开一个窗口

_parent :

表格标签

<table>

<tr> :行

<td> :列

属性:

width: 表格宽度

height:表格高度

border: 边框

aligh: 表格水平位置:

​        left :居左

​        right: 居右

​        center:居中

<td>的属性:

合并表格:

colspan = "列数"

rowspan = "行数"

HTML的表单标签

<from>

常用属性:

action属性: 提交的路径,如果没指定默认提交到当前页面

method属性: 请求的方式,GET和POST,默认是GET

  常问的面试题:GET和POST属性的区别?

GET: 数据会显示到地址看重 , 提交是有大小限制的,请求行里边

POST: 数据不会显示到地址栏中 . 相对来说安全一点,提交没有大小限制,请求体中

<input type = "text">

        :文本框

​                name  :  表单名称,要有名字方便后台接收

​                value  : 文本框的默认值

​                size : 设置文本框的长度

​                maxlength : 设定几个数字  就只能接收几个数字

​                readonly :  不允许输入的.只读的

<input type = "password">

        :密码框

​                name  :  表单名称,要有名字方便后台接收

​                value  : 文本框的默认值

​                size : 设置文本框的长度

​                maxlength : 设定几个数字  就只能接收几个数字

<input type = "radio">

                :单选按钮

​                name  :  表单名称,要有名字方便后台接收

​                value  :单选按钮的默认值

​                checked : 单选按钮默认被选中

<input type ="checkbox">

        :复选框

​                name  :  表单名称,要有名字方便后台接收

​                value  :单选按钮的默认值

​                checked : 单选按钮默认被选中

<input type ="button">

        :普通按钮

<input type ="submit">

        :提交按钮

<input type ="reset">

        :重置按钮

<input type ="file">

        :文件上传(可浏览上传)

<input type ="hidden">

        :隐藏字段

<input type ="image">

        :图片按钮

<select>

        : 下拉列表

<textarea>

        : 文本域HTML5扩展的表单标签(不是所有浏览器都支持)

<input type = "email">        :只能输入邮箱形式的

<input type = "date">                :只能输入日期形式的

<input type = "number">        :只能输入数字

<input type = "color">                :颜色板  可以直接选

框架标签

框架标签: frameset , 标签与body标签有冲突,有frameset就可以没有body

属性:

rows   :横着切

cols    : 竖着切

使用   frame   标签, frame代表切分的每个部分

特殊字符的标签:

空格: &nbsp(要有分号)

小于号: &lt(要有分号)

大于号: &gt(要有分号)

HTML的块标签

div :   默认占一行

span :  同一行显示

JAVASCRIPT:

JavaScriptECMAScript语法:

区分大小写

弱变量类型的语言:(与java不同)

如在java中    int  i = 3;  先定义是啥类型

在js中     var  i = 3;   根据后边赋的值决定前边是啥类型(全部用var声明变量)

分号可有可无,最好是写上

命名变量:

第一个字母必须是以字母.下划线,或美元符号&

余下的字符可以是下划线,美元符号或任何字母或数字字符

数据类型:

JS将数据类型分成两类:

原始类型:

undefined:        未定义类型

boolean:        布尔类型

number:                数字类型

string:                字符或字符串

null:                空

引用类型:

对象类型, 对象类型默认值是null

JS的运算符

JS中的运算符和java中基本一致!!!

JS中有一个  ===  全等于.全等于是类型和值都一致的情况下才为true.

JS的语句

JS中的语句与JAVA的语句是一致的!!

JS的通常开发步骤

JS 通常由一个事件触发:事件以on开头

触发一个函数,定义一个函数

定义函数:

function 函数名称(){

//函数体

}

匿名函数:  

window.onload = function(){

//函数体

}

获得操作对象的控制权

修改要操作的对象的属性或值

常用事件: onclick  点击   ondblclick, 双击

JS引入方式

1  页面内直接编写JS代码,JS代码需要使用 script标签

2  将JS 的代码编写到一个.js的文件中,在HTML中引入该JS代码即可

获得页面中的元素:

document.getElementById("");

BOM:浏览器对象模型

设置定时的方法:

HTML 中的window对象

setInterval(): 每隔多少毫秒去执行某个表达式.

setInterval("xxx()" 500)  :每隔500毫秒执行一次xxx

setTimeout():隔多少毫秒执行一次该表达式

清除定时:

clearlnterval()

clearTimeout()

alert(): 弹出框

confirm(): 弹出一个确认的窗口

prompy():弹出一个可输入的对话框

open(): 打开一个新的窗口

screenhistory 浏览器历史对象

history.go(-1)   :返回上一个页面

back():   上一个

forword(): 下一个

go(): 去某个具体页面

Location:

location.href = " [写路径] "    跳转

date:

new Date().getTime(): 毫秒值/缓存

JS的输出

document.getElementById(" ").innerHTML = "HTML的代码";

​                 //document.write("");

JS的事件

onfocus : 获得焦点

onblur : 失去焦点

onload:页面加载

onsubmit:表单提交

onchange: 下拉列表改变事件

键盘操作事件

onkeydown:  键盘按下

onkeyup : 键盘抬起

onkeypress : 键盘按下或按住

鼠标操作事件

onclick:单击事件

ondblclick: 双击事件

onmousemove: 鼠标移动时

onmouseout:鼠标从元素移开

onmouseover:鼠标移动到某元素上

onmousedown:鼠标按钮被按下

onmouseup:鼠标滚动时

onresize:窗口或框架被重新调整大小

onreset:重置按钮被点击

onselect:文本被选中

DOM的概述

DOM: 文档对象模型

将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子

Document的常用操作

整个html文档加载到内存中可以用document对象表示

获得元素:

document.getElementById():                 通过ID 获取元素(只能获取到一个元素)

document.getElementByName():        通过name属性获取元素(集合)

document.getElementByTaName():         通过标签名获取元素

创建元素:

document.createElement() :                  创建元素

document.creatrTextNode():                创建文本

添加节点

element.appendChild():        在最后添加一个节点

element.insertBefore():         在某个元素之前插入

删除节点

element.removeChild() :         删除元素

parseInt(): 转成整形

parseFloat():

编码和解码:

encodeURI():        编码

encodeURLComponent(): 编码

decodeURI():                解码

decodeURIComponent();        解码

getTime(): 返回1970-1-1至今的毫秒数

eval函数:        将内容当成JS代码执行

var sss = "alert('aaaa')";

eval(sss);   

CSS: 层叠样式表

主要用于美化HTML

HTML 相当于网站的骨架 , CSS是对骨架进行美化

CSS的基本语法通常包含两个部分: 一个是选择器,一个声明

CSS的引入方式:

行内样式: 直接在HTML的元素上使用style属性设置CSS

页面内的样式: 在HTML的 head 标签中使用  style 标签设置CSS

外部样式: 单独去定义一个.css的文件,在HTML中去引入.css文件 用 link

优先级关系: 就近原则

<link href = "(css文件的地址)"rel = "sytlesheet" type = "text/css">

CSS选择器

元素选择器: 直接写标签名

(标签名称){

border : 1px solid blue;

width:40px;

height:45px;

}

ID选择器:

井号(ID名){

border: 2px; solid red;

}

类选择器:

.divClass{

border: 2px; solid yellow;

}

后代选择器:使用空格

CSS浮动

使用float 属性可以完成div的浮动

float属性的取值:

float:right  右浮

float:left     左浮

none:默认值,元素不浮动,并会显示在其文本框出现的位置

inherit:

clear : 清除浮动

css的其他选择器

属性选择器:

<style>

input[type = "text"] {

background-color = red;

}

</style>

后代选择器

div span查找的是所有div中的所有的span元素

子元素选择器:

div > span 找这个div 中的第一层及的span元素

  并列选择器:

选择器,选择器{

}

CSS样式

背景

文本

字体

列表

CSS中的盒子模型

内边距: padding

单边内边距属性:

padding - top

padding - right

padding - bottom

padding - left

边框:border

外边距:margin

CSS中的定位

position属性设置定位

relative: 相对定位

absolute : 绝对定位

fixed:  固定

使用另外两个属性: left   top   

显示和隐藏

display:

block:显示

none:隐藏

inline:同一行

伪类

a: link{color :  # FF0000}       未访问的链接, 超链接还没被访问时候的样式

a:visited {color : #00FF00}     已访问的链接    ,已经被访问过的链接的样式

a: hover {  color : # FF00FF}   鼠标移动到链接上时候的样式

a: active {color : # 0000FF}     选定的链接    (样式自己定义)

JQuery

因为JQ效率高  所以我们使用JQ

JQ的所有的方法,必须只能是JQ的对象才能去调用

<script> 引入JQ

$ ===JQ

JQ方式:

$(function()){  });

$()   : 帮助我们得到一个JQ对象

JQ的显示和隐藏

show():显示

使用一:JQ对象   调用.show() 方法

使用二 : JQ对象.show("slow"); show, noemal,fast

使用三 : JQ对象.show(毫秒值);

使用四:         JQ.show(毫秒值,function(){});

hide():隐藏

使用一:JQ对象   调用.show() 方法

使用二 : JQ对象.show("slow"); show, noemal,fast

使用三 : JQ对象.show(毫秒值);

使用四:         JQ.show(毫秒值,function(){});

slideDown():  向下滑动

使用一:JQ对象   调用.slideDown 方法

使用二 : JQ对象.slideDown("slow"); show, noemal,fast

使用三 : JQ对象.slideDown(毫秒值);

使用四:         JQ.slideDown(毫秒值,function(){});

slideUp():  向上滑动

使用一:JQ对象   调用.slideUp 方法

使用二 : JQ对象.slideUp("slow"); show, noemal,fast

使用三 : JQ对象.slideUp(毫秒值);

使用四:         JQ.slideUp(毫秒值,function(){});

fadeOut(): 淡出

fadeIn()        : 淡入

animate():自定义动画

toggle():单击切换函数

JQuery的选择器

id 选择器

用法: $(" #id")

类选择器

用法: $(".类名")

元素选择器

用法: $("元素名称")

通配符选择器

用法: $("*")

并列选择器

用法: $("选择器,选择器,选择器")

层级选择器

后代选择器:只要是属于他的后代都会找到    使用空格

子元素选择器 : 只找第一层的div    使用>

下一个元素: 查找下一个同辈元素        使用+

兄弟元素 使用波浪线

基本过滤选择器

odd:

even:

prop: 为所有图像设置src和alt的值

JQ的遍历

遍历的方式一:

$.each(object,function(i,n){  });

$(" ").each(function(i,n){  });

Val 函数:

直接调用可以获得Val的值,

属性:

HTML代码/文本/值

HTML([val|fn]) :

text([val|fn]):

val([val|fn|arr]):

JQ的事件切换:

toggle():        单击事件的切换

hover():          鼠标悬停的切换

事件处理:

on/bind : ("事件一" "事件二")   中间用空格隔开  表示on/bind产生多个事件,事件做相同的事件

事件的委托:

delegate:适用于当前或未来的元素(新元素)

栅格系统:

Bootstrap提供了一套响应式,

使用  .row样式定义栅格的行