《HTML5与CSS3项目实战》课件_CORE01.pptx

同城旅游界面设计项目一企业级卓越人才培养（信息类专业集群）

目录01学习目标02学习路径03任务描述04任务技能05任务实施06任务总结

01学习目标

学习目标010203了解HTML5的文档结构、新增标签了解CSS样式规则掌握CSS3选择器学习目标通过实现同程旅游界面，学习HTML5与CSS3相关知识，了解HTML5与CSS3发展历史、基础标签和自适应网站标签的使用04了解自适应网站的概念企业级卓越人才培养（信息类专业集群）

02学习路径

学习路径企业级卓越人才培养（信息类专业集群）

03任务描述

01情境导入02功能描述03基本框架?04开发环境?任务描述企业级卓越人才培养（信息类专业集群）

情境导入随着科技的发展，网络在人们的生活中占着主导地位，而旅游作为人们缓解压力的方式之一，旅游网站也慢慢的走进了我们的生活。本次任务主要是实现同程旅游的界面设计。企业级卓越人才培养（信息类专业集群）

功能描述情境入01使用响应式布局技术来设计同城旅游界面01020304头部包括同城旅游的logo主体包括各种图片链接底部包括本站点的版权信息企业级卓越人才培养（信息类专业集群）

基本框架企业级卓越人才培养（信息类专业集群）

系统环境Windows7系统及以上系统软件环境服务器浏览器Sublime?TextTomcat7.0电脑端：火狐浏览器谷歌浏览器手机端：Webkit内核浏览器Android手机内置浏览器开发环境企业级卓越人才培养（信息类专业集群）

04任务技能

任务技能HTML5概述HTML5基础网页编辑器及环境CSS3初体验CSS样式表CSS选择器任务技能企业级卓越人才培养（信息类专业集群）

建设制造强国12HTML5万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（W3C?Recommendation）。2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，标准规范终于制定完成。（1）快速迭代（2）减低成本（3）导流入口多（4）分发效率高HTML5概述HTML5的发展HTML5的优点企业级卓越人才培养（信息类专业集群）

HTML5文档的基本结构1HTML5语法2HTML5新增标签3（1）!DOCTYPE用于向浏览器说明当前文档使用哪种HTML标签。（2）html和/html分别表示文档的开始和结束，用于告知浏览器其自身是一个HTML文档。（3）head/head为头部标签，用于定义HTML文档的头部信息，紧跟在html标签后，里面包括的内容有title、meta、link和style等。（4）body/body为主体标签，用于定义HTML文档所要显示的内容，在浏览器中所看到的图片，音频，视频，文本等都位于body内。该标签中的内容是展示给用户看的。HTML5为了更大兼容各浏览器，在设计和语法方面发生了一些变化，语法变化的主要内容如下：标签不在区分大小写元素可以省略结束标签允许省略属性的属性值允许属性值不使用引号HTML5基础HTML5和HTML相比，增加了结构标签，语义标签、特殊功能标签以及audio和video标签等。其中新增标签如表标签描述article用于描述页面上一处完整的文章nav用于定义导航条，包括主导航条、页面导航、底部导航等aside用于定于当前页面的附属信息，内容和article内容相关hgroup用于对网页或区段（section）的标题进行组合figure用于对元素进行组合header用于定义文档的页眉（介绍信息）footer用于定义section或document的页脚企业级卓越人才培养（信息类专业集群）

网页编辑器1自适应网页设计2手机端访问网页环境部署3随着编写网页的语言在不断的更新，网页编辑器也在不断的开发。其中几款为大家所熟知的网页编辑器有Notepad++、Dreamweaver、SublimeText随着智能手机的普及，设计的界面也需在手机端显示，为了能够在手机端正常显示，我们需要使网页宽度自动调整。（1）在网页代码的头部，加入一行viewport元标签。（2）不使用绝对宽度（3）MediaQuery模块，自动探测屏幕宽度（4）@media，根据不