用代码搭建会变身的网页.pptxVIP

K12教育用代码搭建会变身的网页掌握HTML5与CSS3，让你的网页在手机和电脑上都好看

目录CONTENTS01这节课我们要学会什么02手机网页和电脑网页差在哪03网页打开速度影响有多大04HTML5新标签功能速查05一个网页从无到有的四步06媒体查询怎么让网页变聪明07好设计不是炫技，是让人用着舒服08课堂动手：三个闯关任务09学完这课你能做到的事

这节课我们要学会什么31认识HTML5和CSS3分别管什么——一个搭骨架，一个穿衣服2理解响应式网页为什么能在不同屏幕上自动变样子3亲手写一段代码，让网页像积木一样重组布局4用三个小项目巩固：个人名片页、校园新闻页、天气卡片页

手机网页和电脑网页差在哪4固定宽度网页宽度写死768像素，电脑上刚好手机打开要用手指左右拖动才能看全文字小到需要放大镜，体验很差响应式网页用百分比和弹性盒子替代固定像素屏幕变窄时，三栏自动变成一栏堆叠图片跟着缩放，文字自动换行不溢出

网页打开速度影响有多大53秒用户耐心等待的平均上限53%手机用户离开加载超3秒页面的比例68%中国青少年日均使用移动设备上网时长占比40%响应式设计带来的移动端访问量增幅

HTML5新标签功能速查6标签名作用举个例子header页面顶部区域学校官网的校名和导航栏nav导航链接区首页、新闻、通知三个按钮section内容分块把校园新闻分成体育、科技、文艺article独立内容块一篇