传智播客 韩顺平 php从入门到精通 1-22讲html课堂笔记

Html+css四天Html是什么1.html(hypertextmark-uplanguage)是超文本标记语言,主要的用处是做网页,可以在网页上显示文字、图像、视频、声音…inputtype=”text”name=”xxx”/☞标记==元素简单说明一下动态网页的示意图:Html历史1999html--xhtml(xhtml可以理解成就是html的加强版)-àxml|2008html5.0uW3c的介绍是一个制定标准的组织(比如给html,xhtml,css,xml,wml…制定标准)☞不同的浏览器，去访问同一个网页，可能看到的效果是有差别!-hackHtml的运行原理Hello.htmlHtml的运行有两种方式Html文件的基本结构htmlhead/headbody/BODY/html1.本地运行所谓本地运行就是直接用浏览器打开2.远程访问l何为协议?计算机互相通信(网络)的规则.ftpsmtppophttp远程访问的原理示意图:☞这里我们涉及到http协议，这里我们没有深入讲解，但是这是一个非常重要的知识点.Html的基本结构htmlhead元素属性1=”值”….//headbody元素属性1=”属性值”属性2=“属性值”…内容/元素元素属性=”属性值”//body/html说明1.标记通常是成对出现head/head2.单标记br/案例:html符号实体说明：当我们在网页中有一些特殊字符时候，可以考虑使用字符实体(charentity)超链接的案例:br/*****************br/ahref=a.htmltarget=”_self,_blank,_top,_parent”连接到a.html/abr/!--如果我们希望在点击该超链接后，就跳转到外网的某个地址，则应当写完整的url--!--url统一资源定位--ahref=跳转到百度/abr/ahref=mailto:[e-mail]联系管理员/aDemo1.htmhtmlhead/headbodyb横看成林/bbr/br/fontcolor=red远近高低各不同/fontbr/!--size值可以取1..7--fontstyle=font-size:30px;不知庐山真面目/fontbr//body/html面试:请问后缀html和htm有什么区别?答:1.如果一个网站有index.html和index.htm默认情况下，优先访问.html3.htm后缀是为了兼容以前的dos系统8.3的命名规范4讲图像表格实际应用-菜谱课堂练习-课程表图片:imgsrc=”图片的路径/该图片也可是一个url”width=”宽度”heigth=”高度”/Html的表格元素在以前对网页布局要求不高的情况下，使用table布局(即使用表格来显示数据，同时用于布局)快速入门:htmlbodytablealign=centerheight=10pxbgcolor=yellowborder=3pxwidth=400px!--tr表示一行--tralign=centertd1/tdtd2/tdtd3/td/trtralign=righttd2/tdtdalign=center4/tdtd5/td/trtrtd3/tdtd9/tdtd10/td/trtrtd3/tdtd9/tdtd10/td/tr/table/body/html应用案例：1.确定行代码如下:htmlbody!--tablealign=centerheight=10pxbgcolor=yellowborder=3pxwidth=400px!--tr表示一行tralign=centertd1/tdtd2/tdtd3/td/trtralign=righttd2/tdtdalign=center4/tdtd5/td/trtrtd3/tdtd9/tdtd10/td/trtrtd3/tdtd9/tdtd10/td/tr/table--tableheight=150pxtrtd/td/tr/table!--显示菜单--tableborder=1align=centerbordercolor=#E76BFFheight=225pxcellpadding=1pxcellspacing=0pxwidth=400pxtr!--colspan=3表该列要占用三列--tdalign=centercolspan=3菜谱/td/trtrtdrowspan=2素菜/tdtd青草茄子/tdtd花椒扁豆/td/trtrtd小炒韭菜/tdtd白豆腐/td/trtrtdrowspan=2荤菜/tdtd清蒸龙/tdtd鱼香肉丝/td/trtrtd小炒肉imgsrc=dog.jpgwidth=70px//tdtd水煮肉片/td/tr/table/body/html课堂练习:htmltitle俺第一个实例/titlehead/headbodyCenter成绩表/centerbr/!--表格--tablealign=centeralign=centerbordercolor=579AFEheight=10pxborder=3pxwidth=500pxtralign=centertd项目/tdtdcolspan=5align=center上课/tdtdcolspan=2align=center休息/td/trtrbgcolor=pinkalign=centerth星期/b/thth星期一/thth星期二/thth星期三/thth星期四/thth星期五/thth星期六/thth星期日/th/trtralign=centertdrowspan=4align=center上午/tdtd语文/tdtd数学/tdtd英语/tdtd英语/tdtd物理/tdtd计算机/tdtdrowspan=4align=center休息/td/trtralign=centertd数学/tdtd数学/tdtd地理/tdtd历史/tdtd化学/tdtd计算机/td/trtralign=centertd化学/tdtd语文/tdtd体育/tdtd计算机/tdtd英语/tdtd计算机/td/trtralign=centertd政治/tdtd英语/tdtd体育/tdtd历史/tdtd地理/tdtd计算机1/td/trtr/trtralign=centertdrowspan=2下午/tdtd语文/tdtd数学/tdtd英语/tdtd英语/tdtd物理/tdtd计算机/tdtdrowspan=2休息/td/trtralign=centertd数学/tdtd数学/tdtd地理/tdtd历史/tdtd化学/tdtd计算机/td/tr/table/body/html无序列表ulli/li/ul案例:代码:ultype=circleli英雄/lili精武门/lili西游记/li/ul☞type可以取disc、circle、square有序列表代码:oltype=Ili卢俊义/lili吴用/lili林冲/li/ol☞type用于指定用什么来显示,start表示从第几开始计算.Frameset框架集用途主要是用于分割显示多个页面☞framest和frame配合使用，一般讲是用于后台页面快速入门:代码A2.html页面用于保护其它页面framesetcols=30%,*framename=frame1src=b.htmlnoresizeframeborder=0/framename=frame2src=c.htmlframeborder=0//frameset☞该页面不能有body和body体b.htmlbodybgcolor=pink!--target表示我们点击后，目标指向谁--ahref=zjl.htmltarget=frame2周杰伦/abr/ahref=qq.htmltarget=frame2齐秦/abr//body☞target属性值有四个_blank:表示打开一个全新的页面_self:替换本页面_top:_parent:*还有一个就是在target值中直接写对应的那个frame的名字.c.html:bodybgcolor=silver歌词大全/body其它页面Frameset的综合小案例:结构示意图:案例All.htmlframesetrows=20%,*framesrc=top.htmlscrolling=no/framesetcols=20%,*framesrc=left.htmlnoresizeframeborder=0/framesrc=right.htmlname=myframeframeborder=0//frameset/framesetTop.htmlimgsrc=title.JPG/Left.htmlbodybgcolor=pinkulliahref=zjl.htmltarget=myframe青花瓷/a/liliahref=qq.htmltarget=myframe当兵的人/a/li/ul/bodyRight.htmlbodybgcolor=silver歌词大全/body晚上的练习:1.按照笔记走一遍2.作业2.1做一个自己的网页，显示自己的基本信息：姓名、性别等（注意使用文本格式标记，要做得好看啊），并显示自己的照片（图象的标记还记得吗？）2.2.普通邮箱Iframe的使用有时我们需要，在一个含有body的页面嵌入另外一个页面，形成画中画的效果,怎么处理-iframe元素(浮动窗口)入门案例Iframe.htmlhtmlbodyh1hello,world/h1ahref==iframe1连接到taobao/Abr/ahref=kk.htmltarget=iframe1连接到kk.html/Abr/iframename=iframe1src==500pxheight=400px/iframesrc==400pxheight=400px//body/html表单元素为什么需