Web前端开发任务驱动式教程（HTML5+CSS3+JavaScript）（第2版）（微课版） 课件汇总 任务1--6 搭建开发环境---标记选择器和类选择器.pptx

Web前端开发;What？;线上平台;成绩构成;任务1搭建开发环境;网页文件的创建和保存;;;;;2.Web的工作原理;静态网页：标准的HTML文件，采用HTML（超本文标记语言）编写，通过HTTP（超文本传输协议）在服务器端和客户端之间传输的纯文本文件，扩展名为.html或.htm。;3.Web的类型;3.Web的类型;;案例描述：1.安装网页编辑软件2.安装浏览器;案例描述：1.创建和管理站点2.创建和保存HTML5文档;01;用记事本软件编写并保存以下代码，将其后缀名“.txt”改为“.html”，用谷歌浏览器浏览网页效果。;;任务2文字与段落排版;学习目标;;实战演练——制作科技馆参观须知页面;1.HTML5文档格式;;;;;;示例：文字修饰综合范例;;;;;示例：换行标签应用案例;;示例：水平线标签应用案例;;示例：无序列表应用案例;;示例：有序列表应用案例;案例描述：设计并制作科技馆参观须知页面，网页???果如下。;案例描述：设计并制作“我家菜馆”点菜单页面，网页效果如下。;01;设计并制作古诗欣赏网页，效果如图所示。;;任务3图像和超链接;锚点标签;;实战演练——制作网页技术介绍页面;强化训练——制作“文章故事网”页面;1.图像标签;;;2.绝对路径和相对路径;;;示例：在网页中插入超链接;;示例：在网页中插入锚点链接;案例描述：设计并制作网页技术介绍页面，单击index.html页面中的图片时，跳转显示page1.html页面，网页效果如下。;案例描述：设计并制作“文章故事网”页面，网页效果如下。;01;设计并制作旅游景点网页面，效果如图所示。;;任务4结构标签和分组标签;;;任务目标;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;实战演练;强化训练;任务小结;课后实训;;任务5页面交互标签、层次语义标签和全局属性;;;任务目标;任务目标;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;实战演练;实战演练;实战演练;强化训练;强化训练;任务小结;课后实训;;任务6标记选择器和类选择器;学习目标;;任务目标;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;实战演练;强化训练;任务小结;课后实训;