近期应粉丝要求，出多个前端大总结，适合小白复习查阅
#第一章 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>
?????? ? <li>..</li>
?????? </ol>
?????? 无序列表
?????? <ul>
?????? ? <li>..</li>
?????? </ul>
?
?
?
?
?
?
#第四章 构建页面（二）?
在网页中插入图片及常用相关属性（src、alt）。
?
在网页中设置热区。
?????? <img src="#" alt=".." usemap="#ming">
?????? <map name="ming" id="ming">
????????????? <area shape="circle" coords="180,139,14" href="url" alt=".."></area>
????????????? <area shape="rect" coords="0,0,110,260" href="url" alt=".."></area>
????????????? <area shape="toly" coords="180,139,14" href="url" alt=".."></area>
?????? </map>
?????? ·id属性和name属性表示名称，设置为相同值，与<img />标签的usemap属性匹配。创建?????? 图像与热区之间的关系
?????? ·alt属性：该区域的替代文本；
?????? shape属性：该区域的形状；（rect、circle、poly）
?????? coords属性：该区域在原始图片上的坐标值。
?????? href属性：该区域的链接地址；
?
在网页中插入超链接及常用相关属性（href、target）
?????? href:链接地址
?????? target：目标窗口在何处打开
????????????? _blank：在新窗口打开
???????????? _self：在当前窗口打开
???????????? _parent：在父窗口打开
????????????? _top：在顶层窗口打开
?
锚的应用。
?????? 锚点：网页中的某一位置。
?????? 锚点链接：在同一个页面跳到指定位置的方式。
创建锚点链接：
①建立锚点
?????? <a name=“锚点名称”>锚（显示在页面上的文本）</a>
②创建指向该锚的链接
?????? <a href=“#锚点名称”>……</a>
?
相对路径、绝对路径的概念。
?
在网页中使用内联框架（iframe）。
?????? <iframe>标签的常用属性是:
?????? src：文件的路径
?????? width： “内联框架”区域的宽度
?????? height：“内联框架”区域的高度
?????? scrolling：规定是否在 iframe 中显示滚动条：
?????? ???????????????? No：不出现滚动条? Yes：显示滚动条? Auto：自动出现滚动条
?????? frameBorder：设置是否显示框架的边框。(1，0)
?????? name：框架的名字，用来进行识别。
?
<iframe? src="URL"? width="x"? height="y"??? scrolling="[OPTION]" frameborder="x"? name="main"></iframe>
?
?
?
?
?
?
?
#第五章 构建页面（三）?
在网页中插入表格及简单样式修饰。
?
?????? ?词汇(标签)：<tr></tr>
????????????? 语法：1. 成对出现 2. 嵌套于<table></table>标签内
?????? ??? ?????? 语义：定义一行 ?
?????? ??? 词汇(标签)：<th></th>
?????? ??? ?????? 语法：1. 成对出现 2. 嵌套于<tr></tr>标签内
????????????? 语义：定义表头 ?
?????? ??? 词汇(标签)：<td></td>
????????????? 语法：1. 成对出现 2. 位于<tr></tr>内
????????????? 语义：定义一个单元格
?????? ??? 相关属性
????????????? width:规定表格元素的宽度（pixels或%）
????????????? bgcolor：表格背景颜色
????????????? background：表格背景图
????????????? align：表格的对齐方
?????? ????? border： 表格边框的宽度（pixels）
????????????? bordercolor：表格边框的颜色
????????????? cellpadding :? 单元边沿与其内容之间的距离
????????????? cellspacing :?? 单元格之间的空白（pixels或%）
????????????? colspan:跨列
????????????? rowspan:跨行
在网页中插入表单及简单样式修饰。
?????? 标签：<form action=""? method="">? </form>??
?????? action：规定当提交表单时向何处发送表单数据 值：URL
?????? method：规定用于发送 form-data 的 HTTP 方法。 值：get/post
?
?????? 标签：<input? type=".."? name=".."? value="..">
?????? text
?????? password
?????? radio
?????? checkbox
?????? file
?????? submit
?????? button
?????? reset
?????? <textarea? rows="3" cols="2">...</textarea>
?????? <select? name="..">
????????????? <option value="..">..</option>
????????????? <option value="..">..</option>
????????????? <option value="..">..</option>
?????? </select>
?
?
?
?
?
?
?
?
#第六章 HTML4.01与HTML5?
HTML5与HTML4.01。
?????? <object> 定义嵌入对象????? html4???? html5????
?????? <emject>????? 定义外部交互内容或插件?? html5
?????? <audio> 定义声音内容???????????? html5
?????? <video> 定义视频???????????????????? html5
?
HTML多媒体概述。
?????? video与audio。
??????
?????? object与embed
多媒体元素基本属性和常用方法。
Canvas基础知识。
使用canvas绘制简单图形。
HTML样式修饰性标签介绍
font规定文本的字体、字体尺寸、字体颜色。
?????? < font? color=“red” size=“5” face=“黑体”>< /font >
strong用于强调文本
?????? <strong>你好</strong>
b规定粗体文本
?????? <b>你好</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（条件注释法）
????????????? <!--[if IE]>这段文字只在IE浏览器显示<![endif]-->
<!--[if IE 6]>这段文字只在IE6浏览器显示<![endif]-->
<!--[if gte IE 6]>这段文字只在IE6以上(包括)版本IE浏览器显示<![endif]-->
<!--[if ! IE 8]>这段文字在非IE8浏览器显示<![endif]-->
<!--[if !IE]>这段文字只在非IE浏览器显示<![endif]-->
?????? 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设计
按钮设计
图标设计
?
?
?
?
?
?
?
#第十八章 网页设计规范?
页面规划
尺寸兼容
栏目
布局
页面元素
颜色运用
创意设计
细节设计
交互设计
统一设计
醒目
用户体验友好性设计
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #超硬核万字web前端学霸笔记 #学完就去找工作吧
