3Web前端基础及数据库开发.docx
- 文档编号:16532760
- 上传时间:2023-07-14
- 格式:DOCX
- 页数:128
- 大小:4.32MB
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列表:
--无序列表-->
--有序列表-->
--自定义列表-->
- 计算机学院 注:
- 开始
- 计算机科学与技术
- 软件工程
- 信息技术
- 机电工程学院
- 机械制造
- 机械设计
每个自定义列表项都以
表格:
(重点)
注意:
1、
默认值是left2、
表格中的跨行和跨列:
单元格所跨的列数(合并列)
单元格所跨的行数(合并行)
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样式) 链接式: 导入式: 两者的区别是: 链接是先加载样式后加载页面,导入是反之。 注意: 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 经验: 内联标签可以包含于块级标签中,成为它的子元素,而反过来则不成立。 注: 块级元素 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对象常用的方法: 时间综合练习例子: functionmyClock(){ vardate=newDate();//日期对象,获得当前时间信息 //利用get方法得到各种时间信息 varyear=date.getFullYear(); varmonth=date.getMonth()+1;//得到的月份是0~11,代表是1到12月,所以显示的月份要加1 varriqi=date.getDate(); varhour=date.getHours(); varminute=date.getMinutes(); varsecond=date.getSeconds(); varp="AM"; if(hour>12){ hour=hour-12; p="PM"; } varday=date.getDay();//得到的是0~6,代表的是星期日至星期六 varweekDay=""; switch(day){ case0: weekDay="星期日"; break; ......//此处省略其他选项 case6: weekDay="星期六"; break; } //将各种时间拼接起来 varmyTime=year+"年"+month+"月"+riqi+"日"+""+hour+": "+minute+": "+second+""+p+""+weekDay; //得到id为myTime的标签,然后再得到标签内容,等号后为里面的内容赋值 document.getElementById("myTime").innerHTML=myTime; } functionmet(){ alert("*******"); } --onload意思是等到body加载完成后再执行函数--> --setInterval()函数意思是每隔1000毫秒(即是1秒)执行一次函数,即出现动态时间--> --setTimeout()函数设置延迟,前面参数是函数名,后面是延迟的时间,单位是毫秒-->...