2023学年完整公开课版HTML基础教程

上传人：启*** IP属地：安徽上传时间：2023-05-09 格式：PPT 页数：116 大小：6.89MB 积分：50 举报 版权申诉

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

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

文档简介

HTML语法§1HTML基础HTML建立与测试网页标记符Web页的结构设置页面属性添加注释显示特殊字符一、HTML（HyperTextMarkupLanguage）

——超文本标记（标签）语言，是表示网页的一种规范

——一组影响网页内容显示的标记符的集合

使用HTML语言描述的文件，能独立于各种操作系统平台（如UNIX，WINDOWS等），访问它只需要一个WWW浏览器，我们所看到的网页，是浏览器对HTML文件进行解释的结果。二、测试和创建Web页1.网页编辑工具纯文档编辑工具——记事本所见即所得工具——FrontPage、Dreamweave2.网页创建步骤(使用“记事本”创建网页)打开“程序/附件/记事本”在“记事本”的窗口中输入HTML代码选择“文件”菜单的“另存为”命令在“文件名”框中输入网页的名称，文件名必须以.html或.htm为后缀名单击保存3.网页测试IE工具即现三、标记符1.标记符的定义：

——HTML语言通知浏览器如何显示网页内容的方式2.标记符的形式：所有标记符都用尖括号括起来绝大多数标记符是成对出现的，即包括开始标记符和结束标记符，个别是单一标记符。例如：<TITLE></TITLE><P>、<BR>、<HR>开始标记符和结束标记符定义了标记符所影响的范围，它们的区别是结束标记符多了一个斜线/，例如：<FONTcolor=“red”>好好学习</FONT>天天向上

不区分大小写，但为了可读性和维护性，使用大写<HTML><H1>这是H1格式的字体</H1><BR>这是默认格式的字体</HTML>3.标记符的属性作用——位置——形式——<FONTsize="1"color="red">红色一号的文字</FONT>

学习和掌握HTML的关键：HTML标记符及其属性对标记符作用的内容进行更详细的控制开始标记符的尖括号里，与标记符之间用空格隔开，属性值跟在相应的属性之后，用等号连接，不用属性之间用空格隔开小写四、Web页的结构HTML必须包含的基本结构标记符：HTML标记：<HTML></HTML>头标记：<HEAD></HEAD>标题标记：<TITLE></TITLE>正文标记：<BODY></BODY>三大结构：

<HTML>

<HEAD>

<TITLE>

</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>HTML标记<HTML></HTML>Web页的第一个和最后一个标记符Web页的其他所有内容都位于这对标记符之间HTML标记符告诉浏览器或其他阅读该页的程序，此文件为一个Web页不包含其它属性首部标记<HEAD></HEAD>位于Web页的开头，不包括Web页的任何实际内容，提供一些与Web页有关的特定信息通常包含一下标记符：标题标记符——<TITLE></TITLE>META标记符——<META>BGSOUND标记符——<BGSOUND>正文标记符<BODY></BODY>包含Web页的具体内容，包括文字、图形、超链接及其他各种HTML对象。正文标记符中的文字——如果没有其他标记符修饰，正文标记符中的文字将以无格式的形式显示如果浏览器窗口显示不下，则自动换行空格、回车这些格式控制在显示时都不起作用标题标记符——<TITLE></TITLE>用于定义网页的标题,并在浏览器窗口的标题栏中显示网页标题可被浏览器用作书签和收藏清单<HTML><HEAD>

<TITLE>这是网页标题</TITLE>

</HEAD>

<BODY>请看浏览器的标题栏。</BODY></HTML>

例子：<HTML><HEAD><TITLE>网页标题</TITLE></HEAD><BODY>正文，正文，正文，正文，正文，正文，正文，正文，正文</BODY></HTML>META标记符——<META>用于描述不包含在标准HTML里的一些文档信息，例如开发工具，作者，网页关键字，网页描述等。这些定义的内容并不在网页页面中显示，但是一些搜索引擎可以检索这些信息，浏览者可以根据这些关键字或描述查找到该网页。常用功能是设置自动转址功能——使浏览器自动从一个地址跳转到另一个地址位置META标记符的常用属性包括：name、content和http-equivname属性给出特性名

content属性给出特性值http-equiv属性指定HTTP响应名称，通常用于替换name属性，HTTP服务器使用该属性值为HTTP响应消息头收集信息例1<METAhttp-equiv="Content-Script-Type"content="text/javascript">设置客户端行内程序的语言是JavaScript例2<METAhttp-equiv="Content-Style-Type"content="text/css">设置行内样式的样式语言为CSS例3<HTML><HEAD><TITLE>META示例</TITLE><METAhttp-equiv="Refresh"content=“10;URL="></HEAD><BODY>再过10秒钟，我就上学校的网站了！</BODY></HTML><html><head><title>我的第一个网页</title><METANAME="Generator"CONTENT="editplus"><METANAME="Author"CONTENT="zhaoming"><METANAME="Keywords"CONTENT="title"><METANAME="Description"CONTENT="sampleweb"></head><body></body></html>例4五、设置页面属性正文标记符包括一些常用属性，可以用于设置网页背景颜色和图案，以及设置文档中文字和超链接的颜色设置页面背景颜色——bgcolor<BODYbgcolor=“颜色名称">设置页面背景图像——background<BODYbackground="背景图案的地址">使用背景图案时，如果图案小于浏览器窗口的大小，则浏览器会自动象铺地板砖一样平铺背景图案。可以同时设置背景图案和背景色，以便在不能显示图像的浏览器上显示背景色页面基本属性——定义在<body>中background=""背景图片文件名bgcolor=""背景颜色text=""文本默认颜色link=""未被访问链接源文字的颜色alink=""被激活链接源文字的颜色vlink=""访问过链接源文字的颜色topmargin=""信息内容的顶边距离leftmargin=“”信息内容的左边距离背景音乐标记符——<BGSOUND>用于指定网页的背景音乐属性src，用于指定背景音乐的源文件。loop，用于指定背景音乐重复的次数，如果不指定该属性，则背景音乐无限循环例子

<BGSOUNDsrc="canyon.mid"loop="1">表1-116种标准颜色

色彩名十六进制值色彩名十六进制值Aqua（水蓝色）#00FFFFNavy（藏青色）#000080Black（黑色）#000000Olive（茶青色）#808000Blue（蓝色）#0000FFPurple（紫色）#800080Fuchsia（樱桃色）#FF00FFRed（红色）#FF0000Gray（灰色）#808080Silver（银色）#C0C0C0Green（绿色）#008000Teal（茶色）#008080Lime（石灰色）#00FF00White（白色）#FFFFFFMaroon（褐红色）#800000Yellow（黄色）#FFFF00浏览器将采用默认的设置bgcolor——白色或灰色text——黑色Link——蓝色vlink——紫色alink——红色例子：<BODY

bgcolor="#000000"text="#FFFFFF"link="#999999"vlink="#CCCCCC"alink="#666666">

<HTML><HEAD><TITLE>背景图案示例</TITLE></HEAD><BODYbackground="background.jpg">

背景图案示例</BODY></HTML>六、添加注释注释的作用HTML注释的格式由开始标记符构成标记符之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示例子：<HTML> <HEAD><TITLE>网页标题</TITLE> </HEAD> <BODY>正文，正文，正文</BODY> </HTML>注释可插入在Web页的任何位置七、显示特殊字符

特殊字符——参考字符（附录2）参考字符以“

&”号开始，以“

;”结束参考字符既可用数字代码表示，也可用代码名称表示与HTML标记符同，字符代码名称区分大小写例子：

<BODY><Tom&Jerry>isapopularVCDprogram.</BODY><Tom&Jerry>isapopularVCDprogram

特殊字符数字代码代码名称&&&<<<>>>空格

小结WWW由无数的Web服务器构成，通过浏览器访问这些服务器上的网页，不同的网页通过超链接联系在一起，构成了WWW的网状结构。HTML是表示网页的一种规范，它通过标记符定义了网页内容的显示。最基本的HTML标记符包括：HTML标记符<HTML>和</HTML>首部标记<HEAD>和</HEAD>正文标记<BODY>和</BODY>。BODY标记符包括一些常用属性，用于控制网页的基本显示效果。发布网页的基本过程为：制作本地站点、申请网页空间、上传网页。§2文本控制字体控制标记符物理字符样式滚动文字效果文本分段文本对齐列表格式一、字体控制标记符——<FONT></FONT>size属性——控制字符的大小size=""

字号从1~7,字号越大，默认值为3color属性——控制字符的颜色color=""使用颜色名称或十六进制值指定颜色face属性——指定字体样式face=""常用的英文字体有“TimesNewRoman”、“Arial”等常用的中文字体有“宋体”、“楷体”等例子：<FONTsize="2"face="宋体"color="#0000ff">例子一</FONT><FONTcolor="green">例子二</FONT><FONTface="ArialBlack，楷体"size=+1>例子三</FONT><FONTface=“隶书”

color=“yellow”size=“7”>例子四</FONT>二、物理字符样式指标记符本身就说明了所修饰文字的效果的字符样式使用方法：将设置格式的字符括在标记符之间由于带有超链接的文本下通常包含下划线，因此下划线格式易让人产生误解，建议使用时慎重常见的物理字符样式标记功能标记功能<B></B>粗体<STRIKE></STRIKE>删除线<BIG></BIG>大字体<SUB></SUB>下标<I></I>斜体<SUP></SUP>上标<S></S>删除线<TT></TT>固定宽度字体<SMALL></SMALL>小字体<U></U>下划线<HTML><HEAD><TITLE>物理字符样式效果示例</TITLE></HEAD><BODY><P><B>此处为粗体显示文本</B><P><BIG>此处为大字体文本</BIG><P><SMALL>此处为小字体文本</SMALL><P><I>此处为斜体文本</I><P><TT>此处为等宽字体文本</TT><P><U>此处为下划线文本</U><P><S>此处为使用<S>标记设置的删除线文本</S><P><STRIKE>此处为使用<STRIKE>标记设置的删除线文本</STRIKE><P>此处为上标示例：x<SUP>2</SUP>+y<SUP>2</SUP>=R<SUP>2</SUP><P>此处为下标示例：H<SUB>2</SUB>SO<SUB>4</SUB></BODY></HTML>三、滚动文字效果——<MARQUEE></MARQUEE>作用：标记符之间的内容以滚动的方式显示属性：width和height——滚动字幕滚动区域的宽度和高度align——滚动字幕与周围对象对齐的方式behavior——滚动字幕移动的方式bgcolor——滚动字幕区域的背景色direction——文本滚动的方向hspace和vspace——滚动字幕四周水平和垂直方向上的间隙loop——滚动重复的次数scrollamout——文本滚动的步进象素间距scrolldelay——两次文本重画之间的毫秒延时数<HTML><HEAD><TITLE>滚动字幕示例</TITLE></HEAD><BODY> <DIValign="center"> <MARQUEEbgcolor="#00FFFF"width="500">

<FONTface="楷体_gb2312">哈哈哈，我在滚动！</FONT> </DIV><BR> <IMGsrc="barbarian.jpg"align="absmiddle">图像也可以滚动哦！

<P>

我滚动的很快！

</MARQUEE></BODY></HTML>四、文本分段1.段落标记符——<P></P>将文档划分为段落可以省略</P>2.换行标记符——<BR>在文档中强制断行区别：<P>不能产生多个空行，而<BR>则可在内容之间设置多个空行，即形成空白<P>是断段，而<BR>是断行<HTML><HEAD><TITLE><P>与<BR>的用法</TITLE></HEAD><BODY> <P>第一段

<P>第二段，用<BR>标记符控制断行<BR>

仍然为第二段，但此行已经断开

<P>第三段

<P>第四段，多个<P>标记符并没有起到产生多个空行的效果<P><P><P><P>

但多个<BR>标记符可以产生多个空行效果<BR><BR><BR><BR><P>此为最后一段

</BODY></HTML>3.水平线标记符——<HR>在网页内容中添加水平线，分隔文档内容属性：size：水平线的粗细程度，用整数表示，默认值为2<HRsize="4">width：水平线的长度，用像素长度或宽度的百分比表示<HRwidth="60%"> <HRwidth="110">noshade：去除水平线的3D样式color：水平线的颜色align：水平线的对齐方式例子：<HRsize="5"withd="50%"color="red"align="center"noshade><HTML><HEAD><TITLE>水平线效果</TITLE></HEAD><BODY>

以下是默认水平线：<HR>

以下是粗为5像素的水平线：<HRsize="5">

以下是长度为100像素的水平线：<HRwidth="100">

以下是长度为屏幕宽度50%的水平线：<HRwidth="50%">

以下是粗为5像素的实心水平线：<HRsize="5"noshade>

以下是红色的水平线：<HRcolor="red"></BODY></HTML>4.标题标记符——<Hn></Hn>标识文档中的标题和副标题浏览器在解释标题标记符时，会自动改变文字的大小，并且将字体改为黑体，同时将内容设为一个段落n是1至6的数字，<H1>表示最大的标题，<H6>表示最小的标题例子：<HTML><HEAD><TITLE>标题效果</TITLE></HEAD><BODY><H1>此为一级标题</H1><H2>此为二级标题</H2><H3>此为三级标题</H3><H4>此为四级标题</H4><H5>此为五级标题</H5><H6>此为六级标题</H6><P>此为正常文本</P></BODY></HTML>五、文本对齐1.align属性设置段落的对齐格式取值：right（右）、left（左）、center（居中）justify（两端）应用范围：多种标记符，最典型的是应用于P、Hn、HR、DIV不同的标记符，其align属性的默认值并不相同标记符P、Hn的align属性默认值为left标记符HR的align属性默认值为center2.DIV标记符——<DIV></DIV>为文档分节，以便为文档的不同部分应用不同的段落格式必须与align等属性联合使用位于DIV标记符中的多段文本将被认为是一个节，可为它们设置一致的对齐格式。3.CENTER标记符——<CENTER></CENTER>将<CENTER>和</CENTER>包括起来的内容定义为居中对齐<HTML><HEAD><TITLE>使用align属性</TITLE></HEAD><BODY><P>本行为默认对齐的段落，相当于align="left"<Palign="center">本行为居中对齐的段落

<Palign="right">本行为右对齐的段落

<H1align="center">本行为居中对齐的一级标题</H1>

以下为左对齐的水平线：

<HRalign="left"width="50%"></BODY></HTML><HTML><HEAD><TITLE>使用DIV标记符</TITLE></HEAD><BODY><DIValign="center"><H1>浣溪沙</H1><H4>晏殊</H4><HRwidth="400"><P>一曲新词酒一杯，</P><P>去年天气旧池台，</P><P>夕阳西下几时回？</P><P>无可奈何花落去，</P><P>似曾相识燕归来，</P><P>小园香径独徘徊。</P></DIV></BODY></HTML>六、列表格式1.有序列表（Orderedlist）定义：一种在表的各项前显示有数字或字母的缩排列表

<OL> <LI>列表项1 <LI>列表项2 <LI>列表项3 </OL>OL标记符的属性：type——设置数字序列样式start——设置数字序列的起始值,值可以是任意整数当位于OL标记符内时，LI标记符的属性：type——设置数字样式，取值与OL的type属性相同value——设置一个新的数字序列起始值，以获得非连续性的数字序列值type属性的值含义1阿拉伯数字：1、2、3等，此项为默认值A大写字母：A、B、C等a小写字母：a、b、c等I大写罗马数字：I、II、III、IV等i小写罗马数字：i、ii、iii、iv等<HTML><HEAD><TITLE>有序列表示例</TITLE></HEAD><BODY>用大写罗马字母表示的有序列表：<OLtype="I">

<LI>列表项1<LI>列表项2<LI>列表项3</OL>起始数字为3的有序列表：<OLstart="3"><LI>列表项1<LI>列表项2<LI>列表项3</OL>编号不连续的有序列表<OL><LI>列表项1<LI>列表项2<LIvalue="5">列表项3</OL>变换了数字样式的有序列表<OL>

<LI>列表项1<LI>列表项2<LItype="A">列表项3</OL></BODY></HTML>有序列表的嵌套使用有序列表嵌套可以获得不同层次的编号列表。嵌套时，只需将内层列表作为外层列表的一个列表项即可。列表的嵌套层数没有限制。<HTML><HEAD><TITLE>嵌套的有序列表</TITLE></HEAD><BODY><H2>嵌套的有序列表</H2><OLtype="A"> <LI>列表项1 <OL> <LI>子列表项1 <LI>子列表项2 <LI>子列表项3 </OL> <LI>列表项2 <LI>列表项3</OL></BODY></HTML>2.无序列表（Unorderedlist）定义：一种在表的各项前显示有特殊项目符号的缩排列表。无序列表标记符<UL></UL>UL标记符的type属性——控制列表项前特殊符号的显示列表项标记符<LI></LI>LI标记符的type属性的值如下表所示：值type属性的含义disc实心圆，通常是非嵌套列表的默认值circle空心圆，通常是嵌套列表的默认值square实心或空心的方块，取决于浏览器在InternetExplorer中，type的值是区分大小写的

<HTML><HEAD><TITLE>无序列表示例</TITLE></HEAD><BODY>默认无序列表：<UL>

<LI>列表项1

<LI>列表项2

<LI>列表项3</UL>使用方块作为列表项标记的无序列表：<ULtype="square">

<LI>列表项1

<LI>列表项2

<LI>列表项3</UL></BODY></HTML>3.混合嵌套列表有序列表和无序列表也可互相嵌套，如以下HTML代码所示：<HTML><BODY><OL><LI>列表项1<LI>列表项2<UL><LI>子列表项1<LI>子列表项2</UL><LI>列表项3</OL></BODY></HTML>小结HTML中用于进行文本分段的标记符包括：段落标记符P、换行标记符BR、水平线标记符HR、标题标记符Hn等在标记符中使用align属性，可控制内容的对齐方式FONT标记符是最常用的控制字体格式的标记符，它可控制文字的字号、颜色以及字体物理字符样式和逻辑字符样式可控制文字的不同显示效果，例如设置粗体、斜体等MARQUEE标记符可以用于创建滚动文字效果OL和LI标记符结合，可以创建有序列表UL和LI标记符结合，可以创建无序列表§3图像与超链接Web页图像基础图像标记符统一资源定位器(URL)超链接标记符锚点链接图像映射一、Web页图像基础1.位图与矢量图位图矢量图描述方式用图片上每一点的信息来描述图像用线条和填充色等数学信息来描述图像编辑工具Photoshop、Fireworks、PhotoImpactFreeHand、Illustrator、CorelDraw、Flash存储量较大小显示效果与分辨率相关与分辨率无关位图，用点描述图像矢量图，用线条等数学信息描述图像2.Web页图像格式GIF格式GraphicsInterchangeFormat(图形交换格式)适用于颜色较少（小于256色）的图像压缩，并允许透明，也可以是动画JPEG格式JointPhotographicExpertsGroup(联合静态图形专家组)可控制图像的压缩比率,适用于颜色较为丰富的图像,不支持透明和动画PNG格式PortableNetworkGraphics(可移植网络图形)适用于矢量图像，并允许半透明3.使用网页图像的要点确保文件较小使图像具有所需的像素大小采用正确的格式进行优化处理控制图像的数量和质量合理使用动画图像的处理工具

Photoshop Fireworks Flash CorelDraw二、图像标记符——<IMG>在网页中插入图像或动画元素具体属性：src指定要显示的图像的文件名(URL)alt指定当图像无法显示或加载时显示的文字dynsrc动态源,指定到视频剪辑或VRMl文件的URLborder整数，图像边框的宽度align对齐方式：left、righttop、middle、bottomheight整数，图像的高度设置图像的高度和宽度width整数，图像的宽度hspace像素,水平方向的空白设置图像周围的空白vspace像素,垂直方向的空白插入图片<HTML><HEAD><TITLE>插入图像示例</TITLE></HEAD><BODY><P>我插入的第一幅图像：</P><IMGsrc=“1.jpg”alt=“人工湖"></BODY></HTML>插入视频<HTML><HEAD><TITLE>插入视频示例</TITLE></HEAD><BODY><H1>插入动态视频</H1><Palign="center"><IMGDynsrc="bike.avi"alt="骑单车"></P></BODY></HTML>图像与周围内容垂直对齐

align——top、middle、bottom<HTML><HEAD><TITLE>文本与图像的垂直对齐示例</TITLE></HEAD><BODY><DIValign="center"><P>此图像与文本顶部<IMGsrc="1.jpg"border="4"align="top">对齐</P><P>此图像与文本

<IMGsrc="2.jpg"border="1"align="middle">中央对齐</P><P>此图像与文本

<IMGsrc="3.jpg"border="1"align="bottom">底部对齐</P></DIV></BODY></HTML>图文混排时的图像对齐

align——left、right实现图文混排:left表示图像居左，文本在图像右侧；right表示图像居右，文本在图像左侧。解除在图像的左、右环绕文本:<BRclear=“left|right|all”>在插入标记<BRclear="left|right|all">的下一行文本将转入正常显示。三、统一资源定位器1.URL(UniversalResourceLocator，统一资源定位器)

——表示Web上资源的一种方法，通常可以理解为资源的地址组成协议代码装有所需文件的计算机地址具体的文件路径和文件名。例如：/forum/index.htm协议协议表明应使用何种方法获得所需的信息超文本传输协议：HTTP(HyperTextTransferProtocol)。

使用形式：http://webhostname.somedomain/path/filename.htm文件传输协议：FTP(FileTransferProtocol)。

使用形式：ftp://ftphostname.somedomain/path/filename.htm电子邮件协议：mailto。

使用形式：mailto:username@somedomain新闻组协议：news(Usenet)。

使用形式：news://newshostname.somedomain2.绝对URLInternet上资源的完整地址，包括完整的协议种类、计算机域名和包含路径的文档名其形式为：协议://计算机域名/文档名例如：/public/HTML/example.htmhttp表示用来访问文档的协议的名称表示文档所在计算机的域名public/HTML/example.htm表示文档名如果在网页中需要指定外部Intemet资源，应使用绝对URL说明省略了最后部分文件名的URL通常也认为是绝对URL，因为它能够完全定位资源的位置例如，就是一个绝对URL3.相对URL

Internet上资源相对于当前页面的地址，它包含从当前页面指向目的页面位置的路径例如：public/example.htm使用相对URL的好处在于当用户需要移植站点时，只要保持站点中各资源的相对位置不变，就可以确保移植后各页面之间的超链接仍能正常工作。用户在编写网页时，通常使用的都是相对URL(除非需要引用外部网页)如果在网页中需要指定内部资源，应使用相对URL相对URL本身并不能唯一地定位资源，但浏览器会根据当前页面的绝对URL正确地理解相对URL。说明在URL中，总是使用正斜杠(/)作为路径分隔符，而不是使用Windows或DOS中的反斜杠(\)。在客户端，点击不同类型的链接时，会自动启动相应的客户端软件来访问相应的资源。句点(.)——当前目录双重句点(..)——上一级目录(父目录)例如./image.gif表示当前目录中的image．gif文件，相当于image.gif；../public/index.htm表示与当前目录同级的public目录下的index.htm文件，也就是当前目录上一级目录下的public目录中的index.htm文件四、超链接标记符——<A></A>格式:<Ahref="链接目标">链接点</A>href属性：用于指定超链接的目标链接目标：要访问的目标页面或其他资源，使用URL来表示链接点：在<A>和<／A>之间任何可单击的网页元素，如文字或图像<P>我的<Ahref=“”>大学</A></P>？下载功能？？电子邮件链接功能？target属性？下载功能？如果href属性指定的文件格式是浏览器能直接显示或播放，那么单击超链接时就会直接显示相应的文件如果如果href属性指定的文件格式是浏览器不能直接显示或播放，那么单击超链接就可以获得下载功能？电子邮件链接功能？<Ahref="mailto:电子邮箱">链接点</A>请按时<Ahref=“mailto:zhaofengnian@263.net”>交作业</A>！单击电子邮件链接后会启动邮件程序五、锚点链接对同一网页的不同部分或不同网页的不同部分进行链接锚点链接必须先定义锚点，然后才能定义链接。锚点的定义：<Aname=“锚点名称”>[此处内容可省略]</A>定义链接<Ahref="#锚点名称">链接点</A>定义指向不同页面内锚点的链接，形式如下<Ahref="页面URL#锚点名称">链接点</A>相对URL绝对URL锚点链接六、图像映射在一幅图中定义若干个区域，每个区域中指定一个不同的超链接，当单击不同区域时便可以跳转到相应的目标页面。应用：电子地图、页面导航图、页面导航条热点hotspot电子地图页面页面导航图实例步骤：找出要定义区域的坐标例如，在图3-31中就要定义两个矩形区域，它们的坐标分别是“30,152,366,218”和“171,256,228,288”定义出映射区域——<MAP>编写HTML文件，在其中定义出映射区域<MAP

name="mymap"><AREA

href="file1.htm"shape="rect"coords="30,152,366,218"><AREA

href="file2.htm"shape="rect"coords="171,256,228,288"></MAP>使用映射区域在IMG标记符中引用映射区域<IMG

src="diablo_h.jpg"usemap="#mymap">rect、circle、poly、default标识图像映射中的区域边界图像映射效果<HTML><HEAD><TITLE>图像映射示例</TITLE></HEAD><BODY><MAPname="mymap"><AREAhref="file1.htm"shape="rect"coords="30,152,366,218"><AREAhref="file2.htm"shape="rect"coords="171,256,228,288"></MAP><P>请单击以下图像中的不同区域，以便跳转到不同的文件</P><P><IMGsrc="diablo_h.jpg"usemap="#mymap"></P></BODY></HTML>实训作业1.制作一个图文并貌的网页（??301

）至少3张图片、一个视频文件文字不少于三段，字数不少于100字至少用到<p><font><hr><hn>等标记符及align属性图片应分别满足以下排版要求：实现文本与图像的环绕文本居于图片左侧文字与图片在垂直方向上居中对齐2.制作一个具有锚点链接的网页（??302

）内容具有文字与图片锚点不少于四个既有页内锚点链接，又有页外锚点链接3.制作一个具有超链接功能的网页（??303

）具有绝对链接、相对链接、文件下载功能、电子邮件发送功能要求利用bgcolor、text、Link、vlink、alink等属性修改网页默认的文字、超链接信息的颜色4.制作一个简单的图像映射网页（??304

）§4Photoshop&FlashPhotoshopFireworkGIF动画Flash动画§5表格表格的定义表格的作用表格的构建步骤表格标记符网页布局一、表格的定义：

将按特定的行、列规则对内容进行排列<Caption></Caption>表格标题<Tr></Tr>表格的行<Th></Th>行列标题数据<Td></Td>普通数据<Table></Table>表格二、表格的作用：HTML表格模型使用户可以将各种数据（包括文本、预格式化文本、图像、链接、表单、表单域以及其他表格等）排成行和列，从而获得特定的表格效果用于设计网页的布局三、表格的构造步骤：使用TABLE标记符包括所有表格内容使用CAPTION标记符定义表格的标题从第一行开始，使用TR标记符分隔每一行表格有多少行，就应该有多少个TR标记符表格的行数应该是垂直方向上单元格的最大数在每一行(即TR标记符后)内，依次用TH或TD标记符标记每个单元格的内容按照步骤2的做法，顺次一行一行处理，直到表格结束如果遇到空单元格，只需使用空的TH或TD标记符即可<HTML><HEAD><TITLE>表格示例</TITLE></HEAD><BODY><TABLE><CAPTION><H2>课程表<H2></CAPTION><TR><TH><IMGsrc="fire.gif"><TH>星期一<TH>星期二<TH>星期三<TH>星期四<TH>星期五<TR><TH>第1大节<TD>数学<TD>英语<TD>数学<TD>英语<TD>哲学<TR><TH>第2大节<TD>物理<TD>计算机<TD>计算机<TD><TD>计算机<TR><TH>第3大节<TD>计算机<TD><TD>英语<TD>计算机<TD></TABLE></BODY></HTML>二、表格标签符：<Table></Table>标签符Width属性——表格宽度可以为像素点值或百分比Border属性——边线宽度具体数值，0表示不显示边线Frame属性——控制表格边框表示表格最外层的四条框线，该属性的取值可以是：Void——无边框。void是默认值，即默认时不显示边框Above——仅有顶框Below——仅有底框Hsides——仅有顶框和底框（水平方向）vsides——仅有左、右侧框（垂直方向）lhs——仅有左侧框rhs——仅有右侧框box——包含全部四个边框border——包含全部四个边框其它值——2、3、4rules属性——控制是否显示以及如何显示单元格之间的分隔线，取值可以是：none——无分隔线。none是默认值，即默认时不显示单元格间的分隔线rows——仅有行分隔线cols——仅有列分隔线all——包括所有分隔线Align属性——控制表格与页面其它内容的对齐方式，取值可以是：Left、center、rightBgcolor属性——设置表格的背景颜色background属性——设置表格的背景图案Cellspacing属性——单元格之间的距离cellpadding属性——分割线与数据之间的距离<HTML><HEAD><TITLE>表格的边框和分隔线示例</TITLE></HEAD><BODY><TABLEborder="4"frame="hsides"rules="rows"><CAPTION><H3>我的日程表<H3></CAPTION><TR><TH>星期一<TH>星期二<TH>星期三<TH>星期四<TH>星期五<TR><TD>MUD<TD>NBA2001<TD>联众军棋<TD>联众军棋<TD>笑傲江湖<TR><TD>DiabloII<TD>DiabloII<TD>联众军棋<TD>升级<TD>MUD<TR><TD>MUD<TD>睡觉<TD>学习<TD>打篮球<TD>打篮球</TABLE></BODY></HTML>cellspacing属性单元格之间的空白cellpadding属性表格分隔线和数据之间的距离<HTML><HEAD><TITLE>表格单元格空白示例</TITLE></HEAD><BODY>表格1<HRalign="left"width="50%"><TABLEbordercellspacing=10><TR><TD>大话西游<TD>大内密探008<TD>少林足球<TR><TD>鹿鼎记<TD>喜剧之王<TD>九品芝麻官<TR><TD>逃学威龙<TD>食神<TD>百变金刚</TABLE><P>表格2<HRalign="left"width="50%"><TABLEbordercellpadding="10"><TR><TD>大话西游<TD>大内密探008<TD>少林足球<TR><TD>鹿鼎记<TD>喜剧之王<TD>九品芝麻官<TR><TD>逃学威龙<TD>食神<TD>百变金刚</TABLE></BODY></HTML><Caption></Caption>标签符定义表格的标题align属性——表格标题在网页中的对齐方式取值为：left、center、right<Captionalign=“center”>成绩单<Caption><TR></TR>标签符定义表格的一行align属性——行中数据的水平对齐方式取值为：left、center、rightvalign属性——行中数据的垂直对齐方式取值为：top、middle、bottomBgcolor属性——整行单元格的背景颜色<HTML><HEAD><TITLE>表格数据的水平对齐</TITLE></HEAD><BODY><TABLEborder><CAPTION><H3>表格数据的水平对齐</H3></CAPTION><TRalign="right"><TD>本行数据右对齐<TD>右<TD>右<TR><TD>左<TD>本行数据为默认左对齐<TD>左<TRalign="center"><TD>中<TD>中<TD>本行数据居中对齐</TABLE></BODY></HTML><HTML><HEAD><TITLE>表格数据的垂直对齐</TITLE></HEAD><BODY><TABLEborderalign="center"><CAPTION><H3>表格数据的垂直对齐</H3></CAPTION><TRvalign="top"><TD><IMGsrc="barbarian.jpg"><TD>野蛮人<TD>barbarian<TR><TD><IMGsrc="sorceress.jpg"><TD>女巫<TD>sorceress<TRvalign="bottom"><TD><IMGsrc="necromancer.jpg"><TD>巫师<TD>necromancer</TABLE></BODY></HTML><TD></TD>标签符定义行中的具体单元格align属性——单元格内数据的水平对齐方式取值为：left、center、rightvalign属性——单元格内数据的垂直对齐方式取值为：top、middle、bottombgcolor属性——单元格的背景颜色width属性、height属性——单元格宽度、高度具体数据值或百分比rowspan属性——单元格所占的行数<TDrowspan=“3”>表示该单元格高度为三行colspan属性——单元格所占的列数<HTML><HEAD>

<TITLE>合并单元格示例</TITLE></HEAD><BODY><TABLEborder=1><CAPTION><H2>学生情况表</H2></CAPTION><TR><!-第一行--><THrowspan=“2”>学号</TH><THcolspan=“3”>个人信息</TH><THcolspan=“2”>入学信息</TH><TR><!-第二行-->

<TD>008<TD>任我行<TD>男<TD>20<TD>888888<TD>2001年9月</TABLE></BODY></HTML>在网页中显示班级的功课表（??401

）在网页中插入如下形式的表格（??402

）实训作业五、使用表格设计网页布局善于运用嵌套表格善于运用背景色设置细线图4-12表格布局综合实例1图4-13表格布局综合实例2图4-14表格布局综合实例3图4-15表格布局综合实例4图4-16表格布局综合实例5§6框架框架的概念框架的作用框架标签符框架中的超链接页内（浮动）框架框架结构的网页框架结构的联机帮助系统一、定义：能在同一个浏览器窗口中显示多个网页的页面布局控制容器二、作用：网站导航功能将浏览器窗口划分为不同的部分，每部分中装载不同的网页，通过为超链接指定目标框架，可以为框架之间建立起内容之间的联系，因而实现页面的导航和页面间的交互操作联机帮助三、框架标记符及格式<FRAMESET>

<FRAME>

</NOFRAMES></FRAMESET>

框架集标记符，是框架容器，框架必须定义在框架集之内定义浏览器不支持框架技术时所要显示的替代内容，必须包含在<FRAMESET>标记符之中，可选框架标记符，定义一个框架，必须包含在<FRAMESET>标记符之中,也可以嵌套<FRAMESET><html><head><title>框架</title></head><FRAMESETcols=“100,*,100”><FRAMEsrc=“1.html”><FRAMEsrc=“2.html”><FRAMEsrc=“3.html”><NOFRAMES>

<BODY>不支持框架技术，很抱歉！</BODY></NOFRAMES></FRAMESET></html><HTML><HEAD><TITLE>嵌套框架</TITLE></HEAD><FRAMESETrows="100,*"><FRAMEsrc=“1.html”><FRAMESETcols="150,*"><FRAMEsrc=“2-1.html”><FRAMEsrc=“2-2.html”></FRAMESET><NOFRAMES><BODY><P>太遗憾了，您的浏览器不支持框架！/P></BODY></NOFRAMES></FRAMESET></HTML>1.框架集标记符——<FRAMESET></FRAMESET>rows属性：设置横向框架cols属性：设置纵向框架例子：<HTML><HEAD>

<TITLE>框架集网页</TITLE></HEAD><FRAMESETcols="200,*">

<FRAME>

<FRAME></FRAMESET></HTML>2.框架标记符——<FRAME></FRAME>name属性：框架的名称src属性：框架的初始页面frameborder属性：是否显示边框（[1|0]）marginwidth属性：边距宽度marginleft属性：边距高度noresize属性：禁止修改框架尺寸scrolling属性：是否有滚动条（[yes|no|auto]）例子：<HTML><HEAD><TITLE>初始化框架</TITLE></HEAD><FRAMESETrows="100,*"><FRAMEsrc="tu23_1.htm"><FRAMESETcols="200,*"><FRAMEsrc="tu23_2.htm"><FRAMEsrc="tu23_3.htm"></FRAMESET></FRAMESET></HTML>四、框架中的超链接链接：<Ahref="目标文件"target="目标框架名">超链接点</A>特殊框架名_top

_self_blank_parent第六周实训作业1：利用框架结构将多个网页组织在一个浏览器窗口中（上/左右结构）<meta>标记符<marquee>标记符右框架中的网页必须有图文排版的方式多少个html文件？四、页内框架——浮动框架<IFRAME>插入到网页中作为一个对象来使用的。属性，可以控制页内框架的显示：src指定要在页内框架中显示的网页的URL，即初始页面；width＝x指定页内框架的宽height＝y指定页内框架的高align＝top｜middle｜bottom｜left｜right指定页内框架对齐方式frameborder＝1｜0指定页内框架是否采用边框；name＝“...”指定页内框架的名字scrolling＝yes｜no｜auto指定页内框架是否加滚动条；marginwidth＝x指定页内框架水平方向上内容与边框的间隔arginheight＝y指定页内框架垂直方向上内容与边框的间隔<HTML><HEAD>

<TITLE>页内框架示例</TITLE></HEAD><BODY><TABLE><TR><TDcolspan="2"height="100"bgcolor="#cccccc"><H1align="center">李白</H1><TR><TDwidth="200"bgcolor="#eeeeee"><H3align="center"><Ahref="file4.htm"target="poem">静思</H3><H3align="center"><Ahref="file5.htm"target="poem">怨情</H3><TD><IFRAMEsrc="file3.htm"width="400"height="300"name="poem">真可惜，您的浏览器不支持框架！</IFRAME></TABLE></BODY></HTML>第七周页内框架PhotoshopFlash如何在网页中插入flash动画？<object></object><embed></embed><objectcodebase=/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0height=113width=357classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000><paramname="movie"value="gdswf/gdxs.swf"><paramname="quality"value="high"><paramname="wmode"value="transparent">

<embed

src="gdswf/gdxs.swf"

width="357"height="113"quality="high"pluginspage="/go/getflashplayer"

type="application/x-shockwave-flash" wmode="transparent"></embed></object>六、表单1.定义：用于实现网页浏览者与服务器（或者说网页所有者）之间信息交互的一种页面元素，在WWW上它被广泛用于各种信息的搜集和反馈。图

5-1表单示例

1表单示例

1表单示例2表单的基本工作原理：浏览者在表单中填写或选择信息；单击“提交”按钮，填写或选择的信息按照指定的方式通过网络传递到服务器端；由服务器端的特定程序进行处理处理的结果：返回一个页面例如：通知注册成功的页面在服务器端完成特定功能例如：在数据库中记录下新用户的信息）表单不但需要在网页中用HTML进行显示，而且还需要服务器端特定程序的支持

<HTML><HEAD><TITLE>单行文本框和口令框示例</TITLE></HEAD><BODY><DIValign="center"><H2>表单——单行文本框和口令框</H2><HR><FORM>

请输入您的姓名：

<INPUTname="name"value="yournamepls"size="30"><BR>

请输入您的密码：

<INPUTtype="password"name="pwd"value="pwd" size="30"><P> <INPUTtype="submit"name="submit_button"value="提交"></FORM><HR></DIV></BODY></HTML>表单的结构：<表单标签符> <控件标签符1></控件标签符1> <控件标签符2></控件标签符2></表单标签符>2、表单的标签符——FORM格式：<FORM

action=“服务器端程序的URL”method=“get｜post”

enctype=“type”>

</FORM>

用户数据提交给服务器的方法处理已提交表单数据的程序，该程序必须能够处理表单数据表单发送时所使用的内容类型2、表单的标签符——FORM属性提交——method属性get方法：在URL的末尾附加要向服务器发送的信息。

如：/login.php?user=xxx&password=xxxxxxpost方法：将发送给服务器的表单数据作为一个数据体发送的。处理——action属性提供处理表单的程序的地址，程序存放在Web服务器上程序常用的语言有ASP、PHP、JSP、Perl等内容类型——enctype属性application/x-www-form-urlencodedmultipart/form-datatext/plain使用电子邮件收集表单信息将action属性设置为mailto:someone@将enctype属性设置为：“text/plain”(以便以纯文本格式提交表单数据)例如：<FORMmethod=“post”

action=“mailto:someone@”

enctype="text/plain">

</FORM>3、控件的标签符控件的类型：文本框口令框——password复选框——checkbox单选框——radio文件选择框——file按钮——submitresetbutton多行文本框——<textarea>选项菜单——<select>3、控件的标签符——文本框与口令框<HTML><HEAD><TITLE>单行文本框和口令框示例</TITLE></HEAD><BODY><DIValign="center"><H2>表单——单行文本框和口令框</H2><HR><FORM>

请输入您的姓名：

<INPUTname="name"value="yournamepls"size="30"><BR>

请输入您的密码：

<INPUTtype="password"name="pwd"v

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

温馨提示

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

2023学年完整公开课版HTML基础教程

文档简介

温馨提示

最新文档

评论

2023学年完整公开课版HTML基础教程

文档简介

温馨提示

最新文档

评论

相关文档