前端初学者易忽略的基础知识(汇总)

  1. 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 方式。
  2. HTML5 文档类型和字符集
    HTML5 文档类型:
    <!doctype html>
    HTML5 使用 UTF-8 编码:
    <meta charset=” UTF-8 ″ >
  3. 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,按位比较,从左到右,只要一位高于则立即胜出,否则继续比较。
  4. 列出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)
  5. 清除浮动的方法
    (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时,会出现滚动条。
    建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
  6. 浮动会产生的问题
    1、父元素的高度无法被撑开,影响与父元素同级的元素
    2、非块级元素同行排列,设为浮动的元素会自动移到最前面,其他在后面依次排列,浮动元素不会盖住非块级元素(例如文本)
    3、块级元素每个元素独占一行,设为浮动的元素不会对它前面的元素产生影响,它后面的元素会占据它的位置并被它覆盖
  7. 缓存
    前端初学者易忽略的基础知识(汇总)
  8. HTML5新增的元素
    首先html5为了更好的实践web语义化,增加了header,footer,nav,aside,section等语义化标签,在表单方面,为了增强表单,为input增加了color,emial,data ,range等类型,在存储方面,提供了sessionStorage,localStorage,和离线存储,通过这些存储方式方便数据在客户端的存储和获取,在多媒体方面规定了音频和视频元素audio和vedio,另外还有地理定位,canvas画布,拖放,多线程编程的web worker和websocket协议。
  9. csrf和xss的网络攻击及防范
    CSRF:跨站请求伪造,可以理解为攻击者盗用了用户的身份,以用户的名义发送了恶意请求,比如用户登录了一个网站后,立刻在另一个tab页面访问量攻击者用来制造攻击的网站,这个网站要求访问刚刚登陆的网站,并发送了一个恶意请求,这时候CSRF就产生了,比如这个制造攻击的网站使用一张图片,但是这种图片的链接却是可以修改数据库的,这时候攻击者就可以以用户的名义操作这个数据库,防御方式的话:使用验证码,检查https头部的refer,使用token。
    XSS:跨站脚本攻击,是说攻击者通过注入恶意的脚本,在用户浏览网页的时候进行攻击,比如获取cookie,或者其他用户身份信息,可以分为存储型和反射型,存储型是攻击者输入一些数据并且存储到了数据库中,其他浏览者看到的时候进行攻击,反射型的话不存储在数据库中,往往表现为将攻击代码放在url地址的请求参数中,防御的话为cookie设置httpOnly属性,对用户的输入进行检查,进行特殊字符过滤。
  10. transition和animation的区别
    Animation和transition大部分属性是相同的,他们都是随时间改变元素的属性值,他们的主要区别是transition需要触发一个事件才能改变属性,而animation不需要触发任何事件的情况下才会随时间改变属性值,并且transition为2帧,从from .... to,而animation可以一帧一帧的。

相关推荐