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指的是超文本标记语言（Hyper Text Markup
Language），它是用来描述网页的一种语言。

HTML不是一种编程语言，而是一种标记语言。

标记语言是一套标记标签。

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

1、它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。

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

网页的形成：

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

前端人员开发代码——>浏览器显示代码（解析、渲染）——>生成最后的web页面。

网页总结

1、网页是图片、链接、文字、声音、视频等元素组成，其实就是一个html文件（后缀名为html）。

2、网页生成制作：有前端人员书写HTML文件，然后浏览器打开，就能看到了网页。

3、HTML：超文本标记语言，用来制作网页的一门语言，有标签组成的，比如图片标签、链接标签、视频标签等等。

实操：制作一张网页，然后在该网页中放入一张图片。

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

第二步，在“记事本”输入一段代码，插入图片。

<img src="1.jpg"></img>

第三步，修改“记事本”的后缀名为“.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标签关系

双标签关系可以分为两类：包含关系和并列关系。

包含关系（父子关系）