09 HTML知识简介.pptx

第1页：计算机网络编程知识与实践封面

• HTML知识
• CSS知识
• ASP.NET介绍
• AJXS介绍
• 网络编程实践

第2页：HTML知识

HTML知识

第3页：HTML概念

HTML（Hyper Text Markup Language超文本标识语言）–是一种用来制作超文本文档的简单标记语言。–用HTML编写的超文本文档称为HTML文档。

第4页：HTML文档的编写方法（1）

• HTML文档的编写方法
• 手工直接编写–记事本等，存成.htm .html格式
• 使用可视化HTML编辑器–Frontpage、Dreamweaver等
• 由Web服务器（或称HTTP服务器）一方实时动态地生成。

第5页：网页文件命名（1）

• 网页文件命名
• *.htm或*.html
• 无空格
• 无特殊符号（例如&符号），只可以有下划线“_”，只可以为英文、数字
• 区分大小写
• 首页文件名默认为：index.htm或index.html

第6页：HTML文件结构

• HTML文件结构<html>...</html><head>...</head><body>...</body>
• 元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如<body>），也有一个结束的标记（如</body>）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。

第7页：HTML文件结构

• HTML文件结构(Document Structures)–<HTML>
• <HEAD>–<title></title>–<meta>
• </HEAD>
• <BODY>–HTML文件的正文
• </BODY>–</HTML>

第8页：第一张网页（01.htm）

第一张网页（01.htm）<html><head><title>myfirstpage</title></head><body>Thisismyfirsthomepage!</body></html>

第9页：基本组成部分——HTML元素属性

HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的< >内，并且和元素名之间有一个空格分隔；属性值用“”引起来。

第10页：第二张网页（02.htm）

第二张网页（02.htm）<html><head><title>my first page</title></head><body><palign="center">This is my firsthomepage!</p></body></html>

第11页：HTML基本结构的有关元素和元素属性

• HEAD元素——1<head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
• <title><title>元素定义HTML文档的标题。<title>与</title>之间的内容将显示在浏览器窗口的标题栏。

第12页：HTML基本结构的有关元素和元素属性

• HEAD元素——2
• <meta>元素
• <meta>元素下面可以插入很多很有用的元素属性。下面介绍四种：–<metaname="keywords"content="study,computer">
• 用来标记搜索引擎在搜索你的页面时所取出的关键词。

第13页：HTML基本结构的有关元素和元素属性

• HEAD元素——3
• <meta>元素–<metaname="author" content=“wutao">–用来标记文档的作者。

第14页：HTML基本结构的有关元素和元素属性

• HEAD元素——4
• <meta>元素–<metahttp-equiv=“Content-Type”content=“text/html; charset=gb2312”>–用来标记你的页面的解码方式。

第15页：HTML基本结构的有关元素和元素属性

• HEAD元素——5
• <meta>元素–<metahttp-equiv=“refresh”content=“5;URL=http://www.enet.com.cn/eschool”>–用来自动刷新网页

第16页：练习（03.htm）

编写一个网页，要求3秒钟后自动跳转到硅谷动力学院的网站。<html><head><title>my first page</title><meta http-equiv=“refresh”content=“3;URL=http://www.enet.com.cn/eschool”></head><body><p align=“center”>三秒钟后本网页将自动跳转到硅谷动力网络学院首页</p></body></html>

第17页：<body

<body>元素表明是HTML文档的主体部分。在<body>与</body>之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。

第18页：<

• <body>元素及元素属性——2<body>元素中有下列元素属性：–(1)bgcolor
• bgcolor属性标志HTML文档的背景颜色。如：bgcolor="#CCFFCC"。
• 例：04.htm

第19页：HTML对颜色的控制

• HTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色进行控制。
• 16进制的数码有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.

第20页：颜色名与RGB值对照表

颜色名与RGB值对照表：下表列出相关数据。

说明：原页中 Yellow 的RGB值写作 ffff00，按十六进制RGB规范补全为 #ffff00。

第21页：<body

• <body>元素中有下列元素属性：–(2)background
• background属性标志HTML文档的背景图片。如：background=“images/bg.gif"。
• 可以使用的图片格式为GIF，JPG例：
• htm、
• htm

第22页：<body

• <body>元素中有下列元素属性：–(3)bgproperties=fixed
• bgproperties=fixed使背景图片成水印效果，即图片不随着滚动条的滚动而滚动。例：
• htm和
• htm对比

第23页：<body

• <body>元素中有下列元素属性：–(4)text
• text属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。Text元素定义的颜色将应用于整篇文档。
• 例：09.htm

第24页：<body

• <body>元素中有下列元素属性：–(5)超级链接颜色
• link、vlink、alink分别控制普通超级链接、访问过的超级链接、当前活动超级链接颜色。
• 例：10.htm

第25页：<body

• <body>元素中有下列元素属性：–(6) leftmargin和topmargin
• 设置网页主体内容距离网页顶端和左端的距离如：leftmargin="20" topmargin="30“
• 例：11.htm

第26页：文字标签属性

• 文字属性标记–1.文字颜色
• 指定颜色<fontcolor=#> ... </font>
• #=RRGGBB 16进制数码例：01.htm

第27页：文字标签属性

• 文字属性标记–2.文字字体
• <fontface=“#, #, ..., #”> ... </font>#=客户端可获得的字体02.htm

第28页：文字标签属性

• 文字属性标记–3.文字大小
• <fontsize=#> ... </font>
• #=1, 2, 3, 4, 5, 6, 7 or +#,-#例：03.htm

第29页：文字标签属性

• 文字属性标记–4.文字标题
• <h#> ... </h#>
• #=1, 2, 3, 4, 5, 6例：04.htm

第30页：文字布局

行的控制–段(Paragraph) (可以看作是空行)<p>–空白占位符&nbsp;–例：05.htm

第31页：文字布局

• 行的控制
• HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话，就要用到另一个元素，即<br>元素。<br>元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。<br>元素不是成对出现的。例：
• htm–不换行<nobr>
• htm

第32页：HTML文字与段落格式控制

• HTML文字与段落格式控制<body>……<i>倾斜文本</i><b>粗体文本</b><u>下划线文本</u><s>删除线文本</s>……</body>例：
• htm、
• htm、
• htm、
• htm(综合练习)

第33页：基本组成部分—HTML注释

• HTML文档可以插入注释。注释内容不会在浏览器窗口显示
• HTML注释的格式为：<!--注释内容--><!--多行注释内容-->例：12.htm

第34页：文字的对齐

文字的对齐<hnalign=#>...</hn> (n=1,2,3,4,5,6)<palign=#>...</p> (#=left, center, right)例：13.htm

第35页：文字的分区显示

<divalign=#> ... </div> (#=left,center, right)例：14.htm

第36页：HTML段落与分行控制

• 居中---<center>元素–<center>元素是一个独立的使所标记的字符居中的元素。它的作用与使用<p>元素里的align=“center”类似
• 例如：<center>居中段落</center>15.htm

第37页：HTML段落与分行控制

标尺线<hrsize = #>：设定线宽<hrwidth=#>：设定线长<hralign=#>：设定对齐方式#=left, right<hrcolor=#>：设定线的颜色例：16.htm

第38页：HTML的段落与分行控制

无序列表元素—1列表在HTML的文档里有重要的地位,HTML规定了多种列表元素。列表所起的主要作用是使特定的文本有序化。

第39页：HTML的段落与分行控制

无序列表元素—2无序列表是由<ul>和<li>元素定义的:<ul><li>sports</li><li>food</li><li>drink</li><li>friends</li></ul>例：17.htm

第40页：HTML的段落与分行控制

无序列表元素—3–无序列表的默认符号是圆点。<ul>元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有：disc(圆)、circle（圆圈）、square（方块）–例：18.htm

第41页：HTML的段落与分行控制

有序列表元素—1有序列表由<ol>和<li>定义:<ol><li>sports</li><li>drink</li><li>friends</li></ol>例：17.htm

第42页：HTML的段落与分行控制

• 有序列表元素—2<ol>元素也有自己的type属性，type属性的属性值有
• A、a、I、i等。例如，我们以A、B、C……作为列表的编号例：
• htm<ol>元素还可以定义列表的起始编号，如我们希望列表的第一个编号为5，而不是1，则需要定义<ol>元素的start属性例：
• htm

第43页：超级链接—普通超级链接

超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念，那么，我们现在所有的WWW的应用将不复存在。所以，对超级链接的掌握具有特殊重要的意义。

第44页：超级链接—普通超级链接2超级链接是用锚元

• 超级链接—普通超级链接2超级链接是用锚元素<a>定义的
• 在<a>元素下，有元素属性href,href的属性值为一个URL地址
• 如：<ahref=“http://www.enet.com.cn/eschool”>指向学院的超级链接</a>
• 如：<a href=“
• htm">普通超级链接</a>例：
• htm

第45页：超级链接—E-mail超级链接

• 超级链接可以指向E-mail地址
• 如：<ahref=“mailto:hzhang@mail.enet.com.cn">指向E-mail地址的超级链接</a>例：22.htm

第46页：超级链接—新开链接窗口

开一个新的(浏览器)窗口(Target Window)<a href="URL"target=“_blank"> ... </a>例：26.htm

第47页：超级链接—去除下划线

去掉超级连接的下划线：style=“text-decoration: none”例：25.htm

第48页：超级链接——其他超级链接

• WWW应用仅仅是Internet应用的一种,Internet还有其他很多应用，如：Ftp等。实际上mailto也属于非WWW应用。我们可以类似的创建指向Ftp等的超级链接;
• 指向其他Internet应用的超级链接不是我们掌握的重点。

第49页：超级链接——锚点

• <a name="aa">
• <a href="#aa">指向本页面锚点aa的超级链接</a>例：23.htm
• <a href=“
• htm#top”>指向23页面的锚点top的超级链接</a>例：
• htm

第50页：练习：手写代码实现

链接（新开窗口与Email）、背景、文字颜色、字体、换行、页面标题。练习：27.htm

第51页：HTML对图片的控制

• 基本语法:
• <imgsrc=“图片名称”>–引用图片必须用<img>元素标志。<img>元素下的基本元素属性是src属性，src的属性值为所引用的图片的URL地址。–src属性是必须的。Src的URL可以是绝对地址，也可以是相对地址例：28.htm

第52页：HTML对图片的控制

• 所谓图片的替代文本，指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。
• 定义图片替代文本的方法是：–<img src=“图片名称”alt=“这是一张图片”>例：28.htm

第53页：HTML对图片的控制

图片的显示大小我们可以指定一幅图片在浏览器窗口里的显示大小。–定义图片的显示大小的方法是：<img src="sample.jpg"width=100 height=100>–width指定图片的宽度，height指定高度。它们的属性值可以是象素，也可以是%。例：29.htm

第54页：HTML对图片的控制

• 图片的边框–我们可以为一幅图片加一个边框以突出显示：–<img src="sample.jpg"border= " 2 " >
• border的属性值为象素数例：30.htm

第55页：HTML对图片的控制

图片的对齐方式图片可以相对于页面或单元格有一个对齐方式。定义水平对齐方式的方法是：–<img src=“sample.jpg”align=“left” >–<img rc=“sample.jpg”align=“right”>例：31.htm

第56页：HTML对图片的控制

图片的对齐方式定义图片的垂直对齐方式：<img src="sample.jpg"align="top"><img src="sample.jpg"align="middle"><img src="sample.jpg"align="bottom">对于图片的对齐方式不仅是以上几种，但是以上的几种是最常用的。例：32.htm

第57页：HTML对图片的控制

定义图片与左、右的文本之间的间距–图片在显示时，与左右的文本之间可以有一定的间距<img src="sample.jpg"hspace=5 vspace=5>–Hspace(horizontal)定义水平间距；Vspace(vertical)定义垂直间距。单位都是象素数.例：33.htm

第58页：HTML对图片的控制

图象的超级链接–图象的超级链接是指整个图象的超级链接，当点击图象的任何部分时，都会打开这个超级链接。定义默认超级链接的方法是：<a href=“http://www.enet.com.cn/eschool”><imgsrc="sample.jpg" ></a>–所以，所谓超级链接实际上就是用<a>元素标志一个图象的引用;例：34.htm

第59页：HTML对图片的控制

图象映射所谓图象映射是指一个图片上的不同位置被指定了不同的超级链接；点击图片的不同位置会打开不同的超级链接目标。这与前面的默认超级链把整个图片作为超级链接的元素是很不一样的。

第60页：HTML对图片的控制

图象映射（只要求理解标记含义）–图象映射由<map>定义。<map>有一个基本属性是name。Name给图象映射命名，这个命名将会被<img>元素用usemap属性引用。所以，图象上的图象映射实际上是对<map>定义的映射的一个引用。–<map>在定义图象映射时，可以定义三种形状的映射：circle(圆形)、rect(矩形rectangle)、poly(多边形)

第61页：HTML对图片的控制

图象映射实例（35.htm）<imgsrc="bear.jpg" usemap="#Map" ><mapname=“Map"><area shape="rect"coords="46,29,253,164"href="#" ><area shape="circle" coords="76,510,59" href="#" ><area shape="poly" coords="219,482,253,448,310,462,297,527,220,523"href="#" ></map>

第62页：三月二月一月150010001200单元

三月二月一月150010001200单元格（用<TD>来表示，每个单元格可以有背景颜色和背景图片）表格（用<Table>来表示，表格可以有背景颜色、背景图片）表格边框每一行可以用<TR>来表示，单元格放在行中，每行可以有很多的单元格。表头（用<TH>来表示，表头是特殊的单元格，其中的文字加进去之后默认是居中并且加粗）

第63页：表格

<table>元素

定义一个表格。每一个表格只有一对<table>和</table>，一张页面中可以有多个表格。

<tr>元素

定义表格的行，一个表格可以有多行，所以<tr>对于一个表格来说不是唯一的。

<td>元素

定义表格的一个单元格。每行可以有不同数量的单元格，在<td>和</td>之间是单元格的具体内容。

需要注意的是

上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。

第64页：表格

表格的基本结构<table>定义表格<tr><th>定义表头</th></tr><tr>定义表行<td>…</td>定义单元格</tr></table>例：02.htm

第65页：表格

• 表格的属性–1–width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。–height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。–border属性：表格边线粗细
• htm、
• htm、
• htm

第66页：表格

• 表格的属性–1–
• bgcolor属性：指定表格或某一个单元格的背景颜色。–
• background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址。例：
• htm

第67页：表格

• 表格的属性–2–
• bordercolor属性：指定表格或某一个单元格的边框颜色。例：
• htm–
• Bordercolorlight属性：亮边框的颜色–
• Bordercolordark属性：暗边框的颜色例：
• htm

第68页：表格

• 表格的属性–2–
• align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式。例：
• htm

第69页：表格

• 表格的属性–2–
• cellspacing属性：单元格间距。例：
• htm–
• cellpadding属性：单元格边距。例：
• htm

第70页：表格

• 单元格属性
• valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括：top：顶端对齐；middle：居中对齐；bottom：底端对齐;Baseline：相对于基线对齐;例：
• htm

第71页：表格

• 单元格属性
• Colspan：属性值表示当前单元格跨越几列例：
• htm
• Rowspan：属性值表示当前单元格跨越几行例：
• htm

第72页：表格

行属性1、valign属性

指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包

top

顶端对齐；middle：居中对齐；bottom：底端对齐。Baseline：相对于基线对齐。

第73页：表格

align属性

指定表格或某一个单元格里的内容（文本、图片等）的对齐方式

height属性

指定表格或某一个表格单元格的高度。单位可以是%或者象素

• 行属性

第74页：表格进阶

• 表格的嵌套–在<td> </td>之间插入表格，实现表格嵌套例：
• htm–表格的作用一般只是控制文本和图像的显示，而不显示表格的边框例：
• htm

第75页：表格综合案例

• 表格的综合使用
• 例：19.htm

第76页：表单

• HTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。
• 在HTML里，我们可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。我们在网页设计课程中不会涉及程序编制。

第77页：表单

• 表单是网页上的一个特定区域。这个区域是由一对<form>元素定义的。
• <form>元素–action属性：用来定义表单处理程序（一个ASP、CGI等程序）的位置(相对地址或绝对地址)。–Method定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get、post。

第78页：表单

表单的基本语法:<formaction="url"method=*type=text/plain>...<input type=submit><input type=reset></form>* =GET有数据量限制，POST无以上限制,以文件形式传输例：22.htm

第79页：表单

• 表单(FORM)标记
• 文本框<inputname=?type=*value=**size=***maxlength=??>?文本框的名字*text,password**默认值***长度??最大输入字符数例
• htm

第80页：表单

• 表单(FORM)标记
• 文本域–<textareaname=*rows=**cols=**> ...</textarea>例：
• htm

第81页：表单

• 表单(FORM)标记
• 按钮–包括普通按钮、重置按钮和提交按钮<input type="submit" value="提交" name=“B1"><input type="reset" value="全部重写"name=“B2">例：
• htm

第82页：表单

• 表单(FORM)标记
• 复选框(Checkbox)–在一个表单里的所有多选框可以有一个或多个被选中。<inputtype=checkbox><input type=checkboxchecked><input type=checkboxvalue=**>例
• htm

第83页：表单

• 单选框(RadioButton)–一个表单里的所有变量名相同的单选框只能够有一个被选中。<input type=radioname=sexvalue=**><input type=radioname=sexvalue=**checked>–各个选项的name必须一样才能达到预期效果例：
• htm注意262.htm的写法是错误的

第84页：表单

• 下拉列表–基本语法<select name=*><optionselected>说明</option><optionvalue=**>说明2 </option></select>例：
• htm

第85页：表单

• 下拉列表–（2）列表框的长度<selectsize=**>–（3）允许多选<select size=**multiple>例：
• htm、
• htm

第86页：表单

8.图象域–<inputtype=imagesrc=url>例：image.htm

第87页：表单

• 综合练习（*）
• 实现留言簿–要求：背景、文字颜色、字体、换行、页面标题、表单文本框、文本域、单选框、复选框、下拉列表、图象域、提交与取消按钮，内容以mail形式提交。

第88页：网页中的框架

• 制作框架页面的步骤：–
• 编写所有子框架页面–
• 编写主框架页面–
• 在主框架页面中设定子框架名称–
• 如果框架页面之间存在链接，在子框架中设定链接。注意：框架页面是不含<body>标签的

第89页：网页中的框架1.基本语法

网页中的框架1.基本语法<frameset><framesrc="url"><noframes><body>您的浏览器不支持框架，请考虑升级您的浏览器！</body></noframes></frameset>

第90页：网页中的框架

定义框架的基本语法–框架由一对<frameset>定义–<frameset>有两个属性：rows和colsRows定义上下分割的框架的大小；cols定义左右分割的框架的大小；在定义大小时，rows和cols可以使用相对大小或以百分比为单位。

第91页：网页中的框架

各窗口的尺寸设置–<framesetrows=#>横排多个窗口<framesetrows=30%,20%,*><frame src="A.html"><frame src="B.html"><frame src="C.html"></frameset>排列方式：ABC例：02.htm

第92页：网页中的框架各窗口的尺寸设置

网页中的框架各窗口的尺寸设置<framesetcols=#>纵向排列多个窗口<framesetcols=30%，20%,*><framesrc="A.html"><frame src="B.html"><frame src="C.html"></frameset>排列方式：A B C例：01.htm

第93页：网页中的框架COLS

网页中的框架COLS & ROWS：纵横排列多个窗口<framesetcols=137，*><frame src="A.htm"><framesetrows=82,*><frame src="B.htm"><frame src="C.htm"></frameset></frameset>排列方式：BAC例：14.htm

第94页：网页中的框架

• 框架边框的颜色bordercolor="ff0000“例：03.htm
• 各窗口边框的设置frameborder=#–#=yes, no / 1, 0例：04.htm
• 框架边框的宽度framespacing="10"例：04.htm

第95页：网页中的框架

• <frame>的属性–name：定义该框架的名字。这个名字可以被一些网页元素引用，如被<a>元素引用。–<a href=url target=“framename”>例：
• htm、
• htm–Src：在本框架里显示网页的URL。–Target：目标框架,引用的是目标框架的名字。

第96页：网页中的框架（1）

• 网页中的框架
• 在当前框架中打开超链接页面–默认就是在当前框架页中打开,也可以采用Target=“_self”
• 在指定框架中打开超级链接页面–Target=“name”
• 新开窗口打开链接页面–Target=“_blank”
• 跳出整个框架集–Target=“_parent”

第97页：网页中的框架

• <frame>的属性–Scrolling：是否显示滚动条。yes, no, auto例：
• htm、
• htm–Noresize：框架在浏览器里不可以被调整大小。例：
• htm、
• htm

第98页：网页中的框架

内含窗口<iframesrc=# name=##> ... </iframe>#=初始页面的URL##=框架名称(Frame Name)例：15.htm

第99页：会移动的文字1.基本语法

• 会移动的文字
• 基本语法<marquee> ... </marquee>例：
• htm
• 文字移动属性(1)方向：direction=#–#=left, right,up,down例：
• htm

第100页：会移动的文字

文字移动属性(2)方式

behavior=#–#=scroll(循环),slide(只走一次),alternate(来回走)例：

htm(3)循环

loop=#–#=次数；若未指定则循环不止(infinite)例：

• htm

第101页：会移动的文字

文字移动属性(4)速度

scrollamount=#例：

htm(5)延时

scrolldelay=#例：

• htm

第102页：会移动的文字

其他属性(1)底色

bgcolor=##=RRGGBB 16进制颜色代码例：

htm(2)面积

height=#width=#例：

htm(3)空白

hspace=#vspace=#例：

• htm

第103页：多媒体页面

• 用<EMBED>嵌入多媒体对象–基本语法<embed src=#> #=URL注：
• 使用<embed>标记之前，需要安装插件才可以；
• 对于不同的plugin，其embed属性也不同。例：
• htm(Flash动画)例：
• htm(rmi音乐文件)例：
• htm(avi动画)例：
• htm(mpeg影像文件)

第104页：多媒体页面（*）

嵌入背景音乐<bgsoundsrc=#> #=WAV文件的URL<bgsoundloop=#>#=循环数例29.htm(WAV背景音乐)

第105页：多媒体页面（*）

特殊标记元素Object–<OBJECT>元素用来包含图像、动态图像、Java小程序。–<OBJECT>元素用以替换更具体的<IMG>和<APPLET>元素，以及<EMBED>和<BGSOUND>元素。例30.htm