Web 概述
• W3C Web 客户端的三个层次
• 结构层 Structure
结构层典型技术 :
HTML
XML
• 表现层 Presentation
客户端表现层技术是指将从服务器端获得的信息进行展现与表现的技术
•布局技术：
– CSS 技术
– XSLT
•多媒体技术：
– GIF 动画
– 视频、音频播放插件
– Flash，Silverlight
• 行为层 Behavior
ECMAScript:
– JavaScript
– ActionScript (Flash)
• 什么是 W3C Web 标准
- W3C：World Wide Web Consortium
W3C 负责为 WWW 的发展制定技术标准
– W3C 制定的 Web 标准被称为 W3C 推荐标准
• 主流的 Web 服务器端技术有哪些
几大流行技术:
• JavaEE
• ASP.NET
• PHP
• Ruby on Rails ( RoR )
其他：
• CGI，Perl，Python，node.js …
XML
• 什么是 XML 语言
XML 是 eXtensible Markup Language (可扩展置标语言) 的简写
• XML 文档的构成
– XML 声明的写法
<?xml version = "1.0" encoding = "UTF-8"?>
– 元素（根元素）
<标记>数据内容</标记>
只能有一个根元素
– 标记（什么是合法的标记命名规则）
所有“<” 和“>” 之间的内容都称为标记
• 要求：
– 标记名必不可少
– 大小写有所区分
– 要有正确的结束标记 < tag>< /tag>
– 标记要正确嵌套 < a>< b>< /b>< /a>
– 属性
<标记名 （属性名=“属性取值”）* >
• 注意：
– 属性必须用双引号标记起来
– 属性的值都被 XML 处理程序看作是字符串处理
– 实体 （&，<, >, " ）
– CDATA （起始标记，结束标记的写法）
CDATA 下，所有的标记、实体引用都被忽略，而被 XML 处理程序一视同仁地当作字符数据看待
– 注释 （起始标记，结束标记的写法）
• 在注释文本中不能出现字符“-” 或字符串“- -”
• 不要把注释文本放在标记之中
• 不要把注释文本放在实体声明中，也不要放在 XML 声明之前
• 注释不能被嵌套
• 文档类型描述 DTD（概念，作用，会看懂简单语法）
DTD (Document Type Definition) 描述了一个置标语言的语法和词汇表，也就是定义了文件的整体结构以及文件的语法
<?xml version = "1.0" encoding="UTF-8"?>
<!DOCTYPE 根元素名[
元素描述
]>
文件体.......
//引用外部
<!DOCTYPE 根元素名 SYSTEM "外部 DTD 文件的URL">
//引用公共
<!DOCTYPE 根元素 PUBLIC "DTD 名称" "公用 DTD 的URL">
• 什么是“形式良好的”（Well Formed）XML 文件
• 所谓 “形式良好” 有着明确的标准，就是要遵守 XML 规范中的语法规则
– 所有的标记都要正确的嵌套
– 只有一个根元素
– …
• 什么是“有效的”（Valid） XML 文件
• XML 命名空间（概念，不要求语法）
使用“唯一名称:元素名称”的形式
XHTML & HTML5
• XHTML 和 HTML5 文档的基本结构
– XML声明，DOCTYPE声明，文件体（根元素 html，语言声明等）
<?xml version="1.0" encoding="UTF-8"?>//XML声明
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">//DOCTYPE声明
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Hello, World!</title>
......
</head>
<body>
......
</body>
</html>
• XHTML 文档的基本构件
• 标记
– < tag>
• 空标记 (自关闭)
– < EmptyTag />，比如： < br />
• 属性
– < tag attribute=“value”>Hello</ tag>
• 元素
– < tag>Content< /tag>
• XHTML 1.0 的三种文档类型
– Strict, Transitional, Frameset
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
//另外俩换个名字就行
• HTML5 的文档类型，文档结构
<!DOCTYPE html>
<!-- greet.htmlA trivial document-->
<html lang = ″en″>
<head>
<title> Our first document </title>
<meta charset = ″utf-8″ />
</head>
<body>
<p>
Greetings from your Webmaster!
</p>
</body>
</html>
• HTML 常用元素
头部：
• < title> 文档标题
• < meta>定义关于 HTML 文档的元数据
• < base> 定义页面上所有链接的默认基地址
• < link> 定义文档与外部资源之间的关系
• < script>定义客户端脚本，如 Javascript
• < style> 定义文档的样式信息，如 CSS
基本标记：
• < h1> to < h6>：标题一到标题六
• < p>：段落
• < br />：换行
• < hr />：水平线
• Lists
• < a>：超链接
1、< a href=“http://www.fzu.edu.cn”>福州大学< /a>
2、< h2 id=“moss”>Moss</ h2>
……
< a href="#moss">Go to moss< /a>
• < img src=“img/myimage.png” alt=“Alternate text” />
• HTML 表格
– 掌握表格的写法，以及行跨越，列跨越
– table, tr, td, th
– rowspan, colspan
• HTML 表单
– 会在 JS/PHP 编程中涉及到，需掌握表单中各种常用控件的写法
– input, textarea, select, option
input 标记
• 文本框 text
• 密码框 password
• 提交按钮 submit 与重置按钮 reset
• 隐含框 hidden
• 文件选择输入框 file
• 单选框 radio
• 复选框 checkbox
• 图像按钮 image
• 按钮 button
textarea
• textarea是一个比较大的文本框
• 它必须有行属性rows和列属性cols
< textarea rows=“5” cols=“20”>A big load of text here< /textarea>
select 和 option
• 选定标记 select 与选项标记 option 一起可以制作一个下拉选框
• size 属性可以改变下拉菜单项的显示个数
– fieldset, legend, label
• HTML 常用属性和文本格式化标记
– 有所了解
核心属性：
– class 类属性
– id 标识属性
– title 指定一个标题
– style 定义一个内联样式（CSS）
– lang 声明语言类型 (HTML5)
– xml:lang 声明语言类型 (XHTML)
– xml:space 命名空间 (XHTML)
标记专用属性：
– a 中的 href
– table 中 td 的 colspan, rowspan
– form 中的 action, method
• 掌握块元素和内联元素的区别
– div 和 span
• div 与 span 并不对内容做任何的解释，因此是没有语义的，只是用来对内容划分区域
• 使用时一般会添加类属性 class 或标识属性id，并结合 CSS 进行排版
• div 是块元素
• span 是内联元素
– blockquote 和 cite, q
– pre 和 code
• < code> 计算机代码文字（内联元素）
• < pre> 预格式化的文字（块元素）
• 如何将 HTML 4.0 文档转换成 XHTML 文档
– 转换步骤和注意事项需要熟练掌握
1.将 DOCTYPE 改成 Strict XHTML
2.添加 xmlns 和 xml:lang 属性到 html 元素
3.文档只有一个根元素
4.所有的标记名必须小写和关闭，空标记要在后面加上正斜杠自关闭
5.所有的属性必须是小写的，属性值必须用英文半角引号（"）括起来
6.将所有的特殊字符转换成实体引用
7.精简属性是不允许的
– （比如< input type=“checkbox” checked />）
8.name 属性不再是合法的（除了在表单元素中），应该使用 id 来代替
9.目标属性 target 不是一个合法的属性
– 不过出于国情需要，可能有的时候还有用
– target="_blank" 友情链接的需要
10在 img 里，alt 属性是必须的
• 框架，多媒体，条件注释不考
CSS
• 实现页面结构和表现分离的优点
– 设计简单
– 易于控制
– 代码简单
– 易于修改
• CSS的语法
(掌握在XHTML中应用CSS的四种方法，CSS规则、选择器、属性和值写法)
应用CSS方法：
//外链式
<link rel="stylesheet" type="text/css" href="styles.css" />
//内嵌式
//里面的规则只对本文档有效
<head>
<style type="text/css">
h1 { font-size: 3em; }
</style>
</head>
//内联式
<p style="color: red;">text</p>
CSS 规则:
– eg: h1 { color: purple; }
– 一条规则是由一个选择器和一个或多个声明组成。
选择器 （Selector）:
• 选择器用来选择要赋予样式的对象
• 选择器区分大小写
• 选择器可以分组使用
h1, h2, p {color: purple}
• HTML 元素名称是最基础的一种选择器
• 此外，* 为全局选择器可以匹配所有元素
* { color: purple; }
属性 (properties) 与值 (value):
• 每个选择器都通过大括号 { } 中的属性来指定样式，诸如 color, font-size 或者background-color
• 值在半角英文引号( : )后面，多个值之间用半角英文逗号( , )隔离
• 属性与值合称一个声明，声明之间用半角英文分号( ; )隔离
• 如果属性值中包含空格等特殊字符，需要用引号包裹起来，单引号和双引号皆可
– font-family: “New Century Schoolbook”, serif
• 如果属性值中包含引号，分号，感叹号，逗号等特殊字符，则必须将其进行转义
– 例如：\ ’ \ " \ : \ !
• CSS 常用属性
– 颜色及背景，字体样式，文本装饰，列表
颜色及背景：
• 前景 color
• 背景 background
– background-color
• background-image：图片的 URL 地址
• background-repeat：图片如何平铺
• background-attachment：图片随内容滚动
• background-position：图片的摆放位置
字体样式：
- 字体族 font-family
- 字体尺寸 font-size
• 五个可用的绝对长度单位
– in (Inches) 英寸
– cm (Centimetres) 厘米
– mm (Millimetres) 毫米
– pt (Points, 1pt = 1/72 in) 点
– pc (Picas, 1pc = 12pt) 12点活字
• 三种相对长度单位
– em (字体中M的高度)
– ex (字体中x的高度)
– px (像素,pixel)- 字体加粗 font-weight
– normal（普通）
– bold（粗体）
– bolder
– lighter
– 100，200，～，900- 字体风格 font-style
– font-style: normal（正常）
– font-style: italic（意大利体）
– font-style: oblique（倾斜体）- 字体变种 font-variant
文本：
• 字母间隔 letter-spacing
• 单词间隔 word-spacing
• 设置行高 line-height
• 文本对齐 text-align
• 文本缩进 text-indent
• 文本装饰 text-decoration
– text-decoration: overline
– text-decoration: line-through 删除线
– text-decoration: underline
– text-decoration: none 取消下划线（常用于超
链接）
• 文本转换 text-transform
列表：
• list-style-type 可以改变列表项标记的类型
– ul { list-style-type: decimal; }
– ol { list-style-type: lower-roman; }
– 注意：无序列表和有序列表不再局限于默认的样式，无序列表前面可以有编号，反之亦然
• list-style-image 设置列表项标记的图像
– list-style-image : url(images/rdl_arrow.gif);
• list-style-position 改变列表项标记的位置
• CSS 的选择器（元素选择器，通配选择器，类class选择器，标识id选择器
• 元素选择器：几乎所有的 HTML 标记名都可以作为选择器，也称为“类型选择器”
• 全局选择器：*，匹配所有元素
• 类（class）选择器
.ppl {color: purple;}
span.ppl {font-style: italic}
• 标识（id）选择器
#special {color: purple; background: black}
• 伪类选择器
selector:pseudo-class { property: value; }
//:link 用在未访问的链接上
//:visited 用在已经访问过的链接上
//:active 用于选定（被点击）的链接上
//:hover 用于鼠标光标置于其上的链接
//:focus 用于获得焦点的输入空间上( 如 input )
• 后代选择器
E1 E2 { sRules }
• 子代选择器
E1 > E2 { sRules }
• 相邻兄弟选择器
E1 + E2 { sRules }
• 盒状模型
– 特别是 margin 等各种简写属性的写法
• 元素的背景（background）是填充在由内容和内边距、边框组成的区域
简写属性：顺时针
• 一个值=所有的边距；
• 两个值=上下边距，左右边距；
• 三个值=上边距，左右边距，下边距；
• 四个值=遵循顺时针顺序
• 注意，简写属性的值之间使用空格隔开
• CSS 布局，定位，显示属性
– 掌握常用的属性值
– position, float, clear, display 比较重要
• height 设置元素的高度
• width 设置元素的宽度
• line-height 设置两行间的距离（行高）
• max-height/min-height
设置元素的最大/最小高度
• max-width/min-width
设置元素的最大/最小宽度
position:
- static （静态，默认值）
• 在文档流中，块级元素从上到下一个接一个排列；内联元素在一行中水平布置- absolute （绝对定位）
• 绝对定位是相对于最近的已定位（即有设置 position 属性）的祖先元素移动位置
• 如果没有已定位的祖先元素，那么它的位置相对于最初的包含块（html 或是 body）
- relative （相对定位）
• 元素相对于它在文档流中的位置进行移动
• 元素原来的空间仍会保留
- fixed （相对与浏览器窗口定位）
float:
可能的取值：left, right 或 none
clear 清除
可能的值 left, right, both, none
• 通常用于页脚
– clear: both;
– /* 页脚左右两边不允许浮动对象 */
display:
• 改变元素的显示类型
– 内联 inline、块 block或是清除 none
– 从而我们可以使块元素像内联元素一样使用
• display: none; 可以完全隐藏一个元素
• 应用CSS进行布局
– 给定简单的布局图和HTML，能写出 CSS 代码
– 根据 CSS 代码，能画出布局图
//Html
<div id="wrap">
<div id="header"><h1>Document Heading</h1></div>
<div id="nav">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
...
</ul>
</div>
<div id="main">
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id="sidebar">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
...
</ul>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
//CSS
//让内容与浏览器窗口的边框间没有距离
html, body {
margin:0;
padding:0;
background:#a7a09a;
color:#000;
}
//让 #wrap “居中显示”，并指定一个宽度
body {
min-width:750px;
}
#wrap {
background:#99c;
margin:0 auto;
width:750px;
}
//为每个部分赋予不同的背景色
#header {
background:#ddd;
}
#nav {
background:#c99;
}
#main {
background:#9c9;
}
#sidebar {
background:#c9c;
}
#footer {
background:#cc9;
}
//• 为了让它们并排显示，采用 float 方式排版
//• 一个浮动到 left，一个浮动到 right
#main {
background:#9c9;
float:left;
width:500px;
}
#sidebar {
background:#c9c;
float:right;
width:250px;
}
//• 用 clear:both; 让页脚的左右没有浮动元素
#footer {
background:#cc9;
clear:both;
}
JavaScript
• JavaScript 语法基础
– 如何在 HTML 中放置 JavaScript
– 数据类型 & 表达式，控制语句（if 等）
数据类型：
- Number
– JavaScript不区分整数和浮点数，统一用
Number 表示；十六进制用0x前缀
– 123；0.456; 1.2345e3; 0xa5b4c3d2;
– NaN; Infinity;- 字符串
– 以单引号 ’ 或双引号 “ 括起来的任意文本
– ‘abc’; "xyz“- null；对象 ……
表达式:
- 和 C++ 非常类似
- 算术运算符: + - * / % ++ – etc. as in C++
- 逻辑运算符: <, <=, == …
- 字符串连接符: +
– 可以将其他类型数据转换成字符串
基本的控制结构:
– 函数定义（变量的作用域）
- 参数列表没有类型声明
- 返回值没有类型
- 第一次使用的变量如果前面标上 var，则表明它是局部变量
• JavaScript 标准对象
– 了解字符串，数组等对象的使用方法
• 了解 BOM
- window 对象 控制浏览器窗口
- navigator 对象 包含浏览器信息
- screen 对象 用来获取屏幕大小等
- location对象 当前网页的地址信息
- history 对象 浏览历史
Document Object Model
• DOM 文档对象模型
– DOM 节点， DOM 树，节点的查找与访问
– 通过 DOM 修改 XHTML 文档的方法
DOM 节点:
- 根据 DOM，HTML/XML 文档中的一切事物都是节点(node)
- 根据 DOM 标准
– 整个文档是一个 document 节点
– 每个 HTML 元素是一个元素节点
– 元素中包含的文本数据是文本节点
– 每一个 HTML 属性是一个属性节点
• 文本节点和属性节点都是元素节点的子节点
– 注释是注释节点
• 节点的一些属性
– nodeName 报告节点的名称
– nodeValue 提供节点的 “值”
– nodeType 报告节点的类型
– attributes 返回元素节点的属性列表
– parentNode, childNodes, firstChild, lastChild,
– previousSibling, nextSibling
DOM 树:
• 节点之间互相关联，形成一棵树
- 除了document节点，其他节点都有一个父节点(parent-node)
- 除了叶子节点（一般是文本节点和属性节点），节点都有子节点 (children-node)
- 属于同一个父节点的节点称为兄弟节点(sibling-node)
节点的查找和访问：
- 在修改一个节点前，首先要找到它
- 对象的查找访问可以通过几种方式：
– 使用元素节点的 parentNode, firstChild 和lastChild 属性
– 通过 getElementById(), getElementsByTag() 等方法
1、利用 DOM 树结构查找元素
x.childNodes[1] 访问
2、使用 id 属性访问
document.getElementById(“turnItOn")
3、使用标记名访问
var pars = document.getElementsByTagName('p');
for (var i=0;i<pars.length;i++) {
// do something with pars[i]; ie. with every paragraph
}
4、文本节点 Text Node 的修改
<p id="test">I am a JavaScript hacker.</p>
var x = document.getElementById('test');
alert(x.firstChild.nodeValue);
x.firstChild.nodeValue = 'I never hack text nodes.';
5、属性的修改
<img src="pix/logo.gif" id="test" />
var imgEl = document.getElementById('test');
alert(imgEl.getAttribute('src'));
imgEl.setAttribute('src', 'pix/logo2.gif');
6、元素样式的读取/修改
<p style="margin: 10%" id="test">Text</p>
var par = document.getElementById('test');
alert(p.style.margin); // 读取
p.style.margin = '10px'; // 修改
p.style.fontSize = '120%'; // 内联样式优先级高
• 事件与事件处理
– 常用事件
– 事件响应注册的方法
1、通过 XHTML 元素属性注册
//通过 HTML 标记的属性定义事件响应函数
<input type="text" size="30" id="email"
onchange="checkEmail()" />
2、通过 DOM 0 对象属性注册
var x = document.getElementById('somewhere');
x.onclick = function_name;//没()
3、通过 DOM 2 事件机制注册
var x = document.getElementById('somewhere');
// W3C
x.addEventListener('click',handleEvent,false);
// Microsoft
x.attachEvent('onclick',handleEvent);
function handleEvent(e) {
var evt = e || window.event;
// do something with evt, which now
// refers to the event object
}
• 掌握行为与结构的分离方法
- 分离行为与结构的原则很简单：不要把任何 JavaScript 代码写入 XHTML 页面中。
- 采取下面两步骤：
– 把所有的 JavaScript 函数定义在一个分离的.js文件中，让所需的 XHTML 页面连接到它。
– 删除所有的事件处理句柄（即行内的那些诸如onMouseOver）并归入同一 .js 文件中去
//事件处理句柄
<a href="home.html" onMouseOver="mOver('home')"
onMouseOut="mOut('home')">Home</a>
//删除
<a href="home.html">Home</a>
// 在单独的 .js 文件
var nav = document.getElementById('navigation');
var navLinks = nav.getElementsByTagName('a');
for (var i=0;i<navLinks.length;i++)
{
navLinks[i].onmouseover = [code];
navLinks[i].onmouseout = [code];
}
HTTP
• 常见文件类型的 MIME
- html, xml, xhtml etc.
• HTTP 请求报文
- GET, POST 方法及其各自的用途
- GET 向服务器请求指定的资源
- POST 请求服务器修改存储在服务器上的信息
• HTTP 响应报文常见的状态码
- 200, 304, 404 等
PHP 语法
• PHP基础语法
基本语法
- PHP 代码使用 <?php … ?> 标记嵌入(X)HTML/XML 文档中
– 当 PHP 解析一个文件时，会寻找开始和结束标记，并执行其中的代码
– 凡是在一对开始和结束标记之外的内容都会被PHP 解析器当成文本直接输出给客户端- 每个语句后用分号结束指令
注释风格
<?php
echo "这是第一种方法的例子。\n";
//本例是C++的注释风格
echo "这是第二种方法的例子。\n";
/*本例采用多行的注释方式*/
echo "这是第三种方法的例子。\n";
#本例使用UNIX Shell注释风格
?>
数据类型
• PHP 支持八种原始类型：
- 四种标量类型：
– boolean（布尔型），integer（整型）
– float（浮点型，也作“double”）
– string（字符串，有单引号和双引号两种）- 两种复合类型：
– array（数组），object（对象）- 最后是两种特殊类型：
– resource（资源），NULL
字符串
- 单引号和双引号括起来的字符串稍有不同
- 最大不同是：使用双引号的字符串中可以加入特殊的转义字符，生成转义序列
- 此外，双引号字符串中的变量名会被变量的值替代
变量
• 变量用一个美元符号后面跟变量名来表示
• 变量名前加 & 表示引用 reference
• 变量类型可以自动改变
常量
//• 常量使用 define() 定义
<?php
define("CONSTANT", "Hello world.");
echo CONSTANT;
?>
//• 常量只能用 define() 函数定义，而不能通过赋值语句
//• 常量可以不用理会变量作用域的规则而在任何地方定义和访问
//• 常量一旦定义就不能被重新定义或者取消定义
//• 常量的值只能是标量（整数，浮点数，字符串）
预定义变量
- PHP 提供了大量的预定义变量
- 包括主机和操作系统的许多环境变量
- 可以通过调用 phpinfo() 查看预定义变量列表
预定义常量
• __FILE__ 执行中的 PHP 程序文件名
• __LINE__ 执行中 PHP 程序行数
• PHP_VERSION PHP 的版本
• PHP_OS 执行 PHP 的操作系统名称
• TRUE 真值
• FALSE 假值
• E_ERROR 指向最近的错误处
可变变量
$a = 'hello';
$$a = 'world';
echo "$a $hello";
//• 动态定义一个变量的名称
//• 两个变量都被定义了：$a 的内容是“hello”
//• 并且 $hello 的内容是“world”
PHP中的变量作用域
• 和 C 语言稍有不同
• 全局变量在函数中是无法直接访问的
global 关键字
- 如果要在函数中引用一个全局变量，可以使用global 关键字
静态变量 static
• 静态变量仅在局部函数域中存在，但当程序执行离开此作用域时，其值并不丢失。
运算符
• 算术运算符：+ - * / %
• 字符串运算符
// 英文句点“.”，其功能是将字符串连接起来，合并成新字符串
// $str =‘hello ’ . $name;
• 赋值运算符 =
• 复合赋值运算符 +=…
• 比较运算符：== , !=, <>, <, > …
// 恒等运算符 ===
// 0=="0" 为真，但是 0==="0" 不为真
• 逻辑运算符 !, &&, ||, and ,or
• 位运算符 &, !,~,^,<<,>>
• 其他一些运算符
– 三元运算符 ? :
– 错误控制运算符 @
//放PHP表达式前，错误信息都被忽略
//不能放在函数或类的定义之前，也不能用于条件结构例如 if 和 foreach 等
– 执行运算符 ` `
//注意这不是单引号,而是反单引号
表达式
表达式是标识符和运算符的组合
//-12
//$a=$b=5;
//$str_name=’Tom’;
//$arr_a=array(‘one’, ‘tow’, ‘three’);
//$int_total=++$int_number;
强制类型转换
//字符串到数值的强制类型转换
• 当字符串参与算术运算时，PHP 会将字符串转换成数值
• 如果一个字符串包含 e 或是 E，它将被转换成浮点数，否则转换成整数
• 如果字符串没有以一个符号或是数字开始，那么会被当成 0
//显式类型转换
(int)$total 或 intval($total) 或settype($total, "integer")
• 变量的当前类型可以通过 gettype 函数或是is_type 函数获得
• gettype($total) - 可能返回 "unknown"
• is_integer($total) – 明确告诉你是还是不是
输出
• PHP 中有三种输出：echo, print 和 printf
echo "whatever"; //Only one parameter
echo "first <br />", $sum //More than one
print "Welcome to my site!"; //Only one
流程控制
1、顺序
2、循环
while，do-while，for ，foreach
//foreach ($arr as &$value) 局部变量value
3、分支
if, if-else, elseif, switch
//switch 表达式的类型必须为整数，浮点数，或是字符串
4、流程控制的替代语法
把左花括号（{）换成冒号（:），把右花括号（}）换成endif
<?php
while ($a < 100) :
$a = $a * $b + 7;
$b++;
endwhile; ?>
• 数组使用
- PHP 中的数组是个一一映射的 map，也就是一个 key 到 value 的映射
- 除了可以使用数字作为索引之外，它还能使用字符串作为索引
数组创建：
// 一个字符串数组
$list = array(0 => "apples",
1 => "oranges",
2 => "grapes")
• 如果给出的 value 没有指定索引，则取当前最大的整数索引值加一
• 如果指定的索引已经有了 value，则该值会被覆盖
• 数组中可以混合各种类型元素
• 自 5.4 起可以使用短数组定义语法，用 [ ]替代 array()。
访问数组元素：
$arr[4] = 7;
$arr["day"] = "Tuesday";
$arr[] = 17;
var_dump($arr);
+ : Union 联合
联合运算符把右边的数组附加到左边的数组后面，但是重复的键值不会被覆盖。
- 使用函数 unset 可以删除数组中的元素
unset($list[4]);
// 现在索引为4的元素不存在了
unset($list); // 删除整个数组
• 函数定义
• PHP函数的定义语法为：
function 函数名(参数列表)
{
函数功能;
}
//• 函数不能被重载、重复定义，但可以嵌套
//• 函数名和关键字忽略大小写区别！
//• 可以有返回值(return)，也可以没有
//• 函数允许嵌套定义
• 参数的引用传递
//1
function addOne(&$param) {
$param++;
}
$it = 16;
addOne($it); // $it is now 17
//2
function subOne($param) {
$param--;
}
$it = 16;
subOne(&$it); // $it is now 15
• 从函数返回一个引用，必须在函数声明和
指派返回值给一个变量时都使用引用运算符 &
function &returns_reference() {
$someref = "hello";
return $someref;
}
$newref =& returns_reference();
echo $newref;
• 代码重用
- 引用外部文件的函数有两种：
require()函数及include()函数
- 函数一般放在 PHP 程序的最前面
- 两者的区别在于，当 require 引用的文件丢失时会产生一个严重错误，程序会停止运行
- include 引用的文件丢失时只会产生一个警告，程序继续运行
PHP 应用开发
• 会话跟踪
• Cookie 和 Session 都是用来记录用户相关信息的机制，区别在于
– Cookie 将信息存储在客户端
– Session 将信息存储在服务器端
Cookie 方式:
- Cookie 方式原理:
• 当用户登陆时，服务器端程序将用户信息保存在用户浏览器的 Cookie 里面
• 当我们访问网站其他页面时，浏览器将Cookie 中的用户信息发送给服务器端程序，服务器端程序使用这些信息生成页面- Cookie 方式实现原理:
• Cookie 的具体实现，使用的是 HTTP 头部报文中的两个字段：
• 响应报文中的 Set-Cookie 字段
• 请求报文中的 Cookie 字段
- PHP 中实现 Cookie:
• 服务器端用 setcookie 函数创建一个 cookie
• setcookie(name, value, lifetime … );
• 需要验证身份的页面可以通过超级全局变量 $_COOKIE 得到之前设置的 cookie 值
$user = $_COOKIE[‘user’];
Session 方式:
Session 方式实现原理:
- 当用户初次登陆网站的时候，服务器为其生成一个随机的字符串，叫做 session id，并将其传递给客户端
- 服务器端程序在服务器的临时文件夹中创建了一个文件保存与该 session id 相关的信息（比如用户名称、购买商品等）
- 客户端再次访问访问网站时，提交 session id，服务器就知道客户又来了，从文件取出相应信息
- 服务器和客户端交换 session id 的方式主要有两种：
1、通过 Cookie(php默认)
2、通过 URL 改写方式传递
PHP 中 Session 方式的实现：
• 开始会话：
1. 在所有页面的开头执行 session_start();
2. 如果会话 ID 不存在，它会创建一个；如
果会话 ID 已存在，则载入存在的会话
3. 创建会话变量：
$_SESSION['user'] = 'admin';
4. 使用会话变量：
if ( isset($_SESSION['user']) ) { …… }
销毁一个 Session 变量
• unset( $_SESSION['user'] );
销毁一个会话（也就是用户退出）
• session_destroy();
实例：登录的实现 login.php
$pass_hash = hash('sha256', $_POST['pass'];
$user = $_POST["user"];
// 与数据库中保存的用户名密码Hash比较……略
// 当验证通过后，启动 Session
session_start();
// 注册登陆成功的 admin 变量，并赋值 true
$_SESSION["admin"] = true;
//在需要用户验证的页面启动 Session，然后判断是否登陆
// 启动会话，这步必不可少
session_start();
// 判断是否登陆
if (isset($_SESSION["admin"]) && $_SESSION["admin"] === true) {
echo "您已经成功登陆";
} else {
//验证失败，将$_SESSION["admin"]置为 false
$_SESSION["admin"] = false;
die("您无权访问");
}
• 表单处理
表单参数传递方式:
- Form 中的 method 可以设置为 get 和 post 两种方式
- 在表单数据传输过程中分别对应了 HTTP 协议请求报文中的 GET 和 POST 方法
- get 是 form 的默认方法
<form action="…/cgi-bin/hello.cgi" method="get">
表单参数传递的方式 — GET:
- get 方法将表单数据按照 name=value 的形式，添加到 action 所指向的 URL 后面
http://....../Search?search=铁路&go=Go- 特点
– 不够安全，表单内容容易被看到
– 传输的数据量小，受 URL 长度限制
– 特殊字符需转成 URL 编码 (例如 空格 %20)
表单参数传递的方式 — POST:
- POST 方法是将表单中的数据放在 HTTP 报文的数据部分 (而不是 URL)
– 同样按照 “name=value” 的方式排列
– POST 可以传输大量的数据，所以在上传文件时只能使用 POST- 提交信息时, POST 请求比把参数嵌在 URL中的 GET 请求更合适
– URL 的长度是有限的(~ 1024 字符)
– URL 不能包含未经编码的特殊字符
– URL 中的私密数据会被看到
PHP 表单处理&超全局变量数组:
//表单处理
• 将 form 的 action 属性指向一个 php 程序，
即可用该 php 程序进行表单处理
• 在 PHP 中引入了超全局变量数组 $_POST
和 $_GET，$_REQEST来获取表单值
• 例如：有个name为 phone 的文本框，表单
传递方法是 post，可通过下列方式得到值：
$_POST["phone"]
//超全局变量数组(任何范围内都有效，与全局变量不同)
• $_GET 经由 URL 请求提交至脚本的变量
• $_POST 经由 HTTP POST 方法提交至脚本的变量
• $_COOKIE 经由 HTTP Cookies 方法提交至脚本的变量
• $_REQUEST 经由 GET，POST 和 COOKIE 机制提交至脚本的变量
//表单变量
当表单提交时，表单中的字段会自动成为PHP 脚本中超全局变量数组的成员
<form action="foo.php" method="post">
Name: <input type="text" name="username" />
Email: <input type="text" name="email" /></p>
<input type="submit" name="submit"
value="Submit me!" />
</form>
• 字符串处理函数
– 常用的几个函数要掌握，比如 trim, htmlspecialchars
1.trim()去除字符串首尾空格和特殊字符，并返回处理后字符串
2.htmlspecialchars()函数是使用来把一些预定义的字符转换为HTML实体，返回转换后的新字符串，原字符串不变。
3.nl2br()用< br />替换字符串中的换行(“0D0A”)
4.addslashes– 将字符串中的单引号，双引号，反斜杠等前面加上反斜杠进行转义
5.stripslashes– 将转义的反斜杠删除掉
PHP + MySQL
• MySQL 的使用
– 简单的 SQL 语句不要忘了
//查询
select * from 表名;
//插入
insert into 表名(字段1,字段2..) values(值1,值2…);
//修改
update 表 set 字段=值 where 条件;
//删除
delete from 表 where 条件;
– 通过命令行操作 MySQL
登录：
mysql -u root -p (-u 后面是用户 -p 后面是密码)
上面的执行回车之后 会有一个输入密码的过程，如果没有按Enter，有就输入
退出：
exit
常用的命令(一般以 ; 结尾，也可以自己设定)：
show databses; 查看有多少个数据库
use <database_name>;
show tables;
create database <database_name>;
drop databse <database_name>;
create table <table_name> (<字段名1> <类型1> [,..<字段名n> <类型n>]);
create table <table_name>(<字段> 类型 primary key auto_increment, ) auto_increment = 1; //自增长及初始值 关键字
create table <table_name>(<字段> 类型 default x, ); // 设置默认值
drop table <table_name>;
desc <table_name> ; (describe 查看表结构)
insert into <table_name> [(<字段名1>[,..<字段名n > ])] values ( 值1 )[, ( 值n )];
update <table_name> set 字段=新值,… where 条件;
delete from <tabel_name> where ...;
对表结构修改：
alter table <table_name> add/drop/change 字段 类型 其他;
add 字段名 字段类型（新增加一列）
add index 索引名 (列1【，列2】)
add primary key(列1【，列2】)
drop index 索引名
drop 字段名
change 原字段名 新字段名 新字段名的类型
修改表名：
rename table <old_table> to <new_table>;
• 在PHP中访问 MySQL 数据库
– PHP 中访问的 MySQL 接口（有哪几种）
- 专用接口函数方式:
– MySQL 扩展库
– MySQLi 扩展库（支持MySQL 4.1以后的新特性）- 统一数据库接口(PDO, PHP Data Objects)：
– PDO_MYSQL
– 从PHP 5.1 开始正式成为 PHP 的核心模块
– 从 Web 查询数据库的基本步骤(面向对象)
1. 检查并过滤来自用户的表单数据
– trim、htmlspecialchars
– 正则表达式
– PHP Filter Functions (PHP 5.2 以上版本)
2. 建立到数据库的连接(使用 mysqli)
<?php
// 建立数据库连接
@ $db = new mysqli('localhost', 'username', ‘password', 'books');
...
// 检测连接是否出错
if ( mysqli_connect_errno() ) {
echo ‘Error: Could not connect to database. Please try again later.’;
exit;
}
?>
3. 查询数据库
// 执行数据库查询
$query = "SELECT * FROM books WHERE
$searchtype LIKE '%$searchterm%'";
$result = $db->query($query);
4. 获取查询结果
// 得到查询结果的行数（记录数）
$num_results = $result->num_rows;
for ($i=0; $i <$num_results; $i++) {
// 处理并显示结果
$row = $result->fetch_assoc();
echo htmlspecialchars(stripslashes($row[‘title’]));
echo stripslashes($row[‘author’]);
echo stripslashes($row[‘isbn’]);
echo stripslashes($row[‘price’]);
}
5. 将结果显示给用户
– mysqli 访问数据库的基本接口函数（面向过程）
（面向对象的在上面）
1. 连接到MySQL
mysqli_connect(hostName,userName,dbasePassword)
2. 选择数据库
mysqli_select_db(connection, dbaseName)
3. 运行查询并得到结果
mysqli_query(sqlQuery, connection)
4. 获取查询结果中的记录数
mysqli_num_rows( mysqli_result result )
5. 获得查询结果中的一行
$row = mysqli_fetch_assoc($result);
6. 获得一列的值，格式化后输出
$row[‘isbn’]，$row[‘title’] ……
实例：简单博客系统：
1、数据库设计：
CREATE DATABASE `blog`
DEFAULT CHARACTER SET utf8
COLLATE utf8_general_ci;
USE `blog`;
CREATE TABLE `post` (
`id` int NOT NULL auto_increment,
`post_title` text character set utf8,
`post_content` text character set utf8,
`post_date` datetime,
PRIMARY KEY (`id`)
) ENGINE=InnoDB
DEFAULT CHARSET=utf8
COLLATE=utf8_unicode_ci;
2、前端new_post.html：
<form action="new_post.php" method="post">
<p>标题:</p>
<p><input type="text" name="title"
maxlength="60" size="30" /></p>
<p>正文:</p>
<p><textarea name = "content" rows="10"
cols="80"></textarea></p>
<p><input type="submit" value="提交" /></p>
</form>
3、后端new_post.php：
<?php
require('config.php'); // 数据库配置文件
date_default_timezone_set('Asia/Shanghai');
// 获取表单提交的数据
$title=$_POST['title'];
$content=$_POST['content']
if (!$title || !$content) {
echo '你未输入文章的标题或正文.<br />'. '请退回再次重试.';
exit;
}
// 如果没有打开 PHP 的 magic quotes 功能，
//则对提交的数据中的特殊符号进行转义处理
if (!get_magic_quotes_gpc()) {
$title = addslashes($title);
$body = addslashes($content);
}
@ $db = new mysqli($db_host, $db_username,
$db_password, $db_database);
if (mysqli_connect_errno()) {
echo '错误: 无法连接到数据库. 请稍后再次重试.';
exit;
}
// 设置 utf8 字符集
$db->query("SET NAMES utf8");
$query = "insert into post values('', '" . $title . "', '" .
$content . "','" . date('Y-m-d H:i:s') . "')";
echo '<pre>' . $query . '</pre>' ;
$result = $db->query($query);
if ($result) // 成功返回 TRUE，失败返回 FALSE
echo $db->affected_rows.' 条记录被插入数据库中';
else
echo '插入记录错误，请检查程序代码';
$db->close();
?>
4、显示文章列表list_post.php：
<?php
require('config.php');
@ $db = new mysqli($db_host, $db_username,
$db_password, $db_database);
if (mysqli_connect_errno()) {
echo '错误: 无法连接到数据库. 请稍后再次重试.';
exit;
}
// 设置字符集
$db->query("SET NAMES utf8");
$query = "select * from post";
$result = $db->query($query);
$num_results = $result->num_rows;
echo '<p>共有文章: '.$num_results.' 篇</p>';
for ($i=0; $i <$num_results; $i++) {
$row = $result->fetch_assoc();
echo '<h2>'.($i+1).'. ' .
htmlspecialchars(stripslashes($row['post_title'])) . "</h2>\n";
echo '<p>发表时间：' .
htmlspecialchars(stripslashes($row['post_date'])) . "</p>\n";
echo '<p>'.nl2br(htmlspecialchars(stripslashes($row['post_content']))).'</p>';
}
// 释放查询结果集
$result->free();
// 关闭数据库
$db->close();
?>
Web 开发技术进阶
• 了解 AJAX 技术的基本概念和原理、实现方法
- AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
- AJAX 使用 JavaScript 在服务器和浏览器之间发送和接收数据。
- 在浏览器与 Web 服务器之间，它使用异步数据传输 (HTTP requests)，允许网页向服务器索取少量的信息而非整个页面
• 了解 PHP 面向对象编程
• 了解 Web Service 技术的基本概念和原理
- Web Service 就是一个应用程序，它向外界暴露出一个能够通过 Web 进行调用的API
- 你能够用编程的方法通过 Web 来调用这个应用程序，获得执行结果
- 服务器端和客户端之间的数据通常封装成XML 的格式传递
• 了解常用的 PHP 开发框架和 MVC 模式
习题
1、
<!DOCTYPE html>
<html>
<head lang="zh_CN">
<meta charset="UTF-8">
<title>登录页面</title>
</head>
<body>
<h2>513公司</h2>
<form action="registe.php" method="post">
<p>Email:<input type="text" name="usrename"/></p>
<p>密码:<input type="password" name="password"/></p>
<p>性别:<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女</p>
<p>职位<select name="position">
<option value="0">产品经理</option>
<option value="1">开发工程师</option>
<option value="2">测试工程师</option>
</select>
</p>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>
2、
//todo.html
<html>
<head>
<title>JavaScript Todo List</title>
<head>
<body>
<ul id="todo">
</ul>
<form action="" method="post">
<p>新事项<input type="text" id="item"/>
<input type="submit" value="提交" id="add">
</p>
</form>
<body>
<script type="text/javascript" src="todo.js">
</script>
<html>
//todo.js
function init() {
list = document.getElementById( "todo") ;
box = document.getElementById( "item" );
document.getElementById("add" ).onclick = function(){
var newLi = document.createElement( 'li ' );
var node = document.createTextNode(box.value);
newLi.appendChild( node);
list.appendChild(newLi);
};
}
window.onload = init;
3.
#wrap {
width:960px;
margin:0 auto;
background:#99c;
}
#header {
height:100px;
color:blue;
margin:0 auto;
}
#header h1 {
padding:5px;
}
#content h2,h3,p {
padding:0 10px;
}
#navigation {
height:100px;
color:red;
background-color: white;
}
#navigation ui {
list-style:none;
padding:0;
margin:0;
}
#navigation li {
display:inline;
margin:0;
padding:0;
}
#left {
width:200px;
height:150px;
float:left;
/*color:green;*/
background-color:green;
}
#content {
float:left;
width:600px;
height:150px;
background-color:blue;
}
#right {
width:160px;
height:150px;
float:right;
color:pink;
background-color:pink;
}
#footer {
clear:both;
background:#cc9;
}
html, body {
margin:0;
padding:0;
background:#a7a09a;
color:#000;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<?php
@ $db = new mysqli(localhost, root, password, books);
if (mysqli_connect_errno()) {
echo '错误: 无法连接到数据库. 请稍后再次重试.';
exit;
}
$db->query("SET NAMES utf8");
//获取表单数据
$searchtype=$_POST['searchtype'];
$searchterm=$_POST['searchterm'];
$query = "select * from book where '$searchtype' like '%$searchterm%'";
$result = $db->query($query);
$num_results = $result->num_rows;
echo '<p>共有图书: '.$num_results.' 本</p>';
for ($i=0; $i <$num_results; $i++) {
$row = $result->fetch_assoc();
echo '<h2>' . htmlspecialchars(stripslashes($row['title'])) . "</h2>\n";
echo '<p>isbn:' . htmlspecialchars(stripslashes($row['isbn'])) . "</p>\n";
echo '<p>author:' . htmlspecialchars(stripslashes($row['author'])) . "</p>\n";
echo '<p>price:' . htmlspecialchars(stripslashes($row['price'])) . "</p>\n";
}
// 释放查询结果集
$result->free();
// 关闭数据库
$db->close();
?>
</body>
</html>
1490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
