前端综合笔记整理 - 张拓的天空

发表评论
325 次浏览

A+

所属分类：Web前端

摘要

HTML5、CSS3、JavaScriptIDE（编写和运行）编写环境：高手（记事本）企业（Sublime、Webstorm、DW、Brackets）

便宜好用的国外VPS推荐

前端需要学什么？

HTML5、CSS3、JavaScript

集成开发环境

IDE（编写和运行）

前段开发环境

编写环境：
- 高手（记事本）
- 企业（Sublime、Webstorm、DW、Brackets）
运行环境：
- 浏览器（Chrome）

学完后能做什么？

进行页面开发

互联网项目流程

设计
开发（前端开发后端开发）
测试
实施
运营与维护

一. HTML

Hyper Text Markup Language：超文本标记语言

1.1 标签

描述意思、属性、特征

1.2 网页做好给谁看

浏览器、搜索引擎、用户、W3C

1.3 API

API = 说明书 = 参考手册 = 应用接口

1.4 闻道有先后，术业有专攻

1.5 HTML的语法

<标签>（单项标签）
<标签>定义的内容</标签>
<标签属性="属性值" 属性="属性值">
<标签属性="属性值" 属性="属性值">定义的内容</标签>

1.6 我们要掌握哪些标签？(网页元素)

文本：h1-h6 p br b i u strong em ul li ol li dl dt:术语 dd:说明
图片/img（image）：src alt width height...
链接 a：href target title
音频、视频、动画、Div、表格、框架（QQ邮箱）、表单、表单元素

1.7 前端学习网站

W3C HTML

1.8 前端理解帮助

网页 = 人
HTML = 身体结构
CSS（层叠样式表） = 表现、衣服（JSP）
JavaScript = 行为、思想

1.9 空格字符实体对应代码：`&nbsp` 大于号对应代码：`&gt`

1.10 经典前端个人网站

1.11 颜色值的表示方式

关键字表示法
16进制表示法
#RRGGBB
RGB(R,G,B) R：0-255 G：0-255 B：0-255(不适用HTML的颜色值，与浏览器有关）
RGBA表示法：(不适用HTML的颜色值，与浏览器有关）R：0-255 G：0-255 B：0-255 A：0-1(表示颜色的不透明度)

1.12 网页分类

静态网页：.htm .html
动态网页：.asp .aspx .php .jsp ...(代表服务器)

1.13 表单元素

单行文本字段：input type="text" size="" value="" maxlength="" name=""
密码字段：input type="password" size="" value="" maxlength="" name=""
单选按钮：input="radio" name="" checked="checked" value="" id="" label for=""
复选按钮：input type="checkbox" name="" checked value="" id label for=""
多行文本字段：textarea cols="" rows="" name="" id=""
列表/菜单：select: name="" id="" size="" option: value:""

1.14 HTML5头文件标准申明

<!doctype html>

1.15 HTML申明浏览器解析网页的默认编码

HTML5：<meta charset="UTF-8">

HTML4：<meta http-equiv="Content-Type" content="text/html;charset="UTF-8">

1.16 HTML引入外部样式

HTML5：<link rel="stylesheet" href="xxx/xxx.css"/>

HTML4：<link rel"stylesheet" type="text/css" href="xxx/xxx.css"/>

1.17 HTML5新增的语义化标签

语义化标签：标签赋予了特定的意义的标签

header 头部
footer 尾部
aside 侧边栏
main 主体
nav 导航栏
article 文章
section 段落
figuer 图片或者视频等
figcaption 图片或者视频的标题

1.18 文本阴影

text-shadow:5px 5px 20px #000000 （参数：水平偏移垂直偏移阴影大小颜色****）

1.19 转换（transform）

transform:translate(50px,50px); 定义 2D 转换

二. CSS

Cascading Style Sheets：层叠样式表

2.1 CSS的语法

选择器/符：{属性：属性值；}
选择器：寻找一个容器（标签 = 容器 = 盒子）
盒子的种类
- 长盒子（display:block;）
- 短盒子（display:inline）
- 不长不短盒子（display:inline-block）：并列占一行

2.1.1 盒子注意事项

短盒子（行元素）不能直接设置宽高
盒子类型可以互相转换
长盒子（块元素）默认宽：自适应父级的宽；默认高：自适应内容的高；
短盒子（行元素）默认宽：自适应内容的宽；默认高：自适应内容的高；
不长不短盒子（行块元素）默认宽：就是默认值；默认高：就是默认值；

2.1.2 盒子的重要属性一（margin）

- margin边界（边距 外补丁）  - 不是所有的盒子都有四个方向的margin  - 短盒子默认只有左右margin  - 有些盒子是有默认的margin值

2.1.3 margin注意事项

margin可能会转移给父级
- 解决方案1：给父级加一个边框；
- 解决方案2：给父级加一个overflow：auto；
margin可以取负值

margin:value; value代表四个值；
margin：上 - 右 - 下 - 左；
margin：上下 - 左右；
margin：上 - 左右 - 下

2.1.3 盒子的重要属性二（padding）

padding填充（内边距内补丁)
- 短盒子可以添加四个方向的padding
- 有些盒子是有默认的padding值
- padding不可以取负值

2.1.4 选择器

找一个盒子
找很多个盒子
找同类的很多个或者一个盒子
找不同类的很多个盒子
找同类的特定多个或者一个盒子
找不同类的特定多个盒子
找盒子的某个状态

2.1.5 选择器的种类

标签名选择器（类型选择器）
- 比如：a｛｝ b｛｝ 找同类的很多个盒子或者一个
class选择器（类选择器）
- 比如：.bt｛｝ .qq｛｝ 找同类的很多个盒子或者一个找不同类的很多个
ID选择器
- 比如：#box1 #box2 #box3 找一个盒子
伪类选择器
- 比如：状态｛｝找盒子的某个状态：:hover :active :focus :target
伪元素
- 伪元素： ::first-line ::first-letter ::after ::before
- 专属a链接元素的伪类： ::link ::visited
- 匹配第N个子元素： ：nth-child(odd奇数 even偶数) ：first-child :last-child

2.1.6 盒子的重要属性之三（border）

border-weidth:粗细值； border-color：颜色值； border-style：形状值；
border-left-width：左边框粗细值； border-left-color：左边框颜色值； border-left-style：左边框形状值；

2.1.7 下面的选择器是用上面的选择器进行组合

后代选择器用空格组合，比如：
- .nav a{} div p a{} .nav p a{} #box .nav p a{} .nav a:hover b{}
子选择器用>组合，比如：

.nav>a{} div>p>a{} .nav>p>a{}
兄弟选择器
- +：相邻兄弟(从上往下找，只能找到一个)
- ~：不相邻兄弟
通用选择器
- div *{} （星号*）
并列选择器
- p,span{}

2.1.8 属性选择器（class可以有多个值）

2.1.9 盒子的常用属性介绍

display
margin
padding
border
widh（盒子的内容宽）
height（盒子的内容高）
position
float
overflow
border-radius
background
text-indent(文字缩进)
text-align
line-height

2.2.0 两种盒模型

box-sizing:congtent-box; 默认盒模型
box-sizing:border-box; IE盒模型

2.2.1 Position 定位

相对定位：position:relative;
- 参照物：自身四个角初始位置
- 会覆盖下面的元素
- 没有脱离文档流
绝对定位：position:absolute
固定定位：position:fixed
静止：position:static

绝对定位：position:absolute

参照物：父级没有定位时，浏览器打开时可视区第一屏四个角；父级有定位时（相对定位），父级的四个角
会覆盖下面的元素（下面的盒子会自动上来）
脱离文档流
在没有设置宽高前和内容一样宽高
父级盒子的高不受绝对定位子级盒子的高影响

float:left/right/none/inherit

飘起来了
下面的盒子会上来
浮动的盒子只遮挡下面上来盒子的格局不遮挡内容
父级的高不受浮动子元素的高影响

如何解决？

给父级增加一个overflow:hidden
浮动的元素在没设宽高前和内容一样宽高
浮动没有脱离文档流
浮动后盒子会自动转换为display:block

2.2.2 首页命名

index（索引页）
default
iisstrat

2.2.3 冲突：！important > 行间样式 > ID > Class > 标签（Tag）

2.2.4 CSS动画

变形：tranform
过度：transition
- 过度的属性过度的时间过度调速函数延迟时间过度的属性过度的时间过度调速函数延迟时间... ：all（过度的时间调速函数）
动画：animation
- 创建多个关键帧

什么是动画？

物体的属性在一定的时间内发生变化
视觉暂留 - 大脑 - 帧 - frame

动画产生的要素

时间
属性变化
指令

text-shadow 取0四个方向都有阴影

box-shadow: inset x-offset y-offset blur-radius spred color,inset x-offset y-offset blur-radius spred color;

布局的实现

基于正常文档流布局
基于浮动的布局
基于定位的布局
改变盒子类型
流式布局
弹性布局
- 字号：
  1. 现代浏览器默认字号都是16px
  2. chrome中最小号字为12px
  3. rm和rem是绝对值（r=root）
  4. em的参照物是盒子自身定义的字号
响应式布局
1. 媒体查询（语法）
2. 设置比例
3. 响应布局
4. 图片响应
圣杯布局
瀑布流布局
bootstrap

三. JS

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

3.1 JS在WEB开发中的作用？

变动结构层
修改表层
给网页注入思想
解决HTML代码兼容和CSS代码兼容

3.2 JS学习提纲

ECMAScript：变量（闭包）数据类型运算符语句数组函数对象（事件）
DOM编程：document object model(文档对象模型) (对象 = 属性 + 方法 + 事件) （行为 = 动作 + 事件）
BOM编程：browser object model(浏览器对象模型)

3.3 标签script（脚本）

写程序写文章语法 isNaN(oTxt1.value)

3.4 数据类型

number
string
boolean
undefined
function
object

3.5 数据类型的转换

显示转换
隐示转换

3.6 取消链接的默认行为

给链接的href属性值填写javascript：
给链接的点击事件属性返回false值

3.7 顺序结构的语句

分支结构语句

单分支：

if(条件)｛  ｝

双分支：

 ｝else｛  ｝

if (条件) ｛  ｝else if() ｛  ｝

3.7 函数

内置函数
自定义函数
1. 功能或作用
2. 参数个数以及数据类型
3. 返回值

3.8 JS学习网站

3.9 JavaSrcipt动态效果

DOM（Document Object Model）文档对象模型

document.getElentById("id")
document.getElentByName("name")
document.getElentByTagName("id")
document.getElentByClass("id")

3.10 把HTML页面看成一棵树

树上的每一个元素都是一个节点（node）
获取节点的样式：node.style.width
改变节点的样式：node.style.width=""

3.11 树上的所有节点（childnNodes）

父节点：parentNode
第一个子节点：firstChild
最后一个子节点：lastChild

3.12 动态创建节点

创建节点：document.createElement("标签名")；
追加结点：appendChild();
删除节点：removeChild();

3.13 动态表格

创建一行，返回一个tr：insertRow()
创建一列，返回一个td：insertCell()
删除行：deleteRow

3.14 行块转换

块级行级转换：float:left | right
块级转换行级：display:inline
行级转换块级：display:block

3.15 赋值

=：赋值，比如：var a = 10
==：比较内容
===：完全相等，比较内容与数据类型

四. jQuery

jQuery是一个快速、简洁的JavaScript框架

宗旨：写的小，做的多

特点：

具有强大的选择器
出色的DOM操作
具有良好的兼容性

4.1 jQuery的版本

jQuery-1.4.2.js
jQuery-1.10.1.js
最小的代码做最多的事情，具有良好的兼容性
jQuery-2...js
不具有兼容性需要高版本浏览器的支持

4.2 软件版本的命名

软件名称[- _].大版本号.次版本号.小版本号

大版本号：一般是软件发生了大的改变；比如：系统架构的变更、功能的重大变化
次版本号：新加功能或者原来的功能进行优化

4.3 软件版本

版本后
@ （内测版本）
B （内部测试通过；修复了大部分的BUG）
R （最终版本；内、外都已经测试通过了的版本）

4.4 怎么使用jQuery？

需要在使用jQuery的页面引入<script type="text/javascript" src="jQuery/jquery-1.4.2.js"></script>

window.onload：在页面所有元素加载完成后触发，只能执行一次$(document).ready(function(){});

4.5 事件

JavaScript事件：onclick ondblclick onmouseover

4.6 出色的DOM操作

$("#id").text(); 取元素内容过滤HTML标签
$("#id").text("新的内容"); 改变内容
$("#id").html(); 取元素内容包含HTML标签
$("#id").html("新的html代码"); 改变内容
$("#id").val();文本输入框、选择框获取值
$("#id").val("新的值"); 改变值
$("#id").css({"样式":"值"，......})； 改变样式
append() 追加元素 jQuery对象.get(0) 获取元素