韩顺平 轻松搞定网页设计html (DIV、CSS) javascript视频笔记.doc

韩顺平 轻松搞定网页设计html (DIV、CSS) javascript视频笔记韩顺平html第二讲第一个网页hello world !-使用来调整字体颜色-hello world1 !-使用来调整字体大小,但是size里面的取值是17-hello world2 !-使用CSS中将字体调整更大-为字体更换颜色4 hhhhh韩顺平html第三讲Html的超链接：例子：无标题文档超链接 在新窗口打开 在本页面打开 给自己写信Html图片元素（标记）： 案例：（网页上显示图片）无标题文档 Table表格：!-/table !-*tr表示行，td表示列,tr align=设置字体对齐方式*- 案例：无标题文档*表格,为表格添加背景*!-123 !-*tr表示行，td表示列,tr align=设置字体对齐方式*- 韩顺平html第四讲合并单元格：colspan=跨行列数roespan=跨列行数 表格 *菜谱* 周一菜谱 素菜青菜土豆 豆腐白菜 荤菜肉丝大虾 海参鲍鱼 注释：在此处表示字体的对齐方式韩顺平html第五讲无序列表（html常用标记/元素-ui/li）格式: Html列表无序列表列表内容的属性设定（常用）：例如：Type=”squre”设定符号款式，其值有三种，如下，默认为Typr=”disc”Type=”disc”时的列项符号是实心圆点Type=”circle”时的列项符号为空心圆Type=”square”时的列项符号为空心正方形*无序列表代码例子*111Html列表有序列表ol称顺序列表标记列表内容的属性设定（常用）：例如：type=”i”设定数目款式的值有5种：阿拉伯数字，a小写字母，A大写字母，i小写罗马数字，I大写罗马数字*有序列表代码例子*111111Html框架标记（元素）frameset/framerows=” 按照行的百分比实例：qq.html歌词ee.html费玉清All.html注释：all.html中不能带body标记综合案例：all.html New Document top.html New Document Left.html New Document 青花瓷1 青花瓷2 Right1.html New Document right1.html Right2.html New Document right2.html 韩顺平html第六讲html表单form：介绍：html的表单元素，主要用于让客户输入数据，并提交给服务器语法格式： 各种元素（输入框，下拉列表，文本域，密码框）代码： 提交界面.html 登陆界面 登陆界面 用户名： 密  码： Ok.html ok 表单中提供给用户的输入形式有：*=text文本框, password密码框, checkbox复选框 , radio单选框, image图片按钮, hidden , submit提交按钮, reset重置按钮name是你给表单元素取的名子*=Symbolic Name for CGI scriptAction:指定把请求交给那个界面 其他： New Document 1*复选框* 苹果 香蕉 *单选框* 苹果 香蕉2*隐藏一个表单元素*用处是可提交数据，同时不影响界面* 这里有一个隐藏的表单元素font*图片按钮* 苹果 *下拉列表* -请选择- 网游 足球 游泳 *文本区* 请输入文本 *请选择要上传的文件* 请选择文件*按钮* DIV+CSS部分笔记 当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。2011韩顺平轻松搞定网页设计（html+css+js）之javascript现场授课笔记（完整版）Javascript的基本介绍 JS是用于WEB开发的脚本语言： 脚本语言是什么： 脚本语言不能独立使用，它和HTML/JSP/PHP/ASP.NET配合使用 脚本语言也有自己的变量，函数，控制语句（顺序，分支，循环） 脚本语言实际上是解释性语言（即在执行时直接对源码进行执行） Java程序.java.classjvm , js浏览器（js引擎来解释执行） Js在客户端（浏览器）执行 因为js是由浏览器来执行的，因此这里有个问题，不同类型的浏览器可能对js的支持不一样。 function test()window.alert(hello world!); New Document 案例：1需求：打开网页后，显示hello ！ window.alert(hello!); New Document 问题： js的位置可以随意放 js必须使用 代码 在一个html文件中（JSP/PHP/ASP.NET）可以出现多对（script）片段，浏览器会按照先后顺序一次执行案例2:Hello world程序改进 如何定义变量： 如何运算： New Document /js中变量的定义（js中变量用var表示，无论什么类型） var num1=1; var num2=60; var result=num1+num2;window.alert(结果是+result); /alert函数 window.alert表示弹出一个对话框 Js的变量类型是怎样决定的1) Js是弱数据类型语言，即：在定义变量侍候，统一使用var表示，甚至可以去点var这个关键字2) Js中的变量的数据是由js引擎决定的Var name=”shunping”; /name是字符串Var kk=2 /kk是数字Name=234; /这事name自动变成数 Js的命名规范（函数/变量）：1) 使用大小写字母，数字，$可以命名2) 不能以数字打头3) 不能使用js保留字和关键字（即java里的关键字）4) 区分大小写5) 单行注释：/6) 多行注释：/*.*/韩顺平JS第三讲 Js的数据类型： 基本数据类型 数值类型 字符串类型 布尔类型通过typeof可以看到变量的具体数据类型 举例： New Document var vi=abc; var v2=890; window.alert(v1是+typeof v1); window.alert(v2是+typeof v2);vi=456; /体现js是动态语言：即数据类型可以任意变化 window.alert(v1是+typeof v1); /体现js是动态语言 复合数据类型 数组 对象 特殊数据类型 Null 即：var=null Undefined 即：如下代码window.alert(tt ); /直接报错：未定义var tt; /未给值 Js定义变量，初始化，赋值 定义变量： 即var=a 初始化： 即在定义变量时就给值 赋值： 即：比如你先定义一个变量 var=tt ，然后再给值：tt=780； js数据类型转换： 自动转换例子：var=123; /a是数值 a=”hello” /a的类型是string 强制转换例子：字符串转换成数字Var a=123” ; a=parseInt(a); /使用系统数强制转换Var b=90 ; /b是numberb=b+”, /b就是string 运算符 + * / % %(取摸：即两个数相除的余数) 强调：取模主要用于整数之间取模例子：编写一个程序，判断两个数是否能够整除 var a=90;var b=8;if(a%b=0)window.alert(能整除);elsewindow.alert(不能整除); +， 运算符a+ = a=a+1 a- = b=b-1 +a 表示先把自己加1再赋值 -a 表示先把自己减1再赋值例子：Var a=56;Var b=+a; /b=+a等同于a=a+1;b=a b=a+等同于b=a; a=a+1; Window.alert(b);Window.alert(a); -运算符 Var a=56; Var b=-a; /b=-a等同于a=a-1;b=a b=a-等同于b=a; a=a-1; Window.alert(b); Window.alert(a);例子：编写一个程序，判断两个数是否能够整除 var a=90;var b=8;if(a%b=0)window.alert(能整除);elsewindow.alert(不能整除); +， 运算符a+ = a=a+1 a- = b=b-1 +a 表示先把自己加1再赋值 -a 表示先把自己减1再赋值例子：Var a=56;Var b=+a; /b=+a等同于a=a+1;b=a b=a+等同于b=a; a=a+1; Window.alert(b);Window.alert(a); -运算符 Var a=56; Var b=-a; /b=-a等同于a=a-1;b=a b=a-等同于b=a; a=a-1; Window.alert(b); Window.alert(a);错误案例：更正：输出： lmyfuns.js代码：调用myfuns.jsl案例一：Js文件：调用：案例2：Js文件：调用：abc（5）；输出：3 3 4lJs文件：调用： 数组在内存中的存在形式：内存数据调用案例：输出：900内存数据分析:l输出：35 90 900内存数据调用分析：l输出： hello world abc 顺平输出： h e l l o w o r l d a b c 顺 平输出： hello world 输出：0=451=902=0gg=9000 二维数组的遍历： 输出：shunping 123 4.5a b c 优化排序： 输出：l 输出：找到 下标为4 数组转置：输出：l memcached 的基本概念memcached 是一个高效的分布式的内存对象缓存系统 ,他可以支持把各种php的数据(array,对象,基本数据类型)放入到它管理的内存中.u 使用memached的好处是什么?针对上面的的要求有三种方案1. 传统的方法assign(“view”);?2. 页面静态化assign(“view”);?3. 使用内存缓存get($stu_id)/取出学生信息echo $info;exit/到数据库查询ob_start();$conn=.echo “.”;/把从数据库中获取的结果，放入memcache中$mem-add($stu_id,ob_get_contents(),MEMCACHE_COMPRESSED,60*60*24);?访问速度数据库文件 memcached缓存系统 (教学)crud (create/read/upate/delete)添加:1. 连接到memcachedtelnet 00 11211 add name 0 60 5 说明 add 是指令名 name 是key的名字 (是以key/value存放), 0 标志, 60 表示数据存放 60s 5表示 放入多大数据 , 如果一个key已经存在，再放入是失败的.get name 获取 name的值/更新set name 0 60 5 如果 name 这个key存在,就是更新, 如果key不存在，就是添加/删除delete key值/其它用法看手册u 使用memcache 扩展(一堆函数)来操作 memcached缓存系统 在php.ini 中配置 extension 放入到 php/ ext /目录 打开extension;这里启用memcache.dll扩展extension=php_memcache.dll 编程测试代码(测试放入php的各种数据类型)connect(,11211);/0表示不压缩数据,如果使用压缩MEMCACHE_COMPRESSEDif(!$mem-add(name,shunping,0,30)echo 有哥们放入了;elseecho ok!;/可以放入数值if(!$mem-add(age,100,0,30)echo age有哥们放入了;elseecho ok!;/可以放入booleanif(!$mem-set(ok,true,0,30)echo ok有哥们放入了;elseecho ok!;/放入数组$arr1=array(aa=北京,bb=天津);/对数组进行序列化,在网络传输的时候，为了保证，数据类型的不丢失,/先序列化，再发生./$arr1=serialize($arr1);$arr2=json_encode($arr1);print_r($arr2);$mem-add(arr,$arr1,MEMCACHE_COMPRESSED,100);/对象require Person.class.php;$person=new Person(10,xiaoming);$mem-add(per1,$person,MEMCACHE_COMPRESSED,100);/取出$per2=$mem-get(per1);var_dump($per2);echo 对象名字=.$per2-name;/string, int,float, boolean array object null resource/不能把resource 类型放入到memcache$con=mysql_connect(localhost,root,root);echo ;var_dump($con);$mem-add(mylink,$con);?.代码: 用于获取各种数据connect(localhost,11211);if($val=$mem-get(name)echo val=$val;elseecho 没有这个值;/*获取数值*/if($val=$mem-get(age)echo age=$val;elseecho 没有这个值;/*布尔值*/echo ;$val=$mem-get(ok);echo ok=$val;echo ;$arr1=$mem-get(arr);echo ;var_dump($arr1);echo ;echo 对象的值.;require Person.class.php;/取出$per2=$mem-get(per1);var_dump($per2);echo 对象名字=.$per2-name;echo 连接;var_dump($mem-get(mylink);?结论: /string, int,float, boolean array object null resource 中除了 resource 不能存放，其它都可以.分析memcache价值补充: 关于如何使用多个memcached 缓存服务器.connect(localhost,11211); (立即向localhost的11211端口发出连接)$mem-addServer(00,11211);/256 -10m$mem-addServer(00,11211);$mem-addServer(22,11211);/创建多个memcache服务使用.$mem-add(name,zs,0,100);?/使用socket来操作我们的memcached缓存系统.代码: array(:11211), /如果有多个memcached服务器使用可以使用,号间隔添加 debug = false, compress_threshold = 10240, persistant = true); $mc-add(key, 顺平);/$mc-replace(key, some random string);$val = $mc-get(key);echo key=.$val;?面试题: 请说明memcached 机制:1. 是c/s结构,使用简单文本通讯2. 基于libevent处理并发3. 是内存缓存4. 基于客户端的分布式5.6. .php程序(1. memcache 扩展 2. memcached 扩展 (php_memcached.dll), 3. 使用socket访问) -memcac