1、HTML一、XHTML1.基础HTMLHyperText Markup Language:超文本标记语言。XHTMLeXtensible HyperText Markup Language:扩展的超文本标记语言。2.标记分类(1)、根据是否包含子标记和或内容单标记:双标记:.(2)、根据是否自然换行内联对象:不换行块级对象:换行块对象的宽度是占父对象宽度的 100%。3.XHTML 文档的标准单标记必须以“/“ 结尾。标记名称必须为英文小写字母。标记之间必须顺序嵌套。属性名称不区分先后顺序。属性名称必须为英文小写字母。属性值必须括在引号之间。4.标记属性(属性指对象的特征描述。 ).公共属性(
2、除 html、meta、link、script 等标记外)title:注释idclassstyle5.XHTML 文档的基本结构网页标题 网页正文DTDDocument Type Defination:文档类型定义主要功能在于定义文档的结构。比如说谁是根节点，根节点有哪些一级子节点，这些子节点有哪些属性，这些属性中哪些是必须的，哪些是可选的等等这些信息，全部都在 DTD中规定。XHTML 1.0 DTD 的类型有：Strict(严格 ):Transitional(过渡):Frameset(框架):xmlns:命名空间(Namedspace)命名空间是解决标记名称冲突。二、格式化操作. 加粗.
3、加粗. 倾斜. 倾斜. 下划线. 删除线. 删除线. 上标. 下标. 内联对象三、段落与换行段落.换行(软回车，换行不换段)四、标题.五、水平分隔符六、表格1.作用表格实现页面的布局。2.标记.表格属性width:宽度height:高度border:边框宽度bordercolor:边框颜色bgcolor:背景颜色background:背景图像align:水平对齐方式(left|center|right)cellpadding:单元格边距(单元格内容与框线之间的距离)cellspacing:单元格间距( 相邻单元格之间的距离)行属性height:高度align:水平对齐方式(left|cente
4、r|right,默认为 left)bgcolor:背景颜色单元格属性width:宽度height:高度bgcolor:背景颜色background:背景图像align:水平对齐方式(left|center|right,默认为 left)valign:垂直对齐方式(top|middle|bottom,默认为 middle)rowspan:行合并数目colspan:列合并数目同列中的所有单元格宽度相同；同行中的所有单元格高度相同。七、body 标记的属性leftmargin:左边距topmargin:上边距rightmargin:右边距bottommargin:下边距bgcolor:背景颜色八、图
5、像1.浏览器支持的图像格式gifjpg/jpegpng2.标记说明:src 和 alt 属性是必需的。九、font 标记(不提倡使用).十、HTML 实体大于号: 小于号: 单引号: 按位与: 双引号: 不间断空格: 版权符号: 注册商品: 英镑: 欧元: 日元: 乘号: 除号: 十一、XHTML 文档合法性验证http:/validator.w3.org一、表单1.概述收集客户端信息，然后提交到服务器。2.表单标记.必须的表单元素必须赋予有效的名称。3.文本框单行文本框密码框多行文本框4.单选框说明:一组类型的单选框名称必须相同。必须为单选框选项赋予有效的值。5.复选框一组类型的复选框名称必
6、须相同。一组类型的复选框必须命名成数组形式。必须为复选框选项赋予有效的值。6.列表框文本.如果列表框具有 multiple=“multiple“属性，那么必须命名成数组形式。7.浏览框说明:具有浏览框的表单只能为 POST 提交。具有浏览框的表单必须为 enctype=“multipart/form-data“属性9.按钮提交按钮取消按钮自定义按钮10.GET 方式与 POST 方式的区别GET 方式将提交数据以“ 名/值对“形式附加在 URL 地址之后；而 POST 方式将数据附加在HTTP 请求头部提交。GET 方式最多提交 1024 个字节；POST 方式理论上无限制。CSS一、CSS1
7、.概述CSSCascading Style Sheet层叠样式表CSS 的作用在于快速修饰网页元素。2.Box 模型对象的实际宽度 = 左外边距 + 左外边框 + 左外内边距 + 宽度 + 右内边距 + 右外边框 + 右外边距(1)、内边距都是 20px外边距都是 10px边框为 0宽度为 150实际宽度：210(2)、内边距都是 20px外边距都是 10px边框为 0实际宽度为 160px宽度是（100px）在页面布局时，一般不设置对象的高度(除非为背景图像时) 。3.块级对象在默认情况下，以下标记为块级对象p、h1,h2,h3,h4,h5,h6,h7,ul,ol,li,dl,dt,dd,b
8、lockquote 等块对象的宽度是占父对象宽度的 100%。4.CSS 语法结构选择器属性:值;属性:值;二、选择器1.通配选择器:* (所有标记将自动生效)2.标记选择器:标记名称 (自动应用于指定的标记)3.类选择器: .类名称 (可手动的应用于任何的标记)说明:类在定义时需要“点”标志，但在引用时无需该标志。多个 CSS 类之间以空格分隔4.ID 选择器 : #ID (只能手动的应用于唯一的标记 )说明:对象的 ID 除在 CSS 样式使用外，还可以在 JavaScript 和 jQuery 中使用。5.群组选择器: 选择器,选择器 ,.6.派生选择器: 选择器 选择器说明：要求两个选
9、择器之间至少为父子关系。设置 DW 中新建文档的默认编码方式A、快捷键 ctrl+uB、选择“New Document“选项,修改“Default Encoding“选项一、CSS 样式1.布局属性width:宽度height:高度margin-top描述:设置上外边距语法:margin-top:value|auto;margin-right描述:设置右外边距语法:margin-right:value|auto;margin-bottom描述:设置下外边距语法:margin-bottom:value|auto;margin-left描述:设置左外边距语法:margin-left:value|a
10、uto;margin描述:设置外边距(四个方向相同)语法:margin:value|auto;margin描述:设置外边距语法:margin:value|auto(上下) value|auto(左右);margin描述:设置外边距语法:margin:value|auto(上) value|auto(左右) value|auto(下);margin描述:设置外边距语法:margin:value( 上) value(右) value(下) value(左);padding-top描述:设置上内边距语法:padding-top:value;padding-right描述:设置右内边距语法:paddi
11、ng-right:value;padding-bottom描述:设置下内边距语法:padding-bottom:value;padding-left描述:设置左内边距语法:padding-left:value;padding描述:设置内边距语法:padding:value;padding描述:设置内边距语法:padding:value value;padding描述:设置内边距语法:padding:value value value;padding描述:设置内边距语法:padding:value value value value;float描述:设置对象的浮动语法:float:left|ri
12、ght;重要提示：如果子标记存在 float 属性，那么父对象的高度将清为零。clear描述:清除浮动语法:clear:left|right|both;清除浮动为了良好的文档结构及良好的代码阅读性，一定我们定义如下的 CSS 类：/* = clearfix = */.clearfix:after /*/*/ content: “.“; /* IE8 hack */ display: block; height: 0; clear: both; visibility: hidden; /* IE7 hack */.clearfix display: inline-block; /* IE-mac
13、, IE5, IE6 */* html .clearfix height: 1%; .clearfix display: block; 当我们定义完毕该类后，只需要在浮动对象的父对象上添加 class=“clearfix“属性即可。重要提示：如果子标记存在 float 属性，并且还存在 margin 属性,那么将在 IE6 中产生双倍间距！清理 IE6 双倍间距display:inline;display描述:设置对象的显示方式语法:display:none|block|inline;2.背景background-color描述:设置背景颜色语法:background-color:value;
14、background-image描述:设置背景图像语法:background-image:url(图像 URL);background-repeat描述:设置背景图像的重复方式语法:background-repeat:repeat|no-repeat|repeat-x|repeat-y;background-attachment描述:设置背景图像的依附方式语法:background-attachment:scroll|fixed;background-position描述:设置背景图像的位置语法:background-position:水平(left|center|right|value) 垂
15、直(top|center|bottom|value);backgroud描述:设置背景的一种简写方式语法:backgroud:背景颜色 url(背景图像 URL) 重复方式 依附方式 水平位置 垂直位置;3.关于颜色的写法英文名称,如 red,green,blue 等全写十六位进制,如#ff0f00(红色)简写十六位进制,如#f00(红色)RGB 写法,如 rgb(255,0,0)RGB 写法,如 rgb(100%,0%,0%)4.文本样式color描述:设置文本颜色语法:color:value;font-size描述:设置字号语法:font-size:value;font-family描述:
16、设置字体语法:font-family:value,vaulue,.;说明:如果字体名称本身包含空格，则使用引号括起来。font-weight描述:文本加粗语法:font-weight:normal|bold;font-style描述:文本倾斜语法:font-style:italic|normal;text-decoration描述:修饰线语法:text-decoration:none|underline|line-through|overline|blink;text-align描述:文本水平对齐方式语法:text-align:left|center|right|justify;text-in
17、dent描述:首行缩进语法:text-indent:value;一、CSS 样式1.边框属性border-top-width描述:设置上边框的线宽语法:border-top-width:value;border-top-style描述:设置上边框的线型语法:border-top-style:none|solid|dotted|dashed;border-top-color描述:设置上边框的颜色语法:border-top-color:value;border-top描述:设置上边框的样式语法:border-top:线宽 线型 颜色 ;border描述:设置边框的样式语法:border:线宽 线型
18、 颜色;重要提示:在 IE6 中，如果标记的高度小于 10 个像素，那么显示的效果要大于设定的值，要屏蔽该效果只能添加 overflow:hidden;属性。line-height描述:设置行高语法:line-height:value;2.伪类选择器:link 对象正常显示的状态:hover 鼠标放上的状态:active 鼠标按下的状态:visited 鼠标释放后的状态说明：一般情况下，要么只设置:link 和:hover 的状态，要么就把:link 与:visited 和:hover、 :active 的状态设置为相同的属性。如果只设置链接标记的 CSS 样式，则代表四个状态完全相同。重要说
19、明:块级对象可以设置宽度/高度 /外边距/内边距；如果内联对象具有 float 属性，那么也可以设置宽度/高度/外边距/内边距。一、CSS 样式1.列表样式list-style-type描述:设置列表样式语法:list-style-type:none|circle|disc|square|lower-alphalist-style-image描述:设置列表图像语法:list-style-image:url(背景 URL);list-style-position描述:设置列表符号的位置语法:list-style-position:inside|outside;list-style描述:设置列表属
20、性语法:list-style:type url( 图像 URL) position;http:/ 样式1.定位属性position描述:设置对象的定位方式语法:position:static(静态)|relative(相对)|absolute(绝对);left描述:设置与父对象左侧的间距语法:left:value;top描述:设置与父对象上侧的间距语法:top:value;right描述:设置与父对象右侧的间距语法:right:value;bottom描述:设置与父对象下侧的间距语法:bottom:value;z-index描述:设置对象的叠放顺序语法:z-index:value;重要说明:r
21、elative 为相对定位，此时使用 top、left、right 、bottom 等属性时是相对于父对象而言。但是该对象没有脱离文档流。absolute 为绝对定位，此时使用 top、left、right、bottom 等属性时是相对于浏览器的坐标原点而言。但是该对象已经脱离文档流。(父)relative+(子)absolute，此时:(1)、子对象的定位为绝对定位。对象已经脱离文档流。(2)、子对象是相对于父对象的坐标原点而言的。半透明颜色IE:filter:alpha(opacity=value);取值范围为 0100Firefox 等opacity:value;(取值为 01)curs
22、or描述:设置鼠标指针类型语法:cursor:pointer(手形)|wait(沙漏)|text(I 形)|crosshair( 十字光标 )|help(帮助);父子选择器selectorselector说明:选择器之间只能为父子关系 (IE6 不支持)解决 IE6 不支持 PNG 透明(1)、PNG 透明图像作为背景使用filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=是否启用效果,src= 背景图像 URL,sizingmethod=图像的显示方式)enabled 值只能为 true/false。src 为
23、 PNG 透明图像的 URL。sizingmethod 为图像显示方式(image|scale|crop)image:放大 /缩小盒子的尺寸，以显示一个完整的图像。scale:放大/缩小图像，以显示充满盒子。crop:裁切 ,只显示盒子尺寸部分的图像(2)、PNG 透明图像作为图像使用直接在文档的头部，书写(3)、无论为 PNG 的图像/背景图像添加链接，那么 IE6 中，产生(1)、鼠标形状在文本的空白区域没有呈现手形(2)、文本的空白区域内不能使用链接解决方案:为链接添加以下样式:cursor:pointer;position:relative;CSS 样式方式链接到外部的 CSS 文档C
24、SS 文件的扩展名.css书写于文档的头部.书写于标记内部PHP 基础知识点：一 php 的概述二 环境安装三 php 的基础知识一 php 的概述php 超文本预处理程序1 php 是什么： div+css 页面布局php 数据处理 操作数据库2 php 网站 网站如何工作。客户端：自己电脑服务器端：官方 公司性能强大电脑。网站：客户端 服务器端网站 -软件1软件：电脑的应用程序。c/s 客户端-服务器软件、下载安装包，在自己的机器上安装，升级和维护，由自己的电脑完成。qq 杀毒软 下载软件office b/s 浏览器 -服务器端公司 官方完成升级和维护的工作网站：b/s php java(
25、jsp) .net(c#)php 互联网行业 web 应用java c/s 手机 互联网行业.net(c#) 互联网 软件 手机2网站如何工作：客户端发送请求，服务器接收请求，且返回相应的代码，把代码响应到浏览器3php 的环境介绍：php 环境lamp linux + apache + mysql + phpwamp windows+apache + mysql + phplinux php 环境 a.免费b.linux 风险比较小 稳定。c.高效，速度快，加载方便，安装方便。windows php 环境：a.熟悉b.开发软件齐全。c.配置简单d.高效，速度快，加载方便，安装方便。工作环境：
26、linux 运行和维护。windows 开发，学习和研究的。4环境安装a. php 安装：解压 php 的安装包。重命名 php 目录、b. 找到 php.ini-dist -php.ini 包含 php 的配置信息。c.打开 php.ini ;配置文件中的注释符；d. ctrl+f 查找 extension=php_gd2.dll 和extension=php_mysql.dll，并去掉其前面的分号(;)extension= /用来对 php 进行功能的加载。注意：extension=php_gd2.dll php 对图像进行处理的。extension=php_mysql.dll php 对
27、数据库进行操作的。e.将 php/ext 文件夹内的 php_gd2.dll 和 php_mysql.dll 复制到 c:windowssystem32f.安装 apache选择自定义的安装路径g.配置 apache1开始- 程序 -apache http server2.2-config apache server -edit apache2修改项目目录DocumentRoot “目录的路径“ apache 运行 php 文件的目录设定权限的代码块3DirectoryIndex 设置默认的访问首页。4LoadModule 加载功能模块的。LoadModule php5_module “D:w
28、ebphpphp5apache2_2.dll“PHPIniDir “D:php” php/ext/ 功能库的位置。AddType application/x-httpd-php .php 添加功能类型，应用程序/apache 支持你的 php 程序 .php 文件5Listen 80 端口号默认 6重启 apache 生效。7访问第一个 php 页面：浏览器地址栏目当中http:/localhost:端口/文件名-d:/web/www/index.phphttp:/localhost:端口/ apache 在帮你解释 php 文件的。phpinfo(); php 的环境配置信息，以及功能信息。
29、d:/同学们的机器80http:/localhost/-/home/www/home/www/index.php5php 的编辑软件 Zend.Studio.v7.1.2同学们：应用程序-编程-Zend studio三 php 的基础知识1、div+css html 静态页面文件；php 程序：- 文件名称（自定义英文单词 /字母组合） .php index.phpab.php h.html dv.phpusersList.phpuserAdd.phpaddUser.phplistBooks.php文件名：动词+名词.php 动词_名词.php注意：第二个以后单词的首字母 大写。userNam
30、eInfo.php user_name_info.php2、zend studio 创建第一个 php 页面filenew-php projectproject name(项目名称)-项目路径- javascript support项目文件夹右键-new-php file 创建 php 文件了.php php.php 内容：html/div+css 正常的 html div css 可以直接写到 php 页面中。javascript(jquery)php 脚本3、php 脚本写到页面 1php 写到页面中，需要定界符来包含起来定界符: 用来包含 php 代码定界符种类：xml 风格：标准风格。
31、*短标记：了解：asp 风格 早期网页编程语言script 定界符php 代码2定界符位置：页面的任意（需要）位置。注意：定界符 不能嵌套3php 当中的注释：php 注释符写在定界符之内。c 语言风格shell 风格#注释内容注意：注释可以出现在 php 定界符内的任意位置。4 php 基础语法：1变量：存储在内存中有名称的信息。x = 3;未知数 赋值 值变量名称 赋值 变量值php 中变量由 变量名称和变量值构成。2变量的定义:变量名称: $变量名称 $x $y $z;变量值：=$z = 3.14;echo 内容; / 打印内容 到页面。同一个变量 在一个页面中 只能定义 1 次。3变量
32、名称 定义规则：$后的第一位只能是字母 _,第二位以后可以有字母，数字 _变量名 由 2 个或 2 个以上的单词：第二个单词以后的首字母大写。习惯：变量名称要有一定的含义。注意：php 当中想使用 html 代码 echo “;php 没行后边都需要 ; 结尾4数据类型：$demo = 值;标量（基础）类型：*字符型:(string) 日常用语 字符串赋值给变量 要 “ $people = “中国有 13 亿人口“单引号：不能执行内 php 代码的。双引号: 能执行 “内的 php 代码的。*整形：整数 integer $num = 153; $num = -127;*浮点型：float(单精
33、度) 小数 $fl = 3.14; $demo = 2.875double (双精度) $demo1 = 2.897; 范围表示比较大。*布尔型： boolean 判断情况的对错 true 对 真 false 错 假$bl = true;true 1false 0注意：输出 true 结果 1 输出 false 结果 空true 1 false 0复合类型:数组：Array对象：Object特殊类型:资源：resource NULL：空 表示变量没有值。$str = “小明说:“他很爱国“; php 默认 “ 是控制符。控制符 字符 字符 控制符1 双引号之内的引号：“小明说 :他很爱国“;2
34、 转义字符：能把符号在字符和控制符之间进行切换。控制符 -字符 转义字符。$str = “小明说:“他很爱国“;“ - “* - * - *n 换行r 回车f 换页符。5函数 var_dump(数据);sin(角度); sin(30) = 0.5 sin(90)=1sin(45)cos(角度);sin(x)=1函数名(参数) 结果: 返回值 ; var_dump(参数); 变量的相关信息。$str2 = “aaaaaaaaaaaa“;var_dump($str2);5变量：$userName = “值“;注意：全局变量 和 局部变量全局变量 页面中的变量 是全局变量。局部变量 在某些行内起作用
35、。6php 提供一组 预先定义好的变量（预定义变量）;$_ENV php 的配置信息。$_GET 由 URL 路径提交的值的传递方式。$_POST 由 HTTP POST 提交的值的传递方式。$_FILES 由 HTTP POST 上传文件的传递方式。$_SERVER web 服务器的设定值。$_SESSION session 回话的内容。$_COOKIE 用来在客户端保存用户信息的变量。$_REQUEST $_POST + $_GET 1 练习：人的信息：张三男北京市已婚。个人简介：用变量的形式表示：$userName = “张三“;$userSex = “男 “;$userAge = 18
36、;$userTel = “13111111111“;$userEmail = ““;$userPro =“北京 “;$userMerr = true;$userInfo = “我很爱国， 1-18 19-22“;2 用 var_dump() 打出各种类型的数据的结果。demo 案例知识点：一、运算符二、流程控制三、基础函数库一、运算符1 字符串运算符*拼接符 .注意：拼接 html 标记。2 算数运算符*+ - * / %(求余 ); 15 4 注意：% 在写分页的时候。3 赋值运算符*=.= 先拼接，后赋值。+=-=*=/=%=4 自增 / 自减 运算符*。后缀$i+ $i- 先使用，在+
37、-前缀+$i -$i 先+ - 在使用。5 比较运算符：* = = != =(相等) =(全等) !=（全不等）比较至少要两个元素。比较运算符，最后的结果 是一个 boolean true false=(全等) != （全不等）注意：= 只比较值，不比类型= 值和类型都比较!= 值或类型有一个不等 结果就是 true值和类型都相等 结果 false6 逻辑运算符*在比较运算符的基础上，判断几个比较式子，来确定最终的结果的对 错与 & 表达式 1 & 表达式 2 结果 boolean true/false 当表达式 1 和 2 都为 true ，最终结果 true 其他情况都是 false或 | 表达式 1 | 表达式 2
