基础班：主要学习PC端网站布局
目的：品优购静态网站
精通网页布局，为学习JavaScript（简称JS）打下坚实基础。
疑问
html和html5之间有什么区别？
联系：两者都是前端语言，不过前者声明代码很复杂，没有结构化标签，后者标签较多，声明代码简单。两者学习一个，另一个应该可以无师自通，看情况就是HTML相对老一点，H5相对新一点。
区别：首先，html5已结远远超越了标记语言的范畴，它的设计目的是在移动设备上支持多媒体，和html比起来，深度和广度上都做了进一步提升。
声明文件类型
HTML:
1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"" target="_blank">w3.org/TR/html4/strict...">
2.<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN"
3.<"w3.org/TR/xhtml1/DTD、xh...">
HTML5:
<!DOCTYPE html>
由上面可以看到，在文档声明上，html的声明代码很长很复杂，而html5则的声明更为简单，方便记忆，所以html5比html更有利于程序员快速阅读和开发。
结构语义不同
html没有结构语义化的标签，通常以<divid="header"></div>来命名，html5则增加了很多语义化标签，比如：<header>、<nav>、<articel>、<aside>、<footer>等，使代码结构清晰，更加具有可读性。
html5新增了强大的绘图功能，通过绘画功能，加上JS可以实现动画以及图片。而html4.0却不行。在html5中,Canvas和SVG可以进行绘图，Canvas是逐像素进行渲染的。SVG是可伸缩矢量图形，用于定义网络的基本基于矢量的图形，SVG严格遵从XML语法，其图像文件可读并且易于修改和编辑，可以被搜索、索引、脚本化或者压缩。可以在任何分辨率下被高质量的打印。
html5还新增了视频标签，这个功能是html4.0所不具备的，用html4.0插入视频需要很长一段代码，但是用html5就只需要video标签即可。
发展到今天，html5的功能已经十分强大，放眼未来，html5的发展潜力不可限量。
矢量图形：也称为面向对象的图像或绘图图像，在数学上定义为一系列由点连接的线。就是用直线和曲线来描述的图形。矢量文件中的图形元素称为对象每个对象都是自成一体的实体，它具有颜色、形状、轮廓、大小、和屏幕位置等属性。在维持它原有清晰度和弯曲度的同时，多次移动和改变它的属性，而不会影响图例中的其他对象。矢量图形可以通过计算公式获得。最大的优点是无论放大、缩小或旋转等不会失真，不会产生“马赛克”；最大的缺点就是难以表现色彩层次丰富的逼真图像效果。
学习路线
HTML5基础 | CSS3基础 | H5C3提高 | 项目-品优购电商网站 |
课时：20% | 课时：50% | 课时：10% | 课时：20% |
学习html5基础，主要学习最常见的没有兼容性的html标签 | 学习css3基础，主要学习最常用的没有兼容性的css样式，利用前面学习的标签完成传统PC端网页布局。 | 学习html5新增的标签、css3样式有一定兼容性，刻意与未来更好地接轨 | 综合以前学习知识点，制作品优购电商网站，完成首页、列表页、注册页制作 |
综合案例：传统企业网页制作 | 目的：学习网页制作实际开发制作流程规范 |
简介学习
目标：
能够说出网页的基本组成
什么是html
常用的浏览器
Web标准的三大组成部分
网页的相关概念
1.网页
1.1什么是网页
网站：是指在因特网上根据一定的规则，使用html等制作的用于展示特定内容相关的网页集合。
网页：是网站的一“页”，通常是html格式的文件，它通过浏览器来阅读。
网页是构成网站的基本元素，它通常由图片、声音、视频、文字、连接等元素组成。常见以.htm和.html后缀结尾的文件，因此将其俗称为html文件。
1.2什么是html
html指的是超文本标记语言（Hyper Text Markup Language）,它是用来描述网页的一种语言。
html不是编程语言，而是一种标记语言（markup language）
标记语言是有一套标记标签组成的。
所谓超文本，有2层含义：
1.它可以加入图片、声音、动画、多媒体等内容（超越了文本的限制）
2.它还可以从一个文件转跳到另一个文件，与世界各地主机的文件连接（超级连接文本）
1.3网页的形成
网页是由网页元素组成的，这些元素是由html标签描述出来的，然后通过浏览器解析来显示给用户。
总结：
网页是由图片、连接、文字、声音、视频等元素组成，其实就是一个html文件。
网页生成制作：有前端人员书写html文件，然后浏览器打开，就能看见网页。
HTML：超文本标记语言，用来制作网页的一门语言。由标签组成，比如视频标签、图片标签、连接标签等。
2.常用的浏览器
网页是通过浏览器来展示的，浏览器介绍：
2.1.常用的浏览器：IE、火狐（Firefox）、谷歌（Chrome）、Safari（苹果浏览器）和Opera。国际五大浏览器。
浏览器是网页显、后台运行的平台。
2.2.浏览器内核
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
浏览器 | 内核 | 备注 |
IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
Firefox | Gecko | 火狐浏览器内核 |
Safari | Webkit | 苹果浏览器内核 |
Chrome | Blink | Chrome/opera浏览器内核，blink是webkit的分支 |
目前国内一般浏览器都会采用webkit和blink内核，如360、UC、QQ、搜狗等。
3.Web标准（重点）
Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。
3.1.为什么需要web标准
浏览器不同，它们显示的页面或者排版就有些许差异。通过Web标准可以在不同的浏览器上展示统一的内容。
遵循Web标准除了可以让不同的开发人员写出来的页面更标准、更统一外，还有以下优点：
让Web的发展前景更广阔。
内容能被更广泛的设备访问。
更容易被搜寻引擎搜索。
降低网站流量费用。
使网站更易于维护。
提高页面浏览速度。
3.2.Web标准的构成（面试）
主要包括结构（Stucture），表现（Presentation），行为（Behavior）三个方面。
标准 | 说明 |
结构 | 结构用于对网页元素进行整理和分类，现阶段主要学的是html |
表现 | 表现用于设置页面元素的版式、颜色、大小等外观样式，主要指css |
行为 | 行为是指网页模型的定义及交互的编写，现阶段主要学的是JavaScript |
Web标准提出的最佳体验方案：机构、样式、行为相分离，即结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。
此文章是本人根据b站pink老师讲述视频所摘抄的笔记，供学习使用。
1831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
