网页制作 第十四章超文本编程技术.ppt

第 14章 超文本编程技术课前导读课堂讲解上机实战课后练习课前导读n基础知识n重点知识基础知识 HTML的基本概念，HTML的语法特征，HTML的基本文件格式。重点知识 用HTML控制各种网页元素，用HTML制作页面。课堂讲解n超文本标记语言（HTML）简介nHTML基本语法 Dreamweaver、FrontPage等网页编辑器生成的都是HTML文档，它们提供的其实都只是一个网页编辑的集成环境，采取可视化的界面，使用户不用了解具体的HTML标记，也可以十分轻松地编写出精美的网页。但如果想要更自由地控制网页的格式、效果，得到最好的代码质量，还需要学习一下HTML。超文本标记语言（HTML）简介nHTML基本概念nHTML语法特征nHTML的基本文件格式 HTMLHTML是是InternetInternet上用于编写网页的主要上用于编写网页的主要语言。语言。HTMLHTML不需要翻译而直接由浏览器解不需要翻译而直接由浏览器解释执行。如果不考虑释执行。如果不考虑ASPASP和和PHPPHP等，一般的等，一般的网页都可以在浏览器中查看其网页都可以在浏览器中查看其HTMLHTML代码。代码。HTMLHTML可以很方便地使用任何文本编辑器编可以很方便地使用任何文本编辑器编辑生成，也可以很方便地在辑生成，也可以很方便地在InternetInternet上传输。上传输。事实上访问一个网页时，就是从服务器上下事实上访问一个网页时，就是从服务器上下载它的源代码，然后使用网页浏览器自带的载它的源代码，然后使用网页浏览器自带的解释器解释执行该源代码，按照解释结果将解释器解释执行该源代码，按照解释结果将网页展现在我们面前。因此同一个网页，在网页展现在我们面前。因此同一个网页，在不同的浏览器或同一浏览器的不同版本上的不同的浏览器或同一浏览器的不同版本上的显示效果都很可能是不一样的。显示效果都很可能是不一样的。HTML基本概念 HTMLHTML是是Hyper Text Markup LanguageHyper Text Markup Language的的首字母缩写，中文通常称作超文本标记语言。首字母缩写，中文通常称作超文本标记语言。用其语法规则建立的文档可以运行在不同操用其语法规则建立的文档可以运行在不同操作系统的平台上。它的作用是通过一些标签作系统的平台上。它的作用是通过一些标签来告诉浏览器怎么显示标签中的内容。来告诉浏览器怎么显示标签中的内容。HTMLHTML中的标签是固定的，不能扩展标签，中的标签是固定的，不能扩展标签，在在HTMLHTML文件中要显示的数据和如何显示这文件中要显示的数据和如何显示这些数据的方法同时存在，即些数据的方法同时存在，即HTMLHTML不仅要负不仅要负责组织数据还要负责显示数据。责组织数据还要负责显示数据。HTMLHTML文件文件的扩展名为的扩展名为htmhtm或或htmlhtml。HTML语法特征 纯文本标记语言的语言构成主要通过各种标记（Tag）来表示，通常标记由符号“”以及其中所包容的标记元素组成。如想在浏览器中显示一段倾斜的文本，可采用标记和，如粗体显示。在用浏览器显示时，标记和不会显示，浏览器在文档中发现了这对标记，就将其中包容的文字（如前面的“粗体显示”）以倾斜方式显示。n nHTMLHTML的语法规则有以下的语法规则有以下3 3种表达方式：种表达方式：n n 对象对象/n n 2对象对象/n n n n语句中标记的书写不分大小写。下面分别对语句中标记的书写不分大小写。下面分别对3 3种标记形式进行介绍。种标记形式进行介绍。n n 对象对象/该语法显示了使该语法显示了使用封闭类型标记的形用封闭类型标记的形式。多数标记是封闭式。多数标记是封闭类型的，它们成对出类型的，它们成对出现，在对象内容的前现，在对象内容的前面是一个标记，在对面是一个标记，在对象内容的后面是另一象内容的后面是另一标记，第二个标记元标记，第二个标记元素前带有反斜线，表素前带有反斜线，表明结束标记对对象的明结束标记对对象的控制。如控制。如 i国际名牌国际名牌进军中国进军中国/i表示浏表示浏览器以斜体的形式显览器以斜体的形式显示示“国际名牌进军中国际名牌进军中国国”，如图，如图15-115-1所示。所示。图15-1 如果一个该如果一个该封闭的标记而没封闭的标记而没有被封闭，则会有被封闭，则会随浏览器的不同随浏览器的不同而出现各种错误。而出现各种错误。如忘记用如忘记用/i标标记封闭记封闭“国际名国际名牌进军中国牌进军中国”文文本，则后面输入本，则后面输入的所有文字都会的所有文字都会以斜体的形式出以斜体的形式出现，如图现，如图15-215-2所所示。示。图15-2n n 2对象对象/该语法显示了使用封闭类型标记的扩该语法显示了使用封闭类型标记的扩展形式，利用属性可以进一步设置对象某方展形式，利用属性可以进一步设置对象某方面的内容，而参数则是设置的结果。如面的内容，而参数则是设置的结果。如.com”导向科技主页导向科技主页/a。和和/a是锚标记，用于在文档中创是锚标记，用于在文档中创建超级链接，建超级链接，hrefhref是该标记的属性之一，用是该标记的属性之一，用于设置超级链接所指向的地址，在于设置超级链接所指向的地址，在“=”=”后后面的就是面的就是hrefhref属性的参数，对象是属性的参数，对象是“导向科导向科技主页技主页”文本，在浏览器中预览如文本，在浏览器中预览如图图15-315-3所所示。示。一个标记的属性可以有多个，在描述一个标记的属性可以有多个，在描述完一个属性后，输入一个空格，然后继续描完一个属性后，输入一个空格，然后继续描述其他属性。述其他属性。n n 该语法显示了该语法显示了使用非封闭类型使用非封闭类型标记的形式，在标记的形式，在HTMLHTML语言中，非语言中，非封闭类型很少，封闭类型很少，但的确存在，最但的确存在，最常用的是常用的是 换换行标记。行标记。如若要使一段如若要使一段文字换行显示可文字换行显示可以在文字要换行以在文字要换行的地方添加换行的地方添加换行标记标记 。如：如：美丽容颜美丽容颜 从从今开始，在浏览今开始，在浏览器上就会以一段器上就会以一段两行显示，如图两行显示，如图15-415-4所示。所示。图15-3图15-4 HTMLHTML代码都是由代码都是由以上以上3 3种标记形式组合而种标记形式组合而成的，标记之间可以相成的，标记之间可以相互嵌套，形成更为复杂互嵌套，形成更为复杂的语法。如：的语法。如：b，则文本会以则文本会以粗体和斜体显示，如图粗体和斜体显示，如图15-515-5所示。所示。图15-5 在嵌套标记时，要注意嵌套标记封闭时的顺序，如果标记的嵌套顺序发生混乱，则显示结果也会发生错误。如：开启梦想之门，效果如图15-6所示。图15-6HTML的基本文件格式 HTMLHTML文本可以用任何纯文本编辑器编辑。如文本可以用任何纯文本编辑器编辑。如用用DOSDOS下的下的editedit、WindowsWindows下的记事本等。下的记事本等。HTMLHTML文件的一般格式为：文件的一般格式为：html!-html-head!-=gb2312!-meta-title无标题文档无标题文档/title!-/head!-body!-html-/body!-html-/html!-html-HTML文件具有以下几个特点。n n 在一个在一个HTMLHTML文件的开头必须加上文件的开头必须加上 html标标记说明下面的文件属于记说明下面的文件属于HTMLHTML文件，这样浏文件，这样浏览器才能正确识别，在文件结束时还应加上览器才能正确识别，在文件结束时还应加上文件的终止标记文件的终止标记/html，浏览器解释文件时浏览器解释文件时发现有这个标记时就会停止执行。发现有这个标记时就会停止执行。n n 在在 head起始标记开始到起始标记开始到/head终止标记内终止标记内的文本都属于的文本都属于HTMLHTML文件的文件头。它只定文件的文件头。它只定义义HTMLHTML文件需要特殊处理的一些预先说明，文件需要特殊处理的一些预先说明，并不属于并不属于HTMLHTML文件内容，因此这部份内容文件内容，因此这部份内容并不在浏览器中显示。并不在浏览器中显示。n n 标记用于说明此份文件的标题，说明标记用于说明此份文件的标题，说明此页此页HTMLHTML文件的标题是什么，当浏览器浏文件的标题是什么，当浏览器浏览该文件时，会将标题显示在浏览器最上方览该文件时，会将标题显示在浏览器最上方的标题栏内。的标题栏内。n n在编辑在编辑HTMLHTML时，为了维护文件方便或容易时，为了维护文件方便或容易阅读，可以在文件内加上注解进行说明。注阅读，可以在文件内加上注解进行说明。注释标签的格式为：释标签的格式为：!-。注释标签中的内容不会显示在浏览器中。注释标签中的内容不会显示在浏览器中。n n在在 body和和/body之间的文本是之间的文本是HTMLHTML文件文件的主体部分，也是整个的主体部分，也是整个HTMLHTML文件最重要的文件最重要的部分。部分。最好不使用Word等字编辑软件来编写HTML代码。建议使用Windows附件里的记事本来编写HTML文档HTML基本语法n n用HTML控制网页文本n n用HTML控制网页图像n n用HTML控制网页媒体n n用HTML控制其他元素通过前面的学习，相信讲读者已经对HTML有所了解，但这还远远没有达到学习本课的目的，下面具体讲解HTML的一些基本语法，也就是各种常用的标记。用HTML控制网页文本 在在HTMLHTML中定义了大量的标记来格式化文中定义了大量的标记来格式化文本。常用的标记如表本。常用的标记如表15-115-1所示。所示。表15-1续续 表表用HTML控制网页图像 HTMLHTML还提供了许多标记对网页图像进还提供了许多标记对网页图像进行控制，其常用的标记如表行控制，其常用的标记如表15-215-2所示。所示。表15-2用HTML控制网页媒体 HTMLHTML还可以控制网页的各种媒体，其还可以控制网页的各种媒体，其常用的标记如表常用的标记如表15-315-3所示。所示。表15-3用HTML控制其他元素 HTML除了对以上元素进行控制外，还可以对表格、框架、表单等进行控制，其常用的标记如表15-4所示。表15-4续续 表表上机实战 本课上机实战将制作一个简单的个人简本课上机实战将制作一个简单的个人简介页面。利用记事本进行代码的编写，该页介页面。利用记事本进行代码的编写，该页面分为两个部分，一是标题面分为两个部分，一是标题“欢迎光临我的欢迎光临我的第一个页面第一个页面”，二是正文部分。正文中以斜，二是正文部分。正文中以斜体和粗体显示文字体和粗体显示文字“这是我制作的第一个页这是我制作的第一个页面，请大家多多关照面，请大家多多关照”，一级标题，一级标题“个人简个人简介介”，包括，包括“姓名姓名”、“年龄年龄”和一张照片，和一张照片，段落字体为段落字体为“棕色（棕色（#990000#990000）”，格式为居，格式为居中、字体为中、字体为“隶书隶书”、字号为、字号为“30”30”，将其，将其保存为保存为myfristmyfrist.htmhtm文件，预文件，预 览效果如图览效果如图15-715-7所所示。希望通过学习示。希望通过学习这个例子读者能掌这个例子读者能掌握握HTMLHTML语言的基语言的基本用法，为以后的本用法，为以后的学习打下良好基础。学习打下良好基础。制作这个个人制作这个个人简介页面的具体操简介页面的具体操作如下。作如下。图15-7 （1 1）选择）选择 开始开始 所有程序所有程序 附件附件 记事记事本本 菜单命令打开菜单命令打开“记事本记事本”窗口。窗口。（2 2）在编辑窗口中输入）在编辑窗口中输入 html作为作为HTMLHTML文件的文件的开始标记。开始标记。（3 3）按）按【EnterEnter】键，输入键，输入 head作为文件头开作为文件头开始标记。始标记。（4 4）按）按【EnterEnter】键，输入键，输入 title作为文件标作为文件标题开始标记。题开始标记。（5 5）在）在 title后，输入后，输入“欢迎光临我的第一个欢迎光临我的第一个页面页面”，该文本显示在浏览器的标题栏上。，该文本显示在浏览器的标题栏上。（6 6）输入）输入/title作为文件标题结束标记。作为文件标题结束标记。（7 7）按）按【EnterEnter】键，输入键，输入/head作为文件头作为文件头结束标记。结束标记。（8 8）按）按【EnterEnter】键，输入键，输入 body作为作为HTMLHTML正文正文开始标记。开始标记。（9 9）按）按【EnterEnter】键，输入键，输入 b这是我这是我制作的第一个页面，请大家多多关照制作的第一个页面，请大家多多关照/i，使文本以粗体和斜体显示。使文本以粗体和斜体显示。（1010）按）按【EnterEnter】键，输入键，输入 换行。换行。（1111）按）按【EnterEnter】键，输入键，输入 align=center个人简介个人简介/h1，使标题为一使标题为一级标题并居中显示。级标题并居中显示。（1212）按）按【EnterEnter】键，输入键，输入 换行。换行。（1313）按）按【EnterEnter】键，输入键，输入 align=center作为段落的开始标记，段落格作为段落的开始标记，段落格式居中。式居中。（1414）按）按【EnterEnter】键，输入键，输入 size=5 color=#990000姓名：罗成姓名：罗成 年龄：年龄：7 7岁岁 ，使文本字体为使文本字体为“隶书隶书”，字号为字号为5 5，颜色为，颜色为“棕色棕色”。文本为换行显示。文本为换行显示。（1515）按）按【EnterEnter】键，输入键，输入 width=“210”height=“298”插入一幅照插入一幅照片，设置照片的源文件，照片的宽度和高度片，设置照片的源文件，照片的宽度和高度分别为分别为210210、298298。（1616）按）按【EnterEnter】键，输入键，输入/font作为字作为字体标记的结束。体标记的结束。（1717）按）按【EnterEnter】键，输入键，输入/p，作为段作为段落格式的结束标记。落格式的结束标记。（1818）按）按【EnterEnter】键，输入键，输入/body，作为作为HTMLHTML正文的结束记。正文的结束记。（1919）按）按【EnterEnter】键，输入键，输入/html，作为作为HTMLHTML文件的结束标记。完成后的代码如图文件的结束标记。完成后的代码如图15-815-8所所示。示。（20）选择文件保存菜单命令，打开“另存为”对话框。图15-8所示 （2121）在）在“文件名文件名”文本文本框中输入框中输入myfristmyfrist.htmhtm，在在“保存类型保存类型”列表中选择列表中选择“所有文件所有文件”，如图，如图15-915-9所所示。示。图15-9 （22）单击 按钮，保存文件为myfirst.htm。（23）打开保存文件myfirst.htm的文件夹即可看到myfirst.htm文件以 表示。（24）双击该图标即可打开浏览器，预览个人简介页面，如图15-7所示。课后练习n填空题n判断题n上机操作题填空题 （1 1）HTMLHTML的全称是的全称是 。（2 2）HTMLHTML文件的扩展名可用文件的扩展名可用 或或 。（3 3）HTMLHTML的语法规则有的语法规则有 、3 3种表达方式。种表达方式。对象htmlhtm超文本标记语言对象判断题 （1 1）对象对象/是封闭类型标记。（）是封闭类型标记。（）（2 2）在）在HTMLHTML中一般不用中一般不用 非封闭型标记。非封闭型标记。（）（）（3 3）语句中标记的书写不分大小写。）语句中标记的书写不分大小写。（）（）（4 4）标记的嵌套顺序发生混乱，显示结果不会发）标记的嵌套顺序发生混乱，显示结果不会发生错误。生错误。（）（）上机操作题 在在记记事事本本中中编编写写“我我的的小小屋屋”页页面面，要要求求：在在HTMLHTML中中 body部部分分添添加加“我我的的小小屋屋”设设置置字字体体为为“黑黑体体”，字字号号为为“6”6”，一一段段两两头头缩缩进进的的文文字字，字字体体为为“楷楷体体”，字字号号为为“4”4”字字体体颜颜色色为为“#006600”#006600”，效效果果如如图图15-1015-10所示。所示。图15-10 提示：参见本课的相关知识。