HTML, CSS, JS 复习

HTML

1. 常考的特殊符号：

2. 行内元素与块元素

行内元素和块元素的对比

• 内容：一般情况下，行内元素只能包含数据和其他行内元素。而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
• 格式：默认情况下，行内元素不会以新行开始，而块级元素会新起一行。

常见的行内元素:

i, code, em, strong
a, img, script, span
button, input, label, select, textarea

3. 常用的样式属性

4. 表格操作合并

    <td colspan='2'></td>  <!-- 列合并：2 -->
    <td rowspan='3'></td>  <!-- 列合并：3 -->

5. 表单

6. 盒子模型

标准盒子模型

浏览器默认设置：box-sizing: content-box; 以内容为边界，当width为100%且还有padding或border的时候会溢出。(不常使用)

IE(怪异) 盒子模型

浏览器默认设置：box-sizing: border-box; 以边框为边界。(经常使用)

7. 浮动

/* 清除浮动的几种方式 */
{
    clear: both;
    overflow: hidden;

}

/* 使用伪类元素：使用较为广泛 */
.clearfix:after {
    content:"";
    height:0;
    line-height:0;
    display:block;
    clear:both;
    visibility:hidden;  
    /* 将元素隐藏起来 
      在页面的 clearfix 元素后面添加了一个空的块级元素
     （这个元素的高为 0 行高也为 0   并且这个元素清除了浮动）
    */
}

CSS

1. CSS作用及引入方式

CSS 指层叠样式表 (Cascading Style Sheets)

• 样式定义如何显示 HTML 元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠为一

CSS 引用方式

1、直接在HTML标签中，使用style属性内嵌css样式 

2、在html头部head部分内，使用style标签插入css样式

3、使用@import引用外部CSS文件

4、使用link引用外部CSS文件 推荐此方法

2. 选择器

具体参照：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors

JavaScript

1. 数组操作

let fruits = ['Apple', 'Banana']

let newLength = fruits.push('Orange')
// ["Apple", "Banana", "Orange"]

let last = fruits.pop() // remove Orange (from the end)
// ["Apple", "Banana"]

let first = fruits.shift() // remove Apple from the front
// ["Banana"]

let newLength = fruits.unshift('Strawberry') // add to the front
// ["Apple", "Banana"]

let shallowCopy = fruits.slice() // this is how to make a copy
// ["Apple", "Banana"]

// 从第 pos 个元素开始，向后删除 n 个元素
let removedItems = vegetables.splice(pos, n)

stringObject.split(separator,howmany) // 字符串分割

2. 数组遍历操作

let fruits = ['Apple', 'Banana']
// foreach
fruits.forEach((item, index, array) => console.log(item, index))

// for
for(let j = 0; j < fruits.length; j++) {
   // code
}

// for of
for(let value of fruits) {
    // code
}

// 展开运算符
console.log([...fruits]);

3. 闭包

闭包是指有权访问另一个函数作用域中变量的函数

4. Map

let map = new Map();
map.set(key, value)
map.get(key)

map.delete(key)

map.forEach((value, key)=> console.log(key, value))

for (let [key, value] of map) {
  console.log(key + " = " + value);
}

5. 定时器

setInterval()
setTimeout()
clearInterval()