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基础javaOOPjava高级特性--有序列表-->
html基础JSOracle数据库--自定义列表-->
- 计算机学院
注：每个自定义列表项都以
- 开始
- 计算机科学与技术
- 软件工程
- 信息技术
- 机电工程学院
- 机械制造
- 机械设计
表格：
（重点）
注意：
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（）函数设置延迟,前面参数是函数名，后面是延迟的时间，单位是毫秒-->