花了几小时初步总结了下前端知识点
文章目录
- 1.HTML
-
- 1.1 HTML文件架子
- 1.2 HTML后缀名
- 1.3 HTML基本标签
-
- 1.3.1 标题标签
- 1.3.2 段落标签
- 1.3.3 图像和链接
- 1.3.4 音频和视频
- 1.3.5 表单
- 1.3.6 框架(iframe)
- 1.3.7 列表
- 1.3.8 表格
- 1.3.9 特殊符号
- 1.3.10 加粗/斜体
- 1.4 HTML属性
- 1.5 HTML事件
- 1.6 HTML超链接使用
- 1.7 HTML自定义大小页面弹窗
- 1.8 HTML移动端键盘小技巧
- 1.9 HTML注释
- 2.HTTP
-
- 2.1 什么是HTTP
- 2.2 HTTP和UDP、TCP的区别
- 2.3 HTTP状态码
-
- 1xx: 信息
- 2xx: 成功
- 3xx: 重定向
- 4xx: 客户端错误
- 5xx: 服务器错误
- 2.4 跨域问题
- 3.Web服务器
-
- 3.1 Nginx
-
- 3.1.1 负载均衡
- 3.1.2 反向代理
- 3.2 Tomcat
- 4.CSS
-
- 4.1 CSS基本语法
- 4.2 CSS注释
- 4.3 id和class选择器
-
- 4.3.1 id 选择器
- 4.3.2 class 选择器
- 4.4 CSS引入方式
-
- 4.4.1 外部样式表
- 4.4.2 内部样式表
- 4.4.3 内联样式
- 4.4.4 【重点】 样式的优先级
- 4.5 CSS基础样式
-
- 4.5.1 背景
- 4.5.2 文本
- 4.5.3 字体
- 4.5.4 链接(伪类)
- 4.5.5 列表
-
-
- 无序列表如下所示:
- 有序列表如下所示:
- 4.5.5.1 列表项标记样式
-
-
- list-style-type属性指定列表项标记的类型是：
-
-
- 4.5.6 表格
- 4.5.7 盒子模型(DIV)
-
- 4.5.7.1 设置宽度和高度
- 4.5.8 边框
- 4.5.9 轮廓(outline)
- 4.5.10 外边距(margin)
- 4.5.11 内边距(padding)
- 4.5.12 尺寸
- 4.6 CSS分组和嵌套
- 4.7 CSS高级样式
-
- 4.7.1 显示/可见性(display)
- 4.7.2 定位(position)
- 4.7.3 布局(overflow)
- 4.7.4 浮动
- 4.7.3 【重点】对齐
- 4.7.4 选择符
- 4.7.5 伪类和伪元素
- 4.8 CSS参考手册
- 5.JavaScript
-
- 5.1 HelloWorld
- 5.2 JS输出
- 5.3 JS弹窗
-
- 5.3.1 警告框
- 5.3.2 确认框
- 5.3.3 提示框
- 5.4 JS数据类型
- 5.5 JS注释
-
- 5.5.1 单行注释
- 5.5.2 多行注释
- 5.6 JS变量/常量
- 5.7 JS对象
- 5.8 JS函数
- 5.9 JS运算符
-
- 5.8.1 算术运算符
- 5.9.2 比较运算符 比较运算符在逻辑语句中使用，以测定变量或值是否相等。
- 5.9.3 逻辑运算符 逻辑运算符用于测定变量或值之间的逻辑。
- 5.10 JS条件(if)
- 5.11 switch选择
- 5.12 循环语句
-
- 5.12.1 for循环
- 5.12.2 while循环
- 5.12.3 do/while循环
- 5.13 break和continue
- 5.14 typeof 类型判断
-
- 5.14.1 【重点】undefined 和 null 的区别
- 5.13 JS类型转换
- 5.14 正则表达式
- 5.15 JS异常
- 5.16 JS调试
- 5.17 JSON
- 5.18 void
- 5.19 异步 / Promise
- 5.20 ajax
- 5.21 【重点】闭包
- 5.22 DOM操作
- 5.23 JS高级用法
- 5.24 BOM
- 6.jQuery
-
- 6.1 安装jQuery
- 6.2 jQuery语法
- 6.3 jQuery选择器
- 6.4 jQuery事件
- 7.Bootstrap
-
- 7.1 Bootstrap简介
- 7.2 Bootstrap安装
- 7.3 Bootstrap的使用
- 8.Vue
-
- 8.1 Vue介绍
- 8.2 Vue生命周期
- 8.3 Vue指令
-
- 8.3.1 v-if
- 8.3.2 v-else
- 8.3.3 v-else-if
- 8.3.4 v-show
- 8.3.5 v-for （循环）
- 8.4 computed（计算属性）
- 8.5 Vue的watch监听
- 8.6 Vue的Filter过滤
- 8.7 Vue样式绑定
- 8.8 Vue事件处理
-
- 8.8.1 事件修饰符
- 8.9 Vue组件化
- 8.10 Vue自定义指令
- 8.11 Vue父子组件操作
- 8.12 Vue路由
-
- 8.12.1 安装vue-router
- 8.13 Vue脚手架
- 8.14 Axios请求
-
- 8.14.1.在main.js里面引入并定义
- 8.14.2.使用axios发送get请求
- 8.15 Moment.js日期格式化
-
- 8.15.1 安装momentJs
- 8.15.2 在main.js 里面去写
- 8.15.3 使用moment.js去格式化
- 8.16 Vuex
- 8.17 Vue整合ElementUI
- 9.React
- 10.Angular
- 11.Echarts
- 12.地图组件
- 13.Node.js / Koa
-
-
- 爬虫案例
-
- 14.Webpack / Gulp
- 15.TypeScript
- 16.Npm
-
-
- npm init初始化
-
- 17.Uniapp
- 18.微信小程序
- 19.rollup.js / vedio.js
- 20.WebSocket
- 21.Canvas
- 22.Git/Svn
-
-
- 22.1 Git
-
- 23.Linux
- 24.MySQL
- 25.Sass/Less
1.HTML
1.1 HTML文件架子
<html>
<head>
这里是文档的头部 ... ...
...
head>
<body>
这里是文档的主体 ... ...
...
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
head>
<body>
<h1>我的第一个标题h1>
<p>我的第一个段落。p>
body>
html>
html菜鸟笔记： https://www.runoob.com/html/html-tutorial.html
结构
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我是标题title>
head>
<body>
这里是文档的主体 ... ...
...
body>
html>
1.2 HTML后缀名
.html 和 .htm
1.3 HTML基本标签
1.3.1 标题标签
HTML 标题（Heading）是通过
-
标签来定义的。
<h1>这是一个标题h1>
<h2>这是一个标题h2>
<h3>这是一个标题h3>
1.3.2 段落标签
段落使用
标签
<p>这是一个段落。p>
<p>这是另外一个段落。p>
1.3.3 图像和链接
HTML 图像是通过标签 来定义的.
<img src="/images/logo.png" width="258" height="39" />
HTML 链接是通过标签 来定义的。
<a href="https://www.runoob.com">这是一个链接a>
1.3.4 音频和视频
HTML5 DOM 为 和 元素提供了方法、属性和事件。
这些方法、属性和事件允许您使用 JavaScript 来操作 和 元素。
参考链接：https://www.runoob.com/tags/ref-av-dom.html
1.3.5 表单
表单标签使用如下
<form action="demo_form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
form>
此处的action是提交到后端的地址，method是请求方法
1.3.6 框架(iframe)
该标签可嵌入其他页面
iframe常用属性:
1.frameborder:是否显示边框，1(yes),0(no)
2.height:框架作为一个普通元素的高度，建议在使用css设置。
3.width:框架作为一个普通元素的宽度，建议使用css设置。
4.name:框架的名称，window.frames[name]时专用的属性。
5.scrolling:框架的是否滚动。yes,no,auto。
6.src：内框架的地址，可以使页面地址，也可以是图片的地址。
7.srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用
8.sandbox: 对iframe进行一些列限制，IE10+支持
<iframe src="demo_iframe_sandbox.htm">iframe>
使用案例：https://www.runoob.com/try/try.php?filename=tryhtml_frame_cols
1.3.7 列表
| 定义一个无序列表 | |
|---|---|
| 定义一个有序列表 | |
| 定义一个列表项 | |
| HTML5不再支持。 HTML 4.01 已废弃。 定义目录列表。 | |
| 定义一个定义列表 | |
| 定义一个定义定义列表中的项目。 | |
| 定义定义列表中项目的描述。 |
1.3.8 表格
| 定义一个表格 | |
|---|---|
| ](https://www.runoob.com/tags/tag-caption.html) | 定义表格标题。 |
| ](https://www.runoob.com/tags/tag-th.html) | 定义表格中的表头单元格。 |
| 定义表格中的行。 | |
| ](https://www.runoob.com/tags/tag-td.html) | 定义表格中的单元。 |
| 定义表格中的表头内容。 | |
| 定义表格中的主体内容。 | |
| 定义表格中的表注内容（脚注）。 | |
| 定义表格中一个或多个列的属性值。 | |
| 定义表格中供格式化的列组。 |
1.3.9 特殊符号
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |||
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ’ | 撇号 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 人民币/日元 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
虽然 html 不区分大小写，但实体字符对大小写敏感。
1.3.10 加粗/斜体
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
head>
<body>
<b>加粗文本b><br><br>
<i>斜体文本i><br><br>
<code>电脑自动输出code><br><br>
这是 <sub> 下标sub> 和 <sup> 上标sup>
body>
html>
1.4 HTML属性
参考链接：https://www.runoob.com/tags/ref-standardattributes.html
常用属性如下表
| 属性名 | 描述 | 案例 |
|---|---|---|
| id | 给元素设置id | |
| class | 给元素设置类名 | |
| style | 给元素设置样式 | |
| title | 给元素设置标题(既鼠标悬浮显示文本) |
我是一句话
|
1.5 HTML事件
参考链接：https://www.runoob.com/tags/ref-eventattributes.html
常用事件如下表
| 事件名 | 描述 | 案例 |
|---|---|---|
| onclick | 鼠标点击事件 | |
| onfocus | 焦点选中事件 | |
| onscroll | 元素滚动事件 |
元素滚动
|
1.6 HTML超链接使用
//点击后直接拨打10086
<a href="tel:10086">10086a>
/点击后直接给[email protected]发邮件，主题为：TestObject
<a href="mailto:[email protected]?subject=TestObject">[email protected]a> /
//点击后直接给10086发信息，消息内容默认为message_body
<a href="sms:10086?body=message_body">给 10086 发短信a>
//点击后直接发送自己的位置所以这很大方便了移动端的开发。
<a href="geopoint:116.281469,39.866035">我的位置a>
/href中只需要放上图片的链接
只需要这样你就可以点击下载图片这个文字即可，下载对应的图片。如果是其他格式的文件，你只需要更改download="filename"里面的filename即可，下面举例说明。
<a href="img/WC.png" download="WC.png">下载图片a>/
<a href="public/jym_apk_1.0.zip" download="jym_apk_1.0.zip">下载apka>
1.7 HTML自定义大小页面弹窗
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window.opentitle>
<script type="text/javascript">
function Wopen() {
var url = 'http://www.baidu.com'; //转向网页的地址;
var name = 'add'; //网页名称，可为空;
var iWidth = 920; //弹出窗口的宽度;
var iHeight = 600; //弹出窗口的高度;
//获得窗口的垂直位置
var iTop = (window.screen.availHeight - 30 - iHeight) / 2;
//获得窗口的水平位置
var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
window.open(url, name, 'height=' + iHeight + ',,innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=0,titlebar=no');
// window.open('http://www.baidu.com', '_blank', 'width=900,height=600,left=200,top=200,menubar=no,toolbar=no,status=no,scrollbars=yes')
}
script>
head>
<body>
<input name="button" type="button" onClick="Wopen()" value="点击我，打开新窗口!" />
body>
html>
1.8 HTML移动端键盘小技巧
<input type="tel">
<input pattern="\d*">
1.9 HTML注释
2.HTTP
2.1 什么是HTTP
超文本传输协议（Hyper Text Transfer Protocol，HTTP）是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII形式给出；而消息内容则具有一个类似MIME的格式。这个简单模型是早期Web成功的有功之臣，因为它使开发和部署非常地直截了当。
2.2 HTTP和UDP、TCP的区别
参考链接：https://www.cnblogs.com/hanfanfan/p/9579771.html
2.3 HTTP状态码
1xx: 信息
| 消息： | 描述： |
|---|---|
| 100 Continue | 服务器仅接收到部分请求，如果服务器没有拒绝该请求，客户端应该继续发送其余的请求。 |
| 101 Switching Protocols | 服务器转换协议：服务器将遵从客户的请求转换到另外一种协议。 |
| 103 Checkpoint | 用于 PUT 或者 POST 请求恢复失败时的恢复请求建议。 |
2xx: 成功
| 消息： | 描述： |
|---|---|
| 200 OK | 请求成功（这是对HTTP请求成功的标准应答。） |
| 201 Created | 请求被创建完成，同时新的资源被创建。 |
| 202 Accepted | 供处理的请求已被接受，但是处理未完成。 |
| 203 Non-Authoritative Information | 请求已经被成功处理，但是一些应答头可能不正确，因为使用的是其他文档的拷贝。 |
| 204 No Content | 请求已经被成功处理，但是没有返回新文档。浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。 |
| 205 Reset Content | 请求已经被成功处理，但是没有返回新文档。但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容。 |
| 206 Partial Content | 客户发送了一个带有Range头的GET请求，服务器完成了它。 |
3xx: 重定向
| 消息： | 描述： |
|---|---|
| 300 Multiple Choices | 多重选择。链接列表。用户可以选择某链接到达目的地。最多允许五个地址。 |
| 301 Moved Permanently | 所请求的页面已经转移至新的 URL 。 |
| 302 Found | 所请求的页面已经临时转移至新的 URL 。 |
| 303 See Other | 所请求的页面可在别的 URL 下被找到。 |
| 304 Not Modified | 未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。 |
| 305 Use Proxy | 客户请求的文档应该通过Location头所指明的代理服务器提取。 |
| 306 Switch Proxy | 目前已不再使用，但是代码依然被保留。 |
| 307 Temporary Redirect | 被请求的页面已经临时移至新的 URL 。 |
| 308 Resume Incomplete | 用于 PUT 或者 POST 请求恢复失败时的恢复请求建议。 |
4xx: 客户端错误
| 消息： | 描述： |
|---|---|
| 400 Bad Request | 因为语法错误，服务器未能理解请求。 |
| 401 Unauthorized | 合法请求，但对被请求页面的访问被禁止。因为被请求的页面需要身份验证，客户端没有提供或者身份验证失败。 |
| 402 Payment Required | 此代码尚无法使用。 |
| 403 Forbidden | 合法请求，但对被请求页面的访问被禁止。 |
| 404 Not Found | 服务器无法找到被请求的页面。 |
| 405 Method Not Allowed | 请求中指定的方法不被允许。 |
| 406 Not Acceptable | 服务器生成的响应无法被客户端所接受。 |
| 407 Proxy Authentication Required | 用户必须首先使用代理服务器进行验证，这样请求才会被处理。 |
| 408 Request Timeout | 请求超出了服务器的等待时间。 |
| 409 Conflict | 由于冲突，请求无法被完成。 |
| 410 Gone | 被请求的页面不可用。 |
| 411 Length Required | “Content-Length” 未被定义。如果无此内容，服务器不会接受请求。 |
| 412 Precondition Failed | 请求中的前提条件被服务器评估为失败。 |
| 413 Request Entity Too Large | 由于所请求的实体太大，服务器不会接受请求。 |
| 414 Request-URI Too Long | 由于 URL 太长，服务器不会接受请求。当 POST 请求被转换为带有很长的查询信息的 GET 请求时，就会发生这种情况。 |
| 415 Unsupported Media Type | 由于媒介类型不被支持，服务器不会接受请求。 |
| 416 Requested Range Not Satisfiable | 客户端请求部分文档，但是服务器不能提供被请求的部分。 |
| 417 Expectation Failed | 服务器不能满足客户在请求中指定的请求头。 |
5xx: 服务器错误
| 消息： | 描述： |
|---|---|
| 500 Internal Server Error | 请求未完成。服务器遇到不可预知的情况。 |
| 501 Not Implemented | 请求未完成。服务器不支持所请求的功能，或者服务器无法完成请求。 |
| 502 Bad Gateway | 请求未完成。服务器充当网关或者代理的角色时，从上游服务器收到一个无效的响应。 |
| 503 Service Unavailable | 服务器当前不可用（过载或者当机）。 |
| 504 Gateway Timeout | 网关超时。服务器充当网关或者代理的角色时，未能从上游服务器收到一个及时的响应。 |
| 505 HTTP Version Not Supported | 服务器不支持请求中指明的HTTP协议版本。 |
| 511 Network Authentication Required | 用户需要提供身份验证来获取网络访问入口。 |
2.4 跨域问题
前端调用的后端接口不属于同一个域（域名或端口不同），就会产生跨域问题，也就是说你的应用访问了该应用域名或端口之外的域名或端口。
处理方式：前端处理或者后端处理
理论参考：https://zhuanlan.zhihu.com/p/66484450
跨域处理方案：https://www.cnblogs.com/itmacy/p/6958181.html
3.Web服务器
web服务器简介：
Tomcat：由Apache组织提供的一种Web服务器，提供对jsp和Servlet的支持。它是一种轻量级的javaWeb容器（服务器），也是当前应用最广的JavaWeb服务器（免费）。
Jboss：是一个遵从JavaEE规范的、开放源代码的、纯Java的EJB服务器，它支持所有的JavaEE规范（免费）。
GlassFish： 由Oracle公司开发的一款JavaWeb服务器，是一款强健的商业服务器，达到产品级质量（应用很少，收费）。
Resin：是CAUCHO公司的产品，是一个非常流行的应用服务器，对servlet和JSP提供了良好的支持，性能也比较优良，resin自身采用JAVA语言开发（收费，应用比较多）。
WebLogic：是Oracle公司的产品，是目前应用最广泛的Web服务器，支持JavaEE规范，而且不断的完善以适应新的开发要求，适合大型项目（收费，用的不多，适合大公司）。
[
](https://blog.csdn.net/o_o_gl/article/details/79662995)
3.1 Nginx
Nginx主要是实现了两个核心的功能，一个是负载均衡(反向代理)，一个是静态资源代理。
他是一个服务器，静态资源代理可以用于发布web应用。
3.1.1 负载均衡
参考：https://xiaolongda.blog.csdn.net/article/details/85334920
3.1.2 反向代理
参考：https://xiaolongda.blog.csdn.net/article/details/85334945
3.2 Tomcat
Tomcat是一个web应用服务器。基于java开发，需要jdk环境。
参考：https://blog.csdn.net/o_o_gl/article/details/79662995
4.CSS
4.1 CSS基本语法
body {
background-color:#d0e4fe;
}
h1 {
color:orange;
text-align:center;
}
p {
font-family:"Times New Roman";
font-size:20px;
}
4.2 CSS注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束, 实例如下:
/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}
4.3 id和class选择器
4.3.1 id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
以下的样式规则应用于元素属性 id=“para1”:
#para1
{
text-align:center;
color:red;
}
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
4.3.2 class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
.center {text-align:center;}
4.4 CSS引入方式
css有三种写法，一种是在html文件内，写在标签内，一种是直接在标签内去写，一种是写在.css后缀名结尾的文件内。
4.4.1 外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
head>
4.4.2 内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
style>
head>
4.4.3 内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
<p style="color:sienna;margin-left:20px">这是一个段落。p>
4.4.4 【重点】 样式的优先级
下列是一份优先级逐级增加的选择器列表：
- 通用选择器（*）
- 元素(类型)选择器
- 类选择器
- 属性选择器
- 伪类
- ID 选择器
- 内联样式
!important 规则例外
当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。
一些经验法则：
- Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
- Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
- Never 永远不要在全站范围的 css 上使用 !important
- Never 永远不要在你的插件中使用 !important
CSS 优先规则：
内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器
4.5 CSS基础样式
4.5.1 背景
CSS 背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:
- background-color 背景颜色
- background-image 背景图片
- background-repeat 背景图片水平或者平铺 设置背景图像是否及如何重复。
- background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
- background-position 设置背景图像的起始位置。
设置背景图片
body {background-image:url('paper.gif');}
4.5.2 文本
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
4.5.3 字体
| Property | 描述 |
|---|---|
| font | 在一个声明中设置所有的字体属性 |
| font-family | 指定文本的字体系列 |
| font-size | 指定文本的字体大小 |
| font-style | 指定文本的字体样式 |
| font-variant | 以小型大写字体或者正常字体显示文本。 |
| font-weight | 指定字体的粗细。 |
4.5.4 链接(伪类)
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
4.5.5 列表
在 HTML中，有两种类型的列表：
- 无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
- 有序列表 ol - 列表项的标记有数字或字母
使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。
无序列表如下所示:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
有序列表如下所示:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
4.5.5.1 列表项标记样式
list-style-type属性指定列表项标记的类型是：
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
要指定列表项标记的图像，使用列表样式图像属性： （https://www.runoob.com/try/try.php?filename=trycss_list-style-image）
ul
{
list-style-image: url('sqpurple.gif');
}
移除样式
list-style-type:none 属性可以用于移除小标记。默认情况下列表
- 或
- 还设置了内边距和外边距，可使用 margin:0 和 padding:0 来移除:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
| list-style-image | 将图像设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
4.5.6 表格
参考：https://www.runoob.com/css/css-table.html
4.5.7 盒子模型(DIV)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
4.5.7.1 设置宽度和高度
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
4.5.8 边框
参考：https://www.runoob.com/css/css-border.html
常用如下：
border:5px solid red; // 设置边框粗细，样式，颜色
border-radius:30px; // 设置圆角
| 属性 | 描述 |
|---|---|
| border | 简写属性，用于把针对四个边的属性设置在一个声明。 |
| border-style | 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 |
| border-width | 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 |
| border-color | 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 |
| border-bottom | 简写属性，用于把下边框的所有属性设置到一个声明中。 |
| border-bottom-color | 设置元素的下边框的颜色。 |
| border-bottom-style | 设置元素的下边框的样式。 |
| border-bottom-width | 设置元素的下边框的宽度。 |
| border-left | 简写属性，用于把左边框的所有属性设置到一个声明中。 |
| border-left-color | 设置元素的左边框的颜色。 |
| border-left-style | 设置元素的左边框的样式。 |
| border-left-width | 设置元素的左边框的宽度。 |
| border-right | 简写属性，用于把右边框的所有属性设置到一个声明中。 |
| border-right-color | 设置元素的右边框的颜色。 |
| border-right-style | 设置元素的右边框的样式。 |
| border-right-width | 设置元素的右边框的宽度。 |
| border-top | 简写属性，用于把上边框的所有属性设置到一个声明中。 |
| border-top-color | 设置元素的上边框的颜色。 |
| border-top-style | 设置元素的上边框的样式。 |
| border-top-width | 设置元素的上边框的宽度。 |
| border-radius | 设置圆角的边框。 |
4.5.9 轮廓(outline)
参考：https://www.runoob.com/css/css-outline.html
4.5.10 外边距(margin)
| 属性 | 描述 |
|---|---|
| margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top | 设置元素的上外边距。 |
参考：https://www.runoob.com/css/css-margin.html
4.5.11 内边距(padding)
| 属性 | 说明 |
|---|---|
| padding | 使用简写属性设置在一个声明中的所有填充属性 |
| padding-bottom | 设置元素的底部填充 |
| padding-left | 设置元素的左部填充 |
| padding-right | 设置元素的右部填充 |
| padding-top | 设置元素的顶部填充 |
参考：https://www.runoob.com/css/css-padding.html
4.5.12 尺寸
| 属性 | 描述 |
|---|---|
| height | 设置元素的高度。 |
| line-height | 设置行高。 |
| max-height | 设置元素的最大高度。 |
| max-width | 设置元素的最大宽度。 |
| min-height | 设置元素的最小高度。 |
| min-width | 设置元素的最小宽度。 |
| width | 设置元素的宽度。 |
4.6 CSS分组和嵌套
它可能适用于选择器内部的选择器的样式。
在下面的例子设置了四个样式：
- p{ }: 为所有 p 元素指定一个样式。
- .marked{ }: 为所有 class=“marked” 的元素指定一个样式。
- .marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
- p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。
参考：https://www.runoob.com/css/css-grouping-nesting.html
4.7 CSS高级样式
4.7.1 显示/可见性(display)
参考：https://www.runoob.com/css/css-display-visibility.html
4.7.2 定位(position)
position 属性的五个值：
- static
- relative
- fixed
- absolute
- sticky
| 属性 | 说明 | 值 | CSS |
|---|---|---|---|
| bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 | auto *length **% *inherit | 2 |
| clip | 剪辑一个绝对定位的元素 | *shape *auto inherit | 2 |
| cursor | 显示光标移动到指定的类型 | url auto crosshair default pointer (常用) move text wait help | 2 |
| left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 | auto *length **% *inherit | 2 |
| overflow | 设置当元素的内容溢出其区域时发生的事情。 | auto hidden scroll visible inherit | 2 |
| overflow-y | 指定如何处理顶部/底部边缘的内容溢出元素的内容区域 | auto hidden scroll visible no-display no-content | 2 |
| overflow-x | 指定如何处理右边/左边边缘的内容溢出元素的内容区域 | auto hidden scroll visible no-display no-content | 2 |
| position | 指定元素的定位类型 | absolute fixed relative static inherit | 2 |
| right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 | auto *length **% *inherit | 2 |
| top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | auto *length **% *inherit | 2 |
| z-index | 设置元素的堆叠顺序 | *number *auto inherit | 2 |
4.7.3 布局(overflow)
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
overflow属性有以下值：
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
4.7.4 浮动
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：
案例:https://www.runoob.com/try/try.php?filename=trycss_float
| 属性 | 描述 | 值 | CSS |
|---|---|---|---|
| clear | 指定不允许元素周围有浮动元素。 | left right both none inherit | 1 |
| float | 指定一个盒子（元素）是否可以浮动。 | left right none inherit | 1 |
4.7.3 【重点】对齐
参考：https://www.runoob.com/css/css-align.html
4.7.4 选择符
参考：https://www.runoob.com/css/css-combinators.html
4.7.5 伪类和伪元素
伪类参考：https://www.runoob.com/css/css-pseudo-classes.html
伪元素参考：https://www.runoob.com/css/css-pseudo-elements.html
其他案例：
https://www.runoob.com/css/css-navbar.html
4.8 CSS参考手册
https://www.runoob.com/cssref/css-reference.html
5.JavaScript
JavaScript 是 Web 的编程语言。
所有现代的 HTML 页面都使用 JavaScript。
5.1 HelloWorld
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
script>
head>
<body>
<h1>我的第一个 JavaScript 程序h1>
<p id="demo">这是一个段落p>
<button type="button" onclick="displayDate()">显示日期button>
body>
html>
案例：https://www.runoob.com/try/try.php?filename=tryjs_events
document.write("这是一个标题
");
document.write("这是一个段落。
");
js小案例
https://www.runoob.com/try/try.php?filename=tryjs_lightbulb
5.2 JS输出
JavaScript 可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
5.3 JS弹窗
5.3.1 警告框
window.alert("sometext");
5.3.2 确认框
window.confirm("sometext");
5.3.3 提示框
window.prompt("sometext","defaultvalue");
如果有换行，可以使用 弹窗使用 反斜杠 + “n”(\n) 来设置换行。
alert("Hello\nHow are you?");
5.4 JS数据类型
JS的数据类型有8种。
在ES5的时候，我们认知的数据类型确实是 6种：Number、String、Boolean、undefined、object、Null。
ES6 中新增了一种 Symbol 。这种类型的对象永不相等，即始创建的时候传入相同的值，可以解决属性名冲突的问题，做为标记。
谷歌67版本中还出现了一种 bigInt。是指安全存储、操作大整数。（但是很多人不把这个做为一个类型）。
[
](https://blog.csdn.net/u013592575/article/details/95087953)
8种。Number、String、Boolean、Null、undefined、object、symbol、bigInt。
[
](https://blog.csdn.net/u013592575/article/details/95087953)
参考：https://blog.csdn.net/u013592575/article/details/95087953
var length = 16; // Number 通过数字字面量赋值
var points = x * 10; // Number 通过表达式字面量赋值
var lastName = "Johnson"; // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值
5.5 JS注释
5.5.1 单行注释
// 输出标题：
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
// 输出段落：
document.getElementById("myP").innerHTML="这是我的第一个段落。";
5.5.2 多行注释
/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";
5.6 JS变量/常量
变量是用于存储信息的"容器"。 变量的默认值是undefined
var x=5;
var y=6;
var z=x+y;
var lastname="Doe", age=30, job="carpenter";
除了var，可以使用const来定义常量
详情：https://blog.csdn.net/qq_30216191/article/details/81042842
5.7 JS对象
参考：https://www.runoob.com/js/js-obj-intro.html
5.8 JS函数
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname()
{
// 执行代码
}
在调用函数时，您可以向其传递值，这些值被称为参数。
这些参数可以在函数中使用。
您可以发送任意多的参数，由逗号 (,) 分隔：
function myFunction(var1,var2)
{
代码
}
案例：
<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
alert("Welcome " + name + ", the " + job);
}
</script>
5.9 JS运算符
5.8.1 算术运算符
y=5，下面的表格解释了这些算术运算符：
| 运算符 | 描述 | 例子 | x 运算结果 | y 运算结果 | 在线实例 |
|---|---|---|---|---|---|
| + | 加法 | x=y+2 | 7 | 5 | 实例 » |
| - | 减法 | x=y-2 | 3 | 5 | 实例 » |
| * | 乘法 | x=y*2 | 10 | 5 | 实例 » |
| / | 除法 | x=y/2 | 2.5 | 5 | 实例 » |
| % | 取模（余数） | x=y%2 | 1 | 5 | 实例 » |
| ++ | 自增 | x=++y | 6 | 6 | 实例 » |
| x=y++ | 5 | 6 | 实例 » | ||
| – | 自减 | x=–y | 4 | 4 | 实例 » |
| x=y– | 5 | 4 | 实例 » |
5.9.2 比较运算符 比较运算符在逻辑语句中使用，以测定变量或值是否相等。
x=5，下面的表格解释了比较运算符：
| 运算符 | 描述 | 比较 | 返回值 | 实例 |
|---|---|---|---|---|
| == | 等于 | x==8 | false | 实例 » |
| x==5 | true | 实例 » | ||
| === | 绝对等于（值和类型均相等） | x===“5” | false | 实例 » |
| x===5 | true | 实例 » | ||
| != | 不等于 | x!=8 | true | 实例 » |
| !== | 不绝对等于（值和类型有一个不相等，或两个都不相等） | x!==“5” | true | 实例 » |
| x!==5 | false | 实例 » | ||
| > | 大于 | x>8 | false | 实例 » |
| < | 小于 | x<8 | true | 实例 » |
| >= | 大于或等于 | x>=8 | false | 实例 » |
| <= | 小于或等于 | x<=8 | true | 实例 » |
5.9.3 逻辑运算符 逻辑运算符用于测定变量或值之间的逻辑。
给定 x=6 以及 y=3，下表解释了逻辑运算符：
| 运算符 | 描述 | 例子 |
|---|---|---|
| && | and | (x < 10 && y > 1) 为 true |
| || | or | (x5 || y5) 为 false |
| ! | not | !(x==y) 为 true |
5.10 JS条件(if)
通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。
在 JavaScript 中，我们可使用以下条件语句：
- if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
- if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
- if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
- switch 语句 - 使用该语句来选择多个代码块之一来执行
if (condition)
{
当条件为 true 时执行的代码
}
=================================================
if (condition)
{
当条件为 true 时执行的代码
}
else
{
当条件不为 true 时执行的代码
}
================================================
if (time<10)
{
document.write("早上好");
}
else if (time>=10 && time<20)
{
document.write("今天好");
}
else
{
document.write("晚上好!");
}
5.11 switch选择
请使用 switch 语句来选择要执行的多个代码块之一。
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
案例：
var d=new Date().getDay();
switch (d)
{
case 0:x="今天是星期日";
break;
case 1:x="今天是星期一";
break;
case 2:x="今天是星期二";
break;
case 3:x="今天是星期三";
break;
case 4:x="今天是星期四";
break;
case 5:x="今天是星期五";
break;
case 6:x="今天是星期六";
break;
}
请使用 default 关键词来规定匹配不存在时做的事情：
var d=new Date().getDay();
switch (d)
{
case 6:x="今天是星期六";
break;
case 0:x="今天是星期日";
break;
default:
x="期待周末";
}
document.getElementById("demo").innerHTML=x;
5.12 循环语句
5.12.1 for循环
JavaScript 支持不同类型的循环：
- for - 循环代码块一定的次数
- for/in - 循环遍历对象的属性
- while - 当指定的条件为 true 时循环指定的代码块
- do/while - 同样当指定的条件为 true 时循环指定的代码块
for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "
");
}
5.12.2 while循环
while (条件)
{
需要执行的代码
}
while (i<5)
{
x=x + "The number is " + i + "
";
i++;
}
5.12.3 do/while循环
do
{
需要执行的代码
}
while (条件);
do
{
x=x + "The number is " + i + "
";
i++;
}
while (i<5);
5.13 break和continue
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。
参考：https://www.runoob.com/js/js-break.html
5.14 typeof 类型判断
你可以使用 typeof 操作符来检测变量的数据类型。
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
5.14.1 【重点】undefined 和 null 的区别
null 和 undefined 的值相等，但类型不等：
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
5.13 JS类型转换
参考：https://www.runoob.com/js/js-type-conversion.html
5.14 正则表达式
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索和文本替换。
正则表达式是由一个字符序列形成的搜索模式。
当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
正则表达式可以是一个简单的字符，或一个更复杂的模式。
正则表达式可用于所有文本搜索和文本替换的操作。
参考：https://www.runoob.com/js/js-regexp.html
参考：https://www.runoob.com/regexp/regexp-syntax.html
5.15 JS异常
关键词
try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。
当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误。
可能是语法错误，通常是程序员造成的编码错误或错别字。
可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。
可能是由于来自服务器或用户的错误输出而导致的错误。
当然，也可能是由于许多其他不可预知的因素。
当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。
描述这种情况的技术术语是：JavaScript 将抛出一个错误。
try {
... //异常的抛出
} catch(e) {
... //异常的捕获与处理
} finally {
... //结束处理
}
案例：
var txt="";
function message()
{
try {
adddlert("Welcome guest!");
} catch(err) {
txt="本页有一个错误。\n\n";
txt+="错误描述：" + err.message + "\n\n";
txt+="点击确定继续。\n\n";
alert(txt);
}
}
finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。
function myFunction() {
var message, x;
message = document.getElementById("p01");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "值是空的";
if(isNaN(x)) throw "值不是一个数字";
x = Number(x);
if(x > 10) throw "太大";
if(x < 5) throw "太小";
}
catch(err) {
message.innerHTML = "错误: " + err + ".";
}
finally {
document.getElementById("demo").value = "";
}
}
5.16 JS调试
没有调试工具是很难去编写 JavaScript 程序的。
你的代码可能包含语法错误，逻辑错误，如果没有调试工具，这些错误比较难于发现。
通常，如果 JavaScript 出现错误，是不会有提示信息，这样你就无法找到代码错误的位置。
debugger 关键字用于停止执行 JavaScript，并调用调试函数。
这个关键字与在调试工具中设置断点的效果是一样的。
如果没有调试可用，debugger 语句将无法工作。
开启 debugger ，代码在第三行前停止执行。
var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;
5.17 JSON
json主要是json对象转字符串，和字符串转json对象用的比较多
1、json对象转字符串
JSON.stringify(json对象)
2、字符串转json对象
JSON.parse(字符串)
5.18 void
javascript:void(0), 仅仅表示一个死链接。
<a href="javascript:void(0);">点我没有反应的!a>
5.19 异步 / Promise
参考： https://www.runoob.com/js/js-async.html
5.20 ajax
https://www.w3school.com.cn/js/js_ajax_intro.asp
5.21 【重点】闭包
参考：https://www.runoob.com/js/js-function-closures.html
5.22 DOM操作
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。
本例查找 id=“intro” 元素：
var x=document.getElementById("intro");
本例查找 id=“main” 的元素，然后查找 id=“main” 元素中的所有
元素：
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
本例通过 getElementsByClassName 函数来查找 class=“intro” 的元素：
var x=document.getElementsByClassName("intro");
5.23 JS高级用法
https://www.runoob.com/js/js-objects.html
5.24 BOM
https://www.runoob.com/js/js-window.html
6.jQuery
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
6.1 安装jQuery
可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法：
- 从 jquery.com 下载 jQuery 库
- 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
有两个版本的 jQuery 可供下载：
- Production version - 用于实际的网站中，已被精简和压缩。
- Development version - 用于测试和开发（未压缩，是可读的代码）
以上两个版本都可以从 jquery.com 中下载。
jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的
<head>
<script src="jquery-1.10.2.min.js">script>
head>
百度CDN
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
script>
head>
6.2 jQuery语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询"和"查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
实例:
- $(this).hide() - 隐藏当前元素
- $(“p”).hide() - 隐藏所有
元素
- $(“p.test”).hide() - 隐藏所有 class=“test” 的
元素
- $(“#test”).hide() - 隐藏 id=“test” 的元素
$(document).ready(function(){
// 开始写 jQuery 代码...
});
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
- 试图隐藏一个不存在的元素
- 获得未完全加载的图像的大小
$(function(){
// 开始写 jQuery 代码...
});
6.3 jQuery选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
参考：https://www.runoob.com/jquery/jquery-selectors.html
6.4 jQuery事件
参考：https://www.runoob.com/jquery/jquery-events.html
7.Bootstrap
7.1 Bootstrap简介
Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap5 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点。
官网：https://v5.bootcss.com/
7.2 Bootstrap安装
我们可以通过以下两种方式来安装 Bootstrap5：
- 使用 Bootstrap5 CDN。
- 从官网 getbootstrap.com 下载 Bootstrap 5。
国内推荐使用 Staticfile CDN 上的库：
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js">script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js">script>
***注：***此外你还可以通过包的管理工具 npm、 yarn、gem、 composer 等来安装：
npm install bootstrap
yarn add bootstrap
gem install bootstrap -v 5.1.1
composer require twbs/bootstrap:5.1.1
7.3 Bootstrap的使用
官网文档：https://v5.bootcss.com/docs/5.1/getting-started/introduction/
菜鸟教程：https://www.runoob.com/bootstrap5/bootstrap5-install.html
8.Vue
8.1 Vue介绍
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
基本语法
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="app">
<p>{{ message }}p>
div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
script>
body>
html>
1、引入vue的js文件
2、创建div，设置id
3、new Vue的对象，el指向这个id，在这个id内的元素，可进行双向绑定，data是双向绑定的数据。
4、数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值
8.2 Vue生命周期
8.3 Vue指令
8.3.1 v-if
设置v-if，如果是true，则被设置的元素及其子元素均显示，为false则都被从dom树上移除。
在元素 和 template 中使用 v-if 指令：
<div id="app">
<p v-if="seen">现在你看到我了p>
<template v-if="ok">
<h1>菜鸟教程h1>
<p>学的不仅是技术，更是梦想！p>
<p>哈哈哈，打字辛苦啊！！！p>
template>
div>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
script>
8.3.2 v-else
随机生成一个数字，判断是否大于0.5，然后输出对应信息：
<div id="app">
<div v-if="Math.random() > 0.5">
Sorry
div>
<div v-else>
Not sorry
div>
div>
<script>
new Vue({
el: '#app'
})
script>
8.3.3 v-else-if
v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：
判断 type 变量的值：
<div id="app">
<div v-if="type === 'A'">
A
div>
<div v-else-if="type === 'B'">
B
div>
<div v-else-if="type === 'C'">
C
div>
<div v-else>
Not A/B/C
div>
div>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
script>
8.3.4 v-show
我们也可以使用 v-show 指令来根据条件展示元素：
<h1 v-show="ok">Hello!h1>
8.3.5 v-for （循环）
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }}
li>
ol>
div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
script>
<div id="app">
<ul>
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
li>
ul>
div>
<div id="app">
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
li>
ul>
div>
8.4 computed（计算属性）
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子： https://www.runoob.com/try/try.php?filename=vue2-str-reverse1
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="app">
{{ message.split('').reverse().join('') }}
div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
script>
body>
html>
实例 1 中模板变的很复杂起来，也不容易看懂理解。
接下来我们看看使用了计算属性的实例：
<div id="app">
<p>原始字符串: {{ message }}p>
<p>计算后反转字符串: {{ reversedMessage }}p>
div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
script>
8.5 Vue的watch监听
我们可以通过 watch 来响应数据的变化。
<div id = "app">
<p style = "font-size:25px;">计数器: {{ counter }}p>
<button @click = "counter++" style = "font-size:25px;">点我button>
div>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
counter: 1
}
});
vm.$watch('counter', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
script>
8.6 Vue的Filter过滤
Vue.filter("hello", function (val: any) {
return 'hello' + any;
});
使用
{{ scope.row.name | hello }}
例如name = 张三
则显示 hello张三
8.7 Vue样式绑定
lass 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
我们可以为 v-bind:class 设置一个对象，从而动态的切换 class:
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
style>
<body>
<div id="app">
<div v-bind:class="{ 'active': isActive }">div>
div>
<script>
new Vue({
el: '#app',
data: {
isActive: true
}
})
script>
body>
8.8 Vue事件处理
事件监听可以使用 v-on 指令：
<div id="app">
<button v-on:click="counter += 1">增加 1button>
<p>这个按钮被点击了 {{ counter }} 次。p>
div>
<script>
new Vue({
el: '#app',
data: {
counter: 0
}
})
script>
通常情况下，我们需要使用一个方法来调用 JavaScript 方法。
v-on 可以接收一个定义的方法来调用。
<div id="app">
<button v-on:click="greet">Greetbutton>
div>
<script>
var app = new Vue({
el: '#app',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接调用方法
app.greet() // -> 'Hello Vue.js!'
script>
8.8.1 事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js 通过由点 . 表示的指令后缀来调用修饰符。
- .stop - 阻止冒泡
- .prevent - 阻止默认事件
- .capture - 阻止捕获
- .self - 只监听触发该元素的事件
- .once - 只触发一次
- .left - 左键事件
- .right - 右键事件
- .middle - 中间滚轮事件
!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis">a>
<form v-on:submit.prevent="onSubmit">form>
<a v-on:click.stop.prevent="doThat">a>
<form v-on:submit.prevent>form>
<div v-on:click.capture="doThis">...div>
<div v-on:click.self="doThat">...div>
<a v-on:click.once="doThis">a>
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<input v-on:keyup.13="submit">
<input v-on:keyup.enter="submit">
<input @keyup.enter="submit">
全部的按键别名：
- .enter
- .tab
- .delete (捕获 “删除” 和 “退格” 键)
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
- .meta
案例：
<p>
<input @keyup.alt.67="clear">
<div @click.ctrl="doSomething">Do somethingdiv>
8.9 Vue组件化
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
注册一个全局组件语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName>tagName>
所有实例都能用全局组件。
注册一个简单的全局组件 runoob，并使用它：
<div id="app">
<runoob>runoob>
div>
<script>
// 注册
Vue.component('runoob', {
template: '自定义组件!
'
})
// 创建根实例
new Vue({
el: '#app'
})
script>
我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：
<div id="app">
<runoob>runoob>
div>
<script>
var Child = {
template: '自定义组件!
'
}
// 创建根实例
new Vue({
el: '#app',
components: {
// 将只在父模板可用
'runoob': Child
}
})
script>
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”：
<div id="app">
<child message="hello!">child>
div>
<script>
// 注册
Vue.component('child', {
// 声明 props
props: ['message'],
// 同样也可以在 vm 实例中像 "this.message" 这样使用
template: '{{ message }}'
})
// 创建根实例
new Vue({
el: '#app'
})
script>
组件可以为 props 指定验证要求。
为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
8.10 Vue自定义指令
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。
下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：
<div id="app">
<p>页面载入时，input 元素自动获取焦点：p>
<input v-focus>
div>
<script>
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
// 创建根实例
new Vue({
el: '#app'
})
script>
我们也可以在实例使用 directives 选项来注册局部指令，这样指令只能在这个实例中使用：
<div id="app">
<p>页面载入时，input 元素自动获取焦点：p>
<input v-focus>
div>
<script>
// 创建根实例
new Vue({
el: '#app',
directives: {
// 注册一个局部的自定义指令 v-focus
focus: {
// 指令的定义
inserted: function (el) {
// 聚焦元素
el.focus()
}
}
}
})
script>
8.11 Vue父子组件操作
通过代码演示【TODO】
8.12 Vue路由
8.12.1 安装vue-router
npm install vue-router
Vue.js + vue-router 可以很简单的实现单页应用。
是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。
以下实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。代码如下所示：
参考：https://www.runoob.com/vue2/vue-routing.htmlhttps://www.runoob.com/vue2/vue-routing.html
8.13 Vue脚手架
# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob <[email protected]>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "my-project".
To get started:
cd my-project
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
$ cd my-project
$ cnpm install
$ cnpm run dev
DONE Compiled successfully in 4388ms
> Listening at http://localhost:8080
成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：
8.14 Axios请求
8.14.1.在main.js里面引入并定义
import axios from 'axios'
Vue.prototype.$axios=axios;
8.14.2.使用axios发送get请求
this.$axios.get('你的url').then(res=>{ 结果值为res })
8.15 Moment.js日期格式化
8.15.1 安装momentJs
npm install moment --save # npm
yarn add moment # Yarn
Install-Package Moment.js # NuGet
spm install moment --save # spm
meteor add momentjs:moment # meteor
bower install moment --save # bower (废弃)
8.15.2 在main.js 里面去写
import moment from "moment";
// ======================= filter ==========================
Vue.filter("formatDate", function (val: any) {
if (val === "" || val === null) {
return "";
} else {
return moment(val).format("YYYY-MM-DD HH:mm:ss");
}
});
8.15.3 使用moment.js去格式化
<el-table-column label="创建时间" width="100" prop="createDateTime">
<template slot-scope="scope">
{{ scope.row.createDateTime | formatDate }}
template>
el-table-column>
8.16 Vuex
8.17 Vue整合ElementUI
9.React
10.Angular
11.Echarts
12.地图组件
13.Node.js / Koa
爬虫案例
const axios = require('axios');
const cheerio = require('cheerio')
axios.get('https://www.cnblogs.com/').then(res => {
console.log('博客园', res)
$ = cheerio.load(res.data);
var arr = $('.post-item-title').text()
console.log('arr-',arr)
})
14.Webpack / Gulp
15.TypeScript
16.Npm
npm init初始化
npm init
初始化包管理工具
17.Uniapp
18.微信小程序
19.rollup.js / vedio.js
20.WebSocket
21.Canvas
22.Git/Svn
22.1 Git
git提交规范
feat: 新功能、新特性
fix: 修改 bug
perf: 更改代码，以提高性能（在不影响代码内部行为的前提下，对程序性能进行优化）
refactor: 代码重构（重构，在不影响代码内部行为、功能下的代码修改）
docs: 文档修改
style: 代码格式修改, 注意不是 css 修改（例如分号修改）
test: 测试用例新增、修改
build: 影响项目构建或依赖项修改
revert: 恢复上一次提交
ci: 持续集成相关文件修改
chore: 其他修改（不在上述类型中的修改）
release: 发布新版本
workflow: 工作流相关文件修改
23.Linux
1、进入和退出命令
cd XX 进入XX文件夹
cd … 返回上一级
cd ./XXX 进入当前文件夹下XXX目录
cd /xxx 进入跟目录下的文件夹
pwd，查看当前位置
2、文件目录编辑
mkdir xxx 创建xxx目录
mkdir ./xxx
mkdir /xxx/xxx1
touch xxx 新建空白文件
vi xxx（文件名称） 进入到xxx文件里面
进入之后，默认是不能编辑的，
点击i，切换成插入模式
保存 1、按ESC ,2、输入: 3、接着输入wq
q:quit 退出, 需要q！强制退出
w：保存
3、浏览文件内容
cat xxx(文件名称)
4、复制粘贴和移动,删除
复制：cp 需要复制的文件名称 需要粘贴的文件名称
删除：rm 需要删除的文件名称