网页设计第二讲

上传人：0*** IP属地：湖北上传时间：2023-02-03 格式：PPT 页数：59 大小：1.30MB 积分：30 举报 版权申诉

已阅读5页，还剩54页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第二章HTML基础内容回顾WWW具有三个统一：

1.统一的资源命名方式：URL（统一资源定位符，即网址）。

2.统一的资源访问方式：HTTP（超文本传输协议）。

3.统一的信息组织方式：HTML（超文本标记语言）。WWW是成千上万个网站连結而成的页面式网络信息系统。WWW采用“客户机/服务器”结构。HTTP（超文本传输协议）Protocol，一组在网络上发送信息的规则和约定。这些规则控制在网络设备间交换消息的内容、格式、定时、顺序和错误控制。通俗的说就是不同的网络程序的交流语言，我们常见的OICQ使用UDP协议、ICQ使用TCP协议、E-mail程序使用POP3和SMTP协议，正像我们国人使用汉语一样......

HTTP（超文本传输协议）超文本传输协议(HyperTextTransferProtocol,简称HTTP)是WWW浏览器和WWW服务器之间的应用层通讯协议。HTTP协议是用于分布式协作超文本信息系统的、通用的、面向对象的协议。HTTP会话过程包括四个步骤:

(1)

连接(Connection);

(2)

请求(Request);

(3)

应答(Response);

(4)

关闭(Close)。HTTP协议是基于TCP/IP之上的协议,它不仅保证正确传输超文本文档,还确定传输文档中的哪一部分,以及哪部分内容首先显示(如文本先于图形)等等。HTTP（超文本传输协议）HTTP是一种请求/响应式的协议。一个客户机与服务器建立连接后，发送一个请求给服务器，请求的格式是：统一资源标识符（URL）、协议版本号，后面是类似MIME的信息，包括请求修饰符、客户机信息和可能的内容。服务器接到请求后，给予相应的响应信息，其格式是：一个状态行包括信息的协议版本号、一个成功或错误的代码，后面也是类似MIME的信息，包括服务器信息、实体信息和可能的内容。

HTTP（超文本传输协议）协议结构HTTP报文由从客户机到服务器的请求和从服务器到客户机的响应构成。请求报文格式如下：请求行以方法字段开始，后面分别是URL字段和HTTP协议版本字段，并以CRLF结尾。SP是分隔符。除了在最后的CRLF序列中CF和LF是必需的之外，其他都可以不要。请求行通用信息头请求头实体头报文主体HTTP（超文本传输协议）协议结构HTTP报文由从客户机到服务器的请求和从服务器到客户机的响应构成。响应报文格式如下：状态码元由3位数字组成，表示请求是否被理解或被满足。原因分析是对原文的状态码作简短的描述，状态码用来支持自动操作，而原因分析用来供用户使用。客户机无需用来检查或显示语法。状态行通用信息头响应头实体头报文主体HTML基础

一、HTML的概念1.什么是HTML？超文本标记语言（HTML——HyperTextMarkupLanguage）是用于设计网页源文件（网页文档）的语言。每一个页面的代码保存为一个网页源文件(.htm文件)。八十年代初，HTML由万维网联盟（W3C：WorldWideWebConsortium）制订。HTML包括一些定义页面内容和格式的符号，称为标记。它能够将文本、图像、声音和动画结合在一个网页文档中。这些文档可以通过Web浏览器显示，还可以通过超链接以访问其它的信息资源。后来，进一步推出了XML（扩展标记语言），该语言可以由程序员自己定义标记。HTML基础2.什么是标记？标记是网页文档中的一些有特定意义的符号。这些符号指明如何显示文档中的内容。标记总是放在三角括号中，大多数标记都成对出现（有开始标记和结束标记）。结束标记和开始标记所用的字符相同，只是前面加一个斜杠。例如：<p>…</p>用于标记一个自然段。标记可以具有相应属性即各种参数，如size、color、text、width和noshade等。例如：<p><fontsize="+1"color="red"></font></p>

HTML基础

标记通常可以分成两种：第一种用来指定网页上的元素或元素的样式。例如，指定一个自然段及其字体和颜色：

<p><fontsize="+1"color="red">自然段内容。</font></p>第二种用来指向其它的资源。例如，指定一个链接地址：

<ahref=“”>武汉大学</a>

指定一个图片文件：

<imgsrc=“图片路径”>

HTML基础3.什么是超文本、超媒体和超链接？超文本是网页上具有链接功能的文字。例如，娱乐

新闻

电影。超媒体是网页上具有链接功能的多媒体。超链接是网页上连接其它网页或网页上指定位置的超文本和超媒体。超链接分为文字和图像（包括动画）两种，网页中的一段文字、一副图像或图像的某一个部分等都可以定义为超链接。

HTML基础

二、如何编写和浏览HTML网页文档启动IE，然后使用“查看”菜单中的“源文件”菜单项，进入记事本，就可以输入网页源文件了。在输入完之后，另存为.htm文件。或者直接进入记事本，输入网页源文件。在输入完之后，另存为.htm文件（选择保存类型为“所有文件”）。在浏览器中输入该文件名，就能浏览HTML源文件的网页效果。

HTML基础例如：

<HTML><HEAD><TITLE>学生选课系统</TITLE></HEAD><BODY>网页制作练习</BODY></HTML>演示网页美的标准简洁实用使用方便整体性好网站形象突出页面用色协调交互性强HTML基础

三、HTML的常用标记

1.HTML文档的结构标记

用来指明一个HTML文档的基本结构。

（1）文件标记：<HTML>…</HTML>

整个HTML文档内容均在<HTML>…</HTML>标记之中。（2）头部标记：<HEAD>…</HEAD>

整个HTML文档分头部和主体部分。头部使用<HEAD>…</HEAD>标记标识，凡是在此标记之内的内容，例如标题等，均属于头部信息。头部信息不显示在Web页中。HTML基础

（3）头部标题标记：<TITLE>…</TITLE>

在此标记之间的内容将作为标题显示在浏览器的标题栏。注意：<TITLE>…</TITLE>标记只能放在<HEAD>…</HEAD>标记之间。（4）主体标记：<BODY>…</BODY>

主体是Web页的主要部分，用<BODY>…</BODY>标记定义的信息将显示在Web页中。例如：（见下页）HTML基础<html><head><title>结构标记示例</title></head><bodytext="blue"><p><i>斜体字文本</i></p></body></html>可以建立该网页源文件test2-1.htm演示HTML基础

2.格式标记

（1）<p>…</p>（段落标记）

<p>…</p>标记用来创建一个段落，在此标记之间的文本将按照段落的格式显示。（2）<br>（换行标记）

<br>是一个很简单的标记，它没有结束标记，用来创建一个换行。（3）<blockquote>…</blockquote>（两边缩进标记）在<blockquote>…</blockquote>标记之间的文本将按照两边缩进的方式显示。

下面一一介绍在<body>…</body>标记之间常用的各种标记。HTML基础

（4）<dl></dl><dt></dt><dd></dd>（列表标记）①

<dl></dl>用来创建一个列表;②<dt></dt>用来创建列表中的上层项目;③<dd></dd>用来创建列表中最下层项目;<dt></dt>和<dd></dd>都必须放在<dl></dl>标记之间。

[例2-2]创建一个普通列表：HTML基础

该网页的HTML源文件test2-2.htm如下：

<html><head><title>一个普通列表</title></head><bodytext="blue"><dl><dt>中国城市</dt><dd>北京

</dd><dd>上海

</dd><dd>广州

</dd><dt>美国城市</dt><dd>华盛顿

</dd><dd>芝加哥

</dd><dd>纽约

</dd></dl></body></html>演示HTML基础

（5）<ol></ol><ul></ul><li></li>（标有数字或圆点的列表标记）①

<ol></ol>标记用来创建一个标有数字的列表；②

<ul></ul>标记用来创建一个标有圆点的列表；③

<li></li>标记只能在<ol></ol>或<ul></ul>标记之间使用，此标记对用来创建一个列表项。若<li></li>放在<ol></ol>之间,则每个列表项加上一个数字，若在<ul></ul>之间,则每个列表项加上一个圆点。HTML基础[例2-3]标有数字的列表与标有圆点的列表：

HTML基础该网页的HTML源文件test2-3.htm如下：<html><head><title>标有数字与圆点的列表</title></head><bodytext="blue"><ol><p>中国城市</p><li>北京</li><li>上海</li><li>广州</li></ol><ul><p>美国城市</p><li>华盛顿</li><li>芝加哥</li><li>纽约</li></ul></body></html>演示HTML基础

（6）<div></div>（分段标记）①<div></div>标记对用来排版大块HTML段落，也用于格式化表，此标记的用法与<p></p>标记非常相似，同样有align对齐方式属性。②align属性，它用来说明对齐方式，语法是：<palign=""></p>。③align可以是Left(左对齐)、Center(居中)和Right(右对齐)三个值中的任何一个。例如：<palign=“Center”></p>表示标记中的文本居中显示。HTML基础3.文本标记

（1）<pre></pre>(预处理标记)

表示<pre></pre>标记之间的文本原有格式如word格式仍有效。（2）<h1></h1>……<h6></h6>（六级标题标记）

<h1></h1>是最大的标题，<h6></h6>则是最小的标题。如果要在HTML文档中输出标题，那麽可以使用六对标题标记的任何一对。

HTML基础

（3）<b></b><i></i><u></u>（字体标记）

①<b></b>之间的文本以黑体字的形式输出；

②<i></i>之间的文本以斜体字的形式输出；

③<u></u>之间的文本以下加一划线的形式输出。（4）<em></em><strong></strong>（强调加重标记）

①

<em></em>用来输出需要强调的文本(通常是斜体)；②<strong></strong>则用来输出加重文本(通常也是黑体)。关于html标签中b和strong两个的区别，

用在网页上，默认情况下它们起的均是加粗字体的作用，二者所不同的是，<b>标签是一个实体标签，它所包围的字符将被设为bold（粗体），而<strong>标签是一个逻辑标签，它的作用是加强字符的语气，一般来说，加强字符的语气是通过将字符变为bold（粗体）来实现的。

简单的说strong是web标准中xhtml的标签，strong的意思是“强调”；b是html的，b的意思是bold（粗体）。web标准主张xhtml不涉及具体的表现形式，“强调”可以用加粗来强调，也可以用其它方式来强调，比如下划线，比如字体加大，比如红色，等等，可以通过css来改变strong的具体表现。

并不是说有了strong，就淘汰了b，只是这个b很无辜，就因为自己表示的是字体加粗，恰巧跟strong默认情况下强调的效果一致，其实这个strong完全可以定义成别的样式的强调效果

但是为了符合现在W3C的标准，还是推荐使用strong标签。HTML基础

（5）<font></font>（字体的大小颜色标记）

①

<font></font>可以指定输出文本的字体大小、颜色，它主要两个属性size和color。

②

size属性用来指定字体的大小，可以取值：

-1、1和+1；

③

color属性用来指定文本的颜色，颜色的取值是十六进制RGB颜色码或HTML语言给定的颜色名称。例如，"#ff0000"，引号内的rrggbb是用六位十六进制数字表示的RGB(即红、绿、蓝三色的组合)颜色，#ff0000对应的是红色。HTML基础

④Html语言所给定的颜色名称有：

Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal。

例如：

<p><fontsize="+1"color="red">size取值“+1”、color取值“red”时的文本</font></p>

表示<p></p>标记之间的文本按大小为+1，颜色为红色显示。HTML基础[例2-4]文本标记的综合示例HTML基础该网页的HTML源文件test2-4.htm如下：<html><head><title>文本标记的综合示例</title></head><bodytext="blue"><h1>最大的标题</h1><h3>使用h3的标题</h3><h6>最大的标题</h6><p><b>黑体字文本</b></p><p><i>斜体字文本</i></p><p><u>下加一划线文本</u></p><p><em>强调的文本</em></p><p><strong>加重的文本</strong></p><p><fontsize=“+1”color=“red”>size取值“+1”、color取值“red”时的文本</font></p></body></html>演示HTML基础4.链接标记

（1）<ahref=“地址">…</a>（超链接标记）

①在标记对之间可指定作为超链接的文本或图像，使用<imgsrc=“图像文件名”>标记指定图像。例如，指定超链接及其文本“武汉大学网站”：<ahref=>武汉大学网站</a>

或者，指定超链接及其图像“d:\pic1.gif”：<ahref=><imgsrc="d:\pic1.gif"></a>

在上例中，href的值是武汉大学的网址。（href——缩写：httpreference含义为http引用。）HTML基础

②

href的值也可以是mailto:形式，即发送E-Mail形式。语法为：

<ahref="mailto:EMAIL"></a>

这就创建了一个自动发送电子邮件的链接，mailto:后边紧跟想要自动发送的电子邮件的地址(即E-Mail地址)。例如，链接到我的电子信箱abc@263.net：

<ahref="mailto:abc@263.net">这是我的电子信箱(E-Mail信箱)</a>HTML基础③<ahref=“”></a>还具有target属性，此属性用来指明显示的目标窗口。如果不使用target属性，当浏览者点击了链接之后将在原来的浏览器窗口中显示HTML文档，若target的值等于“_blank”，点击链接后将会打开一个新的浏览器窗口显示HTML文档。例如，进入，并且在新窗口中显示网页：

<ahref=“/”target="_blank">在新窗口中显示</a>

HTML基础（2）<aname="标签名"></a>（标签标记）

①标签标记<aname=“”></a>需要结合<ahref=“”></a>标记使用。name属性不可缺少。

②<aname=“标签名”></a>标记用来在同一网页中创建一个标签(即做一个记号),

即在同一网页中创建链接，以便转到同一网页中有标签的地方并显示。例如，在页顶创建一个标签

<aname="Top">此处创建了一个标签</a>

③要找到标签所在地，就必须使用<ahref=“#标签名"></a>标记。例如：

<ahref=“#Top”>点击此处将转到标签“Top”的地方显示</a>

注意：href属性的值若是标签名，必须在标签名前头加一个“#”号。

HTML基础[例2-5]链接标记的综合示例<html><head><title>链接标记的综合示例</title></head><body><palign="center"style="font-size:9pt;color:yellow;background:black"><br><aname="Top"><fontcolor="red">创建标签处</font></a><br><br><br><br><br><br><br><br><br><br><br>欢迎想要学习网页制作的同学访问网站<br><ahref=""><fontcolor="lime">武汉大学网站</font></a><br><br>HTML基础<ahref=><imgsrc="images/web.gif"></a><br><br><br><br><br>本网站的主要内容<br><br><ahref="/"target="_blank">在新窗口中显示</a><br>欢迎给我来信，我的E-Mail是：<ahref="mailto:abc@263.net"><fontcolor="lime">abc@263.net</font></a><br><br><ahref=“#Top”><fontcolor=“lime”>点击此处回到标签处

</font></a><br><br></p></body></html>可以建立[例2-5]的HTML源文件和作为超链的图像文件d:\Inetpub\wwwroot\web.gif，在浏览器中显示执行结果。

5.图像标记和多媒体标记

（1）图像标记：<imgsrc=“图像文件名”>将图形文件嵌入到网页文档中的当前位置。例如，网页文档与图形文件logo.gif在同一个目录下，则可以将代码写成<imgsrc="logo.gif">。假如图形文件放在网页文档所在目录的一个子目录(images)下，则代码应为：

<imgsrc="images/logo.gif">。此外，<img>标记还有alt（文字代替）、align（对齐）、border（边框）、width（宽度）和height（高度）属性。

HTML基础演示

假如图形文件放在网页文档所在目录的上层目录(如home)下，则相对路径就必须是准网址，即用“../”表示网站，后边紧跟文件在网站中的路径。例如，home是网站下的一个目录，则代码应为：

<imgsrc="../home/logo.gif">。例如，home是网站下的目录king下边的一个子目录，则代码应为：

<imgsrc="../king/home/logo.gif">。

HTML基础

[例2-6]图像标记举例<html><head><title>图像标记示例</title></head><body><palign="center"><imgsrc="images/china.jpg"alt="网页制作"width="640"height="480"></p></body></html>

HTML基础演示若事先在网站根目录中存放一幅图像logo468_60.gif，则可以在网页中显示它。alt="网页制作"属性表示在网页中可以用文字"网页制作"代替该图像先行显示出来。

（2）多媒体标记

A.设置音乐播放的链接在Windows中，可播放的音乐文件格式常有au、mid及wav三种。若要提供音乐文件让浏览者播放，则可建立指向音乐文件的超链接。例如：

<AHREF="sweet.wav">甜美音乐</A>

B.设置影像播放的链接常见的影像文件有mov、mpg和avi。可建立超链接到影像文件。当浏览者单击超链接时，将会调用WindowsMediaPlayer，进行影像文件播放。例如：<AHREF="traffic.avi">本市交通</A>

HTML基础

C.直接将音乐或影像嵌入网页可以用<EMBED>标记，即:<EMBEDSRC=“音乐或影像文件名称”

WIDTH=宽度

HEIGHT=高度

AUTOSTART=TRUELOOP=播放次数>

若“播放次数”设为TRUE，则无限次播放，直到单击关闭或停止。若设为NO（默认值），则只播放一次。

D.播放网页背景音乐可运用<BGSOUND>标记，即：

<BGSOUNDSRC="音乐文件名"LOOP=次数>

若“次数”设为Infinite，音乐将循环播放，直到网页关闭为止。

HTML基础

6.表格标记（用于制作表格或网页结构）（1）<table></table>（创建一个表格）（2）<tr></tr>和<td></td>（创建表格中的每一行和每一格）（3）<th></th>（创建表格头）。

[例2-7]用表格标记创建下列表格。

HTML基础

<html><head><title>表格标记示例</title></head><body><tableborder="1"width="80%"bgcolor="#E8E8E8“cellpadding="2"bordercolor="#0000FF“bordercolorlight="#7D7DFF"bordercolordark="#0000A0"><tr><thwidth="33%"colspan="2"valign="bottom">意大利</th><thwidth="36%"colspan="2"valign="bottom">英格兰</th><thwidth="36%"colspan="2"valign="bottom">西班牙</th></tr>HTML基础cellpadding设置格子边框与其内容之间的大小；valign是垂直对齐方式；colspan设置一个格子跨占的列数；rowspan设置一个格子跨占的行数。

<tr><tdwidth="16%"align="center">AC米兰</td><tdwidth="16%"align="center">佛罗伦萨</td><tdwidth="17%"align="center">曼联</td><tdwidth="17%"align="center">纽卡斯尔</td><tdwidth="17%"align="center">巴塞罗那</td><tdwidth="17%"align="center">皇家社会</td></tr>HTML基础<tr><tdwidth="16%"align="center">尤文图斯</td><tdwidth="16%"align="center">桑普多利亚</td><tdwidth="17%"align="center">利物浦</td><tdwidth="17%"align="center">阿申纳</td><tdwidth="17%"align="center">皇家马德里</td><tdwidth="17%"align="center">……</td></tr>HTML基础<tr><tdwidth="16%"align="center">拉齐奥</td><tdwidth="16%"align="center">国际米兰</td><tdwidth="17%"align="center">切尔西</td><tdwidth="17%"align="center">米德尔斯堡</td><tdwidth="17%"align="center">马德里竞技</td><tdwidth="17%"align="center">……</td></tr></table></body></html>HTML基础演示

7.表单标记（用于制作对话框）

（1）<form></form>（表单开始和结束标记）（2）<inputtype=“”>（输入区标记）（3）<select></select><option>（列表框标记）（4）<textarea></textarea>（多行文本框标记）分别介绍如下：

（1）<form></form>标记用来创建一个表单，也即定义表单的开始和结束位置，在标记对之间的一切都属于表单的内容。

HTML基础

<form>标记具有action、method和target属性。

action的值是处理程序的程序名。例如：<formaction=“/counter.asp”>，当用户提交表单时，服务器将执行网站/上的counter.asp程序。

method用来定义处理程序从表单中获得信息的方式，可取值为

GET或

POST。

GET方式是程序从当前网页文档中获取数据，然而这种方式传送的数据量是有所限制的，一般限制在1KB以下。

POST方式与GET方式相反，它是当前网页文档把数据传送给处理程序，传送的数据量要比使用GET方式大得多。

target用来指定显示表单的目标窗口。

HTML基础

（2）<inputtype=“”>标记用来定义一个用户输入区，用户可在其中输入信息。此标记必须放在<form></form>标记对之间。<inputtype=“”>标记中共提供文本框、按钮、复选框、单选钮等八种类型的输入区域。例如：

HTML基础

（3）<select></select>标记用来创建一个下拉列表框或可以复选的列表框。此标记对用于<form></form>标记之间。<select>具有multiple、name和size属性。例如：

<formaction="cgi-bin/tongji.cgi"method="post"><p>请选择最喜欢的男歌星:<selectname="gx1"size="1"><optionvalue=“ldh”>刘德华

<optionvalue=“zhxy”selected>张学友

<optionvalue=“gfch”>郭富城

<optionvalue=“lm”>黎明

</select></form>

HTML基础<option>标记指定列表框中的一个选项，此标记具有selected和value属性。value指定选项值，这个值要传送到服务器上。服务器正是通过调用<select>区域的名字的value属性来获得该区域选中的数据项的。

（4）<textarea></textarea>标记创建可以输入多行的文本框，此标记对用于<form></form>标记对之间。

<textarea>有name、cols和rows属性。name

、cols和rows属性分别用来设置文本框的名称、列数和行数。列与行以字符数为单位。例如：

HTML基础

[例2-8]建立一个输入密码，以及具有确认和重输按钮的表单。

<HTML><head><title></title></head><body><p>请输入密码：</p><formmethod="POST"><p><inputtype="password"size="20"name="passwd"><inputtype="submit"name="B1"value="确定"><inputtype="reset"name="B2"value="重输"></p><

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

网页设计第二讲

文档简介

温馨提示

最新文档

评论

网页设计第二讲

文档简介

温馨提示

最新文档

评论

相关文档