02 HTML语言基础.ppt

《02 HTML语言基础.ppt》由会员分享，可在线阅读，更多相关《02 HTML语言基础.ppt（55页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第二讲第二讲HTML语言基础目的要求目的要求1、了解、了解HTML的语言基础知识；的语言基础知识；2、了解、了解HTML的基本语法格式。的基本语法格式。主要内容主要内容1、html基本标志基本标志2、html格式标志和文本标志格式标志和文本标志3、html教程图像标志教程图像标志4、html表格标志表格标志5、声音标志、声音标志6、超链接标志、超链接标志第二讲第二讲HTML语言基础语言基础2.1HTML的基本结构的基本结构Html是英文是英文HyperTextMarkupLanguage的缩写，中文意思是的缩写，中文意思是“超文本标志语言超文本标志语言”，用它编，用它编写的文件写的文件(文档文

2、档)的扩展名是的扩展名是.html或或.htm，它们是，它们是可供浏览器解释浏览的文件格式。您可以使用记事可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或本、写字板或FrontPageEditor等编辑工具来编等编辑工具来编写写Html文件。文件。Html语言使用标志对的方法编写文语言使用标志对的方法编写文件，既简单又方便，它通常使用件，既简单又方便，它通常使用来表示标志的开始和结束来表示标志的开始和结束(例如例如标志对标志对)，因此在，因此在Html文档中文档中这样的标志对都必须是成对使用的。这样的标志对都必须是成对使用的。头头部部信信息息文文档档主主体，体，正正文文部部分分1.标志

3、用于标志用于Html文档的最前边，用来标识文档的最前边，用来标识Html文档文档的开始。而的开始。而标志恰恰相反，它放在标志恰恰相反，它放在Html文档的最后文档的最后边，用来标识边，用来标识Html文档的结束，两个标志必须一块使用。文档的结束，两个标志必须一块使用。2.和和构成构成Html文档的开头部分，在此标志文档的开头部分，在此标志对之间可以使用对之间可以使用、等等等等标志对，这些标志对都是描述标志对，这些标志对都是描述Html文档相关信息的标志对，文档相关信息的标志对，标志对之间的内容是不会在浏览器的框内标志对之间的内容是不会在浏览器的框内显示出来的。两个标志必须一块使用。显示出来的。

4、两个标志必须一块使用。3.是是Html文档的主体部分，在此标志对之文档的主体部分，在此标志对之间可包含间可包含、等等等众多的标志，它们所定义的文本、图像等将会在浏览器的框等众多的标志，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须一块使用。内显示出来。两个标志必须一块使用。标志中还可以标志中还可以有以下属性：有以下属性：属性属性用途用途示例示例设置背景颜色设置背景颜色。设置文本颜色。设置文本颜色。设置链接颜色。设置链接颜色。设置已使用的链设置已使用的链接的颜色。接的颜色。设置正在被击中设置正在被击中的链接的颜色。的链接的颜色。说明说明:以上各个属性可以结合使用，如以上各个属性

5、可以结合使用，如。引。引号内的号内的rrggbb是用六个十六进制数表示的是用六个十六进制数表示的RGB(即红、绿、蓝三色的组合即红、绿、蓝三色的组合)颜色，如颜色，如#ff0000对应的是红色。此外，还可以使用对应的是红色。此外，还可以使用Html语言所给定的常量名来表示颜色：语言所给定的常量名来表示颜色：Black、White、Green、Yellow、如、如表示表示标志对标志对中的文本使用蓝色显示在浏览器的框内中的文本使用蓝色显示在浏览器的框内4.使用过浏览器的人可能都会注意到浏览使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，器窗口最上边蓝色部分显示的文本信息，那些

6、信息一般是网页的那些信息一般是网页的“主题主题”，要将您，要将您的网页的主题显示到浏览器的顶部，只要的网页的主题显示到浏览器的顶部，只要在在标志对之间加入您要标志对之间加入您要显示的文本即可。注意：显示的文本即可。注意：标志对只能放在标志对只能放在标志对之间。标志对之间。例例1Html文档中基本标志的使用文档中基本标志的使用标题标题红色背景、蓝色文本红色背景、蓝色文本2.2格式标志格式标志1.2.3.4.5.1.标志对是用来创建一个段落，在标志对是用来创建一个段落，在此标志对之间加入的文本将按照段落的格式显此标志对之间加入的文本将按照段落的格式显示在浏览器上。另外，示在浏览器上。另外，标志还可

7、以使用标志还可以使用align属性，它用来说明对齐方式，语法是：属性，它用来说明对齐方式，语法是：。align可以是可以是Left(左对左对齐齐)、Center(居中居中)和和Right(右对齐右对齐)三个值中三个值中的任何一个。如的任何一个。如表示标志对中的文本使用居中的对齐方式表示标志对中的文本使用居中的对齐方式2.是一个很简单的标志，它没有结束标是一个很简单的标志，它没有结束标志，它用来创建一个回车换行志，它用来创建一个回车换行。3.在在标志对标志对之间加入的文本将会在浏览器中按两边缩进的之间加入的文本将会在浏览器中按两边缩进的方式显示出来。方式显示出来。4.用来创建一个普通的列表，用来

8、创建一个普通的列表，用来创建列表中的上层项目，用来创建列表中的上层项目，用来创建列表中最下层项目，用来创建列表中最下层项目，和和都必须放在都必须放在标志对之间。标志对之间。例例2创建一个普通列表创建一个普通列表一个普通列表一个普通列表中国城市中国城市北京北京上海上海广州广州美国城市美国城市华盛顿华盛顿芝加哥芝加哥纽约纽约5.标志对用来创建一个有序的列标志对用来创建一个有序的列表；表；标志对用来创建一个无序的标志对用来创建一个无序的列表；列表；标志对只能在标志对只能在或或标志对之间使用，此标志对用标志对之间使用，此标志对用来创建一个列表项，若来创建一个列表项，若放在放在之间则每个列表项加上一个数

9、字，之间则每个列表项加上一个数字，若在若在之间则每个列表项加上一个之间则每个列表项加上一个圆点。圆点。例例3标有数字或圆点的列表标有数字或圆点的列表中国城市中国城市北京北京上海上海广州广州美国城市美国城市华盛顿华盛顿芝加哥芝加哥纽约纽约无论是无序列表还是有序列表都可以设置不同的类型，使用无论是无序列表还是有序列表都可以设置不同的类型，使用TYPE这个这个属性来设置的。咱们看看下面的几个例子属性来设置的。咱们看看下面的几个例子排序列表，不设排序列表，不设Type属性：属性：不设置属性的列表不设置属性的列表不设置属性的列表不设置属性的列表不设置属性的列表不设置属性的列表排序列表，排序列表，Type

10、属性设为属性设为A：设置属性为设置属性为A的列表的列表设置属性为设置属性为A的列表的列表设置属性为设置属性为A的列表的列表排序列表，排序列表，Type属性设为属性设为a：设置属性为设置属性为a的列表的列表设置属性为设置属性为a的列表的列表设置属性为设置属性为a的列表的列表排序列表，排序列表，Type属性设为属性设为I：设置属性为设置属性为I的列表的列表设置属性为设置属性为I的列表的列表设置属性为设置属性为I的列表的列表排序列表，排序列表，Type属性设为属性设为i：设置属性为设置属性为i的列表的列表设置属性为设置属性为i的列表的列表设置属性为设置属性为i的列表的列表Type设为设为disc的列

11、表，列表项前面的符号是圆黑点：的列表，列表项前面的符号是圆黑点：列表前面是圆黑点列表前面是圆黑点列表前面是圆黑点列表前面是圆黑点列表前面是圆黑点列表前面是圆黑点Type设为设为circle的列表，列表项前面的符号是空心圆：的列表，列表项前面的符号是空心圆：列表项前面的符号是空心圆列表项前面的符号是空心圆列表项前面的符号是空心圆列表项前面的符号是空心圆列表项前面的符号是空心圆列表项前面的符号是空心圆Type设为设为square的列表，列表项前面的符号是黑方块：的列表，列表项前面的符号是黑方块：列表项前面的符号是黑方块列表项前面的符号是黑方块列表项前面的符号是黑方块列表项前面的符号是黑方块列表项前

12、面的符号是黑方块列表项前面的符号是黑方块2.3文本标志文本标志1.2.,3.4.1.Html语言提供了一系列对文本中的标题进行语言提供了一系列对文本中的标题进行操作的标志对：操作的标志对：，即一共有，即一共有六对标题的标志对。六对标题的标志对。是最大的标是最大的标题，而题，而则是最小的标题，也即是则是最小的标题，也即是标志中标志中h后面的数字越大标题文本就越小。后面的数字越大标题文本就越小。2.用来使文本以黑体字的形式输出；用来使文本以黑体字的形式输出；用来使文本以斜体字的形式输出；用来使文本以斜体字的形式输出；用来使文本以下加一划线的形式输出；用来使文本以下加一划线的形式输出；文字当中划线表

13、示删除文字当中划线表示删除；下标下标上标；上标；缩进表示引用；缩进表示引用；与定义格式，保留空格和换行；与定义格式，保留空格和换行；表示计算机代码，等宽字体。表示计算机代码，等宽字体。3.用来输出引用方式的字体，用来输出引用方式的字体，通常是斜体；通常是斜体；用来输出需要强调的文本用来输出需要强调的文本(通通常是斜体加黑体常是斜体加黑体)；则用来输出加重文本则用来输出加重文本(通常也是斜体加黑体通常也是斜体加黑体)。4.可以对输出文本的字体大可以对输出文本的字体大小、颜色进行改变，这些改变主要是通过对它小、颜色进行改变，这些改变主要是通过对它的两个属性的两个属性size和和color的控制来实

14、现的。的控制来实现的。size属性用来改变字体的大小，它可以取值：属性用来改变字体的大小，它可以取值：-1、1和和+1；而；而color属性则用来改变文本的颜属性则用来改变文本的颜色，颜色的取值是讲过的十六进制色，颜色的取值是讲过的十六进制RGB颜色码颜色码或或Html语言给定的颜色常量名。语言给定的颜色常量名。例例4正文标题举例正文标题举例正文标题举例正文标题举例这是这是1号标题号标题这是这是2号标题号标题这是这是3号标题号标题这是这是4号标题号标题这是这是5号标题号标题这是这是6号标题号标题例例5文本格式的举例文本格式的举例文本格式举例文本格式举例粗体用粗体用b表示。表示。斜体用斜体用i表

15、示。表示。删除删除这个词当中划线表示删除。这个词当中划线表示删除。X2其中的其中的2是下标是下标X2其中的其中的2是上标是上标好好学习，天天向上。这句话缩进表示引用好好学习，天天向上。这句话缩进表示引用这是这是预设预设(preformatted)文本文本.在在pre这个这个tag里的文本里的文本保留保留空格和空格和分行。分行。callgetOrders用用code显示计算机代码，显示计算机代码，code里显示的字符是等宽字符。里显示的字符是等宽字符。例例6特殊格式的文本举例特殊格式的文本举例特殊格式的文本特殊格式的文本引用方式的文引用方式的文强调的文本强调的文本加重的文本加重的文本例例7字体大

16、小颜色种类的设置字体大小颜色种类的设置字体大小颜色种类的设置字体大小颜色种类的设置这段文字的字体大小值为这段文字的字体大小值为1。这段文字的字体大小值为这段文字的字体大小值为2。以下第一段用的是以下第一段用的是arial字体，第二段用的是字体，第二段用的是courier字体，第三段用的是字体，第三段用的是verdana字体。字体。arialcourierverdanaarialcourierverdanaarialcourierverdana2.4图像标志图像标志1.标志并不是真正地把图像给加入到标志并不是真正地把图像给加入到Html文文档中，而是将标志对的档中，而是将标志对的src属性赋值，

17、这个值是图形文属性赋值，这个值是图形文件的文件名，包括路径，这个路径可以是相对路径，件的文件名，包括路径，这个路径可以是相对路径，也可以是网址。实际上就是通过路径将图形文件嵌入也可以是网址。实际上就是通过路径将图形文件嵌入到您的文档中。无论是插入图片还是咱们往下要讲解到您的文档中。无论是插入图片还是咱们往下要讲解的超链接都需要掌握相对路径和绝对路径的概念只有的超链接都需要掌握相对路径和绝对路径的概念只有这样才能保证图片或超链接插入之后能够正确的使用这样才能保证图片或超链接插入之后能够正确的使用下面咱们先看一下相对路径和绝对路径的概念下面咱们先看一下相对路径和绝对路径的概念1、HTML相对路径相

18、对路径(RelativePath)同一个目录的文件引用同一个目录的文件引用如果源文件和引用文件在同一个目录里，直接写引用文件如果源文件和引用文件在同一个目录里，直接写引用文件名即可。名即可。我们现在建一个源文件我们现在建一个源文件info.html，在，在info.html里要插入里要插入index.jpg这样一个图片。这样一个图片。假设假设info.html路径是：路径是：c:Inetpubwwwrootsitesblablainfo.html假设假设index.html路径是：路径是：c:Inetpubwwwrootsitesblablaindex.jpg在在info.html加入加入in

19、dex.html超链接的代码应该这样写：超链接的代码应该这样写：如何表示上级目录如何表示上级目录./表示源文件所在目录的上一级目录，表示源文件所在目录的上一级目录，././表示源文件所在目录的上上级目表示源文件所在目录的上上级目录，以此类推。录，以此类推。假设假设info.html路径是：路径是：c:Inetpubwwwrootsitesblablainfo.html假设假设index.jpg路径是：路径是：c:Inetpubwwwrootsitesindex.jpg在在info.html插入图片插入图片index.jpg的代码应该这样写：的代码应该这样写：假设假设info.html路径是：路

20、径是：c:Inetpubwwwrootsitesblablainfo.html假设假设index.html路径是：路径是：c:Inetpubwwwrootindex.jpg在在info.html插入图片插入图片index.jpg的代码应该这样写：的代码应该这样写：假设假设info.html路径是：路径是：c:Inetpubwwwrootsitesblablainfo.html假设假设index.html路径是：路径是：c:Inetpubwwwrootsiteswowstoryindex.html在在info.html加入加入index.html超链接的代码应该这样写：超链接的代码应该这样写：如

21、何表示下级目录如何表示下级目录引用下级目录的文件，直接写下级目录文件的路径即可。引用下级目录的文件，直接写下级目录文件的路径即可。假设假设info.html路径是：路径是：c:Inetpubwwwrootsitesblablainfo.html假设假设index.jpg路径是：路径是：c:Inetpubwwwrootsitesblablahtmlindex.html在在info.html插入图片插入图片index.jpg的代码应该这样写：的代码应该这样写：假设假设info.html路径是：路径是：c:Inetpubwwwrootsitesblablainfo.html假设假设index.jpg路径是：路径是：c:Inetpubwwwrootsitesblablahtmltutorialsindex.html在在info.html插入图片插入图片index.jpg的代码应该这样写：的代码应该这样写：2、HTML绝对路径绝对路径HTML绝对路径指带域名的文件的完整路径。绝对路径指带域名的文件的完整路径。假设你注册了域名假设你注册了域名