超文本标记语言HTML.ppt
《超文本标记语言HTML.ppt》由会员分享,可在线阅读,更多相关《超文本标记语言HTML.ppt(90页珍藏版)》请在三一办公上搜索。
1、1,第2章 HTML基础,本章要点 HTML文件格式 HTML常用标记的使用方法。表格和框架的应用 超级链接的应用,2,第2章 HTML语言,2.1 HTML的基本结构2.2 文字与页面格式2.3 图像标记符2.4 超级链接的应用2.5 表格,3,2.1 HTML的基本结构,HTML文档是网页文件在计算机系统内的最终保存形式,使用其他的专用网页编辑软件制作的网页最终也都应保存为HTML文档格式,即HTML文件的基本结构。2.1.1 HTML标记及其属性2.1.2 HTML的基本构成,4,2.1.1 HTML标记及其属性,1标记HTML文件由标记和被标记的内容组成。HTML的标记总是被封装在“”
2、所构成的一对尖括号之中。标记能产生所需要的各种效果,就像一个排版程序,它将网页的内容排成理想的效果。这些标记名称大都为相对应的英文单词或单词的首字母或单词的缩写,便于记忆。,5,1.标记,标记分为单标记指令和双标记指令。单标记指令单独使用就能完整地表达意思,它的一般格式为:页面内容如换行,等双标记指令必须成对使用,它的一般格式为:被标记,6,2.1.1 HTML标记及其属性,2标记的属性标记规定的是什么信息(文本、图片等)内容,怎样显示或控制这些信息,还需要在标记后面加上相关的属性。属性的一般格式为:受标记影响的内容例如文件主体标记,其属性bgcolor可设置背景颜色。属性示例,7,2标记的属
3、性,注意:(1)标记可以不用属性。(2)属性之间没有先后顺序,在使用时,根据需要可以使用标记的所有属性,也可以只选用需要的几个属性。(3)属性和标记一样,都不区分大小写。,8,2.1.2 HTML的基本构成标记,1HTML文档标记2HTML文件头标记3HTML文件标题标记4HTML文件主体标记,9,1HTML文档标记,格式:功能:标记位于HTML文档的最前边,用来标识HTML文档的开始;而标记恰恰相反,它位于HTML文档的最后边,用来标识HTML文档的结束。,10,2HTML文件头标记,格式:功能:用于包含文件的基本信息(文档标题、文档搜索关键字、文档生成器等)。和构成HTML文档的开头部分,
4、在此标记对之间可以使用、等标记对,这些标记对都是描述HTML文档相关信息的标记对,标记对之间的内容是不会在浏览器显示出来的。,11,3HTML文件标题标记,格式:功能:定义文件标题。使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息,那些信息一般是网页的“主题”,要将网页的主题显示到浏览器的顶部其实很简单,只要在标记对之间加入要显示的文本即可。,12,4HTML文件主体标记,格式:功能:是HTML文档的主体部分,在此标记对之间可包含、等众多的标记,它们所定义的文本、图像等将会在浏览器的框内显示出来。标记中的常用属性见表2-1。,13,4HTML文件主体标记,表2-1标记中常用
5、属性表,14,2.2 文字与页面格式,在多数网页中,文档是核心内容,所以经常要设置文档的格式。设置文档的标记包括标题和文字的字体、字号、字型、颜色、段落格式、文本的布局等。2.2.1 强制换行标记2.2.2 段落标记2.2.3 文本标记2.2.4 列表标记2.2.5 层标记符2.2.6 表单标记符,15,2.2.1 强制换行标记,强制换行标记放在一行的末尾,可以使后面的文字、图片、表格等显示于下一行,而又不会在行与行之间留下空行,即强制文本换行,多个标记可以创建多个空行。强制换行标记的格式为:文字,16,1强制换行标记,换行标记可单独使用。浏览器在解释时,从该标记处换行,可使页面清晰、整齐。标
6、记的clear属性标明下一行的情况,其格式为:“#”可以是“left”、“right”、“all”之一,如“clear=left”,表示下一行从左边界处开始。是禁止分行标记,其格式为:禁止换行标记通知浏览器,当其中的内容在一行内显示不了时,超出部分不换行,通过滚动条可查看。,17,2.2.2 段落标记,段落标记 由于HTML的浏览器是基于窗口的,其显示大小可以随意改变,所以HTML将多个空格以及回车等效为一个空格,HTML的分段完全依赖于分段标记元素。段落标记的格式为:文字,18,2段落标记,有多种属性,比较常用的属性是align对齐方式,文字对齐的基本用法为:属性值可以是left(左对齐)、
7、center(居中)和right(右对齐)。,19,1.注释标记与许多计算机语言一样,HTML语言也提供了注释功能。浏览器遇到注释标记就会自动忽略此标记中的内容。为HTML文档的不同部分加上说明,是为了便于日后的阅读和修改。注释标记的格式为:,2.2.2 段落标记,20,2.2.2 段落标记,2分区显示标记标记常用来排版大块的HTML段落,也可以用于格式化表,此标记的用法与段落标记非常相似。3插入水平线标记在网页上插入水平线,可以将不同功能的文字、图片、表格等进行分隔,使网页看起来更加整齐。,21,2.2.3 文本标记,1标题标记格式:,功能:设置各种大小不同的标题。HTML语言提供了一系列对
8、文本中的标题进行操作的标记对:,即一共有6对标题的标记对。,22,2.2.3 文本标记,2字体设置标记格式:功能:设置字体格式。标记符具有3个常用的属性:size(大小)、color(颜色)和face(字体),如表2-2所示。,23,2字体设置标记,表2-2标记中的属性表,表2-2中的Size表示字体的大小,取值范围为07,默认值是3,取1时最小,取7时最大。使用相对数值时,可以用“”号或“”号来指定相对于当前默认值的字号,例如2表示比当前默认字号大2号;Face用来设置字体,如宋体、黑体、隶书等;颜色的取值是十六进制RGB颜色码或HTML语言给定的颜色常量名。,24,2.2.3 文本标记,3
9、其他字体标记为了让文字富有变化,或者为了特意强调某一部分,还有一些标记可以用来改变字体的效果,标记格式如表2-3所示。,表2-3其他文本标记格式表,25,2.2.3 文本标记,4背景颜色改变背景的颜色可以得到各种颜色的背景。设置背景颜色的一般格式为:或设置颜色值,用6位16进制的RGB值来表示,前两位表示颜色中红色的数量(从00到FF,即0255),中间和后面两位分别表示颜色中绿色和蓝色的数量。,26,4背景颜色,在网页中常用的几种颜色值如下:黑色:#000000 橄榄色:#808000红色:#FF0000蓝色:#0000FF栗色:#800000藏青色:#000080灰色:#808080白色:
10、#FFFFFF绿色:#00FF00紫红色:#800080银色:#C0C0C0黄色:#FFFF00设置背景色,颜色值也可以用颜色名称来表示。如red,blue等。,27,2.2.3 文本标记,5背景音乐bgsound用来设定页面载入时的背景音乐,可在浏览器中运行,在NetScape任何版本的浏览器中都是无效的。在网页中创建背景音乐使用标记来实现,其格式为:当LOOP=1时,背景音乐将会连续播放,,28,2.2.3 文本标记,6.移动的文字基本语法:.文字移动属性的设置 方向#=left或 right方式#=scroll:一个方向不停地移动 slide:移动一次就停止。Alternate:来回移动
11、。循环#=次数;若未指定则循环不止(infinite)速度 时间用数值表示延时 移动过程中每移一次停顿的时间,29,2.2.4 列表标记,1有序列表标记有序列表也称数字式列表,它是一种在各项内容前显示有数字或字母的排列表格式:列表项内容 列表项内容功能:建立有序列表。,30,1有序列表标记,使用标记建立有序列表,使用,标记建立列表项。其开始标记和结尾标记都是必选的,即每个表项的结束就是下一个表项的开始。标记符具有两个常用的属性:type和start,分别用来设置数字序列样式和数字序列的起始值。Start属性的值可以是任意整数,type属性的值如表2-4所示。,31,1有序列表标记,表2-4有序
12、列表的type属性值,32,1有序列表标记,当位于OL标记符内时,LI标记符具有两个常用的属性:type和value。type属性用于设置数字样式,取值与OL的type属性相同;value属性用于指定一个新的数字序列起始值,以获得非连续性的数字序列。,33,2.2.4 列表标记,2有序列表的嵌套如果用户想用不同层次的编号列表来表示页面内容,那么可以使用嵌套的有序列表。命名用嵌套的有序列表时,只需将相关的列表标记符嵌套使用即可。,34,2.2.4 列表标记,3无序列表无序列表也称强调式列表,它是一种在各项内容前显示有特殊项目符号的缩排列表。格式:列表项内容 列表项内容,35,3无序列表,以标记开
13、始,以标记结束。在每一个标记处另起一行,并在列表文本前显示加重符号,全部列表会缩排。无序列表中type属性的取值有三种:dics表示实心圆,为默认值;circle表示为空心圆;square表示实心或空心的方块(取决于浏览器)。在 Internet Explorer中,type的值是区分大小写的,也就是说将type指定为Circle是无法获得空心圆项目符号的,必须指定为circle才可以。,36,2.2.5 层标记,所谓层,也就是网页内容的容器。层分为两种类型:CSS和Netscape层。前者在HTML文件中的层标记符使用Div和Span,被浏览器InternetExplorer40和Netsc
14、ape40支持。后者使用Layer和Ilayer,被Netscape40支持。,37,2.2.5 层标记,层的基本语句如下:在这里,id表示层的编号,style表示层的方式,left表示层左边界距离浏览器窗口左边界的距离,top表示层上边界距离浏览器窗口上边界的距离,width表示层的宽度,height表示层的高度,z-index表示在垂直平面的方向上层的顺序号。,38,表单标记,本节主要介绍表单的基本概念,在DreamWeaver应用中我们将进一步的学习表单标记符。表单是用于实现网页浏览者(客户端)与服务器(或者说网页所有者)之间信息交互的一种页面元素,在网络上它被广泛用于各种信息的搜集和反
15、馈。,39,2.2.6 表单标记,例如,图2-13显示了一个用于进行网站用户登录系统的表单。,图2-13用户登录系统的表单。,40,2.2.6 表单标记,表单的标记符为,如果要在网页中添加表单,应在文档中添加form标记符。格式如下:其中,Action属性提供处理表单的程序地址,其处理程序可以是由站点支持的任何语言来编写,如CGI、ASP、JSP、PHP。Method属性是用户数据提交给服务器的方法。注意,一个表单中的其他所有表单对像都必须放在表单域标记符之间。这与所有网页源代码必须包含在【”标记符之间类似。,41,表单标记,下面介绍一些表单中的常用项:1发送与重置 2文字输入与密码输入3复选
16、框和单选按钮4选择菜单框(selectable menu),42,1发送与重置,标记格式为:其中,type表示按钮的动作属性。前者为提交表单按钮,#号代表按钮上显示的文本,如“发送表单”或“填好了”等;后者为重置按钮,#号代表按钮上显示的文本,如“重新填写”等。,43,2文字输入与密码输入,标记格式为:其中,*为text或password;#为文本框中的初始值;n1为文本框的长度;n2为文本框的最大长度。,44,3复选框和单选按钮,(1)复选框(Checkbox)标记格式:其中,加入checked表示该复选框在网页下载之后呈选中状态。(2)单选按钮(RadioButton)标记格式为:同样,加
17、入checked表示该复选框在网页下载之后呈选中状态。,45,4选择列表框(selectable menu),标记格式为:若标记变为则表示该项被默认选中。,46,2.2.7 框架的应用,使用框架结构可以在同一浏览器窗口中显示多个网页。框架将浏览器窗口划分为不同的部分,每部分中装载不同的同的网页,从而获得一种特殊的效果。此外,通过为超链接指定目标框架,可以为框架之间建立起内容之间的联系,因而实现页面导航的功能。一幅Web页面分为几个部分,每一个部分都可以独立地显示一个HTML文件,形成多个窗体。多窗口页面也称为框架页面。基本语法格式:,47,最常见的框架结构是Web型的联机帮助系统(其本质也就是
18、网页),它们通常都采用一种目录式结构,左边是帮助主题,右边是帮助内容,当单击左边的超链接时,相应内容显示在右边的框架中。例如,图2-23显示了Photopshop 7.0的帮助页面所应用的框架效果。,2.2.7 框架的应用,48,2.2.7 框架的应用,例如,图2-23就显示了photopshop7.0的帮助页面所应用的框架效果。,图2-23 photopshop7.0帮助页面的框架效果,49,2.2.7 框架的应用,框架结构可在页面纵向排列多个窗口、横向排列多个窗口或混合排列多个窗口。要创建框架结构的网页,首先必须有一个网页用于指定整个浏览器窗口如何划分,也就是所谓的框架集网页。在框架集网页
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 超文本 标记 语言 HTML
链接地址:https://www.31ppt.com/p-6610573.html