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

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

#第一章 Web基础知识

 

Web开发基本概念

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

2webworldwideweb,万维网,简称webwww,通常称为网页。

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

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

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

6URL(统一资源定位符):互联网上标准资源的地址,可以从互联网上得到资源的位置和访问方法。

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

7、网页文件的扩展名:htmlhtm。文件内容:HTMl代码和文本内容。

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

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

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

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

12web开发过程:项目提出、需求分析、设计(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/>

实体:

       &nbsp;  &lt;  &gt;  &amp;  &quot;

注释:<!–…–>

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

       有序列表

       <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)

 

 

 

 

 

 

 

#第十一章 网页布局

 

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

布局概念

       页面尺寸:

分辨率:800×600时,页面尺寸:780×428个像素

分辨率:640×480时,页面尺寸:620×311个像素

分辨率:1024×768时,页面尺寸:1005×600个像素

布局常见版式

布局的方法

布局思想:由整体到局部

 

结构性标签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实现网页结构布局
      • 填充网页内容
      • 修饰网页样式
    • 调整浏览器兼容性
    • 网站上线运营

 

布局技巧总结。

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

 

 

 

 

 

 

 

 

 

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

 

浏览器兼容性问题简介。

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

       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验证。

 

 

 

 

 

 

 

#第十六章 网页视觉设计

 

网页布局

 

网页尺寸

栅格布局(页面栅格、产品栅格)

  1.   栅格系统
    • 栅格设计系统(又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格),是一种平面设计的方法与风格。(维基百科)

 

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

 

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

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

 

留白

       1、版块间距均为10px

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

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

 4、内容的间距均为10px

 

网页风格

 

版式(轴型、自由型、框型、T字型、标准T字型、同字型、混合型)

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

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

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

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

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

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

      

 

 

风格

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

       韩国风格

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

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

 

 

网页用色(色彩原理、色彩的心理感受、网页色彩运用)

             

 

网页设计趋势

 

 

 

 

 

 

 

#第十七章 网页元素设计

 

文字设计

字体、字体

标题、正文文字设计

文字颜色

行、与段落

图片设计

logo设计

banner设计

背景图片设计

网页配图

图文混排

表单设计

Tab设计

按钮设计

图标设计

 

 

 

 

 

 

 

#第十八章 网页设计规范

 

页面规划

尺寸兼容

栏目

布局

页面元素

颜色运用

创意设计

细节设计

交互设计

统一设计

醒目

用户体验友好性设计

    原文作者:兔老大RabbitMQ
    原文地址: https://blog.csdn.net/hebtu666/article/details/116059693
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞