前端易错易忘知识点（查缺补漏）

ps。记录自己一些记不太住的知识，但可能笔试之类会考。 = =

其他人也可以看看，测试一下自己有没有忘：

1、HTML5 的标签并不是都必须写结束标签

eg.：p、li 等标签不闭合也能显示

2、大小写敏感

① HTML 中的属性名、标签名对大小写不敏感（浏览器会自动转换成小写）

② CSS 

• ID 和 类 选择器 区分 大小写
• 标签选择器、属性选择器不区分大小写

③ Javascript 严格区分大小写

3、HTML5 可以通过 data- * 自定义属性

eg：

<ul>
    <li data-animal-type="鸟类">喜鹊</li>
    <li data-animal-type="鱼类">金枪鱼</li> 
    <li data-animal-type="蜘蛛">蝇虎</li> 
</ul>

4、table （<tr>是row 一行，<th>是head 表头，<td>是data 数据格）

eg：

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

5、标签规范

① p元素不能包括任何块级元素，包括自身

② a标签可以包括任何元素，除了自身

6、h5常用标签

1. <header></header>
2. <nav></nav>
3. <section></section>
4. <aside></aside>
5. <footer></footer>
6. <article></article>

7、form实现表单上传

① 文件选择框 type = "file"

② form 的method 设为 post

③ enctype设置为 multipart/form-data

8、CSS选择器优先级

① 选择器分类：

CSS的选择器其实大类的话可以分为三类，即id选择器、class选择器、标签选择器。

用法如下：

• id选择器： #id名 { 属性名:属性值; }
• class选择器 ：.class名 { 属性名:属性值; }
• 标签选择器： 标签名 { 属性名:属性值; }

其中，他们之间又可以以不同的方式进行组合，如下：

1. 后代选择器: 父代名 后代名 { 属性名:属性值; }
2. 子代选择器:父代名>子代名 { 属性名:属性值; }
3. 群组选择器: #name1, .name2, #name div { 属性名:属性值; }
4. 伪类选择器: name:伪类
5. 通用(通配符)选择器:* { 属性名: 属性值; } ……

常用的也就这些。

② CSS选择器优先级：

1. 最高优先级是 (直接在标签中的设置样式，假设级别为1000)
2. 次优先级是（ID选择器 ,假设级别为100） #myDiv{color:Red;}
3. 其次优先级是（类选择器，假设级别为10）.divClass{color:Red;}
4. 最后优先级是 （标签选择器，假设级别是 1） div{color:Red;}
5. 那么后代选择器的优先级就可以计算了啊

比如

.divClass span { color:Red;} 优先级别就是：10+1=11

数值大的优先级高

9、让一个元素内的文字永远在一行内显示（文字很长时也不会换行）

white-space: nowrap

10、clear:both 的作用是 清除浮动给这个元素带来的影响

11、transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

12、NaN（not a number）与任何值都不想等，包括自身：

即  NaN == NaN 为 false  。  判断是否数字 用 isNaN( ) 比较

13、DOM 阻止事件冒泡  event.stopPropagation( )

14、{x:1} === {x:1}  对象相同，但指针值不同

15、Symbol(1) == Symbol(1)  凡是属于Symbol的都是独一无二的值，括号里面只是为了便于语义化区别

16、① slice() 切片     返回值为数组，不会影响原数组

eg：slice(a,b)        返回下标为a作起点，下标b作终点的数组，不包含b

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

console.log(arr);    //[George,John,Thomas]
console.log(arr.slice(1));    //[John,Thomas]
console.log(arr.slice(1,2));    //[John]

console.log(arr);    //[George,John,Thomas]

     ②splice() 剪接     返回值为被删去的数组，会影响原数组

eg：slice(a,b,c)      删去原数组中下标为a作起点，下标b作终点的数据，并用c代替被删去的数据

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

console.log(arr);    //["George", "John", "Thomas", "James", "Adrew", "Martin"]
console.log(arr.splice(2,0,"William"));    //[]
console.log(arr);    //["George", "John", "William", "Thomas", "James", "Adrew", "Martin"]

    ③split()   分离    split("a") 返回以a为分隔的数组    不改变原数组

    ④concat()   连接    连接多个数组  arr1.concat(arr2)   不改变原数组，返回连接数组的副本

17、超链接样式被点击过后a:hover{}和a:active{}样式不起作用

LVHA的顺序解决  

a:link {}

a:visited {}

a:hover {}

a:active {}

18、form表单的方法 submit 和 reset