《网页设计与制作（HTML5+CSS3）立体化项目教程》 课件 01.前导知识

网页设计与制作（HTML5+CSS3）主讲教师：周礼萍0

1课程引导02网页的相关概念03主流浏览器04Web标准目录contentsPART1课程引导互联网的发展简史1996--2024第一次互联网浪潮自1996年起1997年丁磊创建了网易1998年马化腾创建了腾讯1999年马云创建了阿里巴巴1996张朝阳创建搜狐网2000年李彦宏创建了百度1998年汪延创建了新浪当时的互联网企业主要是做新闻资讯1996第一次互联网浪潮：信息展示（新闻资讯）1999互联网泡沫破裂，互联网前景不被看好（报纸也可以看新闻...）2001第二次互联网浪潮：信息输入（web2.0概念）

...）web:全球广域网技术，后来用来代指电脑网页。这些都是基于PC端的。同年：中国移动通信“移动梦网”正式开通，可惜那时手机的网速和性能都达不到，很快就夭折了。2007乔布斯发布第一代IPHONE2008HTC发布第一台安卓手机（谷歌研发安卓操作系统与HTC合作）从此人们开始逐渐用手机开始上网。2010第三次互联网浪潮：信息分发（大数据、人能智能）行业代表：字节跳动2015李克强总理发表“互联网+”计划（滴滴出行、美团等）电脑阶段手机阶段第二次互联网浪潮自2001年起1997年丁磊创建了网易1998年马化腾创建了腾讯1999年马云创建了阿里巴巴1996张朝阳创建搜狐网2000年李彦宏创建了百度1998年汪延创建了新浪这一时期停滞不前的搜狐一度被超越学了网页能做什么？可以考取哪些证书？能参与竞赛吗？

赛

事赛

项专

业世界技能大赛网站设计与开发计算机应用技术软件技术大数据技术金砖国家职业技能竞赛Web技术一带一路暨金砖国家技能发展与技术创新大赛Web技术全国职业院校技能大赛移动应用开发蓝桥杯全国软件和信息技术专业人才大赛Web应用开发巴渝工匠杯重庆市职业院校技能大赛Web技术竞赛可以获得面试专升本的机会，具体详见技能竞赛免试生政策1+XWeb前端开发职业技能等级证书网页设计师证书人社局的技师证书人社局的高技工证书怎样才能学好这门课程呢？教学安排HTML部分CSS基础H5C3提高课时：25%学习HTML5基础，主要学习最常见的HTML标签课时：55%学习CSS3基础，主要学习最常见的网页布局（PC）端为主课时：20%学习HTML5新增标签，CSS3的高级属性如何学好这门课程？再动手练习最后分享交流231先听与看立体化学习资源重庆高校在线开放课程平台：http://www.cqooc.net学银在线：/detail/218844070精品开放课程菜鸟教程：《HTML5》、《Bootstrap》在线参考手册Bootstrap中文网：/按需搜索、演示、下载...插件资源下载立体化学习资源--重庆高校在线开放课程平台立体化学习资源--学银在线立体化学习资源--菜鸟教程问题1：什么是网页？什么是网站?问题2：网页有哪些元素？如：文字、图片...问题3：你都知道哪些浏览器？你最喜欢使用的浏览器是？是指在因特网上根据一定的规则，使用HTML（超文本标签语言）等工具制作的用于展示特定内容相关网页的集合。网站以.html或.htm为后缀名的文本，称为HTML文件，是网站中的一“页”。网页

构成网页的基本元素图片、文字、音频、视频、链接、程序等HTML

是用来描述网页的一种语言（英文HyperTextMarkupLanguage的缩写）中文译为“超文本标签语言”。HTML不是一种编程语言，而是一种

标记语言（一套标记标签）可以加入图片、声音、动画、多媒体等内容（超越了文本的限制）可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）前端人员的编写用户看到的画面浏览器的渲染主流浏览器浏览器是网页显示、运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。-------国产浏览器一般使用的是webkit或者blink内核，如360，腾讯，搜狗等--------/research/浏览器占有市场份额CSS前缀由于浏览器内核的不同，导致了部分css样式需要加前缀才生效，下面的常见的浏览器内核和前缀：浏览器内核前缀Chrome(谷歌浏览器)WebKit内核-webkit-Safari(苹果浏览器)WebKit内核-webkit-Firefox(火狐浏览器)Gecko内核-moz-Opera(欧朋浏览器)Trident内核-o-IE(IE浏览器)Presto内核-ms--------内核的作用：负责读取网页的内容，整理讯息，计算网页的显示方式并显示页面--------为什么需要Web标准Web标准是由W3C和其他标准化组织制定的一系列标准的集合。遵循Web标准除了可以让开发人员写出的页面更标准、更统以外，还有以下优点:1.让Web的发展前景更广阔。2.内容能被更广泛的设备访问。3.更容易被搜寻引擎搜索。4.降低网站流量费用。5.使网站更易于维护。6.提高页面浏览速度。Web标准构成

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。结构标准：结构用于对网页元素进行整理和分类，主要是HTML。表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS。行为标准：行为指网页模型的定义及交互的编写，主要是Javascript。结构：使内容更清晰，更有逻辑性表现：用于修饰内容的样式行为：内容的交互及操作效果Web标准结构标准：决定你是否有个好天然身体！表现标准：决定你是否打扮的美丽外观！行为标准：

决定你是否有吸引人的行为DOMHTMLCSSJavaScript超文本标记样式定义动态交互哪一项最重要呢？任务实践（1