前端知识点笔记

1.HTML5新增的标签 ：

video	表示一段视频并提供播放的用户界面
audio	表示音频
canvas	表示位图区域
source	为video和audio提供数据源
track	为video和audio指定字母
svg	定义矢量图
code	代码段
figure	和文档有关的图例
figcaption	图例的说明
main
time	日期和时间值
mark	高亮的引用文字
datalist	提供给其他控件的预定义选项
keygen	秘钥对生成器控件
output	计算值
progress	进度条
embed	嵌入的外部资源
menuitem	用户可点击的菜单项
menu	菜单
header	定义了文档的头部区域
section	定义文档中的节（section、区段）。
nav	定义导航链接的部分
aside	定义页面独立的内容区域
article	定义页面的侧边栏内容。
footer	定义 section 或 document 的页脚

 

 

2.HTML5中可以省略结束标记的元素有：

1、dd

2、dt

3、li

4、p

5、optgroup

6、option

7、rt

8、rp

9、thread

10、tfoot

11、tr

12、td

13、th

 

 

3.HTML的三种元素类型及其特点：块级元素、内联元素(又叫行内元素)和内联块级元素：

常用的块级元素有：

 <div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

什么是块级元素？ 

在html中<div>、<p>、<h1>、<form>、<ul>和<li>就是块级元素。

设置display:block就是将元素显示为块级元素。

如下代码就是将内联元素a转换为块级元素，从而使a元素具有块级元素特点。

a{display:block;} 

块级元素特点：

 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。;

 2、元素的高度、宽度、行高以及顶和底边距都可设置。

 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）。 

 

 

 

常用的内联元素有： 

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 在html中，<span>、<a>、<label>、<strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。

当然块级元素也可以通过代码display:inline将元素设置为内联元素。

如下代码就是将块级元素div转换为内联元素，从而使div 元素具有内联元素特点。

 div{ display:inline; } ...... <div>我要变成内联元素</div> 

内联元素特点： 

1、和其他元素都在一行上； 

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。 

 

 

 

常用的内联块级元素有：

 <img>、<input>

 内联块级元素（inline-block）就是同时具备内联元素、块级元素的特点，代码display:inline-block就是将元素设置为内联块级元素。

inline-block 元素特点： 

1、和其他元素都在一行上；      （内联元素特点）

2、元素的高度、宽度、行高以及顶和底边距都可设置。       （块级元素特点）

 

 

 

 

4.position定位

 

5.CSS选择器权值：

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
通配符、子选择器、相邻选择器等的。如 、>、+,权值为0。 

 

6.reflow

 reflow(回流)是指浏览器为了重新渲染部分或者全部的文档,重新计算文档中的元素的位置和几何构造的过程。

以下操作会引起回流：

① 改变窗口大小

② font-size大小改变

③ 增加或者移除样式表

④ 内容变化（input中输入文字会导致）

⑤ 激活CSS伪类（:hover）

⑥ 操作class属性，新增或者减少

⑦ js操作dom

⑧ offset相关属性计算

⑨ 设置style的值 ......

另外: reflow与repaint（重绘）是减缓js的几大主要原因，尤其是reflow更是性能杀手，所以我们应该想法避免。