第02章HTML简介.ppt
《第02章HTML简介.ppt》由会员分享,可在线阅读,更多相关《第02章HTML简介.ppt(121页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、第第第第3 3 3 3章章章章HTMLHTML简简介介介介第三章第三章HTML简介简介HTML的全称是的全称是:HyperTextMarkupLanguage.它不是它不是一种编程语言,只是标记语言,只要明白各种标记的用法就一种编程语言,只是标记语言,只要明白各种标记的用法就算学懂了算学懂了HTML。HTML的格式非常简单,只是由文字及标记组合而成,它的格式非常简单,只是由文字及标记组合而成,它通过标记来显示网页中的各个部分通过标记来显示网页中的各个部分(告诉浏览器如何显示网告诉浏览器如何显示网页页),任何的文字编辑器都可以编辑任何的文字编辑器都可以编辑HTML文档。文档。第第第第3 3 3
2、3章章章章HTMLHTML简简介介介介HTML文档的特点文档的特点结构化结构化元素是元素是HTML文档中最基本的组成部分,例如:标题、文档中最基本的组成部分,例如:标题、段落、表格等,这些元素都是由各种标记来标注的。因此段落、表格等,这些元素都是由各种标记来标注的。因此HTML文档具有特定的逻辑结构,是一种结构化的文本文文档具有特定的逻辑结构,是一种结构化的文本文档。档。超文本超文本HTML文档中有许多指向其他文档中有许多指向其他HTML文档或者图像、动画文档或者图像、动画等的多媒体的超链接,因此它是一种超文本文档。等的多媒体的超链接,因此它是一种超文本文档。第第第第3 3 3 3章章章章HT
3、MLHTML简简介介介介与文本无关与文本无关HTML是是Web中的通用描述语言,为各种操作系统提供一中的通用描述语言,为各种操作系统提供一个公开的标准,因此个公开的标准,因此HTML可以应用在各种平台上。可以应用在各种平台上。容易维护容易维护HTML语言的开发采用向后兼容的方式,新版本是旧版本语言的开发采用向后兼容的方式,新版本是旧版本的继承和发展,因此它的维护非常方便。的继承和发展,因此它的维护非常方便。易学易学HTML语言不复杂,掌握比较容易,创建语言不复杂,掌握比较容易,创建HTML文档的文档的过程也很简单。过程也很简单。第第第第3 3 3 3章章章章HTMLHTML简简介介介介HTML
4、语法语法HTML文件是由文件是由开始,而以开始,而以为文件为文件的结束,其中的结束,其中”符号之间所表示的字符串符号之间所表示的字符串称称为标记。为标记。第第第第3 3 3 3章章章章HTMLHTML简简介介介介元素元素网页就是由一个个元素构成的,例如:网页就是由一个个元素构成的,例如:网页的标题网页的标题,是网页的标题元素,它由标记是网页的标题元素,它由标记“”表示的,在表示的,在HTML中,各种中,各种HTML元素都是用标记来表示的,如标题、段落、元素都是用标记来表示的,如标题、段落、表格等。表格等。标记(标记(tag)网页元素由三部分组成:起始标记、元素内容、结束标网页元素由三部分组成:
5、起始标记、元素内容、结束标记。记。网页的标题网页的标题有些元素只有起始标记,而没有结束标记,如换行标记有些元素只有起始标记,而没有结束标记,如换行标记.第第第第3 3 3 3章章章章HTMLHTML简简介介介介属性属性属性通常用来提供元素的进一步信息,一般写在起始标属性通常用来提供元素的进一步信息,一般写在起始标签里。例如:签里。例如:bgcolor是属性名称,是属性名称,red是属性值。表示是属性值。表示body元素的背元素的背景颜色是红色的。不同元素的属性也是不同的。景颜色是红色的。不同元素的属性也是不同的。注释注释注释说明由注释说明由“”结束。注释说明中的每结束。注释说明中的每一条注释以
6、一条注释以“-”为开始和结束。为开始和结束。第第第第3 3 3 3章章章章HTMLHTML简简介介介介重要约定重要约定HTML文档的扩展名文档的扩展名该文档的扩展名应该是该文档的扩展名应该是.html或或.htm。不同的系统有不同的规定,例如:不同的系统有不同的规定,例如:Unix操作系统操作系统它的扩展名必须是它的扩展名必须是.html,否则用,否则用Unix浏览文档时浏览文档时只能看到源文件,而不能显示结果。只能看到源文件,而不能显示结果。第第第第3 3 3 3章章章章HTMLHTML简简介介介介HTML文档的显示文档的显示HTML文档是加有标记的纯文本文件文档是加有标记的纯文本文件,它的
7、源文件它的源文件不不包包含任何格式含任何格式,用元素来表示其字符和段落。浏览器根据,用元素来表示其字符和段落。浏览器根据HTML的标记和属性来显示文档的格式,的标记和属性来显示文档的格式,因此它不理睬源文档中的回车换行符,而是自动向右因此它不理睬源文档中的回车换行符,而是自动向右侧移动。侧移动。如果在如果在HTML文档中要求换行文档中要求换行,则必须使用换行标记则必须使用换行标记第第第第3 3 3 3章章章章HTMLHTML简简介介介介HTML文档的结构文档的结构.为为HTML文档的开头和结尾,文档的开头和结尾,HTML文档包括头文档包括头.和主体和主体.。大小写的标记是相同的。第第第第3 3
8、 3 3章章章章HTMLHTML简简介介介介部分部分头部分用来标明当前文档的有关信息,如头部分用来标明当前文档的有关信息,如文档标文档标题题、以及属于文档内容的、以及属于文档内容的编码方式编码方式等。等。在在HEAD的起始标记和结束标记之间可输入其他的元的起始标记和结束标记之间可输入其他的元素,最重要的两个元素是素,最重要的两个元素是TITLE和和META.TITLE该元素通常不视为文本内容的一部分,它的内容显示该元素通常不视为文本内容的一部分,它的内容显示为文档标题或窗口标题。每个文档只能有一个标题。为文档标题或窗口标题。每个文档只能有一个标题。第第第第3 3 3 3章章章章HTMLHTML
9、简简介介介介META元素元素该元素用来描述该元素用来描述HTML文档的相关信息,比如作者、文档的相关信息,比如作者、搜索关键字、版权声明和有效日期等。搜索关键字、版权声明和有效日期等。META元素有起元素有起始标记,没有结束标签。始标记,没有结束标签。meta分两大部分:分两大部分:http-equiv变量和变量和name变量变量http-equiv它回应给浏览器一些有用的信息,以帮助正确和精确它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容地显示网页内容第第第第3 3 3 3章章章章HTMLHTML简简介介介介常用的常用的http-equiv类型有:类型有:content-typ
10、e和和contentlanguage(显示字符集的显示字符集的设定设定):gb2312是简体中文简体码。其它还是简体中文简体码。其它还big5等字符集,分别用于不同的字体显示等字符集,分别用于不同的字体显示。refresh(期限期限):设定网页自动刷新时间。:设定网页自动刷新时间。第第第第3 3 3 3章章章章HTMLHTML简简介介介介name变量变量meta标记的标记的name变量语法格式是变量语法格式是其中其中xxx主要有下面几种参数:主要有下面几种参数:1)keywords(关键字)用来告诉搜索引擎你网页的关键字(关键字)用来告诉搜索引擎你网页的关键字是什么。是什么。2)descrip
11、tion(简介)用来告诉搜索引擎你网页的主要内(简介)用来告诉搜索引擎你网页的主要内容。容。metaname=keywordscontent=life,universe,relationships,themeaningoflife,science 第第第第3 3 3 3章章章章HTMLHTML简简介介介介主体主体BODY部分部分BODY元素是元素是HTML文档的主体,包括文档中的文文档的主体,包括文档中的文字、图片、动画、声音等。它制定文档主体的开始,并字、图片、动画、声音等。它制定文档主体的开始,并能设置整张网页的背景图像、背景颜色、链接颜色以及能设置整张网页的背景图像、背景颜色、链接颜色以
12、及页面的上边距和下边距等。页面的上边距和下边距等。第第第第3 3 3 3章章章章HTMLHTML简简介介介介背景图片背景图片background指定背景图片,充满整个显示区。指定背景图片,充满整个显示区。背景颜色背景颜色bgcolor指定文档的背景颜色,指定文档的背景颜色,link指定尚未访问的超指定尚未访问的超链接的颜色,链接的颜色,vlink指定已访问的超链接颜色。指定已访问的超链接颜色。颜色值可以是颜色值可以是16进制值,也可以是颜色名。进制值,也可以是颜色名。red=#FF0000;blue=#0000FF若若bgcolor和和background同时指定,浏览器以同时指定,浏览器以b
13、ackground为为主。主。不设置该参数,不设置该参数,不会影响显示,反不会影响显示,反而会加速网页的下而会加速网页的下载速度。载速度。背景设置背景设置第第第第3 3 3 3章章章章HTMLHTML简简介介介介插入文字插入文字HTML文档不能自行分段和换行,它的分段和换行设文档不能自行分段和换行,它的分段和换行设置必须通过添加标记来完成。置必须通过添加标记来完成。分段标记分段标记起始标记作为段落的开始,中间填写要写的段落,起始标记作为段落的开始,中间填写要写的段落,最后用结束标记最后用结束标记结束。结束。单独写一个单独写一个会添加一个空行。会添加一个空行。第第第第3 3 3 3章章章章HTM
14、LHTML简简介介介介换行元素换行元素该标记指示浏览器产生一个换行命令,不表示段落的该标记指示浏览器产生一个换行命令,不表示段落的结束。结束。和和区别:区别:不同的行间距。不同的行间距。第第第第3 3 3 3章章章章HTMLHTML简简介介介介文字控制文字控制字号属性字号属性指定字体的大小,有效字号范指定字体的大小,有效字号范围是从围是从1到到7,默认字号为,默认字号为3。字体大小也可以字体大小也可以3为基准用相对大小来表示,如:为基准用相对大小来表示,如:+1代表代表4,-1代表代表2.第第第第3 3 3 3章章章章HTMLHTML简简介介介介颜色属性颜色属性指定指定font标记之间标记之间
15、的字体颜色。的字体颜色。设定网页的字体。设定网页的字体。字体属性字体属性设定字体。设定字体。例如:例如:这段文字为楷体这段文字为楷体第第第第3 3 3 3章章章章HTMLHTML简简介介介介pre标记标记HTML会忽略代码中的空格、换行等。会忽略代码中的空格、换行等。表示将该标记包括起来的文字的空表示将该标记包括起来的文字的空格、换行仍有效。格、换行仍有效。第第第第3 3 3 3章章章章HTMLHTML简简介介介介空格符空格符在在HTML中,空格符不具有调整间距的功能(连中,空格符不具有调整间距的功能(连续出现多个空格符时,仅以续出现多个空格符时,仅以第一个第一个空格符有效),空格符有效),想
16、正确使用空格符,改用空格符的编码值想正确使用空格符,改用空格符的编码值“ ”第第第第3 3 3 3章章章章HTMLHTML简简介介介介文本修饰文本修饰:粗体字粗体字斜体字斜体字加下划线加下划线第第第第3 3 3 3章章章章HTMLHTML简简介介介介使用列表使用列表在在web页面上页面上,列表可以使网页显得有条理列表可以使网页显得有条理,清晰易读。清晰易读。列表分为有序列表(列表分为有序列表(OrderedLists)和无序列表)和无序列表(UnorderedLists)。)。有序列表有序列表也叫编号列表,它在列表项前有编号,可以是数字也叫编号列表,它在列表项前有编号,可以是数字(阿拉
17、伯和罗马数字),也可以是字母。有编号,增(阿拉伯和罗马数字),也可以是字母。有编号,增加了在列表项顺序上的注意力。加了在列表项顺序上的注意力。第第第第3 3 3 3章章章章HTMLHTML简简介介介介有序列表语法语法:第一列表项第一列表项第二列表项第二列表项和和配套使用产生列表。配套使用产生列表。ol为为“orderlist”,li为为“listitem”。的属性表示整个列表的属性。的属性表示整个列表的属性。的属性表示单个列表项的属性。的属性表示单个列表项的属性。第第第第3 3 3 3章章章章HTMLHTML简简介介介介标记还可以标记还可以“type”属性设置不同的编号样式。属性设置不同的编号
18、样式。属性值属性值说明说明type=“A”项目编号为项目编号为A、B、Ctype=“a”项目编号为项目编号为a、b、ctype=“I”项目编号为项目编号为I、II、IIItype=“i”项目编号为项目编号为i、ii、iiitype=“1”项目编号为项目编号为1、2、3默认为阿拉伯数字默认为阿拉伯数字第第第第3 3 3 3章章章章HTMLHTML简简介介介介无序列表无序列表无序列表的前导字符是实心圆、实心方框或空心圆无序列表的前导字符是实心圆、实心方框或空心圆第一列表项第一列表项第二列表项第二列表项标记也可以标记也可以“type”属性设置不同的项目编号。属性设置不同的项目编号。属性值属性值“di
19、sc”,”square”,”circle”第第第第3 3 3 3章章章章HTMLHTML简简介介介介插入水平线插入水平线在网页中加入水平线。在网页中加入水平线。宽度为浏览器画面宽度为浏览器画面80%的水平线的水平线宽度为宽度为200的水平线的水平线之间文本的中间加一条横线。之间文本的中间加一条横线。第第第第3 3 3 3章章章章HTMLHTML简简介介介介图片的插入图片的插入在在web上使用的图像分为两类:内部图像和外部上使用的图像分为两类:内部图像和外部图像。图像。l内部图像:内部图像:在页面的文本和链接之间直接出现,载入页面时自动在页面的文本和链接之间直接出现,载入页面时自动的载入。格式受
20、限,必须是的载入。格式受限,必须是gif或是或是jpeg。l外部图像:外部图像:用户载入一个页面时并不直接显示,只在需要的时用户载入一个页面时并不直接显示,只在需要的时候,才被下载。候,才被下载。第第第第3 3 3 3章章章章HTMLHTML简简介介介介在在HTML文件中,图片文件与文件中,图片文件与HTML文件是分开存放文件是分开存放的。的。HTML支持的图像元素是支持的图像元素是“img”,它用来将图像嵌,它用来将图像嵌入入HTML文档中,嵌入的图像为内部图像。文档中,嵌入的图像为内部图像。绝对路径绝对路径明确指出图像文件的完整路径。明确指出图像文件的完整路径。例如:例如:相对路径相对路径
21、图像文件与网页在同一个目录下时使用。图像文件与网页在同一个目录下时使用。img没有结束标记第第第第3 3 3 3章章章章HTMLHTML简简介介介介指定图像的高度和宽度指定图像的高度和宽度width和和height属性用来重新定义图像的尺寸。属性用来重新定义图像的尺寸。图片的高度和宽度也可以用百分比图片的高度和宽度也可以用百分比“%”来表示,例如:来表示,例如:width=50%,height=50%图片的属性图片的属性第第第第3 3 3 3章章章章HTMLHTML简简介介介介图像边框图像边框为了增加图片的视觉效果,通常使用边框来表为了增加图片的视觉效果,通常使用边框来表示,易于看到超链接而不
22、会混淆。默认值是没有边示,易于看到超链接而不会混淆。默认值是没有边框的。框的。border属性可用来实现该功能。属性可用来实现该功能。Alt属性属性当图像未完全显示时,在图像位置显示的文字信当图像未完全显示时,在图像位置显示的文字信息。息。第第第第3 3 3 3章章章章HTMLHTML简简介介介介Align属性属性 在在HTML中,文字和图像可以在同一行显示,但由于图中,文字和图像可以在同一行显示,但由于图像与文字的高度并不一致,因此,该属性可使图像与文字像与文字的高度并不一致,因此,该属性可使图像与文字对齐。对齐。Align=top:使图像与本行的最高点对齐;:使图像与本行的最高点对齐;Al
23、ign=middle:当前基准线与图像中线对齐;:当前基准线与图像中线对齐;Align=left:图像靠左;:图像靠左;Align=bottom:图像底部与当前行的基准线对齐:图像底部与当前行的基准线对齐Center属性属性无论是文字还是图像,默认都是靠左显示,在标记无论是文字还是图像,默认都是靠左显示,在标记之间的任何对象都会被居中输出。之间的任何对象都会被居中输出。第第第第3 3 3 3章章章章HTMLHTML简简介介介介超级链接(超级链接(Hyperlink)点击文字或图像时,可以链接到其他网页的功能。点击文字或图像时,可以链接到其他网页的功能。超级链接是不同页面之间浏览和网站之间浏览的
24、主要超级链接是不同页面之间浏览和网站之间浏览的主要手段。手段。超级链接可以分为文字超级链接和图片超级链接超级链接可以分为文字超级链接和图片超级链接文字超级链接文字超级链接在链接标题前后分别加入在链接标题前后分别加入url可以是网站地址、邮件地址和本地网页地址等。可以是网站地址、邮件地址和本地网页地址等。第第第第3 3 3 3章章章章HTMLHTML简简介介介介图片超链接图片超链接在在与与之间加入之间加入页内超级链接页内超级链接超级链接可以发生在同一个网页之中,也就是文件内部的超级链接可以发生在同一个网页之中,也就是文件内部的自我链接,适合于长篇幅的网页。自我链接,适合于长篇幅的网页。页内链接的
25、表示方式:页内链接的表示方式:“#”字符加上标记名称。字符加上标记名称。主题!主题!当点击主题时,浏览器需要知道转到何处!需要加上页内当点击主题时,浏览器需要知道转到何处!需要加上页内标记名称,页内标记为:标记名称,页内标记为:跳到该主题!跳到该主题!第第第第3 3 3 3章章章章HTMLHTML简简介介介介超链接邮件帐号超链接邮件帐号在网页中会放置网站的服务信箱,当用户点击该在网页中会放置网站的服务信箱,当用户点击该信箱时,会启动计算机内默认的邮件软件,并将该信箱时,会启动计算机内默认的邮件软件,并将该邮件地址放在收件人的位置。邮件地址放在收件人的位置。第第第第3 3 3 3章章章章HTML
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 02 HTML 简介
限制150内