《HTML5_CSS3网页设计与制作实训题集》答案.docx

1 《HTML5+CSS3 网页设计与制作 实训题集》参考答案 项目一 使用 HTML5+CSS3 制作响应式网页 第一阶段 制作网页内容 任务 1 配置工作环境 表 1- 1- 1 实训计划 序号 工作内容 所需时间 1 分析任务 2 分钟 2 查阅资料 10 分钟 3 实施任务 20 分钟 4 测试软件 5 分钟 表 1- 1-2 网页开发工具特点 序号 网页开发工具 特点 1 Visual Studio Code Visual Studio Code 是一款免费开源的现代化 轻量级代码编辑器，支持几乎所有主流的开发语言 的语法高亮、智能代码补全、 自定义热键、括号匹 配、代码片段、代码对比 Diff、GIT 等特性，支持 插件扩展，并针对网页开发和云端应用开发做了优 化。 2 Adobe Dreamweaver Dreamweaver 能够实现代码自动格式化，集成 bootstrap ，代码自动补全等，是第一套针对专业网 页设计师特别开发的视觉化网页开发工具。 2 序号 网页开发工具 特点 3 Aptana Studio Aptana 是一个开源的开发工具， 支持开放的 Web 开发，其功能包括 JavaScript 代码提示，HTML， GIF 的融入，IDE 自定义，和操作向导。 4 Hbuilder X 快是 HBuilder 的最大优势，通过完整的语法提 示和代码输入法、代码块等，大幅提升 HTML、js、 css 的开发效率。 5 BlueCriffon BlueGriffon 所 提 供 的 全 新 的 所 见 即 所 得 (WYSIWYG) 的内容编辑是由为 Gecko 提供的技术 支持，可免费下载的， 同时支持 Windows ，Linux 和 MAC OS X 三个平台。 6 Sublime Text Sublime Text 具有漂亮的用户界面和强大的功 能，如代码缩略图，Python 的插件，代码段等，还 可自定义键绑定，菜单和工具栏。Sublime Text 的 主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗 口等等。 7 Rendera Rendera 是一个在线的 html5 编辑器，它支持设 计或源码浏览同步编辑，其最大的特点就是支持 SASS 和 HAML。 知识巩固与提高答题卡 习题 1 2 3 4 5 答案 C A B A C 3 任务 2 编写网页内容的结构 表 1-2- 1 实训计划 序号 工作内容 所需时间 1 分析任务 2 分钟 2 实施任务 10 分钟 3 测试、修改任务 2 分钟 4 交付验收任务 1 分钟 表 1-2-2 HTML 结构标签 序号 定义 标签 1 声明 !doctype html 2 HTML 文件的开头与结尾 html/html 3 头部标记 head/head 4 页面标题 title/title 5 网页元数据 meta 6 主体部分标记 body/body 7 注释 !-- 知识巩固与提高答题卡 填空题 1 2 3 4 5 答案 !doctype html html /html !-- header footer 选择题 1 2 3 4 5 答案 C C D A B 4 任务 3 添加段落和文字 表 1-3- 1 实训计划 序号 工作内容 所需时间 1 分析任务 2 分钟 2 实施任务 10 分钟 3 测试、修改任务 2 分钟 4 交付验收任务 1 分钟 表 1-3-2 HTML 标签 序号 定义 标签 1 文档的页眉 header 2 文档的脚注 footer 3 内容部分 article 4 标题 h 1～h6 5 段落 p 6 换行 br 知识巩固与提高答题卡 选择题 1 2 3 4 5 答案 A C B D B 判断题 1 2 3 4 5 答案 × × √ × √ 5 任务 4 添加菜单栏列表 表 1-4- 1 实训计划 序号 工作内容 所需时间 1 创建网页 1 分钟 2 保存成 html 文件格式 1 分钟 3 输入网页内容 6 分钟 4 浏览器测试 2 分钟 表 1-4-2 HTML 标签 序号 内容 标签 1 标题 h1 2 无序列表 ul 3 列表项 li 知识巩固与提高答题卡 选择题 1 2 3 4 5 答案 D B A B D 判断题 1 2 3 4 5 答案 √ √ √ 6 任务 5 添加超链接 表 1-5- 1 实训计划 序号 工作内容 所需时间 1 创建网页 1 分钟 2 保存成 html 文件格式 1 分钟 3 输入网页内容 6 分钟 4 浏览器测试 2 分钟 表 1-4-2 HTML 标签 序号 内容 标签