《网页设计与制作项目教程》-项目二

任务一初识HTML

一、项目简介ＨＴＭＬ(ＨｙｐｅｒＴｅｘｔＭａｒｋｕｐＬａｎｇｕａｇｅ.超文本标识语言)是一种用来制作超文本文档的简单标记语言.用ＨＴＭＬ编写的超文本文档称为ＨＴＭＬ文档.超文本标记语言是标准通用标记语言下的一个应用.也是一种规范、一种标准.它通过标记符号来标记要显示的网页中的各个部分.本项目以创建“太湖美”网站为例.要求掌握ＨＴＭＬ的基本概念、基本格式.文字标签、段落标签、水平线标签、换行标签、列表标签、超链接标签的使用.ＨＴＭＬ中样式的定义和应用等.下一页返回任务一初识HTML

二、项目目标本项目以“太湖美”网站为例.通过直接输入代码的方式来制作简单的网页.从而了解ＨＴＭＬ的基本概念、基本格式.文字标签、段落标签等常用的标签.以及ＨＴＭＬ５的新结构及特征.三、工作任务根据网页制作的一般流程.以任务驱动的方式.将本项目分解成以下两项任务:①初识ＨＴＭＬ.②编辑代码、丰富页面.上一页下一页返回任务一初识HTML

(一)任务描述通过代码编辑的方式制作和简单美化网页.从而了解ＨＴＭＬ的基本概念、基本格式及文字标签、段落标签等.将任务分解成以下三个步骤.效果如图2.1.1所示.①新建站点.②编辑ＨＴＭＬ代码.③美化简单页面.上一页下一页返回任务一初识HTML

(二)任务目标通过任务操作.了解ＨＴＭＬ５的新特性.熟记ＨＴＭＬ的基本概念和常用的标签.掌握通过编辑代码的方式制作和美化网页的方法.(三)知识准备知识准备一ＨＴＭＬ的基本概念上一页下一页返回任务一初识HTML

１.ＨＴＭＬ由来万维网上的一个超媒体文档称为一个页面(ｐａｇｅ).一个组织或者个人在万维网上放置开始点的页面称为主页(Ｈｏｍｅｐａｇｅ)或首页.主页中通常有指向其他相关页面或其他节点的指针(超级链接).所谓超级链接.就是一种统一资源定位器(ＵｎｉｆｏｒｍＲｅｓｏｕｒｃｅＬｏｃａｔｏｒ.ＵＲＬ)指针.通过激活(单击)它.可使浏览器方便地获取新的网页.这也是ＨＴＭＬ获得广泛应用的最重要的原因之一.在逻辑上将视为一个整体的一系列页面的有机集合称为网站(Ｗｅｂｓｉｔｅ或Ｓｉｔｅ).超级文本标记语言(ＨＴＭＬ)是为“网页创建和其他可在网页浏览器中看到的信息”设计的一种标记语言.上一页下一页返回任务一初识HTML

网页的本质就是超级文本标记语言.通过结合使用其他的Ｗｅｂ技术(如脚本语言、公共网关接口、组件等).可以创造出功能强大的网页.因而.超级文本标记语言是万维网(Ｗｅｂ)编程的基础.万维网是建立在超文本基础之上的.超级文本标记语言之所以称为超文本标记语言.是因为文本中包含了“超级链接”点.２.ＨＴＭＬ定义超级文本标记语言是标准通用标记语言下的一个应用.也是一种规范、一种标准.它通过标记符号来标记要显示的网页中的各个部分.网页文件本身是一种文本文件.通过在文本文件中添加标记符.可以告诉浏览器如何显示其中的内容(如文字如何处理、画面如何安排、图片如何显示等).上一页下一页返回任务一初识HTML

浏览器按顺序阅读网页文件.然后根据标记符解释和显示其标记的内容.对书写出错的标记.将不指出其错误.且不停止其解释执行过程.编制者只能通过显示效果来分析出错原因和出错部位.因此.简单概括为ＨＴＭＬ是用来描述网页的一种语言.①ＨＴＭＬ指的是超文本标记语言(ＨｙｐｅｒＴｅｘｔＭａｒｋｕｐＬａｎｇｕａｇｅ).②ＨＴＭＬ不是一种编程语言.而是一种标记语言(ｍａｒｋｕｐｌａｎｇｕａｇｅ).③标记语言是一套标记标签(ｍａｒｋｕｐｔａｇ).④ＨＴＭＬ使用标记标签来描述网页.上一页下一页返回任务一初识HTML

３.ＨＴＭＬ标签超文本标记语言(ＨＴＭＬ)标记标签通常被称为ＨＴＭＬ标签.ＨＴＭＬ标签是ＨＴＭＬ语言中最基本的单位.是最重要的组成部分.ＨＴＭＬ标签不区分大小写.例如.“主体”<ｂｏｄｙ>与<ＢＯＤＹ>表示的意思是一样的.推荐使用小写.因此.简单概括为如下几点:①ＨＴＭＬ标记标签通常被称为ＨＴＭＬ标签(ＨＴＭＬｔａｇ).②ＨＴＭＬ标签由尖括号包围关键词.比如<ｈｔｍｌ>.③ＨＴＭＬ标签通常是成对出现的.如<ｂ>和</ｂ>.上一页下一页返回任务一初识HTML

④标签对中的第一个标签是开始标签.如<ｈｔｍｌ>.第二个标签是结束标签.如</ｈｔｍｌ>.⑤开始标签和结束标签也被称为开放标签和闭合标签.⑥特定的ＨＴＭＬ元素没有结束标签.比如<ｂｒ/>.４.ＨＴＭＬ的特点超级文本标记语言文档制作不是很复杂.但功能强大.支持不同数据格式的文件嵌入.这也是万维网(ＷＷＷ)盛行的原因之一.其主要特点如下:①简易性:超级文本标记语言版本升级采用超集方式.从而更加灵活、方便.上一页下一页返回任务一初识HTML

②可扩展性:超级文本标记语言的广泛应用带来了加强功能、增加标识符等要求.超级文本标记语言采取子类元素的方式.为系统扩展带来保证.③平台无关性:超级文本标记语言可以使用在广泛的平台上.这也是万维网(ＷＷＷ)盛行的另一个原因.④通用性:ＨＴＭＬ是网络的通用语言.是一种简单、通用的标记语言.它允许网页制作人建立文本与图片相结合的复杂页面.这些页面可以被网上任何其他人浏览.无论使用的是什么类型的电脑或浏览器.上一页下一页返回任务一初识HTML

５.ＨＴＭＬ发展历史超文本标记语言(第一版):１９９３年６月作为互联网工程工作小组(ＩＥＴＦ)工作草案发布(并非标准).ＨＴＭＬ２.０:１９９５年１１月作为ＲＦＣ１８６６发布.在２０００年６月发布ＲＦＣ２８５４之后.ＲＦＣ１８６６被宣布已经过时.ＨＴＭＬ３.２:１９９７年１月１４日.Ｗ３Ｃ推荐标准.ＨＴＭＬ４.０:１９９７年１２月１８日.Ｗ３Ｃ推荐标准.上一页下一页返回任务一初识HTML

ＨＴＭＬ４.０１(微小改进):１９９９年１２月２４日.Ｗ３Ｃ推荐标准.ＨＴＭＬ５:２０１４年１０月２８日.Ｗ３Ｃ推荐标准.ＨＴＭＬ没有１.０版本.是因为当时有很多不同的版本.有人认为蒂姆.伯纳斯－李的版本应算作初版.这个版本没有ＩＭＧ元素.当时被称为ＨＴＭＬ＋的后续版的开发工作于１９９３年开始.最初是被设计成“ＨＴＭＬ的一个超集”.第一个正式规范为了和当时的各种ＨＴＭＬ标准区分开来.使用了２.０作为其版本号.ＨＴＭＬ＋的发展继续下去.但是它从未成为标准.ＨＴＭＬ３.０规范是由Ｗ３Ｃ于１９９５年３月提出的.其提供了很多新的特性.例如表格、文字绕排和复杂数学元素的显示.上一页下一页返回任务一初识HTML

虽然它是被设计用来兼容２.０版本的.但是实现这个标准的工作在当时过于复杂.在草案于１９９５年９月过期时.标准开发也因为缺乏浏览器支持而中止了.３.１版从未被正式提出.而下一个被提出的版本是开发代号为Ｗｉｌｂｕｒ的ＨＴＭＬ３.２.其去掉了大部分３.０中的新特性.加入了很多特定浏览器如Ｎｅｔｓｃａｐｅ和Ｍｏｓａｉｃ的元素和属性.ＨＴＭＬ４.０同样也加入了很多特定浏览器的元素和属性.但是同时也开始“清理”这个标准.把一些元素和属性标记为过时.建议不再使用它们.上一页下一页返回任务一初识HTML

ＨＴＭＬ５草案的前身名为ＷｅｂＡｐｐｌｉｃａｔｉｏｎｓ１.０.于２００４年由ＷＨＡＴＷＧ提出.于２００７年被Ｗ３Ｃ接纳.并成立了新的ＨＴＭＬ工作团队.在２００８年１月２２日.第一份正式草案发布.２０１２年１２月１７日.万维网联盟(Ｗ３Ｃ)正式宣布凝结了大量网络工作者心血的ＨＴＭＬ５规范已经正式定稿.Ｗ３Ｃ的发言稿称:“ＨＴＭＬ５是开放的Ｗｅｂ网络平台的奠基石.”２０１３年５月６日.ＨＴＭＬ５.１正式草案公布.该规范定义了第五次重大版本.第一次要修订万维网的核心语言:超文本标记语言(ＨＴＭＬ).在这个版本中.新功能不断推出.以帮助Ｗｅｂ应用程序的作者.努力提高新元素互操作性.２０１４年１０月２９日.万维网联盟宣布.经过几乎８年的艰辛努力.ＨＴＭＬ５标准规范最终制定完成了.并已公开发布.上一页下一页返回任务一初识HTML

ＸＨＴＭＬ１.０:发布于２０００年１月２６日.是Ｗ３Ｃ推荐标准.后来经过修订.于２００２年８月１日重新发布.ＸＨＴＭＬ１.１:于２００１年５月３１日发布.Ｗ３Ｃ推荐标准.ＸＨＴＭＬ２.０:Ｗ３Ｃ工作草案.ＸＨＴＭＬ５:是ＸＨＴＭＬ1.ｘ的更新版.基于ＨＴＭＬ5草案.６.ＨＴＭＬ编辑方式ＨＴＭＬ其实是文本.它需要浏览器的解释.它的编辑器大体可以分为三种:上一页下一页返回任务一初识HTML

①基本文本、文档编辑软件:使用微软自带的记事本或写字板都可以编写.也可以用ＷＰＳ来编写.不过存盘时应使用ｈｔｍ或.ｈｔｍｌ作为扩展名.这样方便浏览器认出并直接解释执行.②半所见即所得软件:如ＦＣＫ－Ｅｄｉｔｅｒ、Ｅ－ｗｅｂｅｄｉｔｅｒ等在线网页编辑器.推荐使用ＳｕｂｌｉｍｅＴｅｘｔ代码编辑器(由ＪｏｎＳｋｉｎｎｅｒ开发.ＳｕｂｌｉｍｅＴｅｘｔ２收费但可以无限期试用).上一页下一页返回任务一初识HTML

③所见即所得软件:使用最广泛的编辑器.用户一点不懂ＨＴＭＬ的知识也可以做出网页.如Ａｍａｙａ(万维网联盟出品)、Ｆｒｏｎｔｐａｇｅ(微软出品)、Ｄｒｅａｍｗｅａｖｅｒ(Ａｄｏｂｅ出品).所见即所得软件与半所见即所得的软件相比.开发速度更快.效率更高.且直观表现更强.任何地方进行修改.只需要刷新即可显示.缺点是生成的代码结构复杂.不利于大型网站的多人协作和精准定位等高级功能的实现.７.ＨＴＭＬ文档上一页下一页返回任务一初识HTML

ＨＴＭＬ文档用来描述网页.ＨＴＭＬ文档包含ＨＴＭＬ标签和纯文本.ＨＴＭＬ文档也被称为网页.完整的ＨＴＭＬ文档至少包括<ｈｔｍｌ>标签、<ｈｅａｄ>标签、<ｔｉｔｌｅ>标签和<ｂｏｄｙ>标签.(１)ＨＴＭＬ文档的组成部分①ＨＴＭＬ部分:ＨＴＭＬ部分以<ｈｔｍｌ>标签开始.以</ｈｔｍｌ>标签结束.<ｈｔｍｌ>标签告诉浏览器这两个标签中间的内容是ＨＴＭＬ文档.上一页下一页返回任务一初识HTML

②头部:头部以<ｈｅａｄ>标签开始.以</ｈｅａｄ>标签结束.这部分包含显示在网页标题栏中的标题、元信息、定义ＣＳＳ样式和脚本代码等.标题包含在<ｔｉｔｌｅ>和</ｔｉｔｌｅ>标签之间.③主体部分:主体部分包含网页中显示的所有内容(如文本、超链接、图像、表格和引表等).主体部分以<ｂｏｄｙ>标签开始.以</ｂｏｄｙ>标签结束.所有标签不区分大小写.可以使用<ＨＴＭＬ>来代替<ｈｔｍｌ>.将三部分组合在一起形成ＨＴＭＬ的最基本的结构.如图2.1.2所示.上一页下一页返回任务一初识HTML

(２)ＨＴＭＬ文档结构(Ｈ５)主要包括文档类型说明、ＨＴＭＬ文档开始标签、元信息、主体标签和页面注释标签.如图2.1.3

所示.①文档类型说明:ＨＴＭＬ５对文档类型进行了简化.简单到１５个字符:<!ＤＯＣＴＹＰＥｈｔｍｌ>.需要放在ＨＴＭＬ５文件的第一行.其必不可少.用于告诉浏览器编写网页所用的标签版本.②ｍｅｔａ标签:ｃｈａｒｓｅｔ属性设置文档的字符集编码格式.如<ｍｅｔａｃｈａｒｓｅｔ＝"ＵＴＦ－８">.告诉浏览器网页使用ＵＴＦ－８字符集显示.上一页下一页返回任务一初识HTML

③常见的几种字符集编码格式:ａ.ＵＴＦ－８:万国码.基本兼容各国语言(最常用).ｂ.ＧＢ－２３１２:国标码.简体中文.ｃ.ＧＢＫ:扩展的国标码.简体中文.(３)了解早期完整的ＨＴＭＬ文档基本结构早期的ＨＴＭＬ源代码.包括ＨＴＭＬＤＯＣＴＹＰＥ声明、ｔｉｔｌｅ标题、ｈｅａｄ、网页编码声明等内容.如图2.1.4所示.上一页下一页返回任务一初识HTML

有关<ｍｅｔａ>标签.可以插入很多有用的元素属性.下面介绍四种.用来标记搜索引擎在搜索的页面时所取出的关键词:上一页下一页返回任务一初识HTML

８.ＨＴＭＬ５和ＨＴＭＬ文档的区别(１)在文档类型声明上上一页下一页返回任务一初识HTML

在文档声明上.ＨＴＭＬ有很长的一段代码.并且很难记住这段代码.而ＨＴＭＬ５却不同.只有简简单单的声明.方便记忆.(２)在结构语义上ＨＴＭＬ:没有体现结构语义化的标签.通常都是这样来命名的:<ｄｉｖｉｄ＝"ｈｅａｄｅｒ"></ｄｉｖ>.这样表示网站的头部.ＨＴＭＬ５:在语义上有很大的优势.提供了一些新的标签.比如:<ｈｅａｄｅｒ>、<ａｒｔｉｃｌｅ>、<ｆｏｏｔｅｒ>.上一页下一页返回任务一初识HTML

(３)一个替代Ｆｌａｓｈ的新<ｃａｎｖａｓ>标签对于Ｗｅｂ用户来说.Ｆｌａｓｈ要花很长时间加载和运行视频.用新的<ｃａｎｖａｓ>标签生成视频的技术已经成熟.但<ｃａｎｖａｓ>标签并不能提供所有的Ｆｌａｓｈ具有的功能.需要逐步完善.(４)新的<ｈｅａｄｅｒ>和<ｆｏｏｔｅｒ>标签ＨＴＭＬ５的设计是要更好地描绘网站的结构.出现了<ｈｅａｄｅｒ>和<ｆｏｏｔｅｒ>等新标签.在开发网站时.不再需要用<ｄｉｖ>标签来标注网页的这些部分.上一页下一页返回任务一初识HTML

(５)新的<ｓｅｃｔｉｏｎ>和<ａｒｔｉｃｌｅ>标签跟<ｈｅａｄｅｒ>和<ｆｏｏｔｅｒ>标签类似.ＨＴＭＬ５中引入的新的<ｓｅｃｔｉｏｎ>和<ａｒｔｉｃｌｅ>标签可以让开发人员更好地标注页面上的这些区域.除了让代码更有组织外.也能改善ＳＥＯ效果.能让搜索引擎更容易地分析页面.(６)新的<ｍｅｎｕ>和<ｆｉｇｕｒｅ>标签新的<ｍｅｎｕ>标签可以被用作普通的菜单.也可以用在工具条和右键菜单上.新的<ｆｉｇｕｒｅ>标签是一种更专业的管理页面上文字和图像的方式.上一页下一页返回任务一初识HTML

(７)新的<ａｕｄｉｏ>和<ｖｉｄｅｏ>标签新的<ａｕｄｉｏ>和<ｖｉｄｅｏ>标签是ＨＴＭＬ５中增加的最有用的两个标签.它们是用来嵌入音频和视频文件的.除此之外.还有一些新的多媒体的标签和属性.例如<ｔｒａｃｋ>.它是用来提供跟踪视频的文字信息的.有了这些标签.ＨＴＭＬ５使Ｗｅｂ２.０特征变得越来越友好.(８)全新的表单设计新的<ｆｏｒｍ>和<ｆｏｒｍｉｎｐｕｔ>标签对原有的表单元素进行全新的修改.上一页下一页返回任务一初识HTML

(９)不再使用<ｂ>和<ｆｏｎｔ>标签可以通过ＣＳＳ来做更好的处理.(１０)不再使用<ｆｒａｍｅ>、<ｃｅｎｔｅｒ>、<ｂｉｇ>标签这里介绍的只是ＨＴＭＬ５和ＨＴＭＬ之间的少部分新的规范.新的修改还在不断地增加.需要经常查看ｗ３.ｏｒｇ的ＨＴＭＬ和ＨＴＭＬ５之间的不同.这些新标签和新属性在将来会有很大的改变.上一页下一页返回任务一初识HTML

９.支持ＨＴＭＬ５的浏览器(１)ＩＥ早在２０１０年拉斯维加斯市举行的ＭＩＸＩＯ技术大会上.微软就已经宣布.其推出的ＩＥ９浏览器开始支持ＣＳＳ３、ＳＶＧ和ＨＴＭＬ５等互联网浏览标准了.(２)ＣｈｒｏｍｅＧｏｏｇｌｅ对ＨＴＭＬ５全栈开发的支持是很早的.在２０１０年２月.ＧｏｏｇｌｅＧｅａｒｓ的项目经理就宣布将放弃Ｇｅａｒｓ浏览器对插件项目的支持.上一页下一页返回任务一初识HTML

重点开发ＨＴＭＬ５全栈开发项目.Ｇｏｏｇｌｅ认为.Ｇｅａｒｓ将面临的问题主要是应用于ＨＴＭＬ５的许多创新都非常相似.并且Ｇｏｏｇｌｅ对于ＨＴＭＬ５全栈开发项目的发展一直是积极的.(３)Ｆｉｒｅｆｏｘ２０１０年７月.Ｍｏｚｉｌｌａ基金会推出了Ｆｉｒｅｆｏｘ４浏览器的早期测试版.在该版本中.对Ｆｉｒｅｆｏｘ浏览器进行了大幅改进.包括新的ＨＴＭＬ５语法分析器、更多ＨＴＭＬ５形式的控制等.从官方文档来看.Ｆｉｒｅｆｏｘ４对ＨＴＭＬ５全栈开发是完全级别的支持.包括在线视频、在线音频等多种应用都已在该版中实现.上一页下一页返回任务一初识HTML

(４)Ｓａｆａｒｉ苹果公司对于ＨＴＭＬ５全栈开发的技术支持也是领先的.早在２０１０年６月.苹果公司发布Ｓａｆａｒｉ５时.就宣布了Ｓａｆａｒｉ５完美支持ＨＴＭＬ５制作新技术.包括ＨＴＭＬ５视频、ＨＴＭＬ５地理位置、ＨＴＭＬ５切片元素、ＨＴＭＬ５的可拖动属性、ＨＴＭＬ５的形式验证等.(５)Ｏｐｅｒａ２０１０年５月５日.号称“ＣＳＳ之父”的Ｏｐｅｒａ软件公司首席技术官ＨａｋｏｎＷｉｕｍＬｉｅ先生认为.ＨＴＭＬ５与ＣＳＳ３将是全球互联网发展的未来趋势.Ｏｐｅｒａ１０.５开始支持ＨＴＭＬ５.Ｗｅｂ的未来属于ＨＴＭＬ５.上一页下一页返回任务一初识HTML

知识准备二ＨＴＭＬ的常用标签介绍(１)１.ＨＴＭＬ的常用标签以下列出了常用的几种功能的标签.未涉及的标签在后面项目中会逐步接触.标签旁有Ｈ５图标的为新增的标签.(１)基础标签(如图2.1.5

所示)(２)格式标签(如图2.1.6和图2.1.7

所示)(３)图像标签(如图2.1.8所示)(４)链接标签(如图2.1.9所示)(５)表格标签(如图2.1.10所示)上一页下一页返回任务一初识HTML

２.Ｈｔｍｌ常用标签介绍(１)(１)<ｂｏｄｙ>标签<ｂｏｄｙ>标签表明是ＨＴＭＬ文档的主体部分.在<ｂｏｄｙ>与</ｂｏｄｙ>之间.通常都会有很多其他标签.这些标签和标签属性构成ＨＴＭＬ文档的主体部分.(２)注释<!－－…－－>标签(３)<ｐ>标签(ｐａｒａｇｒａｐｈ的首字母)<ｐ>标签定义段落.当浏览器遇到<ｐ>标签时.通常会在相邻的段落之间插入一些垂直的间距.如图2.1.11所示.上一页下一页返回任务一初识HTML

(４)<ｂｒ>标签(ｂｒｅａｋｒｏｗ的缩写)<ｂｒ>可插入一个简单的换行符.简单地开始新的一行.<ｂｒ>标签是空标签.没有结束标签.不能写成<ｂｒ></ｂｒ>.在ＸＨＴＭＬ中.把结束标签放在开始标签中.也就是<ｂｒ/>.在不产生一个新段落的情况下进行换行(新行)时.使用<ｂｒ/>标签.如图2.1.12所示.(５)标题标签<ｈ１>~<ｈ６>标题(Ｈｅａｄｉｎｇ)是通过<ｈ１>~<ｈ６>等标签进行定义的.<ｈ１>定义最大的标题.<ｈ６>定义最小的标题.不要仅仅是为了产生粗体或大号的文本而使用标题.上一页下一页返回任务一初识HTML

搜索引擎使用标题为网页的结构和内容编制索引.用户可以通过标题来快速浏览所需的网页.所以用标题来呈现文档结构是很重要的.效果如图2.1.13所示.(６)<ｈｒ>水平线<ｈｒ/>标签在ＨＴＭＬ页面中创建水平线.可用于分隔内容.在ＨＴＭＬ中.<ｈｒ>标签没有结束标签.<ｈｒ>必须被正确地关闭.写成<ｈｒ/>.如图2.1.14所示.水平线默认状态下宽度为１００％.上一页下一页返回任务一初识HTML

(７)<ｓｔｒｏｎｇ>和<ｅｍ>标签通常标签<ｓｔｒｏｎｇ>替换加粗标签<ｂ>来使用.<ｅｍ>替换斜体<ｉ>标签使用.<ｓｔｒｏｎｇ>或者<ｅｍ>意味着要呈现的文本是重要的.要突出显示.<ｅｍ>把文本定义为强调的内容.<ｓｔｒｏｎｇ>把文本定义为语气更强的强调的内容.各标签效果对比如图2.1.15所示.上一页下一页返回任务一初识HTML

(８)<ｉｍｇ>标签在ＨＴＭＬ中.图像由<ｉｍｇ>标签定义.<ｉｍｇ>是空标签.只包含属性.并且没有闭合标签.<ｉｍｇ>标签有两个必需的属性:ｓｒｃ属性和ａｌｔ属性.①ｓｒｃ属性指“ｓｏｕｒｃｅ”.要在页面上显示图像.需要使用源属性(ｓｒｃ).源属性的值是图像的ＵＲＬ地址.可以是本地图片或者远程图片.②ａｌｔ属性用来为图像定义一串预备的可替换的文本.替换文本属性的值是用户定义的.上一页下一页返回任务一初识HTML

例如:<ｉｍｇｓｒｃ＝"ｔａｉｈｕ.ｊｐｇ"ａｌｔ＝"太湖"/>如所需图片ｔａｉｈｕ.ｊｐｇ丢失.则网页效果如图2.1.16所示:(四)任务实施步骤一新建站点①在Ｄ盘根目录下.新建文件夹“ＴａｉＬａｋｅ”.作为网站的站点文件夹.②在站点文件夹ＴａｉＬａｋｅ下.新建文件夹ｆｉｌｅｓ.用于存放网站中的分页.新建文件夹ｉｍ￣ａｇｅｓ.用于存放网站中所用到的图像文件.新建文件夹ｏｔｈｅｒｓ.用于存放音频、视频等多媒体文件.上一页下一页返回任务一初识HTML

③将素材文件夹中的图片“ｔｉｍｇ.ｊｐｇ”复制到ｉｍａｇｅｓ文件夹中.将“ｔａｉｌａｋｅ.ｍｐ３”复制到ｏｔｈｅｒｓ.为制作第一张网页做好充分的准备.如图2.1.17所示.④在站点根目录下.新建记事本文件ｉｎｄｅｘ.ｔｘｔ.更改其扩展名为.ｈｔｍｌ.将记事本文件转换成网页文件.如图2.1.18所示.步骤二编辑ＨＴＭＬ代码①在ｉｎｄｅｘ.ｈｔｍｌ文件上单击右键.选择以“记事本方式”打开文件.在记事本中输入ＨＴＭＬ的基本结构代码.如图2.1.19所示.上一页下一页返回任务一初识HTML

②确定网页的标题.将标题改为“太湖美”.保存记事本文件.在站点文件夹中双击网页文件“ｉｎｄｅｘ.ｈｔｍｌ”.在浏览器中预览网页标题的变化效果.如图2.1.21所示.③在网页主体部分<ｂｏｄｙ>…</ｂｏｄｙ>中.输入页面内容的标题文本“太湖美”和正文文本.有关文本在素材文件夹中.代码如下所示:上一页下一页返回任务一初识HTML

及上一页下一页返回任务一初识HTML

④保存记事本文件.双击打开ｉｎｄｅｘ.ｈｔｍｌ文件.在浏览器中预览效果.在网页空白处单击右键.选择快捷菜单中的“查看源文件”.也可查看网页的ＨＴＭＬ代码.如图2.1.22所示.步骤三简单美化网页①在记事本中编辑和完善“ｉｎｄｅｘ.ｈｔｍｌ”的代码.设置网页的背景色.保存文本.在浏览器中预览效果.修改代码如下:<ｂｏｄｙｓｔｙｌｅ＝"ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ:＃９ＡＣＤＥ９">上一页下一页返回任务一初识HTML

②在记事本中编辑和完善“ｉｎｄｅｘ.ｈｔｍｌ”的代码.设置标题段落的文字样式和正文段落的文字效果.这里通过设置内联样式来改变文字效果.标题段落文字样式:段落居中显示、文本颜色为白色.大小为２４像素.字体为黑体.代码如下:<ｐｓｔｙｌｅ＝"ｔｅｘｔ－ａｌｉｇｎ:ｃｅｎｔｅｒ.ｃｏｌｏｒ:＃ＦＦＦＦＦＦ.ｆｏｎｔ－ｓｉｚｅ:２４ｐｘ.ｆｏｎｔ－ｆａｍｉｌｙ:ˈ黑体ˈ.">太湖美</ｐ>正文段落文字样式:段落文字左对齐.字体为仿宋.行间距为１８０％.代码如下:上一页下一页返回任务一初识HTML

<ｐｓｔｙｌｅ＝"ｔｅｘｔ－ａｌｉｇｎ:ｌｅｆｔ.ｆｏｎｔ－ｆａｍｉｌｙ:仿宋.ｆｏｎｔ－ｓｉｚｅ:１６ｐｘ.ｌｉｎｅ－ｈｅｉｇｈｔ:１８０％">…</ｐ>③利用标签<ｓｔｒｏｎｇ>…</ｓｔｒｏｎｇ>.设置正文段落文字突出显示.强调文字的重要性.如图2.1.23所示.④保存记事本文件.在浏览器中预览网页效果.如图2.1.24所示.⑤对网页进一步美化.在正文段落文字的下方插入站点文件夹ｉｍａｇｅｓ文件夹中的图片“ｔｉｍｇ.ｊｐｇ”.并居中显示.代码如下:上一页下一页返回任务一初识HTML

<ｐｓｔｙｌｅ＝"ｔｅｘｔ－ａｌｉｇｎ:ｃｅｎｔｅｒ"><ｉｍｇｓｒｃ＝"ｉｍａｇｅｓ/ｔｉｍｇ.ｊｐｇ"ａｌｔ＝"太湖美景图"/></ｐ>⑥保存并在浏览器中预览效果.如图2.1.25所示.上一页下一页返回任务一初识HTML

(五)任务评价上一页下一页返回任务一初识HTML

(六)思考练习上一页下一页返回任务一初识HTML

(七)任务拓展通过ｗ３ｓｃｈｏｏｌ网站深入学习和探究ＨＴＭＬ的相关知识.尤其关注ＨＴＭＬ５的变化.以及提前预习ＣＳＳ样式的内容.网址:ｈｔｔｐ://ｗｗｗ.ｗ３ｓｃｈｏｏｌ.ｃｏｍ.ｃｎ/ｈｔｍｌ.上一页返回任务二编辑代码、丰富页面(一)任务描述在了解ＨＴＭＬ的基本概念、基本格式的基础上.进一步编辑代码.美化和丰富页面.将任务分解成以下３个步骤.效果如图2.2.1所示.①制作导航栏.②丰富网站内容.③实现超链接.(二)任务目标通过任务操作.熟记ＨＴＭＬ中常用的标签及属性.熟练编辑代码.能灵活设计和编辑简单的页面.下一页返回任务二编辑代码、丰富页面

(三)知识准备知识准备ＨＴＭＬ的常用标签介绍(２)１.超链接标签<ａ><ａ>标签定义超链接.用于从一张页面链接到另一张页面.超链接可以是一个字、一个词.或者一组词.也可以是一幅图像.可以单击这些内容来跳转到新的文档或者当前文档中的某个部分.当把鼠标指针移动到网页中的某个链接上时.箭头会变为一只小手.<ａ>元素最重要的属性是ｈｒｅｆ属性.它指示链接的目标.上一页下一页返回任务二编辑代码、丰富页面

例:<ａｈｒｅｆ＝"ｕｒｌ">链接文本</ａ><ａｈｒｅｆ＝"ｈｔｔｐ://ｗｗｗ.ｓｉｎａ.ｃｏｍ/">访问新浪网</ａ><ａｈｒｅｆ＝"ｍａｉｌｔｏ:ｈｚｈａｎｇ＠１６３.ｃｏｍ">指向Ｅ－ｍａｉｌ地址的超级链接</ａ><ａｈｒｅｆ＝"＃">设置空链接</ａ>在所有浏览器中.链接的默认外观是:①未被访问的链接带有下划线并且是蓝色的.上一页下一页返回任务二编辑代码、丰富页面

②已被访问的链接带有下划线并且是紫色的.③活动链接带有下划线并且是红色的.２.样式标签<ｓｔｙｌｅ><ｓｔｙｌｅ>标签用于为ＨＴＭＬ文档定义样式信息.在ｓｔｙｌｅ中.可以规定在浏览器中如何呈现ＨＴＭＬ文档.ｔｙｐｅ属性是必需的.定义ｓｔｙｌｅ元素的内容.唯一可能的值是"ｔｅｘｔ/ｃｓｓ".ｓｔｙｌｅ元素位于ｈｅａｄ部分中.实例效果图2.2.2

所示.上一页下一页返回任务二编辑代码、丰富页面

例:<ｈｔｍｌ><ｈｅａｄ><ｓｔｙｌｅｔｙｐｅ＝"ｔｅｘｔ/ｃｓｓ">ｈ１{ｃｏｌｏｒ:ｒｅｄ}ｐ{ｃｏｌｏｒ:ｂｌｕｅ}</ｓｔｙｌｅ></ｈｅａｄ><ｂｏｄｙ>上一页下一页返回任务二编辑代码、丰富页面

<ｈ１>标题１</ｈ１><ｐ>这是一个段落</ｐ></ｂｏｄｙ></ｈｔｍｌ>３.音频标签<ａｕｄｉｏ><ａｕｄｉｏ>标签定义声音.比如音乐或其他音频流.<ａｕｄｉｏ>标签定义声音.比如音乐或其他音频流.可以在开始标签和结束标签之间放置文本内容.这样不支持的浏览器就可以显示出不支持该标签的信息.实例效果如图2.2.3

所示.上一页下一页返回任务二编辑代码、丰富页面

例:<ａｕｄｉｏｓｒｃ＝"../ｏｔｈｅｒｓ/ｔａｉｌａｋｅ.ｍｐ３"ａｕｔｏｐｌａｙｃｏｎｔｒｏｌｓｌｏｏｐ>你的浏览器不支持ａｕｄｉｏ标签</ａｕｄｉｏ>常用属性见表2.2.1.(四)任务实施步骤一制作导航栏①以“记事本方式”打开ｉｎｄｅｘ.ｈｔｍｌ.为网页设置导航栏.代码如下.在记事本代码输入的位置如图2.2.4

所示.上一页下一页返回任务二编辑代码、丰富页面

<ｐｓｔｙｌｅ＝"ｔｅｘｔ－ａｌｉｇｎ:ｃｅｎｔｅｒ">历史背景＆ｎｂｓｐ.＆ｎｂｓｐ.＆ｎｂｓｐ.＆ｎｂｓｐ.歌词介绍＆ｎｂｓｐ.＆ｎｂｓｐ.＆ｎｂｓｐ.＆ｎｂｓｐ.社会影响</ｐ>②保存记事本文件.在浏览器中预览网页的效果.如图2.2.5

所示.步骤二丰富网站内容①在ｆｉｌｅｓ文件夹中新建记事本文件.文件名设为ｇｃ.ｈｔｍｌ.制作网站的“歌词介绍”分页.如图2.2.6所示.上一页下一页返回任务二编辑代码、丰富页面

②在ｇｃ.ｈｔｍｌ文件上单击右键.以记事本方式打开.编辑代码.设置网页的标题为“歌词介绍”.网页背景图片为ｂｇ.ｊｐｇ.代码如下所示:<ｈｔｍｌ><ｈｅａｄ><ｔｉｔｌｅ>歌词介绍</ｔｉｔｌｅ></ｈｅａｄ><ｂｏｄｙｓｔｙｌｅ＝"ｂａｃｋｇｒｏｕｎｄ:ｕｒｌ(../ｉｍａｇｅｓ/ｂｇ.ｊｐｇ)"></ｂｏｄｙ></ｈｔｍｌ>上一页下一页返回任务二编辑代码、丰富页面

③添加标题文本“太湖美歌词”.以及与ｉｎｄｅｘ.ｈｔｍｌ中相同的导航栏.并设置标题文本的样式.代码如下所示:<ｐｓｔｙｌｅ＝"ｔｅｘｔ－ａｌｉｇｎ:ｃｅｎｔｅｒ.ｃｏｌｏｒ:＃ＦＦＦＦＦＦ.ｆｏｎｔ－ｓｉｚｅ:２４ｐｘ.ｆｏｎｔ－ｆａｍｉｌｙ:ˈ黑体ˈ.">太湖美歌词</ｐ><ｐｓｔｙｌｅ＝"ｔｅｘｔ－ａｌｉｇｎ:ｃｅｎｔｅｒ">历史背景＆ｎｂｓｐ.＆ｎｂｓｐ.＆ｎｂｓｐ.＆ｎｂｓｐ.歌词介绍＆ｎｂｓｐ.＆ｎｂｓｐ.＆ｎｂｓｐ.＆ｎｂｓｐ.社会影响</ｐ>上一页下一页返回任务二编辑代码、丰富页面

④保存记事本文件.在浏览器中预览网页ｇｃ.ｈｔｍｌ.效果如图2.2.7

所示.⑤添加“歌词”.并使正文文字在网页中居中显示.代码如下:<ｐｓｔｙｌｅ＝"ｔｅｘｔ－ａｌｉｇｎ:ｃｅｎｔｅｒ.ｆｏｎｔ－ｆａｍｉｌｙ:仿宋.ｆｏｎｔ－ｓｉｚｅ:１６ｐｘ.ｌｉｎｅ－ｈｅｉｇｈｔ:１８０％"><ｓｔｒｏｎｇ>太湖美啊太湖美<ｂｒ/>美就美在太湖水<ｂｒ/>上一页下一页返回任务二编辑代码、丰富页面

水上有白帆哪<ｂｒ/>水下有红菱哪<ｂｒ/>水边芦苇青<ｂｒ/>水底鱼虾肥<ｂｒ/>湖水织出灌溉网<ｂｒ/>稻香果香绕湖飞<ｂｒ/>哎咳唷<ｂｒ/>太湖美呀太湖美<ｂｒ/>太湖美呀太湖美<ｂｒ/>上一页下一页返回任务二编辑代码、丰富页面

美就美在太湖水<ｂｒ/>红旗映绿波哪<ｂｒ/>啊春风湖面吹哪<ｂｒ/>啊水是丰收酒<ｂｒ/>湖是碧玉杯<ｂｒ/>装满深情盛满爱<ｂｒ/>捧给祖国报春晖<ｂｒ/>哎咳唷<ｂｒ/></ｓｔｒｏｎｇ></ｐ>上一页下一页返回任务二编辑代码、丰富页面

⑥保存记事本文件.在浏览器中预览网页的效果.如图2.2.8

所示.⑦在“歌词”的下方新增一行.插入音频.播放“ｔａｉｌａｋｅ.ｍｐ３”音频.并显示音频播放控件.设置自动播放.循环播放.代码如下:<ａｕｄｉｏｓｒｃ＝"../ｏｔｈｅｒｓ/ｔａｉｌａｋｅ.ｍｐ３"ａｕｔｏｐｌａｙｃｏｎｔｒｏｌｓｌｏｏｐ>你的浏览器不支持ａｕｄｉｏ标签</ａｕｄｉｏ>上一页下一页返回任务二编辑代码、丰富页面

⑧保存记事本文件.在浏览器中预览网页的效果.⑨在播放器下方插入水平线<ｈｒ>.⑩在水平下方再插入文本及©字符.“版权所有©云中小站”.代码如下.预览效果如图2.2.9

所示.<ｐｓｔｙｌｅ＝"ｔｅｘｔ－ａｌｉｇｎ:ｃｅｎｔｅｒ"><ｓｔｒｏｎｇ>版权所有＆ｃｏｐｙ.云中小站</ｓｔｒｏｎｇ></ｐ>上一页下一页返回任务二编辑代码、丰富页面

11.保存记事本文件ｇｃ.ｈｔｍｌ.预览网页效果.步骤三实现超链接①单击右键.以记事本的方式打开ｉｎｄｅｘ.ｈｔｍｌ.添加超链接代码.文本“历史背景”即链接本页ｉｎｄｅｘ.ｈｔｍｌ.由于“社会影响”页面未完成.因此“社会影响”用“＃”设置空链接.停留在当前页面.文本“歌词介绍”设置站内链接.链接到分页ｇｃ.ｈｔｍｌ.代码如下:上一页下一页返回任务二编辑代码、丰富页面

<ａｈｒｅｆ＝"ｉｎｄｅｘ.ｈｔｍｌ">历史背景</ａ>＆ｎｂｓｐ.＆ｎｂｓｐ.＆ｎｂｓｐ.＆ｎｂｓｐ.<ａｈｒｅｆ＝"ｆｉｌｅｓ/ｇｃ.ｈｔｍｌ">歌词介绍</ａ>＆ｎｂｓｐ.＆ｎｂｓｐ.＆ｎｂｓｐ.＆ｎｂｓｐ.<ａｈｒｅｆ＝"＃">社会影响</ａ>②保存对记事本文件的修改.双击打开网页文件ｉｎｄｅｘ.