超硬核万字！web前端学霸笔记，学完就去找工作吧

近期应粉丝要求，出多个前端大总结，适合小白复习查阅

#第一章 Web基础知识

 

Web开发基本概念

1、万维网是一个由许多相互链接的超文本组成的系统，通过互联网访问。

2、web：worldwideweb，万维网，简称web，www，通常称为网页。

3、web开发：进行网页页面制作及其阁下你给功能开发。

4、浏览器：显示网页内容，并让用户与这些文件交互 一种软件。（常用：IE、谷歌、火狐）

5、web服务器：提供web服务的计算机。

6、URL（统一资源定位符）：互联网上标准资源的地址，可以从互联网上得到资源的位置和访问方法。

    组成：协议、服务器地址、资源路径。

7、网页文件的扩展名：html、htm。文件内容：HTMl代码和文本内容。

8、网页：浏览器中打开的一个页面。网站：一组域名相同的网页的集合。

9、B/S架构：不需要下载客户端，通过URL访问。有跨平台能力。无缝升级，客户端免维修。不能直接使用客户端硬件资源，用户体验单一。

10、C/S架构：需要安装特定的客户端程序。针对不同平台开发不同版本。升级应用需要重新安装。充分应用客户端硬件资源，构建大型3D效果应用。

11、互联网发展：web1.0    web2.0   移动互联网

12、web开发过程：项目提出、需求分析、设计（UI设计、系统设计）、开发（前端开发、后台开发）、系统测试、发布维护。

13、网站类型：(1)、按网站主体性质划分：政府网站、教育科研网站、企业网站、商业网站、个人网站

                       (2)、按网站功能划分：宣传展示型网站、营销型网站、电子商务、网上购物、门户网站

14、树形结构：有主页有分支有叶子。扁平结构：扁平结构可以理解为是一种特殊的树形结构， 只有主干和树叶，是当前流行的一种网站结构，对 搜索引擎特别友好。

15、页面分类：首页：也称主页，是一个网站的入口网页。

                       列表页：一般都是二级页面，是栏目的具体展示页。

                       内容页：一般就是具体内容的页面。

16、页面元素：文字、表单、视频、图片、音频、动画。

 

 

万维网:www，通常也称网页。

 

网页：浏览器中打开的一个页面。

 

网站：一组域名相同的网页的集合。

 

浏览器：显示网页内容，并让用于与这些文件交互的一种软件。

 

服务器：提供web服务的计算机。

 

URL：统一资源定位符，协议、域名、资源路径。

 

网站访问过程：

       ⑴ 通过输入网址（URL）指定要访问的网页。

       ⑵ 浏览器向服务器发送请求：请把XXX网页文件传送给我。

       ⑶ 服务器做出响应：把XXX网页文件传送给浏览器。

       ⑷ 浏览器解析网页文件，呈现出网页。

 

软件架构分类及各自特征：

          B/S架构

       无需安装特定客户端程序，通过URL访问

       跨平台能力（Windows、Linux、Android、IOS…） 

       无缝升级，客户端免维护 

       不能直接使用客户端硬件资源，用户体验单一 

           C/S架构 

       需要安装特定客户端程序 

       针对不同平台开发不同版本 

       升级应用须重新安装 

       充分应用客户端硬件资源，构建大型3D效果应用

 

web系统开发过程，及相关知识体系。

       项目提出--需求分析--设计（UI、系统）--开发（前端、后台）--系统测试--发布/维护

 

网站类型

       主体性质（政府网站、教育科研网站、企业网站、商业网站、个人网站）

       功能划分（宣传展示型网站、营销型网站、电子商务、网上购物、门户网站、企业门户、在线       交易平台、政府门户）

       网站结构（树型结构、扁平结构（特殊））

 

网站页面

       页面分类（主页、列表页、内容页）

       页面元素（文字、图片、表单、视频、 音频、动画）

 

学习Web开发的意义

       掌握HTML、CSS语言

          能够构建内容丰富、界面美观的Web页面

          掌握相关开发、调试工具的使用方法

          为后续Java、PHP等 课程打下基础

 

 

 

 

 

 

 

 

#第二章 HTML语言基础

 

网页与网页文件。

       网页：浏览器中打开的一个页面

       网页文件：文本文件，扩展名html、htm，内容为HTML代码和文本内容。

 

网页与网页文件的关系：浏览器中看到的网页实质为：网页文件

 

网页页面的组成：内容+结构。

 

HTML简介

       语言特点

       发展过程

       应用领域

 

HTML基本语法：语法、语义、词汇。

 

HTML标记分类（单/双标记），HTML属性的概念。

 

HTML文档结构（文档声明、html、head、body、title、meta）。

 

开发工具简介

 

编辑器

 

浏览器

 

浏览器开发工具

 

帮助手册

 

 

 

 

 

 

 

#第三章 构建页面（一）

 

网页元素包含内容：图片、文字、列表、超链接

 

在网页中插入文字（文字、实体、注释）

标题

--

段落

换行

水平线

---

实体:

          <  >  &  "

注释:

在网页中插入列表及相关属性的设置。

       有序列表

      

        

1. ..

      

       无序列表

      

        

• ..

      

 

 

 

 

 

 

#第四章 构建页面（二）

 

在网页中插入图片及常用相关属性（src、alt）。

 

在网页中设置热区。

      

      

             

             

             

      

       ·id属性和name属性表示名称，设置为相同值，与标签的usemap属性匹配。创建       图像与热区之间的关系

       ·alt属性：该区域的替代文本；

       shape属性：该区域的形状；（rect、circle、poly）

       coords属性：该区域在原始图片上的坐标值。

       href属性：该区域的链接地址；

 

在网页中插入超链接及常用相关属性（href、target）

       href:链接地址

       target：目标窗口在何处打开

              _blank：在新窗口打开

             _self：在当前窗口打开

             _parent：在父窗口打开

              _top：在顶层窗口打开

 

锚的应用。

       锚点：网页中的某一位置。

       锚点链接：在同一个页面跳到指定位置的方式。

创建锚点链接：

①建立锚点

       锚（显示在页面上的文本）

②创建指向该锚的链接

       ……

 

相对路径、绝对路径的概念。

 

在网页中使用内联框架（iframe）。

      

 

 

 

 

 

 

 

#第五章 构建页面（三）

 

在网页中插入表格及简单样式修饰。

 

       词汇(标签)：

              语法：1. 成对出现 2. 嵌套于

标签内

                  语义：定义一行 

           词汇(标签)：

                  语法：1. 成对出现 2. 嵌套于标签内

              语义：定义表头 

           词汇(标签)：

              语法：1. 成对出现 2. 位于内

              语义：定义一个单元格

           相关属性

              width:规定表格元素的宽度（pixels或%）

              bgcolor：表格背景颜色

              background：表格背景图

              align：表格的对齐方

             border： 表格边框的宽度（pixels）

              bordercolor：表格边框的颜色

              cellpadding :  单元边沿与其内容之间的距离

              cellspacing :   单元格之间的空白（pixels或%）

              colspan:跨列

              rowspan:跨行

在网页中插入表单及简单样式修饰。

       标签：

 

  

       action：规定当提交表单时向何处发送表单数据 值：URL

       method：规定用于发送 form-data 的 HTTP 方法。 值：get/post

 

       标签：

       text

       password

       radio

       checkbox

       file

       submit

       button

       reset

       ...

      

              ..

              ..

              ..

      

 

 

 

 

 

 

 

 

#第六章 HTML4.01与HTML5

 

HTML5与HTML4.01。