web前端开发需要掌握哪些知识点？「学习笔记（大全）」.pdfVIP

web前端开发需要掌握哪些知识点？「学习笔记（⼤全）」

01前端学习⽬标（基础）

主要学习PC端⽹站布局。

最终⽹站：某宝静态⽹站。

⽬的：精通⽹页布局（能够模拟⽹站的任何⼀个静态页⾯），也是我们前端⼈员的必备技能，为后⾯学习JavaScript打下坚实基础。

02前端学习路线（基础）

HTML5基础：学习HTML5基础，主要学习最常见的没有兼容性的HTML标签。

CSS3基础：学习CSS3基础，主要学习最常⽤没⽤兼容性的CSS样式。利⽤前⾯学习的标签完成传说的PC端⽹页布局。

综合案例：传统企业⽹页制作。

H5C3提⾼：学习HTML5新增的标签、CSS3样式，有⼀定兼容性，可以与未来更好地接轨。

项⽬：某宝电商⽹站。综合以前学习的知识点，贴近于实际开发，制作品优购电商⽹站，完成⾸页、列表页、注册页制作。

⽬的：学习⽹页制作实际开发制作流程规范。

03什么是HTML

1、⽹页的基本组成

什么是⽹页？

⽹站指在因特⽹上根据⼀定的规则，使⽤HTML等制作的⽤于展⽰特定内容相关的⽹页集合。

⽹页是⽹站中的⼀“页”，通常是HTML格式的⽂件，它要通过浏览器来阅读。

⽹页是构成⽹站的基本元素，它通常由图⽚、链接、⽂字、声⾳、视频等元素组成，通常我们看到的⽹页，常见以**.htm或者.html后缀结

尾的⽂件，因此，将其俗称为HTML⽂件**。

2、什么是HTML

HTML指的是超⽂本标记语⾔（HyperTextMarkup

Language），它是⽤来描述⽹页的⼀种语⾔。

HTML不是⼀种编程语⾔，⽽是⼀种标记语⾔。

标记语⾔是⼀套标记标签。

所谓超⽂本，有2层含义：

1、它可以加⼊图⽚、声⾳、动画、多媒体等内容（超越了⽂本限制）。

2、它还可以从⼀个⽂件跳转到另⼀个⽂件，与世界各地主机的⽂件连接（超级链接⽂本）。

⽹页的形成：

⽹页是由⽹页元素组成的，这些元素是利⽤html标签描述出来，然后通过浏览器解析来显⽰给⽤户的。

前端⼈员开发代码——浏览器显⽰代码（解析、渲染）——⽣成最后的web页⾯。

⽹页总结

1、⽹页是图⽚、链接、⽂字、声⾳、视频等元素组成，其实就是⼀个html⽂件（后缀名为html）。

2、⽹页⽣成制作：有前端⼈员书写HTML⽂件，然后浏览器打开，就能看到了⽹页。

3、HTML：超⽂本标记语⾔，⽤来制作⽹页的⼀门语⾔，有标签组成的，⽐如图⽚标签、链接标签、视频标签等等。

实操：制作⼀张⽹页，然后在该⽹页中放⼊⼀张图⽚。

第⼀步，创建⼀张“记事本”。

第⼆步，在“记事本”输⼊⼀段代码，插⼊图⽚。

imgsrcsrc1.jpg1.jpgimg

第三步，修改“记事本”的后缀名为“.html”。

第四步，打开这张“.html”⽂件，可以打开⼀张⽹页。

这篇⽂章是我在看视频的笔记，初衷是给零基础的萌新看的，所以会写得详细⼀点，包括接下来的源代码和演⽰，也会全部贴上来，本⽂会

不定期更新。

3、常⽤的浏览器有哪些？

⽹页是通过浏览器来展⽰的，浏览器是⽹页显⽰、运⾏的平台。常见的浏览器有IE、⽕狐Firefox、⾕歌Chrome、Safari和Opera等，平时

成为五⼤浏览器。

浏览器内核（渲染引擎）：负责读取⽹页内容，整理讯息，计算机⽹页的显⽰⽅式并显⽰页⾯。

这些了解⼀下就可以了，不⽤记。

**

04、web标准的三⼤组成部分

**

web标准是什么？

web标准是由W3C组织和其他标准化组织制定的⼀系列标准的集合。W3C（万维⽹联盟）是国际最著名的标准化组织。

为什么需要Web标准？

浏览器不同，它们显⽰页⾯或者排版就有些许差异。

由于不同的浏览器解析出来的效果可能不⼀致，开发者常常需要为多版本的开发⽽艰苦⼯作。——通过web标准——展⽰统⼀内容。

Web标准的构成（重点）

主要包括结构、表现和⾏为三个⽅⾯。

结构：⽤于对⽹页元素进⾏整理和分类，现阶段主要学的是HTML。

表现：⽤于设置⽹页元素的版式、颜⾊、⼤⼩等外观样式，主要指的是CSS。

⾏为：⽹页模型的定义及交互的编写，现阶段主要学的是JavaScript。

Web标准提出的最佳体验⽅案：结构、样式、⾏为相分离。

简单理解：结构写到HTML⽂件中，表现写到CSS⽂件中，⾏为写到JavaScript⽂件中。

05HTML语法规范

5.1基本语法概述

HTML标签是由尖括号包含的关键词，⽐如****。

HTML标签通常是成对出现的，例如和，我们称为双标签。标签对中的第⼀个标签是开始标签，第⼆个标签是结束标签。

有些特殊的标签必须是单个标签（极少情况），例如

，我们称为单标签。

5.2标签关系