传智播客 韩顺平 php从入门到精通 122讲html课堂笔记Word文档格式.docx

1、说明标记通常是成对出现单标记案例:html符号实体说明：当我们在网页中有一些特殊字符时候，可以考虑使用字符实体（char entity）超链接的案例:*连接到a.html!-如果我们希望在点击该超链接后，就跳转到外网的某个地址，则应当写完整的url-url统一资源定位-跳转到XXmailto:hanshunping联系管理员横看成林font color=red远近高低各不同-size 值可以取 1.7 -font style=font-size:30px;不知庐山真面目Html的表格元素在以前对网页布局要求不高的情况下，使用 table 布局（即使用表格来显示数据，同时用于布局）快速入门:ta

2、ble align=center height=10pxbgcolor=yellow border=3px width=400px-tr表示一行-tr align=td123righttd align=45910应用案例：确定行代码如下:-tr表示一行tdalign=-table height=150px-显示菜单-tableborder=1 align= bordercolor=#E76BFFheight=225px cellpadding=1pxcellspacing=0px -colspan=3表该列要占用三列- colspan=菜谱tdrowspan=2素菜青草茄子花椒扁豆小炒韭菜白豆

3、腐td rowspan=荤菜清蒸龙鱼香肉丝水煮肉片俺第一个实例Center成绩表/center-表格-align=579AFEborder=width=500px项目td colspan=5上课休息星期星期一星期二星期三星期四星期五星期六星期日4上午语文数学英语物理计算机地理历史化学体育政治计算机1下午li/li/ul代码:ul type=circle英雄精武门西游记type可以取disc、circlesquare有序列表ol type=I卢俊义吴用林冲 type用于指定用什么来显示,start 表示从第几开始计算.Frameset框架集用途主要是用于分割显示多个页面framest和frame

4、配合使用，一般讲是用于后台页面代码A2.html页面用于保护其它页面frameset cols=30%,*frame name=frame1src=b.htmlnoresizeframeborder=0/frame2c.html frameborder=/frameset该页面不能有body和body体b.htmlbodybgcolor=-target表示我们点击后，目标指向谁-zjl.html target=周杰伦qq.html齐秦target属性值有四个_blank :表示打开一个全新的页面_self:替换本页面_top:_parent:*还有一个就是在值中直接写对应的那个frame的名字

5、.c.html:silver歌词大全其它页面Frameset的综合小案例:结构示意图:案例All.htmlframesetrows=20%,*framesrc=top.html scrolling=noframesetcols=left.html noresizeframeborder=right.html name=myframeframeborder=Top.htmltitle.JPGLeft.html青花瓷当兵的人Right.html晚上的练习:按照笔记走一遍作业2.1做一个自己的网页，显示自己的基本信息：姓名、性别等（注意使用文本格式标记，要做得好看啊），并显示自己的照片（图象的标记还

6、记得吗？）2.2.普通邮箱 Iframe的使用有时我们需要，在一个含有iframe元素（浮动窗口）入门案例Iframe.htmlh1hello,worldiframe1连接到taobaoa href=kk.htmltarget=连接到kk.html一般说，表单元素通常是被包含起来的Abc:input type=”text” name=”hobby”/input type=”radio”/form action=”?” method=”get”U:input type=”text” name=”username”/input type=”submit” value=”xx”/form” meth

7、od=”?”入门案例:Login.html登录页面-method方法指定提交数据的方式,常用的有两种get / post -form action=ok.html method=post-name的值可以任意，但是不要使用关键字-用户名:inputtype=textusername密码:passwordinput type=submitvalue=登录系统reset重新填写Ok.htmlOk,登录成功原理图:请考虑：如果我们希望偷偷的提交数据,不要影响节目效果，可以考虑使用隐藏域25秒前上传下载附件（27.43 KB）案例代码:表单元素method=get您最喜欢哪些城市:checkboxna

8、me=cities value=beijing北京shanghai上海伦敦伦敦您的性别是:radiosexman男woman女隐藏域的使用hiddendataok下拉列表option value=sichuan四川北京xizang西藏-文本域,-textarea name=mytextareacols=40 rows=10/textarea-文件上传的控件-filemyfile上传文件imageimage1.png多媒体 head title我的电影网站 body !embed src=一起走到.MPGF.GIF dynsrc=clock.avi loop= start=mouseover /

9、body /html照着html文档，我们对html在加强一把图像映射技术: html script language=javascript function show（） window.alert（点击了矩形区域）; /scriptmapimg.gif usemap=#abc-映射区域- map name=abc area shape=rect onclick=show（）; href=# coords=140,20,280,60 /map更新时间:2012年09月21日20时08分来源:11秒前上传下载附件（7.54 KB）fieldset style=width:300pxlegendb

10、lue审核状态state已经审核没有审核全部/fieldsetDiv+css是什么?Div+css是一种目前比较流行的网页布局技术Div来存放需要显示的数据（文字，图表.） , css就是用来指定怎样显示，从而做到数据和显示相互的效果原理图如下：1分钟前上传下载附件（22.16 KB）有时后，我们也可能把css直接嵌入到html文件中，这种方式称为内联css基本语法:style下载附件（50.38 KB）选择器 属性: 属性值; /style我们可以简单的这样理解div+css: div 是用于存放内容（文字,图片,元素）的容器。css是用于指定放在div中的内容如何显示,包括这些内容的位置和

11、外观.快速入门案例（体验案例）下载附件（8.33 KB）Demo.htmlcss入门小案例link rel=stylesheet type=text/cssmy.cssdiv class=style12.jpg/divMy.css.style1 /*宽度 */ width: 400px; height: 300px; /*一定要写一个分号*/ background-color:silver; border:1px solid red; margin-left:400px; margin-top:250px; padding-top:20px; padding-left:40px;网页设计的三个时期 table 网页设计 table+css网页设计 div+css网页设计css使用必要性1. 可以很好的统一网站的显示风格.css使用的基本语法属性1:属性2:.15下载附件（7.12 KB）Html文件:-css部分可以单写一个文件，然后引入，也可以直接嵌入到该html文件- t