版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第2章网页设计的基本描述语言HTML2.1HTML概述2.2HTML文档的构成2.3HTML元素第2章网页设计的基本描述语言HTML2.1HTML概述12.1HTML概述HTML(HypertextMarkupLanguage)：是一种规范，是一种标准。他是通过标记符(tag)来标记显示网页的各个部分。所有网页都是HTML格式的文件。HTML通过元素来告诉浏览器如何处理两个标记符之间的信息。HTML元素的格式：<标记>正文</标记>2.1HTML概述HTML(HypertextMarku22.2HTML文档的构成网页总是以<html>标记开始，在文件的末尾以</html>结束，表示文件是HTML格式。网页文件通常有两部分组成：头部(head)和主体(body)。2.2HTML文档的构成网页总是以<html>标记开始，在31.HTML文档的基本结构<HTML><head>
……</head><body>
HTML文件的正文写在这里
</body></HTML>标记和标记对1.HTML文档的基本结构<HTML>标记和4注释标记<!--><!--注释内容-->(1)格式:(2)功能与说明:注释内容不显示在网页上;主要功能是提高代码的可读性.注释标记<!--><!--注释内容-->(1)52.HTML元素<标记名属性名="属性值"…>内容</标记名>起始标记结束标记,有些标记可以省写结束标记2.HTML元素<标记名属性名="属性值"…>起始标62.3HTML元素类别允许包含的元素文档结构元素HTML,HEAD,BODY,FRAMESET头部元素TITLE,META,LINK,BASE,STYLE块元素CENTER,Hx,ADDRESS,PRE,P,BR,DIV列表元素DIR,DL,DT,DD,LI,OL,UL表格元素TABLE,TR,TD,TH,CAPTION表单元素FORM,INPUT,SELECT,OPTION,TEXTAREA超链接元素A,MAP,AREA字符格式元素FONT,B,I,U,S等帧元素FRAMESET,FRAME,NOFRAME,IFRAME图片元素IMG层元素DIV,SPAN,LAYER,ILAYER脚本元素SCRIPT内嵌对象元素APPLET,OBJECT,PARAM,EMBED2.3HTML元素类别允许包含的元素文档结构元素HTML,72.3.1文档结构<HTML><head>
……</head><body>
HTML文件的正文写在这里
</body></HTML>2.3.1文档结构<HTML>81.文档标记HTML<html>……</html>1.文档标记HTML<html>……</html>92.文档头标记<head>……</head>头部元素：头部用<head>表示开始，用</head>表示结束。标签用于定义文档的头部，它是所有头部元素的容器。在头部元素中我们一般都会用到<title></title>，他是网页的标题，将显示在网页的标题栏当中。2.文档头标记<head>……</head>头部元102.3.2头部元素<TITLE></TITLE><META><LINK><STYLE></STYLE><BASE>可以嵌套在head元素中的元素。2.3.2头部元素<TITLE></TITLE>可以嵌111.TITLE标记<title>……</title>功能:设置网页标题.说明:该标记只能嵌入在<head>…</head>标记对中使用.1.TITLE标记<title>……</title>122.META标记<meta>……(1)功能:指明网页作者、制作工具等.(2)说明:
该标记可以重复出现在<head>标记对中;该标记中的信息不显示在网页中.2.META标记<meta>……(1)功能:指明网13<METAname=“keywords”content=“关键字"><METAname=“description”content=“描述”><METAname=“author”content=“作者”><METAhttp-equiv=“expires”content=“过期时间”><METAhttp-equiv=“refresh”content=“刷新周期”><METAhttp-equiv=“content-type”content=“编码方式”><METAname=“keywords”conten143.其他标记LINK最常见的用途是链接样式表。STYLEBASE标签为页面上的所有链接规定默认地址或默认目标。3.其他标记LINK最常见的用途是链接样式表153.文档体标记<body>……</body>3.文档体标记<body>……</body>16文档体标记<body>的常用属性属性功能描述link设定页面默认的链接颜色alink设定鼠标正在单击时的链接颜色vlink设定访问后链接文字的颜色background设定页面背景图像bgcolor设定页面背景颜色leftmargin设定页面的左边距topmargin设定页面的上边距bgproperties设定页面背景图像为固定，不随页面的滚动而滚动text设定页面文字的颜色文档体标记<body>的常用属性属性功能描述172.3.3块CENTER标记标题标记H1～H6P标记BR标记PRE标记等2.3.3块CENTER标记181.文本居中标记<center>……</center>功能:居中显示文本.1.文本居中标记<center>……</center192.标题标记<h1~h6>(1)格式:<hnalign=值>……</hn>(2)功能:<h1>字号最大,<h6>字号最小.n为1~62.标题标记<h1~h6>(1)格式:<hnal203分段标记(1)格式:<P>……</P>
<PALIGN=参数>……</P>(2)说明:该标记可单独使用，也可成对使用。单独使用时，下一个<P>的开始就意味着上一个<P>的结束。作用：将文本换行，并空出一个文本行的间距。3分段标记(1)格式:<P>……</P>
<21
(3)对齐属性align取值功能left缺省设置,段落内容左对齐center段落内容居中对齐right段落内容右对齐justify段落内容两端对齐 (3)对齐属性align取值功能le224.换行标记<br>(1)格式:<br>(2)功能与说明:换行标记为单标记,且一般不包含属性;在段落间换行,不产生空行(与<p>标记不同)作用：将文本换行，但没有行间距。4.换行标记<br>(1)格式:<br>(2)235.原样显示标记<pre>(1)格式:<pre>……</pre>作用：保持文本的原始格式，并显示在网页上。5.原样显示标记<pre>(1)格式:<pre>246.分隔线标记<hr>(1)格式:<hr属性=值>(2)功能与说明:<hr>标记为单标记.作用：在网页中显示一条水平分隔线。6.分隔线标记<hr>(1)格式:<hr属性=值25(3)<hr>标记的属性属性参数功能单位默认值size
设置线的粗细pixel(像素）2width
设置的宽度pixel(像素）100%alignleftcenterright设置线的对齐方式
centercolor
设置线的颜色
blacknoshade
取消线的3d阴影
(3)<hr>标记的属性属性参数功能单位默认值size
262.3.4字符格式FONT标记B标记I标记U标记等2.3.4字符格式FONT标记271.字体格式标记<font><fontface=值1size=值2color=值3>……</font>(1)格式:(2)属性属性功能默认值face设置文字字体宋体size设置文字的大小3color设置文字的颜色黑色作用：设置字符的颜色、大小和字体。1.字体格式标记<font><fontface=值128(3)说明如果系统中没有face属性所指定的字体,则使用默认字体;size属性的取值为1~7;也可以用"+n"或"-n"来设定字号的相对值;color属性的值为：rgb颜色("#rrggbb").(3)说明如果系统中没有face属性所指定的字体,则使用默29RGB色彩模式
是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的RGB颜色查询对照表RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿30《超文本标记语言》课件312.物理字体标记(1)
粗体标记<b>
放在<b>与</b>标记之间的文字将以粗体方式显示。(2)
斜体标记<i>
放在<i>与</i>标记之间的文字将以斜体方式显示。(3)
下划线标记<u>
放在<u>与</u>标记之间的文字将以下划线方式显示。(4)删除线标记<s>放在<s>与</s>标记之间的文字将以下划线方式显示。2.物理字体标记(1)
粗体标记<b>
放在<b>与</b323.上标标记<sup>和下标标记<sub>(1)
上标标记<sup>
放在<sup>与</sup>标记之间的文字将以上标方式显示.(2)
下标标记<sub>
放在<sub>与</sub>标记之间的文字将以下标方式显示.3.上标标记<sup>和下标标记<sub>(1)
上标标记332.3.5图像
<imgsrc="图像的URL"其他属性="属性值">(1)格式:单标记必须指定的属性2.3.5图像
<imgsrc="图像的URL"34(2)img标记的其他常用属性属性功能描述alt指定提示文本,即鼠标停留在图像上时显示的文本heightwidth指定图像在网页中显示的高度,单位为像素指定图像在网页中显示的宽度,单位为像素hspacevspace指定图像左右的间距,单位为像素指定图像上下的间距,单位为像素align指定图像与文本的对齐方式,取值为:top、middle、bottom、left、rightborder指定图像边框的宽度，单位为像素(2)img标记的其他常用属性属性功能描述al35(3)使用img标记的注意事项img标记没有结束标记;图片文件一般使用.gif或.jpg文件,以保证下载速度;图片文件的URL尽量使用相对路径.(3)使用img标记的注意事项img标记没有结束标记;36绝对路径就是你的网页上的文件或目录在硬盘上真正的路径，在制作网页中实际很少用到。包含了标识Internet上的文件所需要的所有信息。包括完整的协议名称、主机名称、文件夹名称和文件名称。例如:/special/000120MC/drought060816.html协议名主机名文件夹名文件名绝对路径绝对路径就是你的网页上的文件或目录在硬盘上真正的路37相对路径相对路径是指目标文件地址相对于源文件的路径。如果链接到同一目录下,只需输入要链接文件的名称.要链接到下级目录中的文件,需先输入目录名,然后加"/",再输入文件名.要链接到上一级目录中文件,则先输入"../",再输入文件名.相对路径相对路径是指目标文件地址相对于源文件的路径。如果链接38相对路径示例相对路径名含义href="abc.htm"abc.htm是本地当前路径下的文件href="web/abc.htm"abc.htm是本地当前路径下web子目录下的文件href="../abc.htm"abc.htm是本地当前目录的上一级子目录下的文件href="../../abc.htm"abc.htm是本地当前目录的上两级子目录下的文件相对路径示例相对路径名含义href="abc.htm"ab39举例Index链接到contents:支持/contents.htmlContents链接到index：
../index.html
举例Index链接到contents:402.3.6超链接链接的基本概念创建超链接标记<a>常见的链接目标2.3.6超链接链接的基本概念411.链接的基本概念源端点目的端点本网页内的某处(锚点)网页文件或其他文件E-mailFTP服务器文字图片动画图片的一个区域(热点)1.链接的基本概念源端点目的端点本网页内的某处(锚点)422.创建超链接标记<a>(1)文字为超链接源,超链接标记的常用格式<ahref="目的端点地址"
target="窗口名称"title="指向连接显示的文字">源端点文字</a>绝对路径相对路径_blank:在新窗口中显示目标_self:在当前网页窗口中显示目标_parent:在当前网页的上一级窗口中显示目标_top:忽略框架,在整个浏览器中窗口中显示目标2.创建超链接标记<a>(1)文字为超链接源,超链接标记43<ahref="目的端点地址"
……><imgsrc="…"></a>嵌套了一个<img>标记(2)图像为超链接源,超链接标记的常用格式<ahref="目的端点地址"……><img443.常见的超链接目标(1)链接到网页或其他文件在<a>标记的href属性中指定网页文件或其他文件所在的路径和文件名即可.3.常见的超链接目标(1)链接到网页或其他文件在<a>标45(2)链接到锚点也叫书签链接,常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，便于浏览者查看网页内容。(2)链接到锚点也叫书签链接,常常用于那些内容庞大繁琐的46(1)定义锚点<aname="锚点名"
>锚点内容</a>(2)链接到锚点<ahref="#锚点名"
>超链接内容</a>(1)定义锚点<aname="锚点名"
>锚点内容47(3)链接到FTP<ahref="ftp://ftp服务器名"
>超链接内容</a>(3)链接到FTP<ahref="ftp://ftp48(4)链接到E-mail<ahref="mailto:邮件地址"
>超链接内容</a>(4)链接到E-mail<ahref="mailto492.3.7列表有序列表<ol>……</ol>无序列表<ul>……</ul>定义列表<dl>……</dl>嵌套列表2.3.7列表有序列表<ol>……</ol>501.有序列表
<oltype="编号类型"start="起始编号">
<li>第1项
……
<li>第n项
</ol>(1)格式:单标记1.有序列表
<oltype="编号类型"st51(2)有序列表中type属性的取值取值功能描述type=1表示列表项目用数字标号(1,2,3...)type=A表示列表项目用大写字母标号(A,B,C...)type=a表示列表项目用小写字母标号(a,b,c...)type=I表示列表项目用大写罗马数字标号(Ⅰ,Ⅱ,Ⅲ...)type=i表示列表项目用小写罗马数字标号(i,ii,iii...)(2)有序列表中type属性的取值取值功能描述type=522.无序列表
<ultype="编号类型">
<li>第1项
……
<li>第n项
</ul>(1)格式:2.无序列表
<ultype="编号类型">
53(2)无序列表中type属性的取值取值功能描述type="disc"表示项目符号用小圆点(●默认样式)type="square"表示项目符号用小正方形(■)type="circle"表示项目符号用小圆圈(○)(2)无序列表中type属性的取值取值功能描述type=543.定义列表<dl>
<dt>术语1<dd>术语解释1
<dt>术语2<dd>术语解释2
<dt>术语3<dd>术语解释3
</dl>(1)格式:3.定义列表<dl>
<dt>术语1<552.3.8表格标记描述<table>...</table>用于定义一个表格开始和结束.<tr>...</tr>定义一行，一对行标记内可以建立多对由<td>或<th>标记所定义的单元格.<th>...</th>定义表头单元格。表头单元格中的文字将以粗体显示，此标记不是必需的.<th>标记必须放在<tr>标记内.<td>...</td>定义一个单元格，一对<td>标记将建立一个单元格，<td>标记必须放在<tr>标记内.定义表格的基本语法2.3.8表格标记描述<table>...</tabl561.表格标记<table>的常用属性属性功能描述width表格的宽度。单位可以是像素,也可以是百分比height表格的高度。单位可以是像素,也可以是百分比align表格在页面的水平摆放位置(left,center,right)background表格的背景图片bgcolor表格的背景颜色border表格边框的宽度(以像素为单位)。默认为0,无边框bordercolor表格边框颜色frame(了解)表格外边框线的显示方式(取值见后)rules(了解)表格内边框线的显示方式(取值见后)cellspacing单元格之间的间距cellpadding单元格内容与单元格边界之间的空白距离的大小1.表格标记<table>的常用属性属性功能描述wid57单元格边距(表格填充)(cellpadding)--代表单元格外面的一个距离,用于隔开单元格与单元格空间
单元格间距(表格间距)(cellspacing)--代表表格边框与单元格补白的距离,也是单元格补白之间的距离
《超文本标记语言》课件582.行标记<tr>的常用属性属性功能描述align文本的水平对齐方式,取值为:left、center、right、justify等valign行中文本的垂直对齐方式,取值为：top、middle、bottom、baselinebgcolor行的背景颜色2.行标记<tr>的常用属性属性功能描述alig593.单元格标记<th>和<td>的常用属性属性描述width/height单元格的宽和高，单位为像素或％colspan单元格向右打通的栏数rowspan单元格向下打通的列数align单元格内容的水平对齐方式，left,center,right。valign单元格内容的垂直对齐方式，top,middle,bottom。bgcolor单元格的背景色background单元格的背景图片，与bgcolor任用其一3.单元格标记<th>和<td>的常用属性属性描述wi604.标题标记<caption>……</caption>该标记是<Table>标记的子元素；功能是设置表格的标题或说明；可用属性:align，取值为：top——标题位于表格上边居中对齐（默认值）；bottom——标题位于表格下边居中对齐；left——标题位于表格上边，左对齐；right——标题位于表格上边，右对齐。4.标题标记<caption>……</caption>该标61习题：用HTML编写一个网页，要求建立文字超链接，单击这个链接会在新窗口打开工大主页()用HTNL编写网页，要求单击图片(/home/deco/2009/0330/logo_home.gif)会在同一个窗口中打开sina网主页()习题：用HTML编写一个网页，要求建立文字超链接，单击这个链622.3.9表单表单标记<form>表单元素标记(也称为控件)<input><textarea><select>和<option>
<form属性="属性值">
表单元素标记
</form>2.3.9表单表单标记<form>表单元素标记<inpu631.表单标记<form>
<form属性="属性值">
表单元素标记
</form>(1)格式:常用属性:actionmethodname等表单元素标记:inputtextareaselect1.表单标记<form>
<form属性="属性64(2)name属性name属性:为表单指定一个名称.网页上的其他对象或JavaScript代码可以通过该名称访问表单和表单中的各个表单控件.(2)name属性name属性:为表单指定一个名称.网65(3)method属性method属性:用于指定表单提交时数据的传送方式.取值如下:get:将表单数据放在HTTP头中,作为URL的参数传递,因而数据量不能太大.post:将表单数据放在HTTP正文中传送,可以传送较大量的数据(常用).(3)method属性method属性:用于指定表单提交66(4)action属性action属性:用于指定表单所要提交到的URL，一般是一个动态网页，如CGI、ASP、JSP或PHP的网页。例:
<formaction="abc.asp"
method="post"name="form1">……</form>(4)action属性action属性:用于指定表单所要672.表单元素标记<input>P45<inputtype="类型"name="名称"value="默认值">name属性:指定控件名称,通过该名称可以访问该控件;type属性:指定控件类型(可用的控件类型见下页表格);value属性:设定输入默认值;其他属性:根据控件类型的不同,还有其他可用属性.2.表单元素标记<input>P45<inputty68(1)普通按钮(type="button")<inputtype="button"name="…"value="…"onclick="…">单击该按钮时的处理,其值为JavaScript或VBScript代码(1)普通按钮(type="button")<inputt69(2)提交按钮(type="submit")
重置按钮(type="reset")<inputtype="submit"name="…"value="…">或reset(2)提交按钮(type="submit")
70(3)单行文本框(type="text")<inputtype="text"name="…"value="…"size="…"maxlength="…"">文本框的宽度(字符数)文本框中允许输入的字符个数(3)单行文本框(type="text")<inputty71(4)密码文本框(type="password")<inputtype="password"name="…"value="…"size="…"maxlength="…"">文本框的宽度(字符数)文本框中允许输入的字符个数(4)密码文本框(type="password")<inpu72(5)单选按钮(type="radio")<inputtype="radio"name="…"value="…"onclick="…"checked>说明:(1)一组单选按钮的name属性必须相同,value属性必须不同;(2)一组按钮中只有一个按钮设置checked属性,表示初始为选中状态.(5)单选按钮(type="radio")<inputty73(6)复选框(type="checkbox")<inputtype="checkbox"name="…"value="…"onclick="…"checked>说明:(1)一组复选框的name属性必须相同,value属性必须不同;(2)一组中可以有多个选框设置checked属性,表示初始为选中状态.(6)复选框(type="checkbox")<input743.表单元素标记<textarea>多行文本框<textareaname=“…”rows=“一行多少字符”cols=“同时显示多少行">文本区中的初始内容</textarea>3.表单元素标记<textarea>多行文本框<tex754.表单元素标记<select>/<option>下拉菜单滚动列表由size属性决定<selectname="…"其他属性名=属性值><option属性名=属性值>……</option><option属性名=属性值>……</option>……</select>一个option标记对应一个列表项4.表单元素标记<select>/<option>下拉菜单76(1)select标记中常用的属性multiple属性:设置列表框中允许多选.size属性:设置列表框中可以显示的行数.格式为:size="行数"onchange属性:列表框中的选择发生改变时触发该事件.格式为:onchange="javascript等代码"(1)select标记中常用的属性multiple属性:77(2)option标记中常用的属性selected属性:设置当前列表项为选中状态.(2)option标记中常用的属性selected属性:782.3.10框架(也称为帧元素P54)<html><head>……</head><frameset……><frame……><frame……></frameset></html>框架集框架2.3.10框架(也称为帧元素P54)<html>框791.框架集标记<frameset>的常用属性属性说明border设置边框粗细,默认是5象素,如果设置小于5,分隔线将不可见bordercolor设置边框颜色frameborder指定是否显示边框.="0":不显示边框，="1":显示边框cols用"象素数"和"%"左右分隔窗口,"*"表示剩余部分rows用"象素数"和"%"上下分隔窗口,"*"表示剩余部分1.框架集标记<frameset>的常用属性属性说802.框架标记<frame>的常用属性(之一)属性描述name设置框架名称,是链接标记的target所要的参数src设置框架中加载的url文件的地址frameborder设置是否显示边框,1显示边框，0不显示border设置边框粗细bordercolor设置边框颜色noresize设置不能调整框架的大小,省略此项时可以调整2.框架标记<frame>的常用属性(之一)属性描813.框架嵌套略3.框架嵌套略824.框架间的超链接关键:在<a>标记的target指定的目标窗口为框架名.框架名:在<frame>标记中通过name属性指定.4.框架间的超链接关键:832.3.11滚动字幕标记<marquee>(补充)属性描述direction设置文字的移动方向.left:向左right:向右up:向上down:向下behavior设置移动方式.scroll:滚动播出，slide:滚动到一方后停止，alternate:滚动到一方后向相反方向滚动。loop设置文字卷动次数.=-1时表示循环滚动:scrollamount设置每次移动的位移.单位:像素scrolldelay设置文字每一次滚动的停顿时间，单位是毫秒。时间越短滚动越快2.3.11滚动字幕标记<marquee>(补充)属性84<marquee>标记常用属性(之二)属性描述bgcolor设置文字卷动范围的背景颜色height设置字幕高度width设置字幕宽度hspace设置字幕左右空白区域的大小vspace设置字幕上下空白区域的大小<marquee>标记常用属性(之二)属性描述bgcol852.3.12多媒体技术(补充)在网页中播放声音在网页中嵌入影像2.3.12多媒体技术(补充)在网页中播放声音861.在网页中播放背景声音<bgsoundsrc="音乐文件名"loop=播放次数></bgsound>loop=infinite时,表示循环播放,直至网页关闭为止.1.在网页中播放背景声音<bgsoundsrc=872.利用超级链接播放音乐或影像<ahref="文件名">……</a>2.利用超级链接播放音乐或影像<ahref="文件883.使用<embed>标记播放音乐或影像<embedsrc="音乐文件名"其他属性>3.使用<embed>标记播放音乐或影像<embed89属性功能autostart是否自动播放，取值为true或false.loop设定播放重复次数，loop=6表示重复6次，true表示无限次播放，false播放一次即停止。starttime设定乐曲的开始播放时间，如20秒后播放写为STARTIME=00:20(说明:格式为分:秒)volum设定音量的大小。取值为0~100.如果没设定的话，就用系统的音量。widthheight设定播放控件面板的大小hidden取值为true时,隐藏播放控件面板属性功能autostart是否自动播放，取值为true902.3.13其他标记层标记Layer、Div、Span——与3.2节内容合并介绍脚本标记Script——与3.3节内容合并介绍Applet标记等2.3.13其他标记层标记Layer、Div、Span——91第2章网页设计的基本描述语言HTML2.1HTML概述2.2HTML文档的构成2.3HTML元素第2章网页设计的基本描述语言HTML2.1HTML概述922.1HTML概述HTML(HypertextMarkupLanguage)：是一种规范，是一种标准。他是通过标记符(tag)来标记显示网页的各个部分。所有网页都是HTML格式的文件。HTML通过元素来告诉浏览器如何处理两个标记符之间的信息。HTML元素的格式：<标记>正文</标记>2.1HTML概述HTML(HypertextMarku932.2HTML文档的构成网页总是以<html>标记开始，在文件的末尾以</html>结束，表示文件是HTML格式。网页文件通常有两部分组成：头部(head)和主体(body)。2.2HTML文档的构成网页总是以<html>标记开始，在941.HTML文档的基本结构<HTML><head>
……</head><body>
HTML文件的正文写在这里
</body></HTML>标记和标记对1.HTML文档的基本结构<HTML>标记和95注释标记<!--><!--注释内容-->(1)格式:(2)功能与说明:注释内容不显示在网页上;主要功能是提高代码的可读性.注释标记<!--><!--注释内容-->(1)962.HTML元素<标记名属性名="属性值"…>内容</标记名>起始标记结束标记,有些标记可以省写结束标记2.HTML元素<标记名属性名="属性值"…>起始标972.3HTML元素类别允许包含的元素文档结构元素HTML,HEAD,BODY,FRAMESET头部元素TITLE,META,LINK,BASE,STYLE块元素CENTER,Hx,ADDRESS,PRE,P,BR,DIV列表元素DIR,DL,DT,DD,LI,OL,UL表格元素TABLE,TR,TD,TH,CAPTION表单元素FORM,INPUT,SELECT,OPTION,TEXTAREA超链接元素A,MAP,AREA字符格式元素FONT,B,I,U,S等帧元素FRAMESET,FRAME,NOFRAME,IFRAME图片元素IMG层元素DIV,SPAN,LAYER,ILAYER脚本元素SCRIPT内嵌对象元素APPLET,OBJECT,PARAM,EMBED2.3HTML元素类别允许包含的元素文档结构元素HTML,982.3.1文档结构<HTML><head>
……</head><body>
HTML文件的正文写在这里
</body></HTML>2.3.1文档结构<HTML>991.文档标记HTML<html>……</html>1.文档标记HTML<html>……</html>1002.文档头标记<head>……</head>头部元素：头部用<head>表示开始，用</head>表示结束。标签用于定义文档的头部，它是所有头部元素的容器。在头部元素中我们一般都会用到<title></title>，他是网页的标题，将显示在网页的标题栏当中。2.文档头标记<head>……</head>头部元1012.3.2头部元素<TITLE></TITLE><META><LINK><STYLE></STYLE><BASE>可以嵌套在head元素中的元素。2.3.2头部元素<TITLE></TITLE>可以嵌1021.TITLE标记<title>……</title>功能:设置网页标题.说明:该标记只能嵌入在<head>…</head>标记对中使用.1.TITLE标记<title>……</title>1032.META标记<meta>……(1)功能:指明网页作者、制作工具等.(2)说明:
该标记可以重复出现在<head>标记对中;该标记中的信息不显示在网页中.2.META标记<meta>……(1)功能:指明网104<METAname=“keywords”content=“关键字"><METAname=“description”content=“描述”><METAname=“author”content=“作者”><METAhttp-equiv=“expires”content=“过期时间”><METAhttp-equiv=“refresh”content=“刷新周期”><METAhttp-equiv=“content-type”content=“编码方式”><METAname=“keywords”conten1053.其他标记LINK最常见的用途是链接样式表。STYLEBASE标签为页面上的所有链接规定默认地址或默认目标。3.其他标记LINK最常见的用途是链接样式表1063.文档体标记<body>……</body>3.文档体标记<body>……</body>107文档体标记<body>的常用属性属性功能描述link设定页面默认的链接颜色alink设定鼠标正在单击时的链接颜色vlink设定访问后链接文字的颜色background设定页面背景图像bgcolor设定页面背景颜色leftmargin设定页面的左边距topmargin设定页面的上边距bgproperties设定页面背景图像为固定，不随页面的滚动而滚动text设定页面文字的颜色文档体标记<body>的常用属性属性功能描述1082.3.3块CENTER标记标题标记H1～H6P标记BR标记PRE标记等2.3.3块CENTER标记1091.文本居中标记<center>……</center>功能:居中显示文本.1.文本居中标记<center>……</center1102.标题标记<h1~h6>(1)格式:<hnalign=值>……</hn>(2)功能:<h1>字号最大,<h6>字号最小.n为1~62.标题标记<h1~h6>(1)格式:<hnal1113分段标记(1)格式:<P>……</P>
<PALIGN=参数>……</P>(2)说明:该标记可单独使用，也可成对使用。单独使用时，下一个<P>的开始就意味着上一个<P>的结束。作用：将文本换行，并空出一个文本行的间距。3分段标记(1)格式:<P>……</P>
<112
(3)对齐属性align取值功能left缺省设置,段落内容左对齐center段落内容居中对齐right段落内容右对齐justify段落内容两端对齐 (3)对齐属性align取值功能le1134.换行标记<br>(1)格式:<br>(2)功能与说明:换行标记为单标记,且一般不包含属性;在段落间换行,不产生空行(与<p>标记不同)作用：将文本换行，但没有行间距。4.换行标记<br>(1)格式:<br>(2)1145.原样显示标记<pre>(1)格式:<pre>……</pre>作用：保持文本的原始格式，并显示在网页上。5.原样显示标记<pre>(1)格式:<pre>1156.分隔线标记<hr>(1)格式:<hr属性=值>(2)功能与说明:<hr>标记为单标记.作用：在网页中显示一条水平分隔线。6.分隔线标记<hr>(1)格式:<hr属性=值116(3)<hr>标记的属性属性参数功能单位默认值size
设置线的粗细pixel(像素）2width
设置的宽度pixel(像素）100%alignleftcenterright设置线的对齐方式
centercolor
设置线的颜色
blacknoshade
取消线的3d阴影
(3)<hr>标记的属性属性参数功能单位默认值size
1172.3.4字符格式FONT标记B标记I标记U标记等2.3.4字符格式FONT标记1181.字体格式标记<font><fontface=值1size=值2color=值3>……</font>(1)格式:(2)属性属性功能默认值face设置文字字体宋体size设置文字的大小3color设置文字的颜色黑色作用：设置字符的颜色、大小和字体。1.字体格式标记<font><fontface=值1119(3)说明如果系统中没有face属性所指定的字体,则使用默认字体;size属性的取值为1~7;也可以用"+n"或"-n"来设定字号的相对值;color属性的值为：rgb颜色("#rrggbb").(3)说明如果系统中没有face属性所指定的字体,则使用默120RGB色彩模式
是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的RGB颜色查询对照表RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿121《超文本标记语言》课件1222.物理字体标记(1)
粗体标记<b>
放在<b>与</b>标记之间的文字将以粗体方式显示。(2)
斜体标记<i>
放在<i>与</i>标记之间的文字将以斜体方式显示。(3)
下划线标记<u>
放在<u>与</u>标记之间的文字将以下划线方式显示。(4)删除线标记<s>放在<s>与</s>标记之间的文字将以下划线方式显示。2.物理字体标记(1)
粗体标记<b>
放在<b>与</b1233.上标标记<sup>和下标标记<sub>(1)
上标标记<sup>
放在<sup>与</sup>标记之间的文字将以上标方式显示.(2)
下标标记<sub>
放在<sub>与</sub>标记之间的文字将以下标方式显示.3.上标标记<sup>和下标标记<sub>(1)
上标标记1242.3.5图像
<imgsrc="图像的URL"其他属性="属性值">(1)格式:单标记必须指定的属性2.3.5图像
<imgsrc="图像的URL"125(2)img标记的其他常用属性属性功能描述alt指定提示文本,即鼠标停留在图像上时显示的文本heightwidth指定图像在网页中显示的高度,单位为像素指定图像在网页中显示的宽度,单位为像素hspacevspace指定图像左右的间距,单位为像素指定图像上下的间距,单位为像素align指定图像与文本的对齐方式,取值为:top、middle、bottom、left、rightborder指定图像边框的宽度，单位为像素(2)img标记的其他常用属性属性功能描述al126(3)使用img标记的注意事项img标记没有结束标记;图片文件一般使用.gif或.jpg文件,以保证下载速度;图片文件的URL尽量使用相对路径.(3)使用img标记的注意事项img标记没有结束标记;127绝对路径就是你的网页上的文件或目录在硬盘上真正的路径，在制作网页中实际很少用到。包含了标识Internet上的文件所需要的所有信息。包括完整的协议名称、主机名称、文件夹名称和文件名称。例如:/special/000120MC/drought060816.html协议名主机名文件夹名文件名绝对路径绝对路径就是你的网页上的文件或目录在硬盘上真正的路128相对路径相对路径是指目标文件地址相对于源文件的路径。如果链接到同一目录下,只需输入要链接文件的名称.要链接到下级目录中的文件,需先输入目录名,然后加"/",再输入文件名.要链接到上一级目录中文件,则先输入"../",再输入文件名.相对路径相对路径是指目标文件地址相对于源文件的路径。如果链接129相对路径示例相对路径名含义href="abc.htm"abc.htm是本地当前路径下的文件href="web/abc.htm"abc.htm是本地当前路径下web子目录下的文件href="../abc.htm"abc.htm是本地当前目录的上一级子目录下的文件href="../../abc.htm"abc.htm是本地当前目录的上两级子目录下的文件相对路径示例相对路径名含义href="abc.htm"ab130举例Index链接到contents:支持/contents.htmlContents链接到index：
../index.html
举例Index链接到contents:1312.3.6超链接链接的基本概念创建超链接标记<a>常见的链接目标2.3.6超链接链接的基本概念1321.链接的基本概念源端点目的端点本网页内的某处(锚点)网页文件或其他文件E-mailFTP服务器文字图片动画图片的一个区域(热点)1.链接的基本概念源端点目的端点本网页内的某处(锚点)1332.创建超链接标记<a>(1)文字为超链接源,超链接标记的常用格式<ahref="目的端点地址"
target="窗口名称"title="指向连接显示的文字">源端点文字</a>绝对路径相对路径_blank:在新窗口中显示目标_self:在当前网页窗口中显示目标_parent:在当前网页的上一级窗口中显示目标_top:忽略框架,在整个浏览器中窗口中显示目标2.创建超链接标记<a>(1)文字为超链接源,超链接标记134<ahref="目的端点地址"
……><imgsrc="…"></a>嵌套了一个<img>标记(2)图像为超链接源,超链接标记的常用格式<ahref="目的端点地址"……><img1353.常见的超链接目标(1)链接到网页或其他文件在<a>标记的href属性中指定网页文件或其他文件所在的路径和文件名即可.3.常见的超链接目标(1)链接到网页或其他文件在<a>标136(2)链接到锚点也叫书签链接,常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，便于浏览者查看网页内容。(2)链接到锚点也叫书签链接,常常用于那些内容庞大繁琐的137(1)定义锚点<aname="锚点名"
>锚点内容</a>(2)链接到锚点<ahref="#锚点名"
>超链接内容</a>(1)定义锚点<aname="锚点名"
>锚点内容138(3)链接到FTP<ahref="ftp://ftp服务器名"
>超链接内容</a>(3)链接到FTP<ahref="ftp://ftp139(4)链接到E-mail<ahref="mailto:邮件地址"
>超链接内容</a>(4)链接到E-mail<ahref="mailto1402.3.7列表有序列表<ol>……</ol>无序列表<ul>……</ul>定义列表<dl>……</dl>嵌套列表2.3.7列表有序列表<ol>……</ol>1411.有序列表
<oltype="编号类型"start="起始编号">
<li>第1项
……
<li>第n项
</ol>(1)格式:单标记1.有序列表
<oltype="编号类型"st142(2)有序列表中type属性的取值取值功能描述type=1表示列表项目用数字标号(1,2,3...)type=A表示列表项目用大写字母标号(A,B,C...)type=a表示列表项目用小写字母标号(a,b,c...)type=I表示列表项目用大写罗马数字标号(Ⅰ,Ⅱ,Ⅲ...)type=i表示列表项目用小写罗马数字标号(i,ii,iii...)(2)有序列表中type属性的取值取值功能描述type=1432.无序列表
<ultype="编号类型">
<li>第1项
……
<li>第n项
</ul>(1)格式:2.无序列表
<ultype="编号类型">
144(2)无序列表中type属性的取值取值功能描述type="disc"表示项目符号用小圆点(●默认样式)type="square"表示项目符号用小正方形(■)type="circle"表示项目符号用小圆圈(○)(2)无序列表中type属性的取值取值功能描述type=1453.定义列表<dl>
<dt>术语1<dd>术语解释1
<dt>术语2<dd>术语解释2
<dt>术语3<dd>术语解释3
</dl>(1)格式:3.定义列表<dl>
<dt>术语1<1462.3.8表格标记描述<table>...</table>用于定义一个表格开始和结束.<tr>...</tr>定义一行，一对行标记内可以建立多对由<td>或<th>标记所定义的单元格.<th>...</th>定义表头单元格。表头单元格中的文字将以粗体显示，此标记不是必需的.<th>标记必须放在<tr>标记内.<td>...</td>定义一个单元格，一对<td>标记将建立一个单元格，<td>标记必须放在<tr>标记内.定义表格的基本语法2.3.8表格标记描述<table>...</tabl1471.表格标记<table>的常用属性属性功能描述width表格的宽度。单位可以是像素,也可以是百分比height表格的高度。单位可以是像素,也可以是百分比align表格在页面的水平摆放位置(left,center,right)background表格的背景图片bgcolor表格的背景颜色border表格边框的宽度(以像素为单位)。默认为0,无边框bordercolor表格边框颜色frame(了解)表格外边框线的显示方式(取值见后)rules(了解)表格内边框线的显示方式(取值见后)cellspacing单元格之间的间距cellpadding单元格内容与单元格边界之间的空白距离的大小1.表格标记<table>的常用属性属性功能描述wid148单元格边距(表格填充)(cellpadding)--代表单元格外面的一个距离,用于隔开单元格与单元格空间
单元格间距(表格间距)(cellspacing)--代表表格边框与单元格补白的距离,也是单元格补白之间的距离
《超文本标记语言》课件1492.行标记<tr>的常用属性属性功能描述align文本的水平对齐方式,取值为:left、center、right、justify等valign行中文本的垂直对齐方式,取值为：top、middle、bottom、baselinebgcolor行的背景颜色2.行标记<tr>的常用属性属性功能描述alig1503.单元格标记<th>和<td>的常用属性属性描述width/height单元格的宽和高，单位为像素或％colspan单元格向右打通的栏数rowspan单元格向下打通的列数align单元格内容的水平对齐方式，left,center,right。valign单元格内容的垂直对齐方式，top,middle,bottom。bgcolor单元格的背景色background单元格的背景图片，与bgcolor任用其一3.单元格标记<th>和<td>的常用属性属性描述wi1514.标题标记<caption>……</caption>该标记是<Table>标记的子元素；功能是设置表格的标题或说明；可用属性:align，取值为：top——标题位于表格上边居中对齐（默认值）；bottom——标题位于表格下边居中对齐；left——标题位于表格上边，左对齐；right——标题位于表格上边，右对齐。4.标题标记<caption>……</caption>该标152习题：用HTML编写一个网页，要求建立文字超链接，单击这个链接会在新窗口打开工大主页()用HTNL编写网页，要求单击图片(/home/deco/2009/0330/logo_home.gif)会在同一个窗口中打开sina网主页()习题：用HTML编写一个网页，要求建立文字超链接，单击这个链1532.3.9表单表单标记<form>表单元素标记(也称为控件)<input><textarea><select>和<option>
<form属性="属性值">
表单元素标记
</form>2.3.9表单表单标记<form>表单元素标记<inpu1541.表单标记<form>
<form属性="属性值">
表单元素标记
</form>(1)格式:常用属性:actionmethodname等表单元素标记:inputtextareaselect1.表单标记<form>
<form属性="属性155(2)name属性name属性:为表单指定一个名称.网页上的其他对象或JavaScript代码可以通过该名称访问表单和表单中的各个表单控件.(2)name属性name属性:为表单指定一个名称.网156(3)method属性method属性:用于指定表单提交时数据的传送方式.取值如下:get:将表单数据放在HTTP头中,作为URL的参数传递,因而数据量不能太大.post:将表单数据放在HTTP正文中传送,可以传送较大量的数据(常用).(3)method属性method属性:用于指定表单提交157(4)action属性action属性:用于指定表单所要提交到的URL，一般是一个动态网页，如CGI、ASP、JSP或PHP的网页。例:
<formaction="abc.asp"
method="post"name="form1">……</form>(4)action属性action属性:用于指定表单所要1582.表单元素标记<input>P45<inputtype="类型"name="名称"value="默认值">name属性:指定控件名称,通过该名称可以访问该控件;type属性:指定控件类型(可用的控件类型见下页表格);value属性:设定输入默认值;其他属性:根据控件类型的不同,还有其他可用属性.2.表单元素标记<input>P45<inputty159(1)普通按钮(type="button")<inputtype="button"name="…"value="…"onclick="…">单击该按钮时的处理,其值为JavaScript或VBScript代码(1)普通按钮(type="button")<inputt160(2)提交按钮(type="submit")
重置按钮(type="reset")<inputtype="submit"name="…"value="…">或reset(2)提交按钮(type="submit")
161(3)单行文本框(type="text")<inputtype="text"name="…"value="…"size="…"maxlength="…"">文本框的宽度(字符数)文本框中允许输入的字符个数(3)单行文本框(type="text")<inputty162(4)密码文本框(type="password")<inputtype="password"name="…"value="…"size="…"maxlength="…"">文本框的宽度(字符数)文本框中允许输入的字符个数(4)密码文本框(type="password")<inpu163(5)单选按钮(type="radio")<inputtype="radio"name="…"value="…"onclick="…"checked>说明:(1)一组单选按钮的name属性必须相同,value属性必须不同;(2)一组按钮中只有一个按钮设置checked属性,表示初始为选中状态.(5)单选按钮(type="radio")<inputty164(6)复选框(type="checkbox")<inputtype="checkb
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 昆明2025年云南昆明市生态环境局所属事业单位引进高层次人才笔试历年参考题库附带答案详解
- 2025年中国双人翻转座椅骨架市场调查研究报告
- 广西2025年广西合浦儒艮国家级自然保护区管理中心招聘笔试历年参考题库附带答案详解
- 2025至2031年中国铝合金丝编织管行业投资前景及策略咨询研究报告
- 2025至2031年中国精密交流脉冲焊接机行业投资前景及策略咨询研究报告
- 2025至2031年中国玻璃卫浴产品行业投资前景及策略咨询研究报告
- 2025至2031年中国汽车前大灯镜片行业投资前景及策略咨询研究报告
- 惠州2025年广东惠州龙门县市容环境卫生事务中心招聘编外环卫工人14人笔试历年参考题库附带答案详解
- 2025年平移大门驱动系统项目可行性研究报告
- 2025年合金钢衬项目可行性研究报告
- GB/Z 43281-2023即时检验(POCT)设备监督员和操作员指南
- 吊篮检查记录
- 《我的家族史》课件
- 湖北省技能高考机械类模拟试题
- 高空作业安全方案及应急预案
- 第一部分-气排球运动介绍课件
- 世界局势与主再来课件
- 思维游戏(小孩都喜欢玩的游戏)教学内容课件
- 储能技术课后参考答案梅生伟
- 过渡金属氧化物催化剂及其催化作用
- 遗传性耳聋基因检测标准Ppt
评论
0/150
提交评论