前端学习知识总结

一、前端简介

1. 前端简介

• 前端概念：

• 广义: 用户能看见并且交互的展示界面

• 狭义: 运行在浏览器上的页面

• 学习的语言：

• html5 => (h5架构 + css3布局 + javascript逻辑)

• 网页编写 | 移动端应用编写 | 客户端编写

• 前后台分离 开发方式 => 通过接口完成数据交互 => 后台可以千千万，前端就是h5

2.常用编辑器

pycharm | sublime | Hbuild | webstrom | atom

二、HTML

1.常用标签

1. div：“三无”，无语义，无功能，无样式，完成页面架构的搭建
2. h1-h7：页面标题
3. p：段落
4. img：图片，{src：图片数据源}，{alt：数据源加载失败的文本提示}
5. a：超链接，{href：超链接地址}，{target：跳转方式#_self|_blank}
6. link：外部样式链接，{ref：样式类型#stylesheet}，{type：文本类型#text/css},{href：外部样式链接地址}
7. span,i,b，u，s :文本标签，斜体，加粗，下划线，删除线
8. sup,sub，small，big：上标，下标，缩小一级字体，增大一级字体
9. br，hr：换行，水平分割线
10. pre：原文本输出
11. ol，li：有序列表，默认为数字开头
12. ul，li：无序列表 ,默认为小黑点开头
13. table¹，caption，tr，th，td：表格，表格标题，表格单行，表头单元格，数据单元格
14. frameset，frame：框架，内框
15. form，input：表单，输入框，选择框，标签，按钮

特殊字符

特殊字符	转义码
空格	&nbsp；
"	&quot ;
<	&it ;
>	&gt ;
版权号	&copy；
注册商标	&reg；

三、CSS样式表

1.CSS简介

1. 学习CSS的目的：完成页面布局(还原设计稿)
3. 三大组成部分：
4. 1.选择器：由标签、类、id单独或组合出现
5. 2.作用域：一组大括号包含的区域
6. 3.样式块：满足css连接语法的众多样式

2.选择器

1. what：用来将css与html建立关联的桥梁，称之为css选择器
3. why: 将原来出现在标签内部的样式分离开来，可以用一个个选择器加以管理，达到页面与样式的解耦合目的，从而提高代码的复用性与开发效率
5. 本质: 就是页面标签的某种名字

3. CSS三种引入方式

1.行间式

1.写在标签的style属性中
2.属性与属性值间用:赋值
3.属性与属性之间用;隔开

2.内联式

1.写在style标签中(style标签一般出现在head标签中)
2.用选择器与html建立连接
3.样式块书写在作用域内

3.外联式

1.css样式完全与html文件脱离，形成单独的.css文件，样式书写在.css文件中
2.用选择器与html建立连接
3.样式块书写在作用域内
4.要将.css文件与.html文件建立关联 => <link rel=“stylesheet” href=“css文件的相对路径”

注: 选择器的应用场景在内联式和外联式

总结：

开发：最常用的是外联式，内联与行间辅助样式布局

测试：内联式，可读性最强，且解耦有复用性

行间的应用场景：最简单粗暴，js操作的样式都是行间式

对常用标签的外联方式

四、JavaScript脚本

1.JavaScript简介

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

JavaScript 的核心 ECMAScript 描述了该语言的语法和基本对象；

DOM 描述了处理网页内容的方法和接口；

BOM 描述了与浏览器进行交互的方法和接口。

2.常用函数和事件

函数	描述
document.write(html语句)	用于插入文本到html中
document.getElementById(id).innerHTML	通过对属性赋值的方式改变html文本。
document.getElementById(id).style.property	通过对属性赋值的方式改变文本样式
document.getElementById(id).attribute	同过属性赋值的方式改变html元素的属性。
document.getElementById(id).appendChild(para)	用于向html添加新元素节点。
alert(str)	提示弹框
Date()	日期函数

3.表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

被 JavaScript 验证的这些典型的表单数据有：

用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？

4.使用html dom来分配事件

事件	描述
onload 和 onunload 事件	onload 和 onunload 事件会在用户进入或离开页面时被触发。onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。onload 和 onunload 事件可用于处理 cookie。
onchange 事件	onchange 事件常结合对输入字段的验证来使用。
onmouseover 和 onmouseout 事件	onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
onmousedown、onmouseup 以及 onclick 事件	onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
onfocus	当输入字段获得焦点时，改变其背景色。

5.JavaScript对象

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。

对象只是带有属性和方法的特殊数据类型。

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…

此外，JavaScript 允许自定义对象。
String对象实例

方法	描述
txt.len()	计算字符串长度
txt.small()	缩小一级字体
txt.big()	增大一级字体
txt.bold()	粗体
txt.italics()	斜体
txt.strike()	删除线字体
txt.fontcolor(color)	改变字体颜色
txt.fontsize(size)	改变字体大小
txt.toLowerCase()	全小写
txt.toUpperCase()	全大写
txt.sub()	下标
txt.sup()	上标
txt.link(url)	添加超链接
txt.indexOf(“keyword”)	字符串定位，返回指定字符串首次出现位置，未找到则返回-1。
txt.match(“keyword”)	字符串匹配
txt.replace(/str/,newstr)	字符串替换

Date对象实例

方法	描述
Date()	获得当日的日期
getTime()	返回从1970年1月1号至今的毫秒数
d.setFullYear(year,month,day)	设置日期
d.setDate(d.getDate()+days)	改变日期天数
d.toUTString()	转换为世界标准时间
d.getDay()	返回日期的星期对应0-6数字
d.getHours()	返回小时数
d.getMinutes()	返回分钟数
d.getSeconds()	返回秒数

五、jquery库编程

1.jquery简介

JavaScript框架（库）：JavaScript高级程序设计（特别是对浏览器差异的复杂处理），通常很困难也很耗时。
为了应对这些调整，许多的JavaScript库应运而生。这些JavaScript库常被称为JavaScript框架。

常见的JavaScript框架：

框架	描述
jQuery	jQuery 是目前最受欢迎的 JavaScript 框架。它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）。jQuery 同时提供 companion UI（用户界面）和插件。
Prototype	Prototype 是一种库，提供用于执行常见 web 任务的简单 API。API 是应用程序编程接口（Application Programming Interface）的缩写。它是包含属性和方法的库，用于操作 HTML DOM。Prototype 通过提供类和继承，实现了对 JavaScript 的增强。
MooTools	MooTools 也是一个框架，提供了可使常见的 JavaScript 编程更为简单的 API。MooTools 也含有一些轻量级的效果和动画函数。框架解决的问题：提供常见的JavaScript任务的函数，包括动画、DOM操作以及Ajax处理。
YUI	Yahoo! User Interface Framework,涵盖大量函数的大型库，从简单的JavaScript功能到完整的inernet widget。
Ext JS	可定制的widget，用于构建富因特网应用程序。
Dojo	用于DOM操作、事件、widget等的工具包。
script.aculo.us	开源的JavaScript框架，针对可是效果和界面行为。
UIZE	Widget、AJAX、DOM、模板等等。

jQuery 允许链接（链式语法）。

链接（Chaining）是一种在同一对象上执行多个任务的便捷方法。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.
居中并且带尺寸的图片:

生成一个适合你的列表

• 项目
  • 项目
    • 项目

1. 项目1
2. 项目2
3. 项目3

• 计划任务
• 完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

新的甘特图功能，丰富你的文章

• 关于 甘特图 语法，参考 [这儿][2],

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：:

这将产生一个流程图。:

• 关于 Mermaid 语法，参考 [这儿][3],

FLowchart流程图

我们依旧会支持flowchart的流程图：

• 关于 Flowchart流程图 语法，参考 [这儿][4].

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件或者.html文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

[1]:
[2]: https://mermaidjs.github.io/
[3]: https://mermaidjs.github.io/
[4]: http://adrai.github.io/flowchart.js/

---

1. table,表单{} ↩︎