3Web前端基础及数据库开发.docx

《3Web前端基础及数据库开发.docx》由会员分享，可在线阅读，更多相关《3Web前端基础及数据库开发.docx（128页珍藏版）》请在冰豆网上搜索。

3Web前端基础及数据库开发

第一章、使用HTML制作网页

1.1HTML的基本结构

HTML（HypertextMarkupLanguage，超文本标记语言）是Web统一语言。

HTML的基本机构包括3部分：

1、声明2、头部（Head）3、主体（Body）

1.2HTML标签：

1.2.1基本标签：

1、标题标签

~

:

2、图像标签

显示图像的语法：

常用的图片格式：

2、段落标签

段落中的文本

3、换行标签
:

自闭标签

4、水平线标签

---

:

自闭标签

5、字体加粗标签需要加粗的文本

6、斜体的标签文本

1.2.2超链接：

语法：

链接文本或者图像

注意：

target常用有两个值:

1,_blank表示在新窗口中打开链接文件2,_self在本页打开链接

链接分为三类：

1、页面间的链接：

A页面到B页面

2、锚链接：

A页面的甲位置到B或者A页面的乙位置

3、功能性链接：

页面中调用其他程序功能

1.2.3特殊符号和注释：

特殊符号：

（常用的字符实体）

注释：

HTML中多行与单行注释都用一种格式：

—注释内容-->

1.2.4标签的规范：

XHTML规范：

1.3列表：

--无序列表-->

java基础

javaOOP

java高级特性

--有序列表-->

html基础

JS

Oracle数据库

--自定义列表-->

计算机学院

注：

每个自定义列表项都以

开始

计算机科学与技术

软件工程

信息技术

机电工程学院

机械制造

机械设计

表格：

（重点）

注意：

1、表示行中的内容的对齐方式，left左对齐；right右对齐；center居中对齐。

默认值是left2、表示单元格

表格中的跨行和跨列：

A:

单元格所跨的列数（合并列）

A:

单元格所跨的行数（合并行）

1.4表单：

其中：

method属性：

规定提交方式，取值为get或post

表单元素的基本格式：

具体用法：

具体例子代码：

--表单的使用-->

用户名：

密码：

--单选按钮：

name必须一样，才能起到互斥的作用-->

性别：

男

女

兴趣爱好：

敲代码

编程

上传身份证：

隐藏域：

出生地：

（下拉选框的使用）

河南省

江苏省

郑州市

洛阳市

备注：

（多行文本域）

---->

对应的效果图：

第二章、网页样式

2.1.1CSS语法：

CSS全称为级联样式表（CascadingStyleSheet），通常又称为风格样式表，是用来进行网页风格设计的。

CSS的优点：

1、内容与表现分离。

用网页的内容xhtml就可以与表象分开。

2、表现的统一。

3、丰富的样式。

使得页面布局更加灵活。

4、减少网页代码，增加网页的浏览速度，节省网络带宽。

5、运用独立于网页的CSS，还有利于网页被搜索引擎收录。

CSS样式的规则：

CSS样式表的基本结构：

 

2.1.2CSS选择器：

1、标签选择器

标签名｛属性:

属性值;｝

2、类选择器

.类名｛属性:

属性值;｝

<标签名class=”类名”>标签内容

3、id选择器

#ID名称｛属性:

属性值;｝

4、并集选择器

标签名,.类名，#ID名称｛属性:

属性值;｝

5、后代选择器

后代选择器的写法是把外层的标签写在前面，内层的标签写在后面，之间用空格分开。

当标签发生嵌套时，内层的标签就成为外层标签的后代。

Pspan{属性:

属性值;}

标签内嵌套标签。

标签的后代，两者之间用空格隔开

6、交集选择器（注意:

交集选择器之间没有空格）这种可以确定是某一个标签

标签名.类名｛｝

7、全局选择器

*｛样式；｝

2.1.3在HTML中引入CSS的方式：

方式有四种：

行内式，嵌入式，导入式和链接式

1.行内式：

俗称行内样式，在标签的Style属性中设置CSS样式。

18px”>

2.嵌入式：

俗称内部样式，使用

3.导入式与链接式，（外部css样式）

链接式:

导入式:

@import”style.css”;

两者的区别是:

链接是先加载样式后加载页面，导入是反之。

注意：

href属性表示链接的地址，rel属性指定相互关系是样式表，type指定了链接的样式表是CSS。

样式的优先级:

1、基本选择器之间：

ID选择器>类选择器>标签选择器

2、样式表之间:

行内样式>内嵌样式>外部样式

3、CSS样式之间:

在同一个选择器中，两条相同的声明，后一条声明会覆盖前一条声明，即显示最后一条声明的结果。

2.2.1CSS属性：

1、文本属性：

注：

text-decoration常用取值有：

underline、none、overline、line-through

2、字体属性：

字体的大小：

字体类型：

设置字体风格：

字体的粗细：

3、背景属性：

background:

简写属性，作用是将背景的多个分量属性设置在一个声明中

4、列表属性：

list-style:

简写属性，把所有用于列表的属性设置于一个声明中;

list-style-image:

将图像设置为列表项标志;

list-style-position:

设置列表中列表项标志的位置（insider,outsider等）

list-style-tyoe:

设置列表项标志的类型（circle,none等）

5.盒子模型（属性）：

重要：

margin:

外边距;border:

边框;padding:

内边距（填充）

盒子模型总尺寸=border-width（边框的宽度）+padding+margin+内容尺寸（宽度或高度）

6.浮动属性：

float值有4个:

left（元素向左浮动）,right（向右浮动）,none（默认值不浮动）,inherit（IE不支持不推荐使用）

与float属性结合使用的另一个属性clear，用于确定元素的那一侧不允许其他浮动元素。

clear属性的值有5个，如下所示:

left在左侧不允许浮动元素;right:

在右侧不允许浮动元素;both:

在左右侧均不允许浮动元素;none默认值，允许浮动元素出现在两侧;inherit:

规定应该从父元素继承clear属性的值，IE浏览器不支持，不推推荐使用。

一般用于清除浮动时，使用both属性值的情况较多,即：

clear:

both;

6.定位属性（position和z-index）：

CSS的定位属性包括绝对定位和相对定位。

position:

（可以理解为平面定位）

z-index：

（可以理解为空间定位）控制绝对定位的堆叠次序

例如：

7.其他属性：

1.显示方式display:

值

block：

将元素显示为块级元素，前后换行

inline：

默认。

显示为内联元素，前后不换行

none：

该元素不被显示

2.处理盒子中的溢出：

overflow：

值

3.设置光标的形状:

cursor:

pointer（小手）

4.超链接样式:

a:

link{color:

#ff0000;}//未访问的链接

a：

visited{color:

#00CC00}//已访问的链接

a：

hover{color:

#000FF}//鼠标指针移动到链接上

a:

active{color:

#FF00FF}//选定的链接

定义样式必须是：

linkvisitedhoveractive

经验：

内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立。

注：

块级元素

...

,display:

block；转换为块级元素。

第三章、JavaScript基础

3.1JavaScript基本知识：

JavaScript是一种描述语言，也是一种基于对象（Object）和事件驱动（EventDriven）的、安全性好的脚本语言。

学习JavaScript的原因：

1、客户端表单验证--减轻服务器压力

2、实现页面的交互—提升用户体验

其优点如下：

1.主要用来向HTML页面中添加交互行为。

2.是一种脚本语言，语法和Java类似。

3.一般用来编写客户端脚本。

4.是一种解释性语言，边执行边解释。

JavaScript和Jscript都是遵循ECMAScript标准的一种实现。

JavaScript的组成：

一个完整的JavaScript是有核心语法（ECMAScript）、浏览器对象模型（BOM）、文档对象模型（DOM）3个不同的部分组成。

JavaScript的基本结构：

//JavaScript的语句;

type表示使用的语言类别是JavaScript

JavaScript的执行原理：

JavaScript的引入方式：

1.使用标签

2.使用外部JS文件（src=”链接地址”）

3.直接在HTML标签中作为客户端程序嵌入网页。

3.2.1JavaScript基础语法：

变量的声明及使用：

var变量名;（所有的变量声明都用）

数据类型：

underfined:

未定义

null:

空

string:

字符串类型

boolean:

布尔类型

number:

数值类型

运算符：

算数运算符：

+-...

比较运算符：

<>...

逻辑运算符：

&&||!

赋值运算符：

=

注意：

判断一个值或者变量属于哪种类型，使用typeof运算符

逻辑控制语句：

1、条件结构：

if...else;switch（JavaScript中的case后可以跟字符串）

2、循环结构：

for循环；while循环；do...while循环；for...in循环（常用于数组操作）

3、循环中断：

break;continue

注释：

单行：

//...多行：

/*.....*/

3.2.2函数：

常用的系统函数：

例：

自定义函数：

function函数名（参数1,参数2.....）{

...//语句

return返回值;//可选

}

注意：

1、参数只需要声明变量名称，不需要使用var

2、没有返回值类型

3、需要时可以直接使用return返回即可

4、可以直接定义变量接收return返回值

函数的调用：

1、事件名=函数名（传递的实参值）

例如：

onclick=”函数名（）”

2、直接使用函数名（传递的实参值）

例如：

varresult=add（）;

3.2.3程序调试：

错误分类：

语法错误和逻辑错误

调试的方法：

1、alert（）方法

2、Firebug工具调试

3.3BOM的使用：

BOM（BrowserObjectModel,浏览器对象模型），可以移动窗口，改变状态栏中的文本，执行其他与页面内容不相关的动作。

1、Window对象

2、History对象

3、Location对象

4、Document对象

3.3.1Window对象：

Window的常用属性：

window.属性名直接调用，window是根对象，所以调用属性或者方法时，window可以省略

Window的常用方法：

例如：

//prompt：

输入框,可以多个参数，第二个是默认值;结束后返回输入的值

varf=prompt（"请输入一个名字：

","sss"）;

//confirm:

确认框：

有取消或者确定;+号连接;返回值：

确认true，取消false

varg=confirm（"刚刚输入的名字是：

"+f）;

//alert是警告框，弹出框

alert（"aaaaaaa"）;

//关闭打开新的窗口

window.close（）;

window.open（“弹出窗口的url”,”窗口名称”,”窗口特征”）;

Window对象的常用事件：

onload：

一个页面或一个图幅完成加载

onmouseover：

鼠标指针移到某元素之上

onclick：

单击某个对象

onmouseout：

鼠标指针离开

onkeydown：

某个键盘按键被按下

onchange：

域的内容被改变

3.3.2Hostory对象：

go（n）方法中的n是一个具体的数字：

为正数时，表示前进的页数；为负数时，表示后退的页数。

 

3.3.3Location对象：

3.3.3Document对象：

3.3.4JavaScript内置对象Date对象的使用：

Date对象常用的方法：

时间综合练习例子：

--onload意思是等到body加载完成后再执行函数-->

--setInterval（）函数意思是每隔1000毫秒（即是1秒）执行一次函数,即出现动态时间-->

--setTimeout（）函数设置延迟,前面参数是函数名，后面是延迟的时间，单位是毫秒-->

注：

以上代码中用到了定时函数，JavaScript中的两个定时函数：

setTimeout（“调用的函数名称”,等待的毫秒数）;

setInterval（“调用的函数名称”,周期性调用函数之间间隔的毫秒数）;

3.4DOM节点的使用：

DOM（DocumentObjectModel）即是文档对象模型，由三部分组成：

1、CoreDOM：

也称核心DOM编程，定义了一套标准的针对任何结构化文档的对象，包括HTML、XHTML、XML。

2、XMLDOM：

定义了一套标准的针对XML文档的对象

3、HTMLDOM：

定义了一套标准的针对HTML文档的对象

以下是DOM节点树：

访问节点的常用方法和属性：

注：

上面三个是常用方法，下面是属性

全选操作关键代码例子：

functionselectM（）{

//得到id为all的标签

varallElement=document.getElementById（"all"）;

//得到name属性为movie的集合

varmovieElements=document.getElementsByName（"movie"）;

//如果allElement是选中状态，即表示值为true

if（allElement.checked==true）{

for（vari=0;i

//得到的元素全部改为选中状态

movieElements[i].checked=true;

}

}else{//如果allElement是未选中状态，即表示值为false

for（vari=0;i

//得到的元素全部改为未选中状态

movieElements[i].checked=false;

}

}

}

表单元素的使用示例：

这是我的div