绪论以及因特网与万维网简介
Web程序设计课程主要内容
- 因特网与万维网简介
- HTML与CSS
- 网页区域和 CSS 盒子模型
- PHP服务端编程
- JavaScript和DOM
- Cookie与Session
- Web安全基础
- HTML5
- XML
- Mashup
- ……
因特网
在互联网上，没人知道你是一条狗。
互联网（英语：Internet）是指20世纪末期兴起电脑网络与电脑网络之间所串连成的庞大网络系统。这些网络以一些标准的网络协议相连。它是由从地方到全球范围内几百万个私人、学术界、企业和政府的网络所构成，通過电子，无线和光纤网络技术等等一系列广泛的技术联系在一起。互联网承载范围广泛的信息资源和服务，例如相互关系的超文本文件，还有万维网（WWW）的应用，电子邮件，通话，以及文件共享服务。
互联网的起源可以追溯到1960年代美国联邦政府委托进行的一项研究，目的是创建容错与电脑网络的通信。互联网的前身ARPANET最初在1980年代作为区域学术和军事网络连接的骨干。1980年代，NSFNET（英语：NSFNET）成为新的骨干而得到资助，以及其他商业化扩展得到了私人资助，导致了全世界網絡技术的发展，以及许多网络的合并。到1990年代初，商业网络和企业之间的连接标志着向现代互联网的过渡。尽管互联网在1980年代被学术界广泛使用 ， 但商业化的服务和技术融入了现代每个人的生活 。
因特网的关键点
- 因特网是为信息自由而存在的
- 互联网 Vs. 因特网
- 子网络能够独立存在
- 计算机能够动态加入与离开网络
- 建立于开放标准之上; 每个人都能建立一个新的设备
- 缺乏中心控制(大部分)
- 任何人都能借助简单的软件使用它
分层架构
互联网使用一个分层的硬件/软件架构 (OSI模型)。
- 物理层: 设备, 例如同轴电缆, 光纤,调制解调器
- 数据链路层: 基础硬件协议 (以太网, Wi-Fi, DSL, ATM, PPP)
- 网络/因特网层: 基础软件协议 (IP)
- 运输层: 保证网络层的可靠性 (TCP, UDP)
- 应用层: 为各种应用程序实现通信(HTTP, POP3/IMAP, SSH, FTP)
超文本传输协议 (HTTP)
- 由浏览器发送并由服务器解析的一组命令
- 部分 HTTP 命令 (浏览器在内部传送)：
- GET filename : 下载
- POST filename : 传送一个Web表单
- PUT filename : 上传
- DELETE filename: 移除实体
- HEAD filename: 只是状态信息, 而不是全部内容
HTTP 错误码
当某些地方出现问题, Web服务器会返回一个特殊的”错误码”数字给浏览器, 有时会附上一个HTML文档
常见错误码：
| 数字 | 含义 |
| 200 |
OK |
| 301-303 |
页面已经被移除(永久性或者临时性) |
| 403 |
你不允许访问此页面 |
| 404 |
找不到页面 |
| 500 |
服务器内部错误 |
超文本标记语言(HTML)
注释: <!-- … -->
注释也可使网页的一段代码无效
注释不能嵌套使用，也不能包含 –
许多网页不能彻底（或完全地）被注释掉
添加注释是一种沟通途径,，用来向你的同事解释你的设计方法和目的，甚至有时也是为了方便你以后查看.
添加注释不是为了给浏览器跟用户看，而是为了开发者跟设计者.
XHTML 网页的结构
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
information about the page
</head>
<body>
page contents
</body>
</html>
- 用head部分描述网页，用body部分来装载网页的内容
- 一个HTML网页被保存在以扩展名.html结尾的文件中
网页的标题: <title>
网页元数据: <meta>
段落: <p>
换行符: <br />
标题: <h1>, <h2>, …<h6>
水平线: <hr />
链接: <a>
图像: <img>
短语元素: <em>, <strong>
无序列表: <ul>, <li>
有序列表: <ol>
基础CSS
层叠样式表(CSS): <link>
基础 CSS 规则的语法
selector {
property 1: value 1;
…
property n: value n;
}
- 注释 :
/* …. */
- 一个 CSS 文件包含一条或多条规则
- 每条规则以一个选择器(selector)开始， 该选择器选中了一个（或多个）HTML 元素 然后对它们应用样式属性
CSS 字体属性
| 属性 |
描述 |
| font-family |
指定使用的字体 |
| font-size |
指定字体大小 |
| font-style |
用于使用/取消 斜体字 |
| font-weight |
用于使用/取消 粗体字 |
CSS基础与高级实践
更多HTML元素
网页元数据: <meta>
表格: <table>, <tr>, <td>, <th>, <caption>
定义列表: <dl>, <dt>, <dd>
引用: <blockquote>
行内引用: <q>
HTML字符实体
在网页中表示任何unicode字符的方法
| 字符 |
实体 |
| < > |
< > |
| é è ñ |
é è ñ |
| ™ © |
™ © |
| π δ Δ |
π δ Δ |
| И |
И |
| " & |
" & |
计算机代码: <code>
预编排文字: <pre>
更多基础的CSS
一种样式可以选择多个元素, 由逗号分隔
单独的元素也可以拥有自己的样式 (例如上面的h2)
CSS的文本属性
| 属性 |
描述 |
| text-align |
文本的水平对齐方式 |
| text-decoration |
文本的修饰, 例如下划线 |
| line-height, letter-spacing |
文本的间隔 |
| text-indent |
每一段落的首字符缩进 |
CSS实践
Body 样式
body {
font-size: 16px;
}
要把一种样式应用到网页中的整个body, 你需要写一个body元素的选择器
避免让你手动为每一个元素添加样式。
它被称为层叠样式表是因为元素的属性以以下的顺序 层叠 在一起:
- 浏览器的默认样式
- 外部样式表文件 (在
<link>标签里面)
- 内部样式表 (在网页头的
<style>标签里面)
- 行内样式 (HTML 元素的样式属性)
CSS的背景属性
| 属性 |
描述 |
| background-color |
背景色 |
| background-image |
背景图 |
| background-position |
相对于元素的背景位置 |
| background-repeat |
背景是否/如何被重复 |
| background-attachmen |
背景是否随页面滚动 |
更多CSS知识
HTML 的id 属性
允许你给网页上任一个元素分配一个唯一的ID
每个ID必须唯一；在网页中只能定义一次
链接到Web 网页的某个区域
一个链接目标可以以#开头，以ID名称结束
浏览器会加载指定页面，并跳转到给定ID的元素处
CSS ID 选择器
仅对拥有ID为 mission 的段落应用样式规则
元素也可被明确地指定为 p#mission { … }
HTML 的类(class) 属性
使用类，可以选定一组元素并为该组元素应用样式规则
不同于 id, 一个 class 名称可以在网页中被多次使用
CSS 类选择器（class selector）
为拥有任何类为special 的元素 或者 类为shout 的p 元素应用相应的样式规则
一个元素可以拥有多个类属性 (用空格分隔开)
CSS 伪类
| 类 |
描述 |
| :active |
向被激活或被选择的元素添加样式 |
| :focus |
向拥有键盘输入焦点的元素添加样式 |
| :hover |
当鼠标悬浮在元素上方时，向元素添加样式 |
| :link |
向未被访问的链接添加样式 |
| :visited |
向已被访问的链接添加样式 |
| :first-letter |
向元素中的文本的首字母添加样式 |
| :first-line |
向元素中的文本的第一行添加样式 |
| :first-child |
向元素的第一个子元素添加样式 |