第7章Web技术和HTML=创新教育基础与实践=大连理工大学

整理文档很辛苦,赏杯茶钱您下走!

免费阅读已结束,点击下载阅读编辑剩下 ...

阅读已结束,您可以下载文档离线阅读编辑

资源描述

LOGO第7章Web技术和HTML孙焘重点:web技术概述1HTML的格式2HTML的常用标签3多frame页面设计4难点:HTML的格式掌握1Table标签的相关属性27.1Web技术概述什么是万维网Web的表现形式什么是Web网站Web网站的功能Web的开发技术7.1Web技术概述7.1.1什么是万维网WorldWideWeb称为万维网,简称Web。它的基本结构是采用开放式的客户/服务器结构(Client/Server),分成服务器端、客户接收机及通讯协议三个部分。7.1Web技术概述7.1.2Web的表现形式(1)超文本(hypertext)(2)超媒体(hypermedia)(3)超文本传输协议(HTTP)7.1Web技术概述7.1.3什么是Web网站Web网站就是利用互联网技术,把企业,机构或个人的信息通过Web页面和Internet发布出去,通过申请域名而成为一个站点。7.1Web技术概述7.1.4Web网站功能BBS社区电子商务在线论坛在线考试,远程教育博客,视频等等7.1Web技术概述7.1.5Web开发技术客户端技术HTML语言是信息展现的最有效载体服务端技术CGI,PHP,ASP,JSP静态技术HTML动态技术DHTML,css,javascript,vbscript7.2HTML的格式7.2.1HMTL简介7.2.2HTML的编辑器7.2.3HTML发展历史7.2.4HTML的基本格式7.2.5HTML的基本标签7.2.6HTML版的HelloWorld7.2HTML的格式7.2.1HMTL简介超文本置标语言HyperTextMarkupLanguage,简称为HTML,是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种置标语言。HTML被用来结构化信息——例如标题、段落和列表等等,也可用来描述文档的外观和语义。包含HTML内容的文件最常用的扩展名是.html7.2HTML的格式7.2.2HTML的编辑器HTML编辑器是一种用来编辑HTML文本的软件。其实HTML只是一个文本文件,就算一个最普通的文字编辑器都可以胜任。常用的HTML编辑器有记事本,Dreamweaver,Frontpage等。7.2HTML的格式7.2.3HTML发展历史超文本置标语言(第一版)--在1993年6月发为互联网工程工作小组(IETF)工作草案发布(并非标准)HTML2.0--1995年11月作为RFC1866发布,在RFC2854于2000年6月发布之后被宣布已经过时HTML3.2--1996年1月14日,W3C推荐标准HTML4.0--1997年12月18日,W3C推荐标准ISO/IEC15445:2000(“ISOHTML”)--2000年5月15日发布,是国际标准化组织和国际电工委员会的标准XHTML1.0--发布于2000年1月26日,W3C推荐标准HTML2.0--W3C工作草案7.2HTML的格式7.2.4HTML的基本格式(一)HTML是一种标签嵌套式的语言。标签用/来表示,标签必须成对出现.如head,则必须以另一个标签/head将它关闭。注意“head”前的斜杠,那就是关闭标签与打开标签的区别。每个标签内可以放置内容,如title这是一个标题/title表示html的标题7.2HTML的格式7.2.4HTML的基本格式(二)标签之间可以嵌套例如htmlheadtitle标题/title/headbody内容/body/html7.2HTML的格式7.2.4HTML的基本格式(三)HTML不区分大小写title标题/title与TITLE标题/TITLE的效果是一样的7.2HTML的格式7.2.4HTML的基本格式(四)标签内只能嵌套完整的其他标签下面是的嵌套方式是不合法的headtitle/head/title在head标签内只有title标签的开始部分,没有结束的部分,这是不合法的。7.2HTML的格式7.2.5HTML的基本标签一个标准的HTML文件一般包含下面4个标签html/html:用来标记整个html文件;head/head:用来标记html的头信息;title/title:用来标记html标题信息;应嵌套在head/head中;body/body:用来标记html的正文;7.2HTML的格式7.2.6HTML版的“helloworld”htmlheadtitleHelloWorld/title/headbodyHelloWorld!/body/html7.2HTML的格式7.2.6HTML版的“helloworld”7.3HTML常用标签表单标签的使用表格的绘制丰富的表格属性图片与超链接多窗口页面7.3HTML常用标签7.3.1表单标签的使用formaction=HelloWorld.htmlmethod=post用户名inputtype=textname=username/密码inputtype=passwordname=pwd/br/inputtype=radioname=zoomvalue=2checked教师inputtype=radioname=zoomvalue=4学生br/inputtype=submitname=submitvalue=提交/inputtype=resetname=resetvalue=重置//form7.3HTML常用标签7.3.1表单标签的使用form/form——用来标记一组表单。其action属性表示将此表单提交给谁来处理;其method属性用来表示提交表单的方式。常用的提交表单的方式为post和get。input/input——用来标记一个用户输入。其type属性表示用户输入的类型。常用的用户输入类型有:text,password,submit,button,reset等。name属性会连同表单一起被提交,接收表单的容器可以通过name来获取对应的值。7.3HTML常用标签7.3.1表单标签的使用对input/input标签的type属性的值的解释:(1)text:段纯文本;(2)password:密码;(3)radio:单选按钮;(4)submit:提交表单的按钮;(5)button:普通按钮;(6)reset:清空表单的按钮;br/表示换行,这个在html中很常用7.3HTML常用标签7.3.1表单标签的使用7.3HTML常用标签7.3.2表格的绘制bodytabletheadtrtd学号/tdtd姓名/tdtd性别/tdtd出生日期/tdtd院系/td/tr/theadtbodyid=tableBodytrtd200801001/tdtd张三/tdtd男/tdtd1989-01-01/tdtd电信学院/td/trtrtd200801002/tdtd李四/tdtd男/tdtd1989-02-01/tdtd电信学院/td/tr/tbody/table/body7.3HTML常用标签7.3.2表格的绘制(1)table/table:标记一个表格;(2)thead/thead:标记表格头;(3)tbody/tbody:标记表格体;(4)tr/tr:标记表格中的一行,可以嵌套在thead/thead中,也可以嵌套在tbody/tbody中;(5)td/td:标记表格中一行的一列,应嵌套在tr/tr中。7.3HTML常用标签7.3.2表格的绘制7.3HTML常用标签7.3.3丰富表格属性tableid=Table5cellSpacing=1cellPadding=1width=90%align=centerbgColor=graytextborder=0trbgColor=#fffffftdwidth=20%bgColor=#cecfffheight=13学号/tdtdwidth=30%colSpan=-13height=13200801001/tdtdwidth=20%bgColor=#cecfffcolSpan=-11height=13姓名/tdtdwidth=30%colSpan=-11height=13张三/td/trtrbgColor=#fffffftdwidth=20%bgColor=#cecfffheight=14性别/tdtdwidth=30%colSpan=-13height=14男/tdtdwidth=20%bgColor=#cecfffcolSpan=-11height=14民族/tdtdwidth=30%colSpan=-11height=14汉/td/trtrbgColor=#fffffftdwidth=20%bgColor=#cecfff生日/tdtdwidth=30%colSpan=-131989-01-01/tdtdwidth=20%bgColor=#cecfffcolSpan=-11考生来源/tdtdwidth=30%colSpan=-11应届毕业/td/trtrbgColor=#fffffftdwidth=20%bgColor=#cecfff院系/tdtdwidth=30%colSpan=-13电子与信息工程学院/tdtdwidth=20%bgColor=#cecfffcolSpan=-11专业/tdtdwidth=30%colSpan=-11计算机应用技术/td/tr/table7.3HTML常用标签7.3.3丰富表格属性tr/tr和td/td标签都具有bgColor属性,用来标记一行或一个单元格的背景颜色。width和height属性用来标记表格的宽和高,可以以百分数为单位(如20%),也可以以像素数为单位(如200px)。align属性用来标记表格的对齐方式,可是是left(左对齐),right(右对齐),或center(居中显示);border属性用来设置表格边框的宽度。7.3HTML常用标签7.3.3丰富表格属性7.3HTML常用标签7.3.4图片与超链接(1)显示图片URL为的图片(2)显示与c:\008001.jpg的图片(3)显示一个超链接,链接到(4)显示一个超链接,链接到(要求在新窗口中打开新的链接)7.3HTML常用标签7.3.4图片与超链接(1)imgalt=picsrc=(2)imgalt=picwidth=100pxheight=40src=c:\008001.jpg/(3)ahref=(4)atarget=_blankhref=

1 / 39
下载文档,编辑使用

©2015-2020 m.777doc.com 三七文档.

备案号:鲁ICP备2024069028号-1 客服联系 QQ:2149211541

×
保存成功