韩顺平html和php笔记.doc

1讲html介绍html运行原理①Html+css四天Html是什么1.html(hypertextmark-uplanguage)是超文本标记语言,主要的用处是做网页,可以在网页上显示文字、图像、视频、声音…☞标记==元素简单说明一下动态网页的示意图:Html历史1999html--xhtml(xhtml可以理解成就是html的加强版)-xml|2008html5.0uW3c的介绍是一个制定标准的组织(比如给html,xhtml,css,xml,wml…制定标准)☞不同的浏览器，去访问同一个网页，可能看到的效果是有差别!->hackHtml的运行原理Hello.htmlHtml的运行有两种方式Html文件的基本结构1.本地运行所谓本地运行就是直接用浏览器打开2讲html运行原理②html文件基本结构html元素和属性2.远程访问l何为协议?计算机互相通信(网络)的规则.ftpsmtppophttp远程访问的原理示意图:☞这里我们涉及到http协议，这里我们没有深入讲解，但是这是一个非常重要的知识点.Html的基本结构内容说明1.标记通常是成对出现2.单标记案例:Demo1.htm横看成林远近高低各不同不知庐山真面目面试:请问后缀html和htm有什么区别?答:1.如果一个网站有index.html和index.htm默认情况下，优先访问.html3.htm后缀是为了兼容以前的dos系统8.3的命名规范3讲符号实体url说明超链接发送电邮html符号实体说明：当我们在网页中有一些特殊字符时候，可以考虑使用字符实体(charentity)超链接的案例:*****************连接到a.html跳转到百度联系管理员4讲图像表格实际应用-菜谱课堂练习-课程表图片:Html的表格元素在以前对网页布局要求不高的情况下，使用table布局(即使用表格来显示数据，同时用于布局)快速入门:12324539103910应用案例：1.确定行代码如下:12324539103910菜谱素菜青草茄子花椒扁豆小炒韭菜白豆腐荤菜清蒸龙鱼香肉丝小炒肉水煮肉片课堂练习:5讲无序列表有序列表框架俺第一个实例成绩表项目上课休息星期星期一星期二星期三星期四星期五星期六星期日上午语文数学英语英语物理计算机休息数学数学地理历史化学计算机化学语文体育计算机英语计算机政治英语体育历史地理计算机1下午语文数学英语英语物理计算机休息数学数学地理历史化学计算机无序列表案例:代码:英雄精武门西游记☞type可以取disc、circle、square有序列表代码:卢俊义吴用林冲☞type用于指定用什么来显示,start表示从第几开始计算.6讲浮动窗口表单及表单控件①Frameset框架集用途主要是用于分割显示多个页面☞frameset和frame配合使用，一般讲是用于后台页面快速入门:代码A2.html页面用于保护其它页面☞该页面不能有body和body体b.html周杰伦齐秦☞target属性值有四个_blank:表示打开一个全新的页面_self:替换本页面_top:_parent:*还有一个就是在target值中直接写对应的那个frame的名字.c.html:歌词大全其它页面Frameset的综合小案例:结构示意图:案例All.htmlTop.htmlLeft.html青花瓷当兵的人Right.html歌词大全晚上的练习:1.按照笔记走一遍2.作业2.1做一个自己的网页，显示自己的基本信息：姓名、性别等（注意使用文本格式标记，要做得好看啊），并显示自己的照片（图象的标记还记得吗？）2.2.普通邮箱Iframe的使用有时我们需要，在一个含有的页面嵌入另外一个页面，形成画中画的效果,怎么处理->iframe元素(浮动窗口)入门案例Iframe.htmlhello,world连接到taobao连接到kk.html表单元素为什么需要？看一个图:从上图可以看出，我们需要把一些数据提交给服务器处理,比如注册用户,发帖…,这样就需要使用到表单元素(常见输入框、单选框、复选框、文本域、密码框、上传文件。。。)基本结构一般说，表单元素通常是被包含起来的Abc:U:入门案例:Login.html登录页面用户名:密码:Ok.htmlOk,登录成功原理图:请考虑：如果我们希望偷偷的提交数据,不要影响节目效果，可以考虑使用隐藏域7讲表单及表单控件②25秒前上传下载附件(27.43KB)案例代码:表单元素您最喜欢哪些城市:北京上海伦敦您的性别是:男女隐藏域的使用下拉列表请选择您的出生地:四川北京西藏上传文件课堂练习:8讲多媒体页面标签汇总①地图映射多媒体我的电影网站照着html文档，我们对html在加强一把图像映射技术:案例:9讲多标签汇总②线包字效果测试题代码:★审核状态已经审核没有审核全部10讲div+css开山篇Div+css是什么?Div+css是一种目前比较流行的网页布局技术Div来存放需要显示的数据(文字，图表),css就是用来指定怎样显示，从而做到数据和显示相互的效果原理图如下：有时后，我们也可能把css直接嵌入到html文件中，这种方式称为内联css基本语法:选择器{属性:属性值;…}我们可以简单的这样理解div+css:div是用于存放内容(文字,图片,元素)的容器。css是用于指定放在div中的内容如何显示,包括这些内容的位置和外观.快速入门案例(体验案例)Demo.htmlcss入门小案例My.css.style1{/*宽度*/width:400px;height:300px;/*一定要写一个分号*/background-color:silver;border:1pxsolidred;margin-left:400px;margin-top:250px;padding-top:20px;padding-left:40px;}网页设计的三个时期①table网页设计②table+css网页设计③div+css网页设计11讲初识css类选择器id选择器html选择器css使用必要性1.可以很好的统一网站的显示风格.css使用的基本语法选择器{属性1:属性值;属性2:属性值;….}Html文件:栏目一栏目二栏目三栏目四栏目五Css文件：/*.s1用术语类选择器*/.s1{color:blue;font-size:30px;font-style:italic;text-decoration:underline;}.s2{color:yellow;font-size:12px;}.s3{color:blue;font-style:italic;}.s4{color:green;font-weight:bold;}.s5{color:#9C3131;}Css必要性2可以使用滤镜a:linkimg{filter:gray;}a:hoverimg{filter:““;}Css中常用的四种选择器