《超文本标记语言》PPT课件.ppt

第2章网页设计的基本描述语言HTML,2.1HTML概述2.2HTML文档的构成2.3HTML元素,2.1HTML概述,HTML(HypertextMarkupLanguage)：是一种规范，是一种标准。他是通过标记符(tag)来标记显示网页的各个部分。所有网页都是HTML格式的文件。HTML通过元素来告诉浏览器如何处理两个标记符之间的信息。HTML元素的格式：正文,2.2HTML文档的构成,网页总是以标记开始，在文件的末尾以结束，表示文件是HTML格式。网页文件通常有两部分组成：头部(head)和主体(body)。,1.HTML文档的基本结构,HTML文件的正文写在这里,标记和标记对,注释标记,(1)格式:,(2)功能与说明:,注释内容不显示在网页上;主要功能是提高代码的可读性.,2.HTML元素,内容,起始标记,结束标记,有些标记可以省写结束标记,2.3HTML元素,2.3.1文档结构,HTML文件的正文写在这里,1.文档标记HTML,2.文档头标记,头部元素：头部用表示开始，用表示结束。标签用于定义文档的头部，它是所有头部元素的容器。在头部元素中我们一般都会用到，他是网页的标题，将显示在网页的标题栏当中。,2.3.2头部元素,可以嵌套在head元素中的元素。,1.TITLE标记,功能:设置网页标题.说明:该标记只能嵌入在标记对中使用.,2.META标记,(1)功能:指明网页作者、制作工具等.(2)说明:该标记可以重复出现在标记对中;该标记中的信息不显示在网页中.,3.其他标记,LINK最常见的用途是链接样式表。STYLEBASE标签为页面上的所有链接规定默认地址或默认目标。,3.文档体标记,文档体标记的常用属性,2.3.3块,CENTER标记标题标记H1H6P标记BR标记PRE标记等,1.文本居中标记,功能:居中显示文本.,2.标题标记,(1)格式:,(2)功能:,字号最大,字号最小.,n为16,3分段标记,(1)格式:,(2)说明:,该标记可单独使用，也可成对使用。单独使用时，下一个的开始就意味着上一个的结束。,作用：将文本换行，并空出一个文本行的间距。,(3)对齐属性align,4.换行标记,(1)格式:,(2)功能与说明:,换行标记为单标记,且一般不包含属性;在段落间换行,不产生空行(与标记不同),作用：将文本换行，但没有行间距。,5.原样显示标记,(1)格式:,作用：保持文本的原始格式，并显示在网页上。,6.分隔线标记,(1)格式:,(2)功能与说明:,标记为单标记.,作用：在网页中显示一条水平分隔线。,(3)标记的属性,2.3.4字符格式,FONT标记B标记I标记U标记等,1.字体格式标记,(1)格式:,(2)属性,作用：设置字符的颜色、大小和字体。,(3)说明,如果系统中没有face属性所指定的字体,则使用默认字体;size属性的取值为17;也可以用+n或-n来设定字号的相对值;color属性的值为：rgb颜色(#rrggbb).,RGB色彩模式,是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB颜色查询对照表,2.物理字体标记,(1)粗体标记放在与标记之间的文字将以粗体方式显示。(2)斜体标记放在与标记之间的文字将以斜体方式显示。(3)下划线标记放在与标记之间的文字将以下划线方式显示。(4)删除线标记放在与标记之间的文字将以下划线方式显示。,3.上标标记和下标标记,(1)上标标记放在与标记之间的文字将以上标方式显示.(2)下标标记放在与标记之间的文字将以下标方式显示.,2.3.5图像,(1)格式:,单标记,必须指定的属性,(2)img标记的其他常用属性,(3)使用img标记的注意事项,img标记没有结束标记;图片文件一般使用.gif或.jpg文件,以保证下载速度;图片文件的URL尽量使用相对路径.,绝对路径就是你的网页上的文件或目录在硬盘上真正的路径，在制作网页中实际很少用到。包含了标识Internet上的文件所需要的所有信息。包括完整的协议名称、主机名称、文件夹名称和文件名称。,例如:,绝对路径,相对路径,相对路径是指目标文件地址相对于源文件的路径。,如果链接到同一目录下,只需输入要链接文件的名称.要链接到下级目录中的文件,需先输入目录名,然后加/,再输入文件名.要链接到上一级目录中文件,则先输入./,再输入文件名.,相对路径示例,举例,Index链接到contents:支持/contents.htmlContents链接到index：./index.html,2.3.6超链接,链接的基本概念创建超链接标记常见的链接目标,1.链接的基本概念,源端点,本网页内的某处(锚点)网页文件或其他文件E-mailFTP服务器,文字图片动画图片的一个区域(热点),2.创建超链接标记,(1)文字为超链接源,超链接标记的常用格式,源端点文字,绝对路径相对路径,_blank:在新窗口中显示目标_self:在当前网页窗口中显示目标_parent:在当前网页的上一级窗口中显示目标_top:忽略框架,在整个浏览器中窗口中显示目标,嵌套了一个标记,(2)图像为超链接源,超链接标记的常用格式,3.常见的超链接目标,(1)链接到网页或其他文件,在标记的href属性中指定网页文件或其他文件所在的路径和文件名即可.,(2)链接到锚点,也叫书签链接,常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作精准链接的便利工具，便于浏览者查看网页内容。,(1)定义锚点,锚点内容,(2)链接到锚点,超链接内容,(3)链接到FTP,超链接内容,(4)链接到E-mail,超链接内容,2.3.7列表,有序列表无序列表定义列表嵌套列表,1.有序列表,第1项第n项,(1)格式:,单标记,(2)有序列表中type属性的取值,2.无序列表,第1项第n项,(1)格式:,(2)无序列表中type属性的取值,3.定义列表,术语1术语解释1术语2术语解释2术语3术语解释3,(1)格式:,2.3.8表格,定义表格的基本语法,1.表格标记的常用属性,单元格边距(表格填充)(cellpadding)-代表单元格外面的一个距离,用于隔开单元格与单元格空间单元格间距(表格间距)(cellspacing)-代表表格边框与单元格补白的距离,也是单元格补白之间的距离,2.行标记的常用属性,3.单元格标记和的常用属性,4.标题标记,该标记是标记的子元素；功能是设置表格的标题或说明；可用属性:align，取值为：top标题位于表格上边居中对齐（默认值）；bottom标题位于表格下边居中对齐；left标题位于表格上边，左对齐；right标题位于表格上边，右对齐。,习题：,用HTML编写一个网页，要求建立文字超链接，单击这个链接会在新窗口打开工大主页()用HTNL编写网页，要求单击图片(,2.3.9表单,表单标记,表单元素标记(也称为控件),表单元素标记,1.表单标记,表单元素标记,(1)格式:,常用属性:actionmethodname等,表单元素标记:inputtextareaselect,(2)name属性,name属性:为表单指定一个名称.网页上的其他对象或JavaScript代码可以通过该名称访问表单和表单中的各个表单控件.,(3)method属性,method属性:用于指定表单提交时数据的传送方式.取值如下:get:将表单数据放在HTTP头中,作为URL的参数传递,因而数据量不能太大.post:将表单数据放在HTTP正文中传送,可以传送较大量的数据(常用).,(4)action属性,action属性:用于指定表单所要提交到的URL，一般是一个动态网页，如CGI、ASP、JSP或PHP的网页。,例:,2.表单元素标记P45,name属性:指定控件名称,通过该名称可以访问该控件;type属性:指定控件类型(可用的控件类型见下页表格);value属性:设定输入默认值;其他属性:根据控件类型的不同,还有其他可用属性.,(1)普通按钮(type=button),单击该按钮时的处理,其值为JavaScript或VBScript代码,(2)提交按钮(type=submit)重置按钮(type=reset),或reset,(3)单行文本框(type=text),文本框的宽度(字符数),文本框中允许输入的字符个数,(4)密码文本框(type=password),文本框的宽度(字符数),文本框中允许输入的字符个数,(5)单选按钮(type=radio),说明:(1)一组单选按钮的name属性必须相同,value属性必须不同;(2)一组按钮中只有一个按钮设置checked属性,表示初始为选中状态.,(6)复选框(type=checkbox),说明:(1)一组复选框的name属性必须相同,value属性必须不同;(2)一组中可以有多个选框设置checked属性,表示初始为选中状态.,3.表单元素标记,多行文本框,文本区中的初始内容,4.表单元素标记/,一个option标记对应一个列表项,(1)select标记中常用的属性,multiple属性:设置列表框中允许多选.,size属性:设置列表框中可以显示的行数.格式为:size=行数,onchange属性:列表框中的选择发生改变时触发该事件.格式为:onchange=javascript等代码,(2)option标记中常用的属性,selected属性:设置当前列表项为选中状态.,2.3.10框架(也称为帧元素P54),框架集,框架,1.框架集标记的常用属性,2.框架标记的常用属性(之一),3.框架嵌套,略,4.框架间的超链接,关键:在标记的target指定的目标窗口为框架名.框架名:在标记中通过na