共计 4099 个字符，预计需要花费 11 分钟才能阅读完成。
- src 与 href 的区别
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。
<script src =’js.js’></script>
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。
href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加 <link href=’common.css’ rel=’stylesheet’/> 那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css，而不是使用 @import 方式。 - HTML5 文档类型和字符集
HTML5 文档类型：
<!doctype html>
HTML5 使用 UTF-8 编码：
<meta charset=”UTF-8 ″ > - CSS 选择器优先级
优先级
(1) 同类型，同级别的样式后者先于前者
(2)ID > 类样式 > 标签 > *
(3) 内联 >ID 选择器 > 伪类 = 属性选择器 = 类选择器 > 标签选择器 > 通用选择器 (*)> 继承的样式
(4) 具体 > 泛化的，特殊性即 css 优先级
(5) 近的 > 远的 (内嵌样式 > 内部样式表 > 外联样式表)
内嵌样式：内嵌在元素中，<span style=”color:red”>span</span>
内部样式表：在页面中的样式，写在 <style></style> 中的样式
外联样式表：单独存在一个 css 文件中，通过 link 引入或 import 导入的样式
(6)!important 权重最高，比 inline style 还要高
计算特殊性值
important > 内嵌 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
特殊性计算法：
CSS 样式选择器分为 4 个等级，a、b、c、d
(1) 如果样式是行内样式（通过 Style=“”定义），那么 a =1，1,0,0,0
(2)b 为 ID 选择器的总数 0,1,0,0
(3)c 为属性选择器，伪类选择器和 class 类选择器的数量。0,0,1,0
(4)d 为标签、伪元素选择器的数量 0,0,0,1
(5)!important 权重最高，比 inline style 还要高
比如结果为：1093 比 1100，按位比较，从左到右，只要一位高于则立即胜出，否则继续比较。 - 列出 display 的值并说明他们的作用？
display：none | inline | block | list-item | inline-block | table | inline- table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex
默认值：inline
none：隐藏对象。与 visibility 属性的 hidden 值不同，其不为被隐藏的对象保留其物理空间
inline：指定对象为内联元素。
block：指定对象为块元素。
list-item：指定对象为列表项目。
inline-block：指定对象为内联块元素。（CSS2）
table：指定对象作为块元素级的表格。类同于 html 标签 <table>（CSS2）
inline-table：指定对象作为内联元素级的表格。类同于 html 标签 <table>（CSS2）
table-caption：指定对象作为表格标题。类同于 html 标签 <caption>（CSS2）
table-cell：指定对象作为表格单元格。类同于 html 标签 <td>（CSS2）
table-row：指定对象作为表格行。类同于 html 标签 <tr>（CSS2）
table-row-group：指定对象作为表格行组。类同于 html 标签 <tbody>（CSS2）
table-column：指定对象作为表格列。类同于 html 标签 <col>（CSS2）
table-column-group：指定对象作为表格列组显示。类同于 html 标签 <colgroup>（CSS2）
table-header-group：指定对象作为表格标题组。类同于 html 标签 <thead>（CSS2）
table-footer-group：指定对象作为表格脚注组。类同于 html 标签 <tfoot>（CSS2）
run-in：根据上下文决定对象是内联对象还是块级对象。（CSS3）
box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3） - 清除浮动的方法
(1) 父级 div 定义 height
原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级 div 不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
(2)结尾处加空 div 标签 clear:both
原理：添加一个空 div，利用 css 提高的 clear:both 清除浮动，让父级 div 能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空 div，让人感觉很不好
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法
(3)父级 div 定义 伪类:after 和 zoom
原理：IE8 以上和非 IE 浏览器才支持:after，原理和方法 2 有点类似，zoom(IE 转有属性)可解决 ie6,ie7 浮动问题
优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
建议：推荐使用，建议定义公共类，以减少 CSS 代码。
(4)父级 div 定义 overflow:hidden
原理：必须定义 width 或 zoom:1，同时不能定义 height，使用 overflow:hidden 时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：不能和 position 配合使用，因为超出的尺寸的会被隐藏。
建议：只推荐没有使用 position 或对 overflow:hidden 理解比较深的朋友使用。
(5)父级 div 定义 overflow:auto
原理：必须定义 width 或 zoom:1，同时不能定义 height，使用 overflow:auto 时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：内部宽高超过父级 div 时，会出现滚动条。
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。 - 浮动会产生的问题
1、父元素的高度无法被撑开，影响与父元素同级的元素
2、非块级元素同行排列，设为浮动的元素会自动移到最前面，其他在后面依次排列，浮动元素不会盖住非块级元素（例如文本）
3、块级元素每个元素独占一行，设为浮动的元素不会对它前面的元素产生影响，它后面的元素会占据它的位置并被它覆盖 - 缓存
- HTML5 新增的元素
首先 html5 为了更好的实践 web 语义化，增加了 header，footer，nav,aside,section 等语义化标签，在表单方面，为了增强表单，为 input 增加了 color，emial,data ,range 等类型，在存储方面，提供了 sessionStorage，localStorage, 和离线存储，通过这些存储方式方便数据在客户端的存储和获取，在多媒体方面规定了音频和视频元素 audio 和 vedio，另外还有地理定位，canvas 画布，拖放，多线程编程的 web worker 和 websocket 协议。 - csrf 和 xss 的网络攻击及防范
CSRF：跨站请求伪造，可以理解为攻击者盗用了用户的身份，以用户的名义发送了恶意请求，比如用户登录了一个网站后，立刻在另一个tab页面访问量攻击者用来制造攻击的网站，这个网站要求访问刚刚登陆的网站，并发送了一个恶意请求，这时候 CSRF 就产生了，比如这个制造攻击的网站使用一张图片，但是这种图片的链接却是可以修改数据库的，这时候攻击者就可以以用户的名义操作这个数据库，防御方式的话：使用验证码，检查 https 头部的 refer，使用 token。
XSS：跨站脚本攻击，是说攻击者通过注入恶意的脚本，在用户浏览网页的时候进行攻击，比如获取 cookie，或者其他用户身份信息，可以分为存储型和反射型，存储型是攻击者输入一些数据并且存储到了数据库中，其他浏览者看到的时候进行攻击，反射型的话不存储在数据库中，往往表现为将攻击代码放在 url 地址的请求参数中，防御的话为 cookie 设置 httpOnly 属性，对用户的输入进行检查，进行特殊字符过滤。 - transition 和 animation 的区别
Animation 和 transition 大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是 transition 需要触发一个事件才能改变属性，而 animation 不需要触发任何事件的情况下才会随时间改变属性值，并且 transition 为 2 帧，从 from …. to，而 animation 可以一帧一帧的。
正文完
发表至： javascript
2019-09-05
