理论知识总结（js和css）

 

目录

一、HTML

二、CSS

1、选择器

2、web和w3c

3、布局方式

4、rgba

5、盒子模型

6、css属性

三、JavaScript

1、数据类型及转换

2、数组对象的相关方法

3、webview

4、作用域

5、数据类型

6、数据请求方式

7、同步异步

四、小程序事件

---

一、HTML

标签大全

https://blog.youkuaiyun.com/fdbyd/article/details/113415660

二、CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

 

1、选择器

一：类选择器

class元素可以有多个值，中间用空格隔开。一个文件中，可以有多个相同的class值。

<p class="first done"></p>

.first{
  background-color: red;
}

二：ID选择器

#(哈希)符号加上id名称组成。但是单个文件中id值要保持唯一。一个element中只设置一个id。

<p id="polite"></p>

#polite{
  text-transform: uppercase;
}

三：通用选择器

<p></p>

* {
  text-decoration: line-through;
}

四：属性选择器

<p data-fruit></p>

[data-fruit]{
  color: green;
}

五：伪类(pseudo-class)

以:作为前缀，被添加到一个选择器末尾的关键字。当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上伪类。

比如让超链接，访问前后样式一致，同时鼠标悬停时不一致。

a:visited{
  color: blue;
}
/** 选择器上的逗号不能省略*/
a:hover,
a:active,
a:focus{
  color: red;
  text-decoration: none;
}

比如当一个列表的偶数行和奇数行的背景不同

<ul>
  <li><p>这是第一行</p></li>  
  <li>p>这是第一行</p></li>  
  <li>p>这是第一行</p></li>  
  <li>p>这是第一行</p></li>
</ul>

li:nth-of-type(2n){
  background-color: red;
}

li:nth-of-type(2n+1){
  background-color:blue;
}

六：伪元素（Pseudo-element)

通过::这样两个冒号前缀，组合关键字，添加到某个元素的后面，去选择该元素的某个部分。

<a href="http://www.moremom.com">moremom</a>

a::after{
  content:"后面追加内容";
}
或者
[href^="http"]::after{
  content:"后面追加的内容";
}

七：组合器

名称	组合器	选择
选择器组	A,B	匹配A或B的任意元素 ，或者匹配A和B
后代选择器	A B	B是A的后代节点,匹配B
子选择器	A>B	B是A的直接子节点,匹配B
相邻兄弟选择器	A+B	B是A的下一个兄弟节点，B紧跟A，匹配B
通用兄弟选择器	A~B	B是A之后的兄弟节点中的任一个，匹配B

---

2、web和w3c

web标准简单来说可以分为结构、样式和行为。HTML标签构成页面的结构框架。css完成美化html标签构成的页面。js可以完成页面和用户的交互。

web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。

W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点

1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）

（1）标签字母要小写

（2）标签要闭合

（3）标签不允许随意嵌套

2.对于css和js来说

（1）尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。

（2）样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版

（3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

---

3、布局方式

• 静态布局

• 自适应布局

• 流式布局(又别名 百分比布局 %)

• 响应式布局：媒体查询

• 弹性布局 (rem/em flex布局)

1. 静态布局

最传统的布局方式，网页中所有尺寸都是由px作为单位，设置了min-width,如果宽度小于就会出现滚动条，如果大于这个宽度则内容居中外加背景。

实现方法：

PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；

移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。

优点：采用之前的css2的布局·方式，布局简单，没有兼容性问题。

缺点: 在手机端不能合理的显示，移动端不能使用pc端页面，需要再写一个布局来呈现。

2. 自适应布局

可以看成是不同屏幕下由多个静态布局组成的。自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局（页面元素位置可能发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。

自适应布局页面里面元素的位置会变化，很好的解决了流式布局中的大屏空间利用率不高弊端。屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。

3. 流式布局

网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用),分别为不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局。

意思就是在这个屏幕下这个元素块在这个地方，但是在那个屏幕下，这个元素块又会出现在那个地方。只是布局改变，元素不变。可以看成是不同屏幕下由多个静态布局组成的。

而流式布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。

往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式。

4. 响应式布局

通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。主要依靠是css的媒体查询。

每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

5. 弹性布局

• rem/em

• flex布局

---

4、rgba

CSS 中的颜色有三种定义方式：使用颜色方法（RGB、RGBA、HSL、HSLA），十六进制颜色值和预定义的颜色名称。

RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。

---

5、盒子模型

所谓盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容(content)、内边距（padding）、边框（border）和外边距（margin）组成。

所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

　　盒子模型特性：

• 每个盒子都有：边界、边框、填充、内容 4个属性；
• 每个属性都包括4个部分：上、右、下、左。属性的4部分可以同时设置，也可以分别设置。

6、css属性

https://blog.youkuaiyun.com/fdbyd/article/details/113444048

---

三、JavaScript

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

js的基本特点：

JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

1. 是一种解释性脚本语言（代码不进行预编译）。

2. 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。

3. 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

4. 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

5. JavaScript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。JavaScript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

6. 可以实现web页面的人机交互。

js的日常用途：

1. 嵌入动态文本于HTML页面

2. 对浏览器事件做出响应。

3. 读写HTML元素。

4. 在数据被提交到服务器之前验证数据。

5. 检测访客的浏览器信息。

6. 控制cookies，包括创建和修改等。 

7. 基于Node.js技术进行服务器端编程。 

---

1、数据类型及转换

数据类型：

String 字符串
Number 数值
Boolean 布尔值
Null 空值
Undefined 未定义
Object 对象

其中String、Number、Boolean、Null、Undefined属于基本数据类型
而Object属于引用数据类型

转换数据类型：

1、转换为String

方式一：

• 调用被转换数据类型的toString（）方法
• 该方法不会影响原变量，它会将转换的结果返回

• 但是注意：null和undefined这两个值没有toString（）方法，如果调用他们的方法会报错。

  

方式二：

• 调用String（）函数，并将被转换的数据作为参数传递给函数
• 使用String（）函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString（）方法。但是对于null和undefined就不会调用toString（）方法，它会将null直接转换为“null”；将undefined直接转换为“undefined”

2、转换为Number

方式一：

使用Number（）函数，使用方法同toString（）函数 字符串转数字

1、字符串转数字

• 如果是纯数字的字符串，直接转换为数字
• 如果字符串中有非数字的内容 则转换为NaN
• 如果字符串是一个空串或者全是空格的字符串，则转为0

2、布尔转数字

• true转成1
• false转成0

3、null转数字

• 结果为0

4、undefined转数字

• 结果为NaN

方式二：

这种方式专门用来对付字符串

parseInt() 把一个字符串转换为一个整数
parseFloat（）把一个字符串转换为一个浮点数

3、其它进制的数字

在js中 如果需要表示16进制的数字，则需要以0x开头

如果需要表示8进制的数字，则需要以0开头 如果要表示2进制的数字，则需要以0b开头，但不是所有浏览器都支持

4、转换为Boolean

调用Boolean()函数来将被转换对象转换为布尔值

• 数字转布尔，除了0和NaN，其余都是true
• 字符串转布尔，除了空串，其余都是true
• null和undefined都会转换为false
• 对象也会转换为true

---

2、数组对象的相关方法

由于数组对象的相关方法比较多您可以前往我的另一篇博客阅读

https://blog.youkuaiyun.com/fdbyd/article/details/113237205

---

3、webview

Android内置webkit内核的高性能浏览器,而WebView则是在这个基础上进行封装后的一个 控件,WebView直译网页视图,我们可以简单的看作一个可以嵌套到界面上的一个浏览器控件！

webview传值方式

一、使用openWindow 的extras 参数

这是 A.html 页面，向B 页面传id

mui.openWindow({
	url:'B.html',
	id:'B.html',
	extras:{
		tap_id:id 	
	}
})

这是B.html， 接受A页面的id

mui.plusReady(function(){
	var wv = plus.webview.currentWebview();		当前页面的窗口对象
	var tap_id = wv.tap_id;						获取A页面传来的id	
});

二、使用mui的自定义事件

这里我 从 A.html 向B.html 进行传参，我的B页面不需要打开，所以没有用第一种方法
（这里我的B页面不是新建的，所以不用loaded事件，如果你的是新建的目标页面，就把你的miu.fire 方法放入webview.addEventListener('loaded',function (){}); 中 ）

这里是A.html页面，向B页面传变量html，newSearch是自定义事件

//获得目标页面 
var detailPage = plus.webview.getWebviewById('B.html');
//触发目标页面的newsSearch事件
mui.fire(detailPage,'newsSearch',{			我的目标页面不是新建的，没用loaded事件
	html:html
})

这是B.html  来接收A页面发来的 html，自定义事件名newSearch
//添加newsSearch自定义事件监听
window.addEventListener('newsSearch',function(event){
	//获得事件参数
	var html = event.detail.html;
	
});	

三、最终的方法

A页面向B页面传参数，使用localStorage
传参和接参的 name值必须相同才可以得到value 值

A页面
localStorage.setItem("lastname", "哈哈哈哈哈");

B页面
localStorage.getItem("lastname");

---

4、作用域

JS中作用域有：全局作用域、函数作用域。没有块作用域的概念。ECMAScript 6(简称ES6)中新增了块级作用域。

块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。

函数作用域：

  var a=2;
  function foo(){
   var a=3;
   console.log(a);
  }
  foo();//3
  console.log(a);//2

块作用域：

 // 块作用域
    {
        var a = 1;
        let b = 2;
        const c = 3;
        // c = 4; // 报错
        var aa;
        let bb;
        // const cc; // 报错
        console.log(a); // 1
        console.log(b); // 2
        console.log(c); // 3
        console.log(aa); // undefined
        console.log(bb); // undefined
    }
    console.log(a); // 1
    // console.log(b); // 报错
    // console.log(c); // 报错

• 允许块级作用域内声明函数
• 函数声明类似于var，即会提升到全局作用域或函数作用域头部
• 同时，函数声明还会提升到块级作用域的头部

上面三条规则只对 ES6 的浏览器实现有效，其他环境的实现不用遵守，还是将块级作用域的函数声明当作let处理块中生命函数，都会提升到函数头部，不管是“函数声明”还是函数表达式，都会是var f；的形式，所有调用的时候会报错

全局作用域：

直接编写在script标签中的js代码，都是在全局作用域

<script type="text/javascript">
    var i = 1;
</script>

---

5、数据类型

数据类型有2类：引用数据类型、基础数据类型

JS的基本数据类型：Undefined、Null、Boolean、Number、String

　　Undefined类型只有一个值，即特殊的undefined，声明变量但是没有初始化，这个变量的值就是undefined

　　Null类型只有一个值null，表示一个空对象指针，正式使用typeof操作符检测null会返回object

　　Boolean有两个字面值：true和false

　　Number:用来表示整数和浮点数，还有一种特殊的值即NaN,这个数值用来表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误了）

　　String类型用于表示由零或多个16位Unicode字符组成的字符序列，即字符串。字符串可以由单引号(')或双引号(")表示。

三大引用类型

　　Object类型

　　Array类型

　　Function类型

---

6、数据请求方式

CRUD对应的HTTP请求方法：

• Create 新增

  - post
  - options 常见于跨域场景，post之前要options一次请求头(不带请求体数据，太多了)，称为预检测[preflight](https://developer.mozilla.org/zh-CN/docs/Glossary/Preflight_request)

• Retrieve 查询

get

head 相较于get，只返回响应头(不返回响应体数据)，一般用于测试数据的存在性。

• Update 修改

put 全字段覆盖

patch 打补丁/只更新部分字段

• Delete 删除

delete

---

7、同步异步

同步，可以理解为在执行完一个函数或方法之后，一直等待系统返回值或消息，这时程序是出于阻塞的，只有接收到返回的值或消息后才往下执行其他的命令。  

异步，执行完函数或方法后，不必阻塞性地等待返回值或消息，只需要向系统委托一个异步过程，那么当系统接收到返回值或消息时，系统会自动触发委托的异步过程，从而完成一个完整的流程。 

---

四、小程序事件

一、什么是事件？

事件是视图层到逻辑层的通讯方式。

事件可以将用户的行为反馈到逻辑层进行处理。

事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

事件对象可以携带额外信息，如id，dataset，touches。

二、事件分类

事件分为冒泡事件和非冒泡事件：

（1）冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

（2）非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

WXML的冒泡事件列表：

注意：1. 除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如的submit事件，的input事件，的scroll事件。

三、事件的绑定和冒泡

事件绑定的写法同组件的属性，以key、value的形式。

key以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本1.5.0起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、、catch:touchstart。

value是一个字符串，需要在对应的Page中定义同名的函数。不然当触发事件的时候会报错。

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

举例说明事件的绑定（冒泡和非冒泡）：

1. bindtap

bindtap，当用户点击该组件的时候会在该页面对应的.js文件里的Page构造器中找到相应的事件处理函数。
（1）bindtap的使用

①在button按钮上添加bindtap事件，点击按钮时触发相应的处理函数（tst.wxml文件）

②在tst.js文件中创建query处理函数

③编译预览

注意：1. 事件处理函数的位置在页面的js文件下Page中，与data、onLoad等隶属同一级别。2. 事件处理函数参数为event（事件对象），为json对象，json对象中保存事件的相关信息。
（2）冒泡

①为按钮添加一个父级，并在父级添加事件

②编译预览

点击按钮时，触发按钮上的事件，向上冒泡触发view上的事件，输出两个事件对象。

（3）事件对象参数信息

如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。在事件对象中有很多的属性，其中有几个常用的属性。

BaseEvent基础事件对象属性列表：

①事件对象信息：

注意：1. target属性为事件源信息。2. currentTarget为当前事件对象信息。
②currentTarget属性下的属性列表

③target属性下的属性列表

（4）dataset

在组件中可以定义数据，这些数据将会通过事件传递给SERVICE。书写方式：以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在event.currentTarget.dataset中会将连字符转成驼峰elementType。

①在button按钮上添加dataset数据（tst.wxml）

编译预览：

②获取标签绑定的数据（tst.js）

编译预览：

注意：1. 在标签上以“data-”形式绑定数据，并在事件对象的currentTarget属性下的dataset属性中获取数据。2. 定义的data-形式不能有大写字母，多个单词由“-”连接，最终在dataset属性下显示的形式转为驼峰式，如“data-name-sex”转为“nameSex”。
2. catchtap

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

①将button上的bind事件改为catch事件，阻止冒泡

②编译预览