HTML基础.ppt

上传人:sccc 文档编号:5582151 上传时间:2023-07-30 格式:PPT 页数:86 大小:5.68MB
返回 下载 相关 举报
HTML基础.ppt_第1页
第1页 / 共86页
HTML基础.ppt_第2页
第2页 / 共86页
HTML基础.ppt_第3页
第3页 / 共86页
HTML基础.ppt_第4页
第4页 / 共86页
HTML基础.ppt_第5页
第5页 / 共86页
点击查看更多>>
资源描述

《HTML基础.ppt》由会员分享,可在线阅读,更多相关《HTML基础.ppt(86页珍藏版)》请在三一办公上搜索。

1、第2章 HTML基础,主讲人:宋媚,第2章 HTML基础,2.1 HTML基础 2.2 HTML基本结构 2.3 文档格式2.4 超连接2.5 列表2.6 制作表格2.7 图像和多媒体2.8 表单2.9 框架结构,2.1 HTML概述,2.1.1 HTML的基本概念1.HTML介绍 超文本标记语言(Hyper Text Markup Language,HTML)的缩写,Web页面的基本元素。一种规范,一种标准,几乎所有的网页都是以HTML格式书写的。HTML是一种描述性的标记语言,通过标识符来标识网页中内容的显示方式,比如图片的显示尺寸、文字的大小、颜色、字体等。而WWW浏览器的功能就是对这些

2、标记进行解释,按要求显示出文字、图像、动画、媒体等网页内容。,2.1 HTML概述,Web的三要素:文字、多媒体、超链接2.HTML语言内容(从功能上大体可分为)文本结构、属性设置超链接列表建立表格图像和多媒体表单,HTML的制定与维护,目前,HTML由国际组织W3C(万维网联盟)制定和维护,HTML3.2是目前支持最好的标准(几乎所有浏览器都支持),最新的标准是HTML4.0。若需要了解HTML的更详细情况,可访问W3C的官方网站:http:/www.w3.org,2.1 HTML概述,HTML常用编辑工具 任何一个文档编辑器都是HTML编辑器。专用的Web编辑器。HTML文件是纯文本文件*

3、.html*.htm说明:此处,.html和.htm并无本质区别。只不过后者为了满足DOS仅能识别三位文件名的需要而设置(国际通用)。,2.1 HTML概述,2.1.2 标记符 标记符又称标签,用来控制网页内容显示效果。双标记格式 受影响的内容单标记格式:受影响的内容标记没有大小写之分,但为了便于HTML文档的维护,通常约定使用大写。,2.1 HTML语言概述,标记的属性作用:用来控制受标记影响的内容的显示和输出格式(标记符标识对象的特征)。格式:文本 例如:属性示例 说明:并不是所有的标记都有属性,例:、。,2.2 HTML的基本结构,HTML的基本结构包括HEAD、TITLE、BODY三部

4、分,下面是基本结构:HTML文件开始 文件头开始 标题部分 文件头结束 文件体开始 正文部分 文件体结束 HTML文件结束,2.2 HTML的基本结构,HTML基本标记 HTML文档标记 格式:HTML文件头标记 格式:还可以包含,HTML文件主体标记 格式:注意:与为独立的两个部分,不能互相嵌套。,1.HTML文件标记符 和标记符放在网页文档的最外层,表示这对标记符之间的内容是HTML文件。处于文件的最前端,表示HTML文件的开始,即浏览器从开始解释,而则位于文件的最后一行,这表示这一整份的文档都是HTML语法的文档。2.HEAD文件头标记符 和是HTML文件头标记符,它用来说明文档的整体信

5、息,所标记的内容并不会出现在WWW浏览器所看到的窗体中。通常与某些标记符一起使用。,3.BODY文件体标记符 是HTML文件的主体标记符。网页正文中的所有内容包括文字、表格、图像、声音和动画等都包含在这对标记符之间,它的格式为:,bgcolor:标识HTML文档的背景颜色,默认设置为白色。,background:设置HTML文档的背景图片,可以使用的图片格式为GIF,JPG等。,text:标识HTML文档的正文文字颜色,它定义的颜色将应用于整篇文档。,超级链接颜色:link、vlink、alink分别控制普通超级链接、访问过的超级链接、当前活动超级链接的颜色。,Topmargin 和 left

6、margin:设置网页主体内容距离网页顶端和左端的距离。,HTML基本标记,HTML文件主体标记 属性概述 background:设置网页的背景图像 bgcolor:设置网页的背景颜色 link:设置未被访问过的超文本链接的颜色 vlink:设置已被访问过的超文本链接的颜色 alink:设置链接在被访问的瞬间的颜色 Leftmargin:左边页边空白 topmargin:顶端页边空白 text:颜色值 bgproperties:设置为fixed(固定)时,页面内容翻动而背景图像固定不动,4.第一个网页【实例2-1】HTML基本结构网页 my first page This is my firs

7、t homepage!,5 HTML的基本语法规则(1)HTML文件以纯文本形式存放,扩展名为“.HTM”或“.HTML”。前者为了满足DOS识别需要而设置;如果系统为UNIX系统,则扩展名必须为“.HTML”。(2)HTML不区分大小写,例如和是相同的。(3)多数HTML标记可以嵌套,但不可以交叉。(4)HTML文件一行可以写多个标记,一个标记也可以分多行书写,不用任何续行符号。,(5)HTML源文件中的换行、回车符和多个连续空格在显示效果中是无效的。换行用标记,需要多个空格用“”(6)网页中所有的显示内容都应该受限于一个或多个标记,不应有游离于标记之外的文字或图像等,以免产生错误。(7)所

8、有用到的标点符号应使用英文半角状态下的标点符号,否则将会出现语法错误,但是字符串中的标点符号除外。,2.3 文本的格式,2.3.1 文字与段落标记1.设置标题格式标题标记功能:用于定义文章内章节标题的显示格式,并且标题字会单独成行。格式:标题文字 属性:n用来指定标题文字字号的大小。n可以取 16的整数值,数字越小,字号越大。align用来设置标题在页面中的对齐方式,取值有:left(左对齐)、center(居中)、right(右对齐)、justify(多行)。,设置标题 第1级标题(H1)第2级标题(H2)第3级标题(H3)第4级标题(H4)(居左)第5级标题(H5)(居中)第6级标题(H6

9、)(居右),【实例2-2】使用标题字标记设置标题的大小与对齐方式。,2.文字格式标记 功能:设置网页中普通文字的显示效果,如:文字大小、字体、颜色等。格式:被设置的文字 属性:face,size,color,face属性用来设置字体。当文字为汉字时,格式中的“字体”可以为:宋体、幼圆、隶书、楷体_GB2312、黑体、仿宋_GB2312等。当文字为英文时,字体名可以为Times New Roman等约50种字体。,size属性用来设置文字的大小。数字的取值范围从17,size取1时最小,取7时最大。,color属性用来设置文字的颜色,颜色的取值可以是十六进制的RGB颜色码或者HTML给定的颜色常

10、量名。,【实例2-3】使用标记的size属性设置文字的大小,face属性设置字体,color属性设置文字颜色。文字格式标记 设置文字的格式 1号字青色 2号字绿色 3号幼圆桔黄色 4号隶书深红色 5号黑体黄绿色 6号方正舒体水蓝色 Welcome My Homepage!,16种标准颜色,3.字型标记功能:设置文字的风格,如:加粗、斜体、带下划线、上标、下标等。格式:这是一组标记,它们可以单独使用,也可以混合使用产生复合修饰效果。,【实例2-4】使用字型标记设置文字的风格。设置字型 黑体 斜体 带下划线 粗体并且斜体 带删除线 H2o X3 大字体 小字体,2.3.2 段落标记和强制换行标记

11、在HTML文档中,无法用多个回车、空格、Tab键来调整文档段落的格式,而要用HTML的标记来强制换行和分段。,1.段落标记功能:段落标记定义一个新段落的开始,它不但能使后面的文字换到下一行,还可以使两段之间多一空行。由于一段的结束意味着新一段的开始,所以使用也可省略结束标记。格式:或 属性:段落标记的align属性用来设置段落的对齐方式,其取值可以为left、center或right,分别表示居左、居中、居右,缺省时默认为left。,2.强制换行标记功能:强制换行标记通常单独出现,放在一行的末尾,可以使后面的文字、图片、表格等显示于下一行,但是不会在行与行之间留下空行。格式:文字 注意:通常一

12、个段落标记可以看作是两个强制换行标记。多个并不能产生多个空行,但多个却能达到,【实例2-5】段落标记与强制换行标记的使用。段落标记与强制换行标记的使用 段落标记 段落标记 强制换行标记 强制换行标记,2.3.3 水平线标记功能:水平线标记可以在页面中显示一条水平线,将不同功能的页面内容分隔开,使之整齐明了。当浏览器执行HTML文件中的标记时,会在此处换行,并加入一条水平线段。格式:属性:align,size,width,color。,Size and width,Size 表示以像素(pixel)为单位的线的粗细程度,默认值为2.像素是常见于显示系统(电视屏幕、计算机显示器等)的计量单位。Wi

13、dth的单位可为绝对值形式的像素长度,也可以是相对值形式的百分比。以百分比为单位时,表示水平线占当前浏览器窗口宽度的百分比;若是用缩放操作更改了浏览器窗口大小,相应水平线长度也发生改变。,【实例2-6】水平线标记的使用。水平线段标记的应用 水平线,2.3.4 其它标记1.分区显示标记功能:分区显示标记可以使文本块或一段文字在网页上:左对齐、居中对齐和右对齐。格式:文本或图像用于对多段落进行文字对齐布局。属性:属性align的取值分别为:left、center和right。静夜思 床前明月光,疑是地上霜。举头望明月,疑是地上霜。,2.特殊符号标记 浏览器解释HTML文件时,首先根据“”来识别HT

14、ML标记,然后再确定这两个符号中的内容是否为HTML标记,如果是HTML标记则按其规则解读并且显示输出。因此,如果要在网页中显示“”等一些特殊字符时,就要用其代替字符。,2.4 超链接标记,超级链接是整个WWW应用的核心和基础,它可以把页面一个个链接起来,使得网页的浏览非常方便。所以,对超级链接的掌握具有特殊的意义。功能:建立超链接。格式:显示的文本或者图像属性:href,Target。,1.创建指向其它页面的超链接 根据目标文件与当前文件的目录关系,有6种放法:(1)链接到同一目录内的网页文件,其格式为:显示的文本或者图像 目标文件名是链接所指向的文件,此时URL地址是相对路径。(2)链接到

15、下一级目录中的网页文件,其格式为:显示的文本或者图像 此时URL地址是相对路径。,(3)链接到上一级目录中的网页文件,其格式为:显示的文本或者图像 其中“./”表示退到上一级目录中,此时URL地址是相对路径。(4)链接到同级目录中的网页文件,其格式为:显示的文本或者图像 表示先退到上一级目录中,然后再进入到目标文件所在的目录,此时URL地址是相对路径。,(5)链接到Internet上的网页,其格式为:显示的文本或者图像网址采用绝对路径,即使用网络上一个完整的路径名称。(6)E-mail超级链接,其格式为:指向E-mail地址的超级链接,Target属性,Target=“_blank”新窗口中显

16、示Target=“_parent”当前页面的父级框架Target=“_self”当前文档框架Target=“_top”链接所在的完整窗口中Target=“_search”在浏览器搜索显示目标网页(IE5或以上版本支持),2.创建指向本页面中的超链接 要在当前页面内实现超链接,需要定义两个标记:一个为超链接标记,另一个为书签标记。超链接标记的格式:显示的文本或者图像 书签标记的格式为:目标文本附近的字符串 功能:单击显示的文本或者图像,将跳转到“记号名”开始的文本。,2.5.1 无序列表标记功能:无序列表就是项目间并无顺序关系,仅仅利用条列来呈现资料,此种无序列表标记,在各条列前面均有一符号以示

17、区隔。格式:列表项目一 列表项目二 列表项目三 属性:无序列表使用和表示列表的开始和结束,标记表示每一个列表项目。,2.5 列表标记,无序列表标记在中,type属性的使用 列表项目一 列表项目二 列表项目三,在中,type属性的使用 DISC CIRCLE SQUARE,【实例2-7】无序列表标记的使用。,2.5.2 有序列表标记功能:有序列表用来设置有前后顺序之分的列表项。格式:列表项目一 列表项目二 列表项目三属性:有序列表使用和表示列表的开始和结束,标记表示每一个列表项目。,【实例2-8】有序列表标记的使用。,有序列表标记 默认的有序列表 默认的有序列表,第1项 第2项 第3项,2.5.

18、3 自定义列表标记功能:用于需要对列表条目进行简短说明的场合。格式:列表条目一条目一的说明列表条目二条目二的说明,属性:自定义列表使用和表示列表的开始和结束。标记表示每项自定义条目名称。标记表示每条自定义条目的说明,自动向右缩进。,【实例2-9】自定义列表标记的使用。,自定义列表标记这是一个定义性列表:DL标记符 代表HTML自定义列表。DT标记符,表示每个自定义列表项的标题。DD标记符 用于描述自定义列表项的内容。,2.6 表格标记,表格方便灵活的排版,目前很多大型网站也都是借助表格排版和页面布局的。表格可以把相互关联的信息元素集中定位,使浏览者浏览页面时一目了然。,功能:建立基本表格。格式

19、:表格标题表头一 表头二表头n表项一 表项二表项n表项一 表项二表项n,属性:(1)标记用来创建一个表格。(2)标记表示对表格标题的说明。(3)标记定义行,该标记中间的内容显示在一行,此标记对只能放在标记之间使用。(4)和标记表示单元格标记,这两个标记必须嵌套在标记中,成对出现。(5)要创建跨多行、多列的单元格,只需在或中加入ROWSPAN或COLSPAN属性的属性值,表明了表格中要跨越的行或列的个数。,【实例2-10】表格标记的简单应用。,表格标记 学生成绩表 姓名 课程名称 成绩,蓉蓉 数学 86 妮妮 计算机基础 90 娜娜 英语 82,不规则表格的产生,RowSpan=“2”,不规则表

20、格标记     ,ColSpan=“2”,ColSpan=“3”,表格的属性1,Align:left-“靠左”、center-“居中”和right-“靠右”Valigh:top-“靠上”、center-“居中”和bottom-”靠右”Bgcolor:设置背景颜色。Width:设置宽度。NoWrap:布尔属性,不自动拆行。,表格属性2,Border:边框CellSpacing:单元格间距(表格间距)CellPadding:单元格边距(表格填充),Border 边框宽度,CellSpacing 单元格与单元格的距离,CellPadding 单元格与单元格内容

21、的距离,2.7 图像和多媒体标记,2.7.1 图像标记 在网页中加入适当的图片可以使网页丰富多彩,具有更强的吸引力。HTML提供了标记来处理图像的输出。功能:在当前位置插入图像。格式:属性:src,alt,width,height,border,hspace,vspace,align。,【实例2-11】图像标记的应用。,图像标记的应用,2.7.2 音频标记功能:在网页中加入声音,声音文件可以是*.WAV、*.AU、*.MID等。格式:。属性:src属性表示声音文件的存放地址,loop控制播放次数,取-1或者INFINITE时,声音将一直播放到浏览者离开该网页时为止。,【实例2-12】音频标记的

22、应用。,背景声音网页的背景声音,2.7.3 视频标记功能:在页面中放置如SWF动画(即Flash动画)、MP3音乐、电影等多种格式的多媒体信息。格式:属性:src,height和width,hidden(true/false),autostart(true/false),loop。,【实例2-13】视频标记的应用。,2.8 表单标记,表单是实现动态网页的一种主要的外在形式,是HTML页面与浏览器端实现交互的重要手段。它的主要功能是收集信息,当单击表单中的提交按纽时,输入在表单中的信息就会从客户端的浏览器上传到服务器中,然后由服务器中的有关表单处理程序(ASP、CGI等程序)进行处理,处理后再将

23、用户所需信息传送到客户端浏览器上,这样网页就具有了交互性。在这里只介绍如何使用HTML的表单标记来设计表单。,1.标记功能:标记用来创建一个表单,即定义表单的开始与结束位置。格式:。属性:name,action,methodAction属性:规定传递数据后,服务器向客户端传送的 网页。Method属性:规定传递数据的方式。Post方式适合传 送大量数据,get方式适合传送少量数据。Post较get更安全 其原理:Get将表单中数据的按照variable=value的形式,添加到action所指向的URL后面,并且两者使用“?”连接,而各个变量之间使用“&”连接;Post是将表单中的数据放在fo

24、rm的数据体中,按照变量和值相对应的方式,传递到action所指向URL。Name属性:规定表单的名称。,2.标记功能:输入标记是表单中最常用的标记之一。该标记用来定义一个输入区,可在其中输入信息,此标记必须放在标记对之间。格式:。属性:name属性设置输入区域的名称,服务器就是通过name来获得该区域数据的。type属性设置输入区域的类型,Type属性,Input type=“text”Input type=“password”Input type=“file”Input type=“checkbox”Input type=“radio”Input type=“button”Input ty

25、pe=“submit”Input type=“reset”Input type=“image”Input type=“hidden”,表单输入标记示例用户信息调查姓名:网址:密码:确认密码:请上传你的照片:请选择你喜欢的音乐:摇滚乐爵士乐流行乐,【实例2-14】表单输入标记示例。,请选择你居住的城市:北京上海南京,3.和标记功能:标记用来创建一个下拉列表框或可以复选的列表框,它必须放在标记对之间。标记用来指定菜单和列表中的一个选项,它放在标记对之间。格式:选项一选项二。属性:name,multiple,value,表单菜单和列表标记示例用户信息调查请选择你喜欢的体育项目:足球篮球乒乓球网球,【

26、实例2-15】表单菜单和列表标记的应用。,请选择你居住的城市:北京上海南京广州,4.标记功能:用来创建一个可以输入多行的文本框,可以在其中输入更多的文本,此标记放在标记对之间。格式:。属性:name属性设置文本框的名称。Rows属性设置文本框的行数,以字符数为单位。cols属性设置文本框的列数,以字符数为单位。,表单文本框标记示例用户信息调查请留言:,【实例2-16】表单文本框标记的应用。,框架的作用就是把浏览器窗口划分成几个子窗口,每个子窗口可以调入各自的HTML文档形成不同的页面,也可以按照一定的方式组合在一起完成特殊的效果。框架通常的使用方法是在一个框架中放置目录并设置链接,点击链接,内

27、容显示在另一个框架中;或者有时一个网页的不同部分由不同的人员制作,可以每人完成一个子窗口,然后利用框架技术将它们合并在一起形成一个完整的页面。,2.9 框架标记,1.标记功能:定义分割窗口,即定义主文档中有几个框架并且各个框架是如何排列的。格式:。属性:cols属性与rows属性分别表示左右和上下分割窗口(用“,”分割,value为定义各个框架的宽度值,单位可以是百分比、绝对像素值或星号(“*”),其中星号表示剩余部分)。framespacing:设定框架集的边框宽度。bordercolor:设定框架集边框颜色。,2.标记功能:定义某一个具体的框架。格式:。属性:src属性设置框架显示的文件路

28、径。Name属性定义此框架的名字。scrolling属性设定滚动条是否显示。noresize属性禁止改变框架的尺寸大小。,3.标记 标记对放在标记对之间,用来在那些不支持框架的浏览器中显示文本或图像信息。,HTML语言是网页制作的一种规范,一种标准,是网站开发和网页设计的最基本知识,几乎所有的网页都是以HTML规范书写的,它通过标识符来标记网页的各个部分。本章首先介绍了HTML语言的基本概念、基本结构和基本语法规则。然后重点介绍了使用HTML制作网页的各种标记的使用方法,主要包括文字与段落标记、列表标记、表格标记、多媒体标记、超链接标记、表单标记和框架标记。熟练掌握这些标记的使用,将对网页的设

29、计打下良好的基础。,2.10 本章小结,3.10 习题,一、填空题1.HTML不是一种编程语言,而是一种描述性的标记语言,它通过_来标识网页中内容的显示方式。2.HTML网页文件主要由_和_两部分内容构成。3.HTML中用_标记强制换行。4.概括起来,文档的链接路径主要有_、_和_ 种形式。5._标记用来创建一个表单,即定义表单的开始与结束位置。二、实训题1.编写代码实现一个最基本的网页,页面输出“hello world!”,效果如下图所示。,2.编写代码实现下图浏览器显示效果,熟悉段落、换行、标题等基本标记。,3.编写代码实现下图浏览器显示效果,熟悉列表、超链接等标记。,4.编写代码实现下图

30、浏览器显示效果,熟悉表格及相关标记。,5.编写代码实现下图浏览器显示效果,熟悉表单及相关标记。,一、填空题1.标记符(标签、标识符)2.文件头、文件体3.4.绝对路径、相对路径、根目录相对路径5.,习题参考答案,二、实训题1.代码如下:Hello world!Hello world!,2.代码如下:静夜思李白床前明月光,疑是地上霜。举头望明月,低头思故乡。,3.代码如下:超链接 百度 新浪 搜狐 网易,4.代码如下:学生信息表学生信息表 编号 姓名 性别 院系 专业,0001 张三 男 信息工程学院 软件工程 0002 李四 男 文学院 汉语言文学,5.代码如下用户注册页面 用户注册 姓名:,密码:密码验证:请上传你的照片:请选择你喜欢的音乐:摇滚乐 爵士乐 流行乐,请选择你居住的城市:北京 上海 南京,

展开阅读全文
相关资源
猜你喜欢
相关搜索
资源标签

当前位置:首页 > 建筑/施工/环境 > 农业报告


备案号:宁ICP备20000045号-2

经营许可证:宁B2-20210002

宁公网安备 64010402000987号