1、 HTML5的语义化标签及属性，可以的语义化标签及属性，可以让开发者非常方便地实现清晰的让开发者非常方便地实现清晰的Web页页面布局，加上面布局，加上CSS3的效果渲染，使快速的效果渲染，使快速建立丰富灵活的建立丰富灵活的Web页面变得相对简单页面变得相对简单一些。一些。 本单元通过对网站首页设计的探析本单元通过对网站首页设计的探析与训练，重点熟悉与训练，重点熟悉HTML5网页的基本结网页的基本结构及组成元素、构及组成元素、HTML5的语义和结构标的语义和结构标签、签、声明等，学会声明等，学会CSS样样式的定义与样式表的插入，掌握网站首式的定义与样式表的插入，掌握网站首页的设计方法。页的设计方
2、法。教学目标教学目标（1 1）认识）认识HTML5HTML5和和CSS3CSS3，了解，了解HTML5HTML5的主要特性、主要变化及其发展趋势的主要特性、主要变化及其发展趋势（2 2）了解）了解HTML5HTML5新增的标签和废除的标签，了解新增的标签和废除的标签，了解HTML5HTML5新增的标签和废除的新增的标签和废除的属性属性（3 3）掌握）掌握HTML5HTML5网页的基本结构及组成元素网页的基本结构及组成元素（4 4）掌握）掌握HTML5HTML5的语义和结构标签及其使用方法的语义和结构标签及其使用方法（5 5）掌握）掌握CSSCSS样式的定义与样式表的插入样式的定义与样式表的插入
3、（6 6）学会移动平台网站首页的设计）学会移动平台网站首页的设计关关 键键 字字网站首页网站首页HTML5HTML5语义和结构标签语义和结构标签CSSCSS样式样式参考资料参考资料（1 1）HTML5HTML5的新特性简介参考附录的新特性简介参考附录A A（2 2）HTML5HTML5的常用标签及其属性、方法与事件参考附录的常用标签及其属性、方法与事件参考附录B B（3 3）CSSCSS的属性参考附录的属性参考附录C C（4 4）CSSCSS的各种选择器的含义和用法参考附录的各种选择器的含义和用法参考附录D D 教学方法教学方法任务驱动法、分组讨论法、理论实践一体化、探究学习法任务驱动法、分组
4、讨论法、理论实践一体化、探究学习法课时建议课时建议8 8课时课时【任务【任务1-1】探析携程旅行网的首页】探析携程旅行网的首页【效果展示】【效果展示】 携程旅行网首页携程旅行网首页0101.html的浏览效的浏览效果如图果如图1-1所示。所示。图图1-1携程旅行网首页携程旅行网首页0101.html的浏览效果的浏览效果 携程旅行网首页携程旅行网首页0101.html的主体结构的主体结构包括包括4个组成部分，分别为顶部、中部、底个组成部分，分别为顶部、中部、底部和侧边栏，顶部内容为广告图片，中部部和侧边栏，顶部内容为广告图片，中部内容为多个图片超链接，底部包括多个导内容为多个图片超链接，底部包括
5、多个导航链接，侧边栏为长形按钮。航链接，侧边栏为长形按钮。【网页探析】【网页探析】1网页网页0101.html的的HTML代码探析代码探析2网页网页0101.html的的CSS代码探析代码探析1HTML5印象印象 HTML5是万维网的核心语言，是标准是万维网的核心语言，是标准通用置标语言下的一个应用超文本标记语言通用置标语言下的一个应用超文本标记语言 （HTML）的第五次重大修改，）的第五次重大修改，HTML5草案草案的前身名为的前身名为 Web Applications 1.0，于，于2004年年被被WHATWG （Web Hypertext Application Technology W
6、orking Group）提出，于）提出，于2007年被万维网联盟（年被万维网联盟（W3C）接纳，并成立了新）接纳，并成立了新的的HTML工作团队。工作团队。 CSS即层叠样式表（即层叠样式表（Cascading Style Sheet）。）。 在网页制作时采用层叠样式表技术，可以有在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其他效效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。果实现更加精确的控制。 只要对相应的代码做一些简单的修只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，改，就可以改变同一页面的不同部分，或者不同网页的外观和
7、格式。或者不同网页的外观和格式。 CSS3是是CSS技术的升级版本，技术的升级版本，CSS3语言开发是朝着模块化发展的。语言开发是朝着模块化发展的。 以前的规范作为一个模块实在是太庞以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。小的模块，更多新的模块也被加入进来。 这些模块包括盒子模型、列表模块、这些模块包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文超链接方式、语言模块、背景和边框、文字特效、多栏布局等。字特效、多栏布局等。（1）语义特性（）语义特性（Class：Semantic）（2）
8、本地存储特性（）本地存储特性（Class：Offline & Storagf）（3）设备兼容特性（）设备兼容特性（Class：Device Access）（4）连接特性（）连接特性（Class：Connectivity）（5）网页多媒体特性（）网页多媒体特性（Class：Multimedia）（6）三维、图形及特效特性（）三维、图形及特效特性（Class： 3D, Graphics & Effects）（7）性能与集成特性（）性能与集成特性（Class：Performance & Integration）（8）CSS3特性（特性（Class：CSS3） HTML5提供了一些新的元素和属性，如提
9、供了一些新的元素和属性，如（网站导航块）和（网站导航块）和。 这种标签将有利于搜索引擎的索引整理，这种标签将有利于搜索引擎的索引整理，同时更好地帮助小屏幕装置和视障人士使用同时更好地帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的，除此之外，还为其他浏览要素提供了新的功功能，如能，如和和标记。标记。（1）取消了一些过时的）取消了一些过时的HTML4标记标记。（2）将内容和展示分离）将内容和展示分离。（3）一些全新的表单输入对象）一些全新的表单输入对象。（4）全新的、更合理的）全新的、更合理的Tag。（5）本地数据库）本地数据库。（6）Canvas对象对象。（7）浏览器中的真正
10、程序）浏览器中的真正程序。（8）HTML5取代取代Flash在移动设备的地位。在移动设备的地位。（9）HTML5突出的特点就是强化了突出的特点就是强化了Web页页的表现性，增加了本地数据库。的表现性，增加了本地数据库。 HTML5规范开发完成时，将成为主规范开发完成时，将成为主流。流。 据统计，据统计，2013年全球约有年全球约有10亿手机亿手机浏览器支持浏览器支持HTML5，同时，同时HTML Web开发者数量已达到开发者数量已达到200多万。毫无疑问，多万。毫无疑问，HTML5将成为未来将成为未来510年内，移动互年内，移动互联网领域的主宰者。联网领域的主宰者。 HTML5中，新增加了多个
11、标签元素，中，新增加了多个标签元素，同时也废除了多个标签元素。同时也废除了多个标签元素。（1）HTML5新增的标签新增的标签（2）HTML5废除的标签废除的标签序号序号新增标签名称新增标签名称新增标签的功能说明新增标签的功能说明01表示页面中的一个内容区块，如章节、页眉、页脚或页面的其他部分。表示页面中的一个内容区块，如章节、页眉、页脚或页面的其他部分。可以和可以和、等元素结合起来使用，表示文档结构等元素结合起来使用，表示文档结构02表示页面中一块与上下文不相关的独立内容，如一篇文章表示页面中一块与上下文不相关的独立内容，如一篇文章03表示表示元素内容之外的并与元素内容之外的并与元素内容相关的
12、辅助信息元素内容相关的辅助信息04表示页面中一个内容区块或整个页面的标题表示页面中一个内容区块或整个页面的标题05表示对整个页面或页面中的一个内容区块的标题进行组合表示对整个页面或页面中的一个内容区块的标题进行组合06表示页面或页面中一个内容区块的页脚表示页面或页面中一个内容区块的页脚表表1-9HTML5新增的标签及其功能说明新增的标签及其功能说明序号序号新增标签名称新增标签名称新增标签的功能说明新增标签的功能说明07表示页面中导航链接的部分表示页面中导航链接的部分08表示一段独立的流内容，一般表示主体文档内容中的一个独立单元。使用表示一段独立的流内容，一般表示主体文档内容中的一个独立单元。使
13、用元素为元素为元元素组添加标题素组添加标题09定义视频，如电影片段或其他视频流等定义视频，如电影片段或其他视频流等10定义音频，如音乐或其他音频流定义音频，如音乐或其他音频流11用来嵌入内容（包括各种媒体），格式可以是用来嵌入内容（包括各种媒体），格式可以是midi、wav、MP3、flash等等12主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字，典型应用搜索结果中高亮显示搜素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字，典型应用搜索结果中高亮显示搜素关键字关键字13表示运行中的进程，如等待中、请稍后等，可以使用表示运行中的进程，如等待中、请稍后等，可以使用元素显示元
14、素显示JavaScript中耗时函数的进程中耗时函数的进程14表示日期或时间，也可以两者结合使用表示日期或时间，也可以两者结合使用15由一个或多个字符（需要一个解释由一个或多个字符（需要一个解释/发音）和一个提供该信息的发音）和一个提供该信息的元素组成，还包括可选的元素组成，还包括可选的元素元素16定义字符（中文注音或字符）的解释或发音定义字符（中文注音或字符）的解释或发音17在在注释中使用，以定义不支持注释中使用，以定义不支持元素的浏览器所显示的内容元素的浏览器所显示的内容18表示软换行。与表示软换行。与元素的区别：元素的区别：br元素表示此处必须换行；元素表示此处必须换行；表示浏览器窗口或
15、父级元素足够宽表示浏览器窗口或父级元素足够宽时（没必要换行时）不换行，而宽度不够时主动在此处换行时（没必要换行时）不换行，而宽度不够时主动在此处换行19定义图形，如图表和其他图像。定义图形，如图表和其他图像。 元素只是图形容器（画布），必须使用脚本来绘制图形元素只是图形容器（画布），必须使用脚本来绘制图形20表示用户能够调用的命令，该标签可以定义命令按钮，如单选按钮、复选框或按钮。只有当表示用户能够调用的命令，该标签可以定义命令按钮，如单选按钮、复选框或按钮。只有当元素位于元素位于元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷元素内时，该元素才是可见的。否则不会显示
16、这个元素，但是可以用它规定键盘快捷键键21用于定义命令的列表或菜单列表，该标签用于上下文菜单、工具栏以及用于列出表单控件和命令用于定义命令的列表或菜单列表，该标签用于上下文菜单、工具栏以及用于列出表单控件和命令22用于描述文档或文档某个部分的细节，可以与用于描述文档或文档某个部分的细节，可以与标签配合使用，标签配合使用，可以为可以为定定义标题。标题是可见的，用户单击标题时，会显示出义标题。标题是可见的，用户单击标题时，会显示出标签定义的内容。标签定义的内容。应该是应该是的第一个子元素。目前只有的第一个子元素。目前只有Chrome浏览器支持浏览器支持标签标签23定义选项列表。与定义选项列表。与元
17、素配合使用该元素来定义元素配合使用该元素来定义可能的值。可能的值。及其选项不会被显示及其选项不会被显示出来，它仅仅是合法的输入值列表。使用出来，它仅仅是合法的输入值列表。使用元素的元素的list属性来绑定属性来绑定24定义可选数据的列表。定义可选数据的列表。作为树列表来显示。如果把该元素的作为树列表来显示。如果把该元素的multiple属性设置为属性设置为true，则可以，则可以在列表中选取一个以上的项目在列表中选取一个以上的项目25规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器26定
18、义不同类型的输出，如脚本的输出定义不同类型的输出，如脚本的输出27该标签为媒介元素（如该标签为媒介元素（如和和）定义媒介资源）定义媒介资源续表续表序号序号被废除的标签被废除的标签替代方案替代方案序号序号被废除的元素被废除的元素替代方案替代方案01、使用使用CSS代替代替07使用使用替代替代02、使用使用框架或框架或服务器方创建的由多服务器方创建的由多个页面组成的复合页个页面组成的复合页面代替面代替08、等标等标签签只有部分浏览器支持只有部分浏览器支持03使用使用替代替代09使用使用GUIDS替代替代04使用使用替代替代10使用使用替代替代05使用使用form与与相结合的方式替代相结合的方式替代
19、11使用使用“text/plian”MIME类类型替代型替代06使用使用替代替代表表1-10HTML5 废除的标签废除的标签（1）HTML5新增的属性新增的属性（2）HTML5废除的属性废除的属性序号序号属性类型属性类型新增的属性新增的属性属性说明属性说明01与表单相关与表单相关的属性的属性对对（type=text）、）、与与指定指定autofocus属属性性以指定属性的方式让元素在画面打开时自动获得以指定属性的方式让元素在画面打开时自动获得焦点焦点02对对（type=text）、）、指指定定placeholder属性属性对用户的输入进行提示，提示用户可以输入的内对用户的输入进行提示，提示用户
20、可以输入的内容容03对对、与与指定指定form属性属性声明属于哪个表单，然后将其放置在页面的任何声明属于哪个表单，然后将其放置在页面的任何位置，而不在表单之内位置，而不在表单之内04对对input（type=text）、）、textarea指定指定required属性属性表示用户提交时进行检查，检查该元素内必定要表示用户提交时进行检查，检查该元素内必定要有输入内容有输入内容05为为标签增加几个新的属性：标签增加几个新的属性：autocomplete、min、max、multiple、pattern与与step。还有还有list属性与属性与元素配合使用。元素配合使用。元素与元素与autocomp
21、lete属性配合使用。属性配合使用。multiple属性允许上传时一次上传多个文件。属性允许上传时一次上传多个文件。pattern属性用于验证输入字段的模式，其实就是属性用于验证输入字段的模式，其实就是正则表达式。正则表达式。step属性规定输入字段的合法数字属性规定输入字段的合法数字间隔（假如间隔（假如step=3，则合法数字应该是，则合法数字应该是 -3、0、3、6，以此类推），以此类推），step 属性可以与属性可以与max及及min属性配合使用，以创建合法值的范围属性配合使用，以创建合法值的范围表表1-11HTML5新增的属性列表新增的属性列表序号序号属性类型属性类型新增的属性新增的属
22、性属性说明属性说明06与表单相关的属性与表单相关的属性为为、元素增加元素增加formaction、formenctype、formmethod、formnovalidate与与formtarget属性属性用户重载用户重载元素的元素的action、enctype、method、novalidate与与target属性。为属性。为fieldset元素增加元素增加disabled属性，可以把它的属性，可以把它的子元素设为子元素设为disabled状态状态07为为、增加增加novalidate属性属性可以取消提交时进行的有关检查，表单可以被无条件地提交可以取消提交时进行的有关检查，表单可以被无条件地提
23、交08与链接相关属性与链接相关属性为为、增加增加media属性属性规定目标规定目标URL是为什么类型的媒介是为什么类型的媒介/设备进行优化的。该属性设备进行优化的。该属性用于规定目标用于规定目标URL是为特殊设备（如是为特殊设备（如iPhone）、语音或打印）、语音或打印媒介设计的。该属性可接受多个值。只能在媒介设计的。该属性可接受多个值。只能在href属性存在时属性存在时使用使用09为为增加增加herflang和和rel属性属性hreflang属性规定在被链接文档中的文本的语言。只有当设置属性规定在被链接文档中的文本的语言。只有当设置了了href属性时，才能使用该属性。属性时，才能使用该属性
24、。rel属性规定当前文档与被属性规定当前文档与被链接文档链接文档/资源之间的关系。只有当使用资源之间的关系。只有当使用href属性时，才能使属性时，才能使用用rel属性属性10为为增加增加size属性属性sizes属性规定被链接资源的尺寸。只有当被链接资源是图标属性规定被链接资源的尺寸。只有当被链接资源是图标时（时（rel=icon），才能使用该属性。该属性可接受多个值，），才能使用该属性。该属性可接受多个值，并且值由空格分隔并且值由空格分隔11为为增加增加target属性属性主要是保持与主要是保持与元素的一致性元素的一致性12其他属性其他属性为为增加增加reversed属性属性它指定列表倒序
25、显示它指定列表倒序显示13为为增加增加charset属性属性定义定义HTML文档的字符集文档的字符集14为为增加增加label和和type属性属性label属性规定菜单的可见标签，属性规定菜单的可见标签，type属性规定要显示哪种菜属性规定要显示哪种菜单类型单类型15为为增加增加scoped属性属性它允许我们为文档的指定部分定义样式，而不是整个文档。它允许我们为文档的指定部分定义样式，而不是整个文档。如果使用如果使用“ “scoped” ”属性，那么所规定的样式只能应用到属性，那么所规定的样式只能应用到元素的父元素及其子元素元素的父元素及其子元素16为为增加增加manifest属性属性开发离线
26、开发离线Web应用程序时，它与应用程序时，它与API结合使用，定义一个结合使用，定义一个URL，在这个，在这个URL上描述文档的缓存信息上描述文档的缓存信息17为为增加增加sandbox、seamless和和srcdoc3个个属性属性用来提高页面安全性，防止不信任的用来提高页面安全性，防止不信任的Web页面执行某些操作页面执行某些操作续表续表序号序号在在HTML4中使用的属性中使用的属性使用该属性的元素使用该属性的元素在在HTML5中的替代方案中的替代方案01rev、rel02charset、在被链接的资源的中使用在被链接的资源的中使用HTTP Content-type头元头元素素03shap
27、e、coords使用使用元素代替元素代替元素元素04longdesc、使用使用元素链接到较长描述元素链接到较长描述05target多余属性，被省略多余属性，被省略06nohref多余属性，被省略多余属性，被省略07profile多余属性，被省略多余属性，被省略08version多余属性，被省略多余属性，被省略09nameid10scheme只为某个表单域使用只为某个表单域使用scheme11archive、chlassid、codebose、codetype、declare、standby使用使用data与与typc属性类调用插件。需要使用这些属性类调用插件。需要使用这些属性来设置参数时，使用
28、属性来设置参数时，使用param属性属性12valuetype、type使用使用name与与value属性，不声明其属性，不声明其MIME类型类型13axis、abbr、使用以明确简洁的文字开头、后跟详述文字的形使用以明确简洁的文字开头、后跟详述文字的形式。可以对更详细内容使用式。可以对更详细内容使用title属性，来使单元属性，来使单元格的内容变得简短格的内容变得简短14scope在被链接的资源的中使用在被链接的资源的中使用HTTP Content-type头元头元素素15align、使用使用CSS样式表替代样式表替代16alink、link、text、vlink、background、bg
29、color使用使用CSS样式表替代样式表替代17align、bgcolor、border、cellpadding、cellspacing、frame、rules、width使用使用CSS样式表替代样式表替代18align、char、charoff、height、nowrap、valign、使用使用CSS样式表替代样式表替代19align、bgcolor、char、charoff、height、nowrap、valign、width、使用使用CSS样式表替代样式表替代20align、bgcolor、char、charoff、valign使用使用CSS样式表替代样式表替代表表1-12HTML5废除
30、的属性列表废除的属性列表序号序号在在HTML4中使用的属性中使用的属性使用该属性的元素使用该属性的元素在在HTML5中的替代方案中的替代方案21align、char、charoff、valign、width、 使用使用CSS样式表替代样式表替代22align、border、hspace、vspace使用使用CSS样式表替代样式表替代23clear使用使用CSS样式表替代样式表替代24compace、type、使用使用CSS样式表替代样式表替代25compace使用使用CSS样式表替代样式表替代26compace使用使用CSS样式表替代样式表替代27width使用使用CSS样式表替代样式表替代2
31、8align、hspace、vspace使用使用CSS样式表替代样式表替代29align、noshade、size、width使用使用CSS样式表替代样式表替代30align、frameborder、scrolling、marginheight、marginwidth使用使用CSS样式表替代样式表替代续表续表图图1-2example01.html网页的浏览效果网页的浏览效果 说明：第一行说明：第一行是是HTML5对文档类型的简化描述，文档类对文档类型的简化描述，文档类型的作用是验证器依据它来判断该采用型的作用是验证器依据它来判断该采用何种规则去验证代码；强制浏览器以标何种规则去验证代码；强制浏
32、览器以标准模式渲染页面。准模式渲染页面。（2）头部）头部（2）头部）头部（3）尾部）尾部（4）导航）导航（5）区块和文章）区块和文章（6）旁白和侧边栏）旁白和侧边栏（1）内容类型（）内容类型（ContentType）（2）DOCTYPE声明声明（3）指定字符编码）指定字符编码（4）具有）具有boolean值的属性值的属性（5）引号）引号（1）标签标签（2）标签标签（3）标签标签（4）标签标签（5）标签标签（6）标签标签 声明必须是声明必须是HTML文档文档的第一行，位于的第一行，位于 标签之前。标签之前。 声明不是声明不是HTML标签，标签，它是指示它是指示Web浏览器关于页面应使用哪个浏览器
33、关于页面应使用哪个HTML版本进行编写的指令。版本进行编写的指令。12HTML的注释标签的注释标签的用法的用法13如何插入样式表如何插入样式表 浏览网页时，当浏览器读到一个样式表时，浏览网页时，当浏览器读到一个样式表时，浏览器会根据它来格式化浏览器会根据它来格式化HTML文档。文档。 插入样式表的方法有以下插入样式表的方法有以下3种。种。（1）外部样式表）外部样式表（2）内部样式表）内部样式表（3）内联样式）内联样式14网页中的多重样式网页中的多重样式15标记标记-moz-、-webkit-、-o-和和-ms-的解释的解释【任务【任务1-2】设计苏宁易购网的首页】设计苏宁易购网的首页【任务描述
34、】【任务描述】【任务实施】【任务实施】1网页网页0102.html的主体结构设计的主体结构设计 在本地硬盘的文件夹在本地硬盘的文件夹“01跨平台的网跨平台的网站首页设计站首页设计0102”中创建苏宁易购网的首中创建苏宁易购网的首页页0102.html。 （1）定义网页）定义网页0102.html通用通用CSS代码代码 （2）定义网页）定义网页0102.html主体结构的主体结构的CSS代代码码 （3）编写网页）编写网页0102.html主体结构的主体结构的HTML代码代码（1）网页）网页0102.html的顶部内容设计的顶部内容设计（2）网页）网页0102.html的中部内容设计的中部内容设计
35、（3）网页）网页0102.html的底部内容设计的底部内容设计【网页浏览】【网页浏览】 保存网页保存网页0102.html，在浏览器，在浏览器Google Chrome中的浏览效果如图中的浏览效果如图1-3所示。所示。【任务【任务1-3】设计穷游网的首页】设计穷游网的首页【任务描述】【任务描述】图图1-4穷游网首页穷游网首页0103.html的浏览效果的浏览效果 穷游网首页穷游网首页0103.html主体结构为左、主体结构为左、右结构，左侧为首页的导航栏，右侧为首右结构，左侧为首页的导航栏，右侧为首页的主体内容，如图页的主体内容，如图1-4所示。所示。 左侧结构使用左侧结构使用标签和标签和标签
36、嵌套实现，右侧结构使用标签嵌套实现，右侧结构使用标标签实现。签实现。 网页右侧的主体内容部分又分为上、中、下网页右侧的主体内容部分又分为上、中、下3个组成部分，网页右侧上部使用个组成部分，网页右侧上部使用标签标签实现，右侧中部使用实现，右侧中部使用标签实现，右侧底标签实现，右侧底部使用部使用标签实现。标签实现。 网页左侧的导航栏也分为上、中、下网页左侧的导航栏也分为上、中、下3个组个组成部分，分别使用成部分，分别使用、和和标签实现。标签实现。【任务实施】【任务实施】1网页网页0103.html的主体结构设计的主体结构设计（1）定义网页）定义网页0103.html通用通用CSS代码代码（2）定义
37、网页）定义网页0103.html主体结构的主体结构的CSS代代码码（3）编写网页）编写网页0103.html主体结构的主体结构的HTML代码代码（1）网页）网页0103.html的主体顶部内容设计的主体顶部内容设计（2）网页）网页0103.html的主体中部内容设计的主体中部内容设计（3）网页）网页0103.html的主体底部内容设计的主体底部内容设计（4）网页）网页0103.html的侧边栏设计的侧边栏设计【任务【任务1-4】设计同程旅游网的首页】设计同程旅游网的首页【任务描述】【任务描述】 编写编写HTML代码和代码和CSS代码，设计代码，设计图图1-5所示同程旅游网的首页所示同程旅游网的
38、首页0104.html。图图1-5同程旅游网首页同程旅游网首页0104.html的浏览效果的浏览效果 同程旅游网首页同程旅游网首页0104.html的主体结的主体结构为上、中、下结构，如图构为上、中、下结构，如图1-5所示。所示。 顶部内容包括返回链接按钮、标题顶部内容包括返回链接按钮、标题文字和主页链接按钮，中部内容为多个文字和主页链接按钮，中部内容为多个热点链接按钮，底部内容包括多个超链热点链接按钮，底部内容包括多个超链接和版权信息。接和版权信息。 网页网页0104.html顶部结构使用顶部结构使用标签标签实现，中部结构使用实现，中部结构使用标签实现，底部标签实现，底部结构使用结构使用标签
39、实现。标签实现。【任务实施】【任务实施】1网页网页0104.html的主体结构设计的主体结构设计 在本地硬盘的文件夹在本地硬盘的文件夹“01跨平台的网跨平台的网站首页设计站首页设计0104”中创建中创建同程旅游网的首同程旅游网的首页页0104.html。 （1）定义网页）定义网页0104.html通用通用CSS代码代码 （2）定义网页）定义网页0104.html主体结构的主体结构的CSS代代码码 （3）编写网页）编写网页0104.html主体结构的主体结构的HTML代码代码 （1）网页）网页0104.html的顶部内容设计的顶部内容设计 网页网页0104.html顶部内容的顶部内容的CSS代码
40、代码定义见本书提供的电子资源。定义见本书提供的电子资源。 在网页在网页0104.html顶部代码顶部代码“”与与“”之之间编写间编写HTML代码，实现其功能。代码，实现其功能。 （2）网页）网页0104.html的中部内容设计的中部内容设计 网页网页0104.html中部内容的中部内容的CSS代码代码定义见本书提供的电子资源。定义见本书提供的电子资源。 在网页在网页0104.html中部代码中部代码“”和和“”之间之间编写编写HTML代码，实现其功能。代码，实现其功能。 （3）网页）网页0104.html的底部内容设计的底部内容设计 网页网页0104.html底部内容的底部内容的CSS代码定义
41、见代码定义见本书提供的电子资源。本书提供的电子资源。 在网页在网页0104.html底部代码底部代码“”和和“”之间编写之间编写HTML代码，实现其功代码，实现其功能。能。【任务【任务1-5】设计酷狗音乐网的首页】设计酷狗音乐网的首页【任务描述】【任务描述】 编写编写HTML代码和代码和CSS代码，设计代码，设计图图1-6所示酷狗音乐网的首页所示酷狗音乐网的首页0105.html。图图1-6酷狗音乐网首页酷狗音乐网首页0105.html的浏览效果的浏览效果 酷狗音乐网的首页酷狗音乐网的首页0105.html从上至下由从上至下由4个部分组成，依次为个部分组成，依次为Logo图片和下载链接按钮、图
42、片和下载链接按钮、返回链接按钮和标题文字、用于导航的主体内返回链接按钮和标题文字、用于导航的主体内容、用于播放音乐的按钮和进度条，如图容、用于播放音乐的按钮和进度条，如图1-6所所示。示。【任务实施】【任务实施】（1）网页）网页0105.html的的HTML代码编写提代码编写提示示（2）网页）网页0105.html的的CSS代码定义提示代码定义提示 本单元通过对网站首页设计的探析与本单元通过对网站首页设计的探析与三步训练，对三步训练，对HTML5和和CSS3有了初步印有了初步印象，对象，对HTML5的主要特性、主要变化及其的主要特性、主要变化及其发展趋势有了初步了解，对发展趋势有了初步了解，对HTML5新增的新增的标签和废除的标签、标签和废除的标签、HTML5新增和废除的新增和废除的标签属性有了初步认识。标签属性有了初步认识。 也逐步掌握了也逐步掌握了HTML5网页的基本结网页的基本结构及组成元素、构及组成元素、HTML5的语义和结构标的语义和结构标签及其使用方法，掌握了签及其使用方法，掌握了CSS样式的定样式的定义与样式表的插入，学会了移动平台网义与样式表的插入，学会了移动平台网站首页的设计方法。站首页的设计方法。
