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

#第一章 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）。

开发工具简介

编辑器

浏览器

浏览器开发工具

帮助手册

#第三章构建页面（一）

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

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

标题<h1>--<h6>

段落<p>

换行<br/>

水平线<hr/>

实体:

  < > & "

注释:

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

有序列表

<ol>

</ol>

无序列表

<ul>

</ul>

#第四章构建页面（二）

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

在网页中设置热区。

</map>

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

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

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

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

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

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

href:链接地址

target：目标窗口在何处打开

_blank：在新窗口打开

_self：在当前窗口打开

_parent：在父窗口打开

_top：在顶层窗口打开

锚的应用。

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

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

创建锚点链接：

①建立锚点

<a name=“锚点名称”>锚（显示在页面上的文本）</a>

②创建指向该锚的链接

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

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

src：文件的路径

width： “内联框架”区域的宽度

height：“内联框架”区域的高度

scrolling：规定是否在 iframe 中显示滚动条：

No：不出现滚动条 Yes：显示滚动条 Auto：自动出现滚动条

frameBorder：设置是否显示框架的边框。(1，0)

name：框架的名字，用来进行识别。

#第五章构建页面（三）

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

词汇(标签)：<tr></tr>

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

语义：定义一行 

词汇(标签)：<th></th>

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

语义：定义表头 

词汇(标签)：<td></td>

语法：1. 成对出现 2. 位于<tr></tr>内

语义：定义一个单元格

#第六章 HTML4.01与HTML5

HTML5与HTML4.01。

<emject> 定义外部交互内容或插件 html5

<audio> 定义声音内容 html5

<video> 定义视频 html5

HTML多媒体概述。

video与audio。

object与embed

多媒体元素基本属性和常用方法。

Canvas基础知识。

使用canvas绘制简单图形。

HTML样式修饰性标签介绍

font规定文本的字体、字体尺寸、字体颜色。

< font color=“red” size=“5” face=“黑体”>< /font >

strong用于强调文本

b规定粗体文本

#第七章 CSS语言基础

为什么使用CSS。

1、针对元素样式设置的属性太少

2、修改元素样式太麻烦

3、控制元素样式的代码冗余度过高

更专业的样式修饰方法

更简约的布局方法

更简便的样式修饰方法

改一处动全局的方法

CSS简介。

CSS是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式与网页内容分离的一种标记性语言。

CSS的基本语法：CSS代码是由一条条语句构成，而每一条语句的结构，都基本相同

样式写法：选择器 {属性：属性值；属性：属性值；..... }

选择器

1、标签选择器——选择器是HTML标签。影响整个页面中该种标签的样式。

2、类选择器——以“.”开头定义的选择符。影响所有以class属性引用该类的标签样式。

注意：类名的第一个字符不能使用数字

元素可以加入多个类。把各个类名放在class属性中，各个类名之间用一个空格分隔。类名的顺序并不重要。

3、id选择器——以“#”开头定义的选择符。影响以id属性引用该选择符的标签样式。

单一页面中，一个id选择器只能使用一次！

样式表

1、行内样式——在元素标签内通过style属性添加样式

用途：指定网页中个别元素的显示效果。不符合样式与内容分离原则不推荐用

2、页内样式——在head部分的style标签内添加样式

用途：对页面中某些标签或元素设置样式风格。控制当前页面样式，维护较困难

3、外部样式——引用外部建立的.css文件

用途：可同时控制多个页面，适用于各类大型网站，可用性最强，推荐使用。

样式优先级：

1、ID选择器 > 类选择器> 标签选择器

2、行内样式>页内样式>外部样式

3、就近原则，距离元素最近的样式优先级最高

注释方法： /*…*/ 多行注释

多个样式，在同一内容上共同实现，叫做：CSS样式的叠加

文档中的某些元素，将沿用为其父元素所设置的样式，这种特点叫做：CSS样式的可继承性

结构和样式分离思想。

CSS基本应用示例。

#第八章文本样式和字体样式

CSS字体相关类样式修饰。

字体系列：font-family：‘宋体’，‘仿宋’；

字体大小：font-size：20px;(2em;)

字体风格：font-style:italic(normal\italic\oblique);

字体加粗：font-weight:900;(100~900;)(lighter\normal\bold\bolder)

字体综合设置：font:italic bold 36px '宋体';

CSS文本类样式修饰。

文本缩进：text-indent:2em;(20px;)

水平对齐：text-align:left(right\center)

文本修饰：text-decoration:none;(underline\line-through\blink)

文本颜色：color:red;(#000000;)

行高：line-height:2em;(20px;)

#第九章超链接和伪类

CSS超链接的修饰。

未被访问的超链接a:link

鼠标经过超链接a:hover

链接被点击的那一刻a:acitve

访问过的超链接a:visited

特定顺序设置： :link ，:visited，:hover, :active

超链接应用

CSS伪类的使用方法。

CSS伪元素的使用方法。

#第十章背景样式和列表样式

CSS背景类样式修饰

背景色：background-color

关键字（gray）

 十六进制表示方式（#808080）

 rgb表示方式，如：rgb（128,128,128）

背景图像：background-image

background-image:url(images/f1.png)

背景重复：background-repeat:repeat-x;

repeat;默认

repeat-x;

repeat-y;

no-repeat;

inherit;继承父元素

背景定位：background-position:50%50%;

center

top

bottom

right

left

背景综合属性：background

background:red url(images/11.png) no-repeat center;

CSS列表类样式修饰

列表类型：list-style-type

none 无

circle 空心圆

square 实心方块

decimal 数字

lower-alpha 小写英文

列表项图像：list-style-image

url（images/f1.png）

列表标志位置：list-style-position

outside

inside

列表综合设置

list-style:square inside url(images/f1.png)

#第十一章网页布局

布局简介: 网页布局是指网页内容在页面上所处位置的设计。

布局概念

页面尺寸：

分辨率:800x600时，页面尺寸:780x428个像素

分辨率:640x480时，页面尺寸:620x311个像素

分辨率:1024x768时，页面尺寸:1005x600个像素

布局常见版式

布局的方法

布局思想：由整体到局部

结构性标签div、span

Div

• div相当于一个容器（盒子）

• div标签可以把文档分割为独立的、不同的部分

• 通过id或class属性区分不同的容器

div具有盒子模型的所有属性，布局时用来控制元素之间的距离和相对位置

应用浮动float

浮动：定义元素在哪个方向浮动，改变页面中对象的前后流动顺序

Left 左浮动

Right 右浮动

None 不浮动

Inherit 继承父元素float属性

float所产生的问题

1. 浮动元素距离父元素边框的位置，是该侧的父元素padding+自身margin的值

2. 通常不会超过父元素的边界

3. 元素一旦浮动就不属于父元素了

4. 浮动元素不会相互重叠

5. 不能上下浮动，通常只设一种浮动即可

6. 如果父元素宽度不够，浮动元素会另起一行显示。

Overflow

1、父元素不设高度并且子元素浮动时，使父元素高度自动适应子元素高度。

2、父元素设置的高度或宽度小于子元素时，使父元素出现相应滚动条或隐藏子元素超出部分内容

Clear

用来设置该元素边上没有其他元素可以浮动

clear: left / right / both / none

相对定位、绝对定位

✓ 绝对定位

✓ position:absolute

•1、与left，right，top，bottom等属性共同使用

•2、如果父元素未设置position属性，则以浏览器窗口左上角为起始位置

•3、如果父元素设置了position属性，则以父元素左上角为起始位置

✓ 相对定位

✓ position:relative

•1、与left，right，top，bottom等属性共同使用

•2、以自身本应在的位置为起始位置

float和position相似点：

1、都是将元素浮动起来

2、元素一旦设置就与父元素没关系了 float和position

不同点：

1、position与top、left等配套使用

2、float位置移动通过margin、padding等实现

3、overflow和clear对position无效

4、布局通常使用float，而不是position

布局示例。

#第十二章 CSS盒子模型

行内元素、块级元素的概念及display属性的用法。

CSS盒子模型简介。

Web中的盒子：一个矩形区域，内容包裹在盒子中。盒子的堆叠与嵌套形成整个页面的内容排布。

盒子模型

宽度

高度

边框

内边距

外边距

根据HTML元素的显示特征，可分为：

➢块级元素（block level element）

• 元素在显示时会独占一行，并同时具有宽、高、内外边距特征。

• 举例：form – 交互表单，h1 – 1级标题，hr – 水平分隔线，p – 段落，table – 表格，ul – 无序列表

➢行内元素（inline element）

• 在显示时通常不会以新行开始，横向排列，到最右端自动折行。

• 举例：a – 链接，img – 图片，input – 输入框，select – 项目选择，font – 字体设定，b – 粗体，i – 斜体，strong – 粗体强调

Display：block/inline/none；

border-top 上边框

border-right 右边框

border-bottom 下边框

border-left 左边框

➢边框的宽度：border-width

➢边框的颜色：border-color

➢边框的样式：border-style

border-width：20px；四面

border-width：20px 10px；上下，左右

border-width：20px 10px 5px 10px；上右下左

复合

border：width style color； border:1px solid #cccccc；

padding、margin与border相同

#第十三章 CSS高级内容

CSS高级选择器

分组选择器

派生选择器

属性选择器

后代选择器

子元素选择器

相邻兄弟选择器

导航栏

图片库

图片透明

CSS颜色

CSS单位

网络安全字体

CSS听觉参考手册

#第十四章 div+CSS布局实战

浏览器调试工具的使用方法。

网页中选定需要修改或查看样式的网页元素，右键，审查元素。

根据实例资料，完成页面搭建。

网页设计基本流程
- 需求获取
- 制作UI效果图
- 网页设计与实现
  - 分析网页结构
  - 用HTML实现网页结构
  - 用CSS实现网页结构布局
  - 填充网页内容
  - 修饰网页样式
- 调整浏览器兼容性
- 网站上线运营

布局技巧总结。

网页布局遵循从整体到局部的原则。
margin容易产生边界的重合，边界重合时利用padding或border来避免。
使用浮动功能时记得适当清除指令。

#第十五章浏览器兼容性调整

浏览器兼容性问题简介。

常见的浏览器兼容性问题。

1、网页居中问题。问题症状：IE6下常规设置无法使页面居中。

解决方案：body{text-align:center}

2、某些浏览器不支持某些属性。问题症状：IE6下不支持min-width、max-height等属性。

解决方案：具体情况具体分析

3、png透明图片支持问题。问题症状：IE6下不支持透明图片。

解决方案：js方法或css滤镜

4、不同浏览器的标签默认的外边距和内边距不同。问题症状：不加样式控制的情况下，各自的margin 、padding、p等差异较大。

解决方案：CSS里 *{margin:0; padding:0;}

5、块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

问题症状：常见症状是IE6中后面的一块被顶到下一行。

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性；或使用hack方法

CSS Hack跨浏览器解决方案。

1、使用合适的文档声明（DOCTYPE）

2、对标准浏览器进行兼容

编写代码时，要了解客户群的浏览器使用情况。
编写代码时，以标准浏览器（Firefox/Chrome）为参考，暂时不考虑特殊浏览器行为（IE6类）。
一般情况下，先做一些通用设置，把兼容性问题扼杀在萌芽中。

3、标准的网页代码

尽量使代码符合w3c标准
借助w3c提供的HTML验证器和CSS验证器对代码进行网上标准化验证

4、借助浏览器开发者工具调试

IE条件注释。

1、HTML头部引用Hack（条件注释法）

2、CSS类内部Hack（类内属性前缀法）

属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。

W3C验证。

#第十六章网页视觉设计

网页布局

网页尺寸

栅格布局（页面栅格、产品栅格）

栅格系统
- 栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。（维基百科）

网页设计中的栅格系统
- 以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。

栅格系统的设计原理及应用

在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A” 。

留白

１、版块间距均为10px

２、版块与内容间距为10px

３、内容单元之间间距为10px

4、内容的间距均为10px

网页风格

版式（轴型、自由型、框型、T字型、标准T字型、同字型、混合型）

1、轴型：图片和文字内容集中在页面的中轴位置，可以是横轴也可以是纵轴分布。

2、焦点型：图片和文字集中在页面的某一位置，用对比强烈的颜色或者图片表达。

3、格型：图片和文字被比较均匀的方格所划分。

4、框型：主要内容在中间的较大区域，而导航栏和常规栏目则分布在类似边框的周围区域。

4、自由型：没有固定的版式和风格，完全随意安排文字和图片的位置。

5、混合型：两种或两种以上的页面版式结合使用。

风格

欧美风格
欧美国家惯用的设计风格，一类简洁明了、色彩单一；一类构图复杂、色彩浓烈。

韩国风格

韩国惯用的界面设计，色彩清爽、多用蓝、绿色、多用大图片、渐变色、人物和卡通矢量图。

中国风格
具有中国古典风格的设计，古色古香，以具有中国特色的花纹或图案来装饰。

网页用色（色彩原理、色彩的心理感受、网页色彩运用）

网页设计趋势

#第十七章网页元素设计

文字设计

字体、字体

标题、正文文字设计

文字颜色

行、与段落

图片设计

logo设计

banner设计

背景图片设计

网页配图

图文混排

表单设计

Tab设计

按钮设计

图标设计

#第十八章网页设计规范

页面规划

尺寸兼容

栏目

布局

页面元素

颜色运用

创意设计

细节设计

交互设计

统一设计

醒目

用户体验友好性设计

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

Web前端好学吗学完之后能干什么
这几年随着前端的快速发展,市场上前端人才的缺口不断扩大,前端的薪资也水涨船高,很多人被前端的高薪吸引了过来.在一线城市,前端的平均月薪是在15K左右,基本进入前端就是8K起步,而随着技术和业务水平的提 ...
自学前端需要达到什么水平才能去找工作？来看看这套前端学习路线图
自学前端需要达到什么水平?当然是水平越高,越容易找到工作. 在竞争这么激烈的2020年,就需要更加的努力,充实自己,让自己不被代替! 看了好多的回答,大家都是再说学到什么水平能找到工作,我就来分享干货 ...
超硬核！兔兔阿里p7学长给的面试知识库
一个阿里p7学长给的nosql面试知识库,绝对真实,学会了去面呀. 最近整理了一下超硬核系列的文章和面经系列的文章,可以持续关注下: 超硬核系列历史文章:(我保证每篇文章都有值得学习的地方,并且对小白 ...
超硬核！苏州同程旅游学长给我的全面的面试知识库
超硬核!苏州同程旅游学长给我的全面的面试知识库 1.简介新生和经验丰富的C#面试常见问题解答 2.什么是C#? 3.用示例说明C#中的注释类型 4.可以执行多个catch块吗? 5. public, ...
超硬核！！！一篇文章搞定TCP、UDP、Socket、HTTP（详细网络编程内容+现实解释三次握手四次挥手+代码示例）【网络编程 1】
TCP.UDP.Socket 一天面试的经验: 什么是网络编程网络编程中两个主要的问题网络协议是什么为什么要对网络协议分层计算机网络体系结构 1 TCP / UDP 1.1 什么是TCP/IP ...
Web前端开发笔记——第二章 HTML语言第四节超链接标签
目录前言一.超链接标签 (一)链接其它子网页 (二)链接其它站点 (三)虚拟超链接二.从当前页面链接到指定位置三.链接的访问情况四.在新窗口中打开链接例题结语前言本节介绍超链接标签即 ...
mysql long类型_怒肝两个月MySQL源码，我总结出这篇2W字的MySQL协议详解（超硬核干货）！！...
点击上方蓝色"冰河技术",关注并选择"设为星标" 持之以恒,贵在坚持,每天进步一点点! 作者个人研发的在高并发场景下,提供的简单.稳定.可扩展的延迟消息队列框架 ...
Web前端JavaScript笔记（4）节点
如何获取元素节点的属性: 在Web前端JavaScript笔记(3)对象中,介绍了访问行间属性的方法,除此之外,系统还提供了三个方法访问元素的属性: 1. setAttribute: 2. getAt ...
超硬核之傅里叶公式推导(上)
超硬核之傅里叶公式推导 1.三角函数系与正交性 2.周期(2pi)函数的傅里叶展开(三角形式) 3.找到周期函数傅里叶展开的系数结语前言:再学习数学推导之前,popcorn建议读者感性的先去理解一 ...

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

#第一章 Web基础知识

#第二章 HTML语言基础

#第三章构建页面（一）

#第四章构建页面（二）

#第五章构建页面（三）

#第六章 HTML4.01与HTML5

#第七章 CSS语言基础

#第八章文本样式和字体样式

#第九章超链接和伪类

#第十章背景样式和列表样式

#第十一章网页布局

#第十二章 CSS盒子模型

#第十三章 CSS高级内容

#第十四章 div+CSS布局实战

#第十五章浏览器兼容性调整

#第十六章网页视觉设计

#第十七章网页元素设计

#第十八章网页设计规范

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

最新文章

热门文章

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

#第一章 Web基础知识

#第二章 HTML语言基础

#第三章 构建页面（一）

#第四章 构建页面（二）

#第五章 构建页面（三）

#第六章 HTML4.01与HTML5

#第七章 CSS语言基础

#第八章 文本样式和字体样式

#第九章 超链接和伪类

#第十章 背景样式和列表样式

#第十一章 网页布局

#第十二章 CSS盒子模型

#第十三章 CSS高级内容

#第十四章 div+CSS布局实战

#第十五章 浏览器兼容性调整

#第十六章 网页视觉设计

#第十七章 网页元素设计

#第十八章 网页设计规范

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

最新文章

热门文章

#第三章构建页面（一）

#第四章构建页面（二）

#第五章构建页面（三）

#第八章文本样式和字体样式

#第九章超链接和伪类

#第十章背景样式和列表样式

#第十一章网页布局

#第十五章浏览器兼容性调整

#第十六章网页视觉设计

#第十七章网页元素设计

#第十八章网页设计规范