《网页制作》第三讲-HTML的认识

网页与多媒体技术教育技术与信息中心关继夫办公室：教育技术楼101室E-mail：1第三章：HTML的认识3.0HTML的定义与标签3.1HTML的根本结构3.2页面排版的根本元素3.3清单列表的设计3.4表格3.5图片与多媒体3.6在网页中建立超链接3.7框架网页的html语言3.8交互网页的制作2第三章：HTML的认识具体安排1、认识html:标签<>->标记->属性(值)->结构2、认识一些标记及属性3、重点：*学会清单网页的制作*学会嵌入声音*学会书签链接*学会交互网页的制作*学会meta的设置33.0HTML的定义与标签3.0.1HTML的定义HTML〔HypertextMarkupLanguage〕的英文缩写,即超文本标记语言。它不需要编译,可以直接由浏览器执行，属于浏览器解释型语言，HTML文件是一个文本文件,包含了一些HTML元素,标签等；HTML文件必须使用html或htm为文件名后缀。HTML不是程序语言，是描述文档结构的标记语言，对WWW上的各种信息进行标记，浏览器会自动根据这些标记，在屏幕上显示出相应的内容。43.0HTML的定义与标签3.0.2HTML的标签html它通过标签来分割和标记文本中的各个元素，html以“<”表示一个标签的开始，紧跟着的是标记名和该标记的各种属性，最后用“>”表示结束。例如：<AHREF=://>“A”是标签名，“HREF”是标签的属性。HTML标签分为单标记指令和双标记指令，一般成对出现，并用“/”表示标签之间的响应。每一对标签的作用范围在这两个标签之间，同时标签允许嵌套。53.0HTML的定义与标签3.0.2HTML的标签例如：“1标签的认识.htm”63.1HTML的根本结构73.1HTML的根本结构3.1.1html元素的三种表达方式<标记>对象</标记><标记属性1=参数1属性２=参数２>对象</标记><标记>3.1.2超文本文件格式的约定和限制*在html中回车表示下一段，<br>标记标识下一行*源文件列宽不受限制*在操作系统中用“\”表示路径，在超文本中用“/”表示路径*在超文本中可以用<IMG>标记插入图形图像

83.2页面排版的根本元素3.2.1<title>标记和<hx>标记

*<title>和</title>标记用来说明文档的标题，标题显示在浏览器最上方的标题栏内。*<hx>是字体标记，用于对文件中的文章章节进行划分。其中的x可以取值为1到6，用于表示各级标题，标号越小，标题字体越大。

93.2页面排版的根本元素3.2.1<title>标记和<hx>标记

*例如：“2标题.htm”

103.2页面排版的根本元素3.2.1<title>标记和<hx>标记

113.2页面排版的根本元素3.2.2设置字体的标记与属性*字体标记、属性与值的认识<font属性值>…</font>*属性：size、color、face等*size：指定文字大小*color：指定文字颜色*face：指定字体123.2页面排版的根本元素3.2.2设置字体*设置字体大小-例如：“3字体大小.htm”

133.2页面排版的根本元素3.2.2设置字体*物理字体设置-例如：“4物理字体.htm”

143.2页面排版的根本元素3.2.2设置字体*字体颜色设置-例如：“5字体颜色.htm”

153.2页面排版的根本元素3.2.2设置字体*逻辑字体设置-例如：“6逻辑字体.htm”

163.2页面排版的根本元素3.2.2设置字体*物理字体与逻辑字体物理字体与逻辑字体有相似效果，但是一般来说，物理字体主要指明字形的变化；逻辑字体指明文字的用途，进而决定其字形的变化，对于两者均可的情况可以随意而选。173.2页面排版的根本元素3.2.2设置字体*文字闪烁-例如：“7文字闪烁.htm”

183.2页面排版的根本元素3.2.3设置段落标记-HTML中常用的段落标记有下面几个：*段落标记<p>...</p>*保存段落编辑标记<pre>…</pre>*段落缩进标记<BLOCKQUOTE>…<BLOCKQUOTE>*文字换行标记<BR>,它是一个单标记指令，与此相反的标记是<nobr>…</nobr>。〔在dreamweaver中演示〕193.2页面排版的根本元素3.2.3设置段落标记-例如：“8段落标记.htm”203.2页面排版的根本元素<div>…</div>与<span>…</span>标记*<div>标记：主要应用在CSS的引用中，主要用来定义一个区域局部〔块〕；在很多时候它就相当于<p>标记，而<div>标记和层标记也有区别，层标记要在<div>标记中设定名称和位置。*<span>标记与<div>标记一样都是容器标记。<div>与<span>的区别在于，<div>是一个块级元素，它包围的元素会自动换行。而<span>仅仅是一个行内元素，在它的前后不会换行。<span>没有结构上的意义，纯粹是应用样式，当其他行内元素都不适宜时，就可以使用<span>元素。213.3清单列表的设计3.3.1符号清单列表“9清单综合例如.htm”*清单用于列举事项,常用的清单有符号清单和标号清单,清单允许嵌套*符号清单(“选项清单”和“说明式清单”)工程左边无编号,以特殊符号表示。*选项清单格式如下：223.3清单列表的设计3.3.1符号清单列表-清单前的符号可以由最外层标记中参加标记属性type来控制,格式为:<menutype=#>其中,#表示符号名称。-主要有以下三种:*DISC…………….实心圆点*Circle………….空心圆点*SQUARE………….实心方块233.3清单列表的设计3.3.1符号清单列表*说明式清单格式如下：DL：定义列表(DefinitionLists)DT：定义述语(DefinitionTerm)DD:定义释义(DefinitionDefinition)243.3清单列表的设计3.3.2标号清单*标号清单就是清单各工程左边加上数字符号或其他有序的标号，并可设定从何处开始计数，由浏览器自动给予编号。该标记有两种属〔type和start〕，在<OL>标记中设定253.3清单列表的设计type数字形式属性*标号清单除默认阿拉伯数字设置外，还可用type属性设置其他格式的数字start起始数字属性*<OLSTRAT=#>,#代表起始数字3.3.3清单嵌套：是指清单内又有另一层清单263.3清单列表的设计清单运用的例如-例如：“9清单综合例如.htm”273.4表格3.4.1表格的根本形式表格起始标记<table>：用于标识一个表格。表格行标记<tr>：用于定义表格的一个行。表格有多少行就有多少个<tr>…</tr>标记。在一个<tr>标记内可以包含假设干个由<th>和<td>标记所定义的单元格单元格标记<td>：<td>标记用于定义表格的单元格，表格有多少个单元格就有多少个<td>…</td>标记。使用<td>标记时，必须将其放在<tr>标记内。标题单元格标记<th>：<th>用于定义表格内的标题单元格，文字将以粗体的方式显示。283.4表格3.4.1表格的根本形式在建立最根本的表格时，必须包含一个<table>标记、一个<tr>标记和一个<td>标记。

其语法如下：<table> <tr> <td></td></tr></table>293.4表格3.4.1表格的根本形式表格例如-例如：“10表格.htm”

303.4表格3.4.2表格的属性border属性:功能是设置表格边框的宽度，标记格式为：〈tableborder=#〉其中，#为数字，单位是pixel〔像素〕，默认值为0。<width>属性：功能是设定整个表格的宽度，有绝对方式和相对方式两种。如：<tableborder=#width=300>；<tableborder=#width=80%>。其中，绝对宽度的单位为pixel，此标记的默认值为自动匹配。<bgcolor>属性：功能是设置背景颜色。标记格式为：<tablebgcolor=#value>…</table>313.4表格3.4.2表格的属性<cellspacing>属性：功能是设置框线的宽度。标记格式为：<tablecellspacing=#>……</table>其中，#为数字，单位是pixel〔像素〕，默认值为1。<cellpadding>属性：功能是设置数据与边框的宽度，标记格式为：<tablecellpadding=＃>…</table>其中，#为数字，单位是pixel〔像素〕，默认值为1。323.4表格3.4.2表格的属性表格属性例如-例如“11表格2.htm”333.4表格3.4.2表格的属性表格属性例如-例如“11表格2.htm”343.4表格3.4.3单元格的属性单元格属性指的是每一个表格中的格，表达在HTML标记中就是<th>和<td>标记的属性设定。<width>属性：设定单元格的宽度，单位是pixel。如：<thwidth=100>产品名称</th><height>属性：设定单元格的高度，单位是pixel。如：<thheight=30>产品名称</th>353.4表格3.4.3单元格的属性<align>属性：设定单元格的水平对齐方式，如：<thalign=#>产品名称</th>，其中，#为left，right，center三者之一。<valign>属性：设定单元格的垂直对齐方式，如：<thvalign=#>产品名称</th>，其中，#为top，middle，low三者之一。363.4表格3.4.3单元格的属性<bgcolor>属性：设定单元格的背景颜色，如：<thbgcolor=#FF0000>产品名称</th><nowarp>属性：强制单元格的内容不换行，该标记没有属性值，如果不加此属性那么单元格默认为自动换行。373.4表格3.4.3单元格的属性单元格属性例如-例如“12表格水平对齐.htm”383.4表格3.4.3单元格的属性单元格属性例如-例如“12表格水平对齐.htm”393.4表格3.4.3单元格的属性单元格属性例如-例如“13表格垂直对齐.htm”403.4表格3.4.4合并单元格合并单元格例如-“14合并单元格.htm”413.4表格3.4.5表格标题<caption>属性：设定表格标题。效果为标题居中显示。标记格式为：<caption>…</caption>。423.4表格表格的综合例如例如：“15表格综合例如.htm”433.4表格表格的综合例如443.5图片与多媒体3.5.1嵌入图片与<IMG>标记的属性嵌入图片的标记：<IMGSRC=“#”>，#为图片的URL地址。width属性：设定图片的显示宽度，其值可以是数字或百分比，单位是pixel〔像素〕默认值是原始宽度。height属性：设定图片的显示高度，其值可以是数字或百分比，单位是pixel〔像素〕默认值是原始高度。border属性：设定图片的边框宽度，其值可为数字，单位是pixel默认值是0。hspace属性：设定图片在浏览器中的水平位置，其值可为数字，单位是pixel默认值是0。453.5图片与多媒体vspace属性：设定图片在浏览器中的垂直位置，其值可为数字，单位是pixel默认值是0。align属性：设定文字和图片的相对位置，可取值为top、middle、bottom、left和right。alt属性：此属性作用是对图片进行说明，当鼠标置于图片之上时就会出现关于该图片的说明。而当浏览器的显示图片功能关闭时，以alt所设定的文字取代图片显示为图片的位置，这样，浏览者往往可以从这些文字中看出图片所要展示的内容。需要注意的是，文字要用一对引号包含起来，此属性的默认值为不显示任何文字。

463.5图片与多媒体嵌入图片的例如-如“16嵌入图片.htm”473.5图片与多媒体3.5.2嵌入声音目前在网页中可以嵌入的声音后缀为.wav、.au、.mid、.mp3、.wma等几乎所有音频文件。使用超链接标记用超级链接标记将声音文件放在网页上，当浏览者点击超级链接时浏览器将声音文件下载到浏览者机器硬盘上，再调用相应的播放程序播放。483.5图片与多媒体使用超链接标记*例如：“17嵌入声音1超链接.htm”493.5图片与多媒体使用自动播放标记使用<embed>标记：如：<embedsrc=“声音文件的URL”>-这个标记有四个属性*width：指定播放的影音文件的宽度。*height：指定播放的影音文件的高度。*autostart：指定播放的影音文件是否为自动播放，即其值为true或no，默认值为no*loop：指定播放的影音文件的次数，其值可为true或no

503.5图片与多媒体使用自动播放标记使用<embed>标记：

*例如：“18嵌入声音2自动播放.htm”513.5图片与多媒体使用自动播放标记使用<bgsound>标记：

-<bgsoundsrc=“文件”loop=#>，#用来设定播放次数，#=-1为循环播放。

*例如：“19嵌入声音3自动播放.htm”523.5图片与多媒体3.5.3嵌入多媒体可以嵌入如：.mov、.mpg、.dat、.avi、.gif为后缀的动画或影片。可以用超级链接和<embed>标记实现。

嵌入这些都媒体的方式同嵌入声音的前两种方式是相同的。

533.6在网页中建立超链接3.6.1超链接标记及其属性超链接标记<A>…</A>HREF=”URL”：指定超链接文件的位置。NAME=”…”：用以创立书签，指定书签名称。TARGET=”…”：用以指定目标框架的名称。_blank,_self,_parent,_top。ACCESSKEY=”…”：指定超链接的存取按键，当浏览者按下ACCESSKEY属性所指定的按键时，网页的焦点就会移动到组件上。543.6在网页中建立超链接3.6.1超链接标记及其属性ET=”…”：指定超链接的字元编码方式。比方通用字元集〔ucs〕就是采用4个字节的编码方式，而unicode那么是采用2个字节的编码方式。REV=”…”：从HREF指定的文件到当前文件之间的关联。HREFLANG=”langcode”：指定HREF属性值的语种。TABINDEX=”n”：指定<A>组件在网页中的TAB键顺序值。title属性：使链接,表单等HTML元素带有提示文字。553.6在网页中建立超链接3.6.2创立超链接指向本地网页的超链接，不需要绝对地址。相对地址就可以。指向其他网页的链接。页面的特定局部链接：即书签链接*做标签链接的方法--首先写出所有内容，然后在被链接的地方设置一个锚点，再在链接的地方建立超链接。链接至E-mail地址的超链接563.6在网页中建立超链接书签链接例如：如：“20书签链接.htm”*在被链接处放置锚点<p><aname=“liudehua"></a>刘德华是四大天王之一</p><p><aname="zhangxueyou"></a>张学友已经结婚了</p>*在链接处创立超链接<p><ahref=“#liudehua”>刘德华</a>和<ahref="#zhangxueyou">张学友</a></p>573.6在网页中建立超链接3.6.3链接至E-mail地址的超链接例如：“21E-mail链接”583.7框架网页的学习与框架有关的标签*<FRAME>：指定一个框架*<FRAMESET>…</FRAMESET>：创立一个框架集*<FRAME>在<FRAMESET>…</FRAMESET>之内，用以控制如何在框架中显示一个文档。593.7框架网页的学习FRAME的属性：*Src=”xxx.html”，指定文档路径。*Name=”xxx”，给框架起个名字。*Marginwidth，Marginheight，指定边线的宽窄。*Scrolling：指明是否需要在框架上加上滚动条，其值为no，yes，auto*Target=”xxx”，确定把一个框架中的文档置于何处〔自己所在的框架、其他框架、新窗口或者是整个浏览器〕。603.7框架网页的学习target除了可以指向有name命名的框架外，还可以有以下一些值：target=”_blank”：载入一个新框target=”_self”：载入调用者所在框target=”_parent”：载入调用者的母框target=”_top”：载入整个窗口，退出框架模式<noframe></noframe>：用来在浏览器不显示框架时显示内容，对于显示框架的浏览器将忽略此时标签内所包含的内容。Frameset的属性：cols：将整个文档纵向划分。rows:将整个文档横向划分Cols和rows的参数定义了各个框架的大小。它们可以用像素个数表示，也可以用占屏幕的百分比表示。613.8交互网页的制作如果客户想要通过WWW进行网上注册、交谈、输入口令和查询条目等操作，就必须使用交互元素，这些元素仅仅提供一个接口界面，效劳器端还必须有相应的程序来处理客户的信息。“22交互网页综合例如.htm”3.8.1交互元素所实现的主要功能确定交互方式，是发送信息还是接收信息；定义输入信息的类型，是普通文本、口令还是图形；用选择的方式输入信息，既可以定义选择框也可以定义选择菜单。〔在dreamweaver中的实现〕623.8交互网页的制作3.8.1交互元素所实现的主要功能实现这些功能都需要在form语句段中用特定的元素来标记，主要有<form>、<input>等元素和其他提示信息组成，这个语句段的结构可以简写成：<form…>〔交互语句段开始，并定义交互方法等〕。‘…’〔其他提示信息和说明信息〕<input…>〔输入元素的描述，可以有多个〕<textarea…></textarea>〔定义输入信息区的元素〕<select…>〔通过选择菜单输入信息〕<option…><option…>‘…’〔选择项变元的说明〕</select>〔选择菜单语句段结束〕……</form>〔交互语句段结束〕。633.8交互网页的制作3.8.2定义交互方法的<form>元素交互网页例如：如：“22交互网页综合例如.htm”在例如中几乎包含了所有关于交互式网页的内容，交互式网页可以看成是表单网页。可以将交互式网页分为二个层次来看。一个是<form>…</form>。另一个是<input>…</input>。643.8交互网页的制作3.8.2定义交互方法的<form>元素第一个层次：<form>…</form>*它表示交互语句段的开始和结束，在<form>属性设置里，可以定义交互式网页的一些内容。主要设置内容如下：*action=”url”激活处理交互信息的程序，实现客户机和HTTP效劳器的连接。*method=post指定为发送form信息*method=get指定为获得form信息*653.8交互网页的制作3.8.2定义交互方法的<form>元素第一个层次：<form>…</form>*name:给表单起一个名字*MIME编码:选择表单传入数据的编码方式。在Form元素的语法中，EncType说明提交数据的格式。enctype=“multipart/form-data”主要用于文件数据的上传，application/x-www-form-urlencoded编码格式，不能用于文件上传。*目标:指定一个窗口，在该窗口中显示被调用程序所返回的数据。*663.8交互网页的制作3.8.3<input>元素描述特性字段：第二个层次：<input>…</input>

它是输入元素的描述，在一个表单中，根据需要可以有很多个<input>标签。*type：描述输入操作的类型。我们可以使用text、password、checkbox、radio、image、hidden、submit以及reset等方式。*name：描述响应操作的CGI变元名称，只有在输入类型为按钮，即type=submit或type=reset时，name字段才能省略。*673.8交互网页的制作3.8.3<input>元素描述特性字段：第二个层次：<input>…</input>*value：赋值字段，描述要在对话框中显示的内容或者给字段和变元赋值。按钮类，submit、reset，用指定的字符串作为按钮替换名称，如type=resetvalue=”clear”，那么显示的按钮名称那么变成clear；文本类，text，显示在输入框中的内容；其他，hidden、检查框，作为变元name的缺省值。*size：定义对话框的长度〔以字符为单位〕。*maxlength：允许输入的字符串长度限制。*683.8交互网页的制作3.8.4类型字段TYPE的描述格式：Type=text：表示创立一个输入为单行文本框。Type=textarea：表示创立一个输入为多行文本框。Type=password：表示创立一个输入为密码类型的单行文本框。这种类型输入的文字用*号或·表示。type=checkbox：表示创立多项选择框元素。type=radio：表示创立单向选择框元素。注意：同一组的单项选择框中的name必须相同，如果不同，将变成多项选择的形式。*693.8交互网页的制作3.8.4类型字段TYPE的描述格式：type=file：表示创立文件选择域。type=submit：表示创立选择执行按钮。type=reset：表示创立重置按钮。type=hidden：不在浏览器中出现，只作为传输数据使用，隐含输入类型字段经常与检查框type=checkbox或type=radio一起使用；第一，他是一个隐藏域，不显示在浏览器中，第二，它用来传输处理数据。一般的传输的数据就是name值与它相同的元素的信息。*703.8交互网页的制作3.8.5选择菜单元素SELECT和OPRION：SELECT元素主要用来定义菜单的大小、指定变元名称。它的描述字段有：*size：确定菜单的大小，它的单位是行数。*name：指定变元的名称。即