第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=