Download presentation
Presentation is loading. Please wait.
1
第7章 Web技术和HTML 孙焘
2
重点： web技术概述 1 HTML的格式 2 HTML的常用标签 3 多frame页面设计 4
3
难点： HTML的格式掌握 1 Table标签的相关属性 2
4
7.1 Web技术概述 什么是万维网 Web的表现形式 什么是Web网站 Web网站的功能 Web的开发技术
5
7.1 Web技术概述 7.1.1 什么是万维网 World Wide Web称为万维网，简称Web。 它的基本结构是采用开放式的客户/服务器结构(Client/Server),分成服务器端、客户接收机及通讯协议三个部分。
6
7.1 Web技术概述 7.1.2 Web的表现形式 (1)超文本（hypertext） (2)超媒体（hypermedia） (3)超文本传输协议（HTTP）
7
Web网站就是利用互联网技术，把企业，机构或个人的信息通过Web页面和Internet发布出去，通过申请域名而成为一个站点。
8
7.1 Web技术概述 7.1.4 Web网站功能 BBS 社区 电子商务 在线论坛 在线考试， 远程教育 博客，视频等等
9
7.1.5 Web开发技术 7.1 Web技术概述 客户端技术 HTML语言是信息展现的最有效载体 服务端技术
CGI，PHP，ASP，JSP 静态技术 HTML 动态技术 DHTML，css，javascript，vbscript
10
7.2 HTML的格式 7.2.1 HMTL简介 7.2.2 HTML的编辑器 7.2.3 HTML发展历史 7.2.4 HTML的基本格式
7.2.6 HTML版的Hello World
11
HTML被用来结构化信息——例如标题、段落和列表等等，也可用来描述文档的外观和语义。包含HTML 内容的文件最常用的扩展名是.html
7.2.1 HMTL简介 超文本置标语言HyperText Markup Language，简称为HTML，是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种置标语言。 HTML被用来结构化信息——例如标题、段落和列表等等，也可用来描述文档的外观和语义。包含HTML 内容的文件最常用的扩展名是.html
12
HTML 编辑器是一种用来编辑HTML文本的软件。其实HTML只是一个文本文件，就算一个最普通的文字编辑器都可以胜任。
常用的HTML 编辑器有记事本，Dreamweaver, Frontpage等。
13
7.2 HTML的格式 7.2.3 HTML发展历史 超文本置标语言(第一版) -- 在1993年6月发为互联网工程工作小组 (IETF)工作草案发布(并非标准) HTML 年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时 HTML 年1月14日,W3C推荐标准 HTML 年12月18日,W3C推荐标准 ISO/IEC 15445:2000(“ISO HTML”)--2000年5月15日发布, 是国际标准化组织和国际电工委员会的标准 XHTML 发布于2000年1月26日, W3C推荐标准 HTML W3C工作草案
14
7.2.4 HTML的基本格式(一) 7.2 HTML的格式 HTML是一种标签嵌套式的语言。
标签用<></>来表示，标签必须成对出现.如<head>,则必须以另一个标签</head>将它关闭。注意“head”前的斜杠，那就是关闭标签与打开标签的区别。 每个标签内可以放置内容，如 <title>这是一个标题</title> 表示html的标题
15
<title>标题</title> </head>
7.2 HTML的格式 7.2.4 HTML的基本格式(二) 标签之间可以嵌套 例如 <html> <head> <title>标题</title> </head> <body>内容</body> </html>
16
7.2.4 HTML的基本格式(三) 7.2 HTML的格式 HTML不区分大小写
<title>标题</title> 与 <TITLE>标题</TITLE> 的效果是一样的
17
7.2.4 HTML的基本格式(四) 7.2 HTML的格式 标签内只能嵌套完整的其他标签 下面是的嵌套方式是不合法的
<head> <title> </head> </title> 在head标签内只有title标签的开始部分，没有结束的部分，这是不合法的。
18
一个标准的HTML文件一般包含下面4个标签
<html></html>：用来标记整个html文件； <head></head>：用来标记html的头信息； <title></title> ：用来标记html标题信息；应嵌套在<head></head>中； <body></body>：用来标记html的正文；
19
7.2.6 HTML版的“hello world” 7.2 HTML的格式 <html> <head>
<title>Hello World</title> </head> <body> Hello World! </body> </html>
20
7.2 HTML的格式 7.2.6 HTML版的“hello world”
21
7.3 HTML常用标签 表单标签的使用 表格的绘制 丰富的表格属性 图片与超链接 多窗口页面
22
7.3 HTML常用标签 7.3.1 表单标签的使用 <form action="HelloWorld.html" method="post"> 用户名<input type="text" name="username" /> 密码 <input type="password" name="pwd" /><br /> <input type="radio" name=zoom value=2 checked>教师 <input type="radio" name=zoom value=4>学生<br /> <input type="submit" name="submit" value="提交" /> <input type="reset" name="reset" value="重置" /> </form>
23
7.3 HTML常用标签 7.3.1 表单标签的使用 <form></form> ——用来标记一组表单。其action 属性表示将此表单提交给谁来处理；其method属性用来表示提交表单的方式。常用的提交表单的方式为post 和get 。 <input></input> ——用来标记一个用户输入。其type属性表示用户输入的类型。常用的用户输入类型有：text, password, submit, button, reset 等。name 属性会连同表单一起被提交，接收表单的容器可以通过name 来获取对应的值。
24
7.3.1 表单标签的使用 7.3 HTML常用标签 对<input></input>标签的type属性的值的解释：
(1)text：段纯文本； (2)password：密码； (3)radio ：单选按钮； (4)submit：提交表单的按钮； (5)button：普通按钮； (6)reset：清空表单的按钮； <br/>表示换行，这个在html中很常用
25
7.3 HTML常用标签 7.3.1 表单标签的使用
26
7.3.2 表格的绘制 7.3 HTML常用标签 <body><table> <thead>
<tr> <td>学号</td><td>姓名</td><td>性别</td> <td>出生日期</td><td>院系</td> </tr> </thead> <tbody id="tableBody"> <td> </td><td>张三</td><td>男</td> <td> </td><td>电信学院</td> <td> </td><td>李四</td><td>男</td> <td> </td><td>电信学院</td> </tbody> </table> </body>
27
7.3.2 表格的绘制 7.3 HTML常用标签 (1)<table></table>：标记一个表格；
(2)<thead></thead>：标记表格头； (3)<tbody></tbody>：标记表格体； (4)<tr></tr>：标记表格中的一行，可以嵌套在<thead></thead>中，也可以嵌套在<tbody></tbody>中； (5)<td></td>：标记表格中一行的一列，应嵌套在<tr></tr>中。
28
7.3 HTML常用标签 7.3.2 表格的绘制
29
7.3 HTML常用标签 7.3.3 丰富表格属性 <table id="Table5" cellSpacing="1" cellPadding="1" width="90%" align="center" bgColor="graytext" border="0"> <tr bgColor="#ffffff"> <td width="20%" bgColor="#cecfff" height="13">学号</td> <td width="30%" colSpan="-13" height="13"> </td> <td width="20%" bgColor="#cecfff" colSpan="-11" height="13">姓名</td> <td width="30%" colSpan="-11" height="13">张三</td> </tr> <td width="20%" bgColor="#cecfff" height="14">性别</td> <td width="30%" colSpan="-13" height="14">男</td> <td width="20%" bgColor="#cecfff" colSpan="-11" height="14">民族</td> <td width="30%" colSpan="-11" height="14">汉</td> <td width="20%" bgColor="#cecfff">生日</td> <td width="30%" colSpan="-13"> </td> <td width="20%" bgColor="#cecfff" colSpan="-11">考生来源</td> <td width="30%" colSpan="-11">应届毕业</td> <td width="20%" bgColor="#cecfff">院系</td> <td width="30%" colSpan="-13">电子与信息工程学院</td> <td width="20%" bgColor="#cecfff" colSpan="-11">专业</td> <td width="30%" colSpan="-11">计算机应用技术</td> </table>
30
7.3 HTML常用标签 7.3.3 丰富表格属性 <tr></tr>和<td></td>标签都具有bgColor 属性，用来标记一行或一个单元格的背景颜色。 width 和height 属性用来标记表格的宽和高，可以以百分数为单位（如20%），也可以以像素数为单位（如200px）。 align 属性用来标记表格的对齐方式，可是是left（左对齐）, right（右对齐）, 或center（居中显示）； border属性用来设置表格边框的宽度。
31
7.3 HTML常用标签 7.3.3 丰富表格属性
32
7.3 HTML常用标签 7.3.4 图片与超链接 (1)显示图片URL为 (2)显示与c:\ jpg 的图片 (3)显示一个超链接，链接到 (4)显示一个超链接，链接到
33
7.3 HTML常用标签 7.3.4 图片与超链接 (1)<img alt="pic" src=" /> (2)<img alt="pic" width="100px" height="40" src=" c:\ jpg " /> (3)<a href=" (4)<a target="_blank" href=" example.com">google</a>
34
7.3 HTML常用标签 7.3.4 图片与超链接 (1)<img>：在html中显示图片。图片可以是网上的图片，也可以是本地硬盘中图片。其URL用src属性来标记 (2)alt 属性：<img> 标签的alt 属性属性标记了图片的提示文字。with 和height 属性分别标记了图片的宽度和高度。 (3)<a></a> ：标记一个超链接，用其href属性来标记超链接的URL。 (4)target属性：<a></a> 标签的target属性用来表示用哪个页面显示新的页面。例如”_blank”表示打开一个新的浏览器窗口，并在新的浏览器窗口中显示新的页面
35
7.3 HTML常用标签 7.3.4 图片与超链接
36
7.3 HTML常用标签 7.3.5 多窗口页面 <html> <head>
7.3.5 多窗口页面 <html> <head> <title>frames</title> </head> <frameset cols="20%, 80%"> <frame src="" name="left"/> <frame src="" name="right"/> </frameset> </html> <title>left</title> <body> left frame<br /> <a href="" target="right">HelloWorld</a><br /> <a href="" target="right">form</a><br /> </body>
37
7.3 HTML常用标签 7.3.5 多窗口页面 框架可以将浏览器窗口划分为若干个窗格，在每个窗格中都可以显示一个网页，从而可以取得在同一个浏览器窗口中同时显示不同网页的效果。框架网页通过一个frameset标记和多个frame标记来定义。在框架网页中，可将frameset标记置于head之后，以取代body的位置，还可以使用noframes标记框架不能被浏览器显示时的替换内容。 <frameset></frameset>为多窗口标记。其col 属性用来标记多窗口个列的宽度，可以以百分数表示（如20%），也可以以像素表示（如200px ）；frameset 标签还有rows 属性，用来表示此frameset 由多个行窗口组成。frameset 标签可以嵌套。 <frame></frame>为窗口标记，应嵌套在frameset 标签中。其src 属性用来标记这个frame 的路径。 本案例包含两段HTML 代码，第一段是标记了框架结构，即页面有左右两个frame 组成，左侧frame 占整个浏览器窗口20% 的宽度，右侧frame 占80% 的宽度。每个frame 的name 属性标记了这个frame 的名字。在第二段HTML 代码中，显示了左侧frame 的内容。其中target 属性标记了在哪个frame 中显示新的页面。
38
7.3 HTML常用标签 7.3.5 多窗口页面
39
结束
Similar presentations
