web前端中固定定位的英文

A. CSS中position属性详解

根据W3C的解释为：position 属性规定元素的定位类型，把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

可能的值

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative：生成相对定位的元素，相对于其正常位置进行定位。

static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit：规定应该从父元素继承 position 属性的值。

我们用的最多的absolute和relative，接下来可以通过具体例子来更加直观地体现。

举例

一：绝对定位

position: absolute；绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。

绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以 它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的对方顺序。

#box_relative {
position: absolute;
left: 30px;
top: 20px;
}

注意

position:absolute，float会隐式地改变display的类型（display：none除外）。即是当元素设置position:absolute、float:left、float:right中任意一个时，都会让元素以display:inline-block的方式显示（特点是：可以设置长宽，默认宽度不占满父元素）。这时，即使故意设置display:inline; display:block都是无效的。

但是float在IE6下的双边距bug就是用display:inline; 来解决的。position:relative不会隐式改变display的类型。

B. Web前端工程师应该掌握的英语词汇有哪些

今天小编要跟大家分享的文章是关于Web前端工程师应该掌握的英语词汇有哪些?熟悉编程工作的小伙伴都知道，英语并不会影响到你找到满意的工作，升职与加薪。但程序员程序员编程是离不开英文和数字表达式的，所以掌握开发过程中常用的英语词汇还是非常重要的。下面小编就来跟大家说一说Web前端工程师在工作中都会遇到哪些英语词汇。让我们一起来学习一下吧~

A:


appendChild放置到某元素最后attribute属性addEventListener添加侦听器assign赋值alert
弹出框append添加appendTo添加到absolute绝对的active活动的，激活的，标记的一个伪类align对齐alpha
透明度，半透明anchor锚记标记是这个单词的缩写anchor锚记a标记是这个单词的缩写arrow箭头auto自动appName程序名
appCodeName程序代号appVersion程序版本appAgent程序代理abs取绝对值array数组


B:


back超过范围的三次方缓动bounce指数衰减的反弹缓动before在...之前blur当输入框失焦的时候触发BOM
全称BrowserObjectModel浏览器对象模型blur失焦bind绑定background背景border边框border边框
banner页面上的一个横条both二者都是clear属性的一个属性值both二者都是clear属性的一个属性值black黑色bottom
底部，是一个CSS属性blink闪烁box盒子block块br换行标记blue蓝色bug软件程序中的错误body主体，一个HTML
标记building建立bold粗体button按钮break中断bool布尔boolean布尔bubble冒泡


C:


cubic三次方的缓动circular圆形曲线的缓动chain当执行一种缓动效果后可以继续使用另一个缓动效果createElement
创建新元素createTextNode创建文本节点childNodes返回子节点cancelBubble删除冒泡click点击事件change
内容发生改变，并失焦后才触发该事件contextmenu右击事件clientX光标相对于该网页的水平位置clientY光标相对于该网页的垂直位置
close关闭当前页面confirm输入框clientWidth获取元素宽度clientHeight获取元素的高度childNodes
获取所有子节点children返回子元素cloneNode复制节点Clone克隆、复制chekbox复选框cell表格的单元格color
颜色center中间，居中connected连接的contact联系child孩子content内容circle圆圈crosshair
十字叉丝class类别css层叠样式表clear清除cursor鼠标指针cm厘米centimeter厘米continue继续
close关闭ceil向上取整charAt获取某位置字符


D:


DOM全称DocumentObjectModel文档对象模型default不执行DOMMouseScroll在火狐浏览器中的滚轮事件
document文件，文档dbclick双击dashed虚线display显示，CSS的一个属decimal十进制division
分区，div就是这个单词的缩写decoration装饰document文档default默认的definition定义dotted点线
double双线design设计do做


E:


exponential指数曲线的缓动elastic指数衰减的正弦曲线缓动error错误过失element元素else否则


F:


focus当输入框聚焦的时候触发firstChild第一个子节点firstElementChild返回第一个标签节点function()
函数father父亲float浮动filter滤镜，过滤器font字体first第一个for在循环语句中的一个保留字fixed固定的
four4个function函数，功能


G:


getAttribute获取属性getElementsByClassName根据class标签获取元素getElementsByName
通过元素的Name属性值getElementById通过元素Id，唯一性getElementsByTagName通过标签名查找元素gif一种图像格式
green绿色gray灰色


H:


history对象host主机height高度hover盘旋;徘徊;犹豫hidden()隐藏hack常用于CSS
中的一些招数，或者类似于偏方的技巧here这里hand手hidden被隐藏head头部home首页height高度horizontal
水平的help帮助hover鼠标指针经过时的效果，或称为“悬停状态”


I:


input当输入的时候实时触发innerHeight内部高度innerWidth内部宽度in从0开始加速的缓动inOut
前半段从0开始加速，后半段减速到0的缓动infinity无线循环insertBefore插入到某元素前image图像inline行内
important重要的inner内部的indent缩进italic意大利体，斜体index索引if如果int：整数
indexOf：判断某字符的首次位置


J:


jpg一种图像格式justify两端对齐justify两端对齐


K:


keyCode按键编码keydown按下按键keyup按下按键抬起


L:


linear匀速lastChild返回最后一个子节点lastElementChild返回最后一个标签节点language语言line
线last最后一个link链接left左边list列表length长度lowercase小写level级别


M:


mouseover移动到元素上mouseout从元素上移开mousemove移动鼠标mousewheel在其他浏览器的滚轮事件
mousedown鼠标按下事件mouseup鼠标抬起事件margin外边距millimeter毫米max最大的min最小的medium
中间model模型menu菜单move移动middle中间


N:


nextElementSibling返回下一个兄弟元素nextSibling返回下一个兄弟节点nextElementSibling
下一个兄弟元素nodeValue节点值nodeType节点类型nodeName标签名称navigation导航none无，不，没有new
新的normal标准number数字null空，空值new新建


O:


outerHeight整个高度outerWIdth整个宽度open打开新页面onscroll窗口滚动事件onresize
窗口大小监听事件onload图片加载事件offsetLeft获取元素距离左侧的距离offsetTop获取元素距离顶部的距离offsetWidth
获取元素自身宽度offsetHeigh获取元素自身高度onload在装载时onclick在点击时ondblclick在双击时
onmouseover在鼠标进入时onmouseout在鼠标离开时onmousemove在鼠标移动时onmousedown在鼠标按下时
onmouseup在鼠标抬起时onkeydown在按键按下时onkeyup在按键抬起时onkeypress在按键时onsubmit在提交时
onchange在改变时onfocus在获得焦点时onblur在失去焦点时onscroll窗口滚动事件onresize窗口大小监听事件out
减速到0的缓动onStart开始事件onComplete完成事件onStop停止事件onUpdate更新事件object对象
optional可选的oblique一种斜体orange橙色one一个outer外面的only仅仅overflow溢出open
打开


P:


previous前一个prevent阻止pageX光标相对于该网页的水平位置pageY光标相对于该网页的垂直位置port端口
protocol协议prompt提示框parentNode返回父级节点parentElementNode获取已知节点的父节点
previousSibling返回上一个兄弟节点previousElementSibling返回上一个兄弟元素password密码position
位置prepend预先padding内边距progress进度point点public公开的pointer指针，指示器purple
紫色position定位，位置pop弹出push压入open打开option选项


Q:


quadratic二次方的缓动quintic五次方的缓动quartic四次方的缓动querySelector根据标签名获取第一个元素
querySelectorAll获取所有标签名的元素


R:


repeat次数remove删除当前节点replaceChild替换节点removeEventListener取消侦听器reload
刷新removeAttribute删除属性removeChild删除父节点的某个子节点radio视频red红色resize重新设置大小
relative相对的right右边repeat重复，平铺row行replacement替换return返回random随机round
取整


S:


sinusoidal正弦曲线的缓动start开始stop停止setinterval时间函数sibling兄弟scrollTop
获取文档滚动高度screenX光标相对于该屏幕的水平位置screenY光标相对于该屏幕的垂直位置setAttribute设置属性
scrollHeight获取文档整体高度scrollTop获取文档滚动高度scrollLeft元素左边界setAttribute设置节点上的属性
submit提交scroll滚动shadow阴影silver银色special特殊的size尺寸square方块solid
固体，实线static静态的solution方案strong强壮，加粗的son儿子style样式span一个HTML标记switch
切换setInterval设置反复性定时器setTimeout设置一次性定时器srcElement源对象，事件源split分割substr
截取字符串substring截取字符串sqrt取开方status状态sort排序slice切片，划分splice铰接，粘接


T:


textContent文本添加文字table表格title标题td单元格的HTML标记top顶部toLowerCase
转换为小写toUpperCase转换为大写text文本tr表格中“行”的HTML标记thick粗的transitional过渡的thin
细的two两个three三个type类型through穿过this这个，当前typeof类型


U:


underline下划线uppercase大写upper上面的url网址


V:


vertical竖直的visited访问过的var定义变量


W:


wrap包裹window窗口white白色width宽度while当...的时候write写入


Y:


yellow黄色


以上就是小编今天为大家分享的关于Web前端工程师应该掌握的英语词汇有哪些?的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助。想要了解更多Web相关知识记得关注北大青鸟Web培训官网哦~


来源：张培跃

C. web前端怎么用相对位置position

其实不难
这个有几个属性
有的默认定位
有是绝对定位
有的相对定位
还有固定定位
fixed 固定定位是针对body 体的 全屏定位
另两个结合使用的
绝对正常是使用的相对内的
了争更多，可以联系我。。

D. 入门Web前端要学习的知识有哪些

今天小编要跟大家分享的文章是关于入门web前端要学习的知识有哪些?准备学习web前端知识的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。

1、HTML常用标签


语言是什么、Web前端开发语言、HTML超文本标记语言、网页主体结构、常用标签、超链接(a标签)、Img图片标签


2、盒子模型


初探Div盒子模型、css样式、简单css样式、盒子模型Border边框讲解、盒子模型外边距
盒子模型内边距、盒子模型占位计算、ul无序列表、ol有序列表、dl定义列表、补充知识(css)


3、样式初始化及display+外边距合并


样式初始化、元素类型转换、内联元素对于以下属性特殊化、块级元素和内联元素的具体应用控制元素水平方向居中、盒子模型外边距合并原则


4、元素选择符+背景


HTML命名规范、行业命名规范、选择器初级、background背景样式


5、css样式(Font+Text)+特殊符号


font字体样式、text文本样式、特殊符号、css样式查询表


6、选择器高级及a伪类


css选择器、a伪类


7、选择器高级应用&样式优先级常用css3


选择器优先级、样式的多种形式、样式优先级排序、常用css3


8、浮动


浮动概况、浮动的一般情况、浮动的特殊情况、浮动对文字的影响float浮动后的特征和inlink-block
特征对比、清除浮动、清除浮动的多种办法、min-width的运用


9、定位


position定位概况、static、相对定位relative、绝对定位absolute、固定定位、z-index层的位置关系


10、vertical-alignimg特征cursoropacity


img特征、vertical-align垂直对齐方式、cursor指针样式、opacity透明度


11、表单


form表单、form中的控件


12、表格


table表格结构、table样式重置、table的默认特征、table单元格合并、display:table的特征


13、frameset框架


iframe内联框架、frameset框架集、frame子框架、自适应框架实例


14、阿里图标+css高级应用


CSS继承指的是、css重用、组件化开发：网页中不同功能模块，写入不同的css文件、ico网站logo、阿里图标


15、ps工具常用技巧


安装PS、菜单栏介绍、工具栏工具名称及快捷键、蒙版，链接图层，图层分组、图层右键菜单、混合模式、菜单栏详细讲解


16、终结篇


网站上线(空间，域名)如何购买空间和域名，网站上传工具ftp使用，最终实现网站上线


以上就是小编今天为大家分享的关于入门web前端要学习的知识有哪些的文章，希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助，想要了解更多web前端知识记得关注北大青鸟web培训官网，最后祝愿小伙伴们工作顺利！

E. Web前端知识体系简介

今天小编要跟大家分享的文章是关于Web前端知识体系简介。Web前端技术由html、css和javascript三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。下面来和小编一起看一看吧！

一、JAVASCRIPT篇


0、基础语法


Javascript基础语法包括：变量定义、数据类型、循环、选择、内置对象等。


数据类型有string,number,boolean,null,undefined,object等。其中，string,number和boolean是基础类型,null和undefined是JS中的两个特殊类型,object是引用类型。
Javascript可以通过typeof来判断基础数据类型，但不能够准确判断引用类型,
因此需要用到另外一个方法，那就是Object的toString,关于数据类型及其判断可以参考以下博客：数据类型详解和判断JS数据类型的四种方法


JS常用的内置对象有Date、Array、RegExp等。一般来讲，Date和Array用的最频繁，正则表达式RegExp是处理字符串的利器。
关于数据和正则表达式的用法可以参考博客：ES5对数组增强的9个API和JS正则表达式精简


1、函数原型链


Javascript虽然没有继承概念，但Javascript在函数Function对象中建立了原型对象prototype，并以Function对象为主线，从上至下，在内部构建了一条原型链。


简单来说就是建立了变量查找机制，当访问一个对象的属性时，先查找对象本身是否存在，如果不存在就去该对象所在的原型连上去找，直到Object对象为止，如果都没有找到该属性才会返回undefined。因此我们经常会利用函数的原型机制来实现JS继承。关于函数原型链可参考博客：JS原型对象和原型链


2、函数作用域


函数作用域就是变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。在JS中没有会块级作用域，只有函数作用域，因此JS中还存在着另外一种怪异现象，那就是变量提升。关于作用域的介绍请参考博客：函数的作用域和作用域链


3、函数指针this


this存在于函数中，它指向的是该函数在运行时被调用的那个对象。在实际项目中，遇到this的坑比较多，因此需要对this作深入的理解。


Function对象还提供了call、apply和bind等方法来改变函数的this指向，其中call和apply主动执行函数，bind一般在事件回调中使用，而call和apply的区别只是参数的传递方式不同。关于call,apply和bind的用户请参考博客：详解JS的call,apply和bind


4、构造函数new


JS中的函数即可以是构造函数又可以当作普通函数来调用，当使用new来创建对象时，对应的函数就是构造函数，通过对象来调用时就是普通函数。


普通函数的创建有：显式声明、匿名定义、newFunction()等三种方式。


当通过new来创建一个新对象时，JS底层将新对象的原型链指向了构造函数的原型对象，于是就在新对象和函数对象之间建立了一条原型链，通过新对象可以访问到函数对象原型prototype中的方法和属性。new的详细介绍请参考博客：理解JS中的new运算符


5、闭包


闭包其实是一个主动执行的代码块，这个代码块的特殊之处是可以永久保存局部变量，但又不污染全局变量，可以形成一个独立的执行过程，因此我们经常用闭包来定义组件。


关于闭包的介绍请参考：干货分享：让你分分钟学会JS闭包


6、单线程和异步队列


setTimeout和setInterval是JS内置的两个定时器，使用很简单，但这两个方法背后的原理却不简单。


我们知道，JS是单线程语言，在浏览器中，当JS代码被加载时，浏览器会为其分配一个主线程来执行任务(函数)，主线程会形成一个全局执行环境，执行环境采用栈的方式将待执行任务按顺序依次来执行。


但在浏览器中有一些任务是非常耗时的，比如http请求、定时器、事件回调等，为了保证其他任务的执行效率不被影响，JS在执行环境中维护了一个异步队列(也叫工作线程)，并将这些任务放入队列中进行等待，这些任务的执行时机并不确定，只有当主线程的任务执行完成以后，才会去检查异步队列中的任务是否需要开始执行。


这就是为什么setTimeout(fn,0)始终要等到最后执行的原因。关于单线程和异步队列问题请参考：setTimeout(0)


7、异步通讯Ajax技术


Ajax是浏览器专门用来和服务器进行交互的异步通讯技术，其核心对象是XMLHttpRequest,通过该对象可以创建一个Ajax请求。为了防止XSS攻击，浏览器对Ajax做了限制，不允许Ajax跨域请求服务器,就是只能访问当前域名下的url。


当然，如果确信你的站点不存在跨域的风险，可以在服务端主动开启跨域请求，也可以通过CORS或JSONP来实现。


JSONP是利用脚本(script)跨域能力来模拟Ajax请求。


CORS是一个W3C标准，全称是"跨域资源共享"(Cross-originresource
sharing)。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。关于CORS的介绍请参考：跨域资源共享
CORS详解


8、DOM对象document


document对象里保存着整个Web页面dom结构，在页面上所有的元素最终都会映射为一个dom对象。
document也提供了很多api来查找特定的dom对象，比如getElementById,querySelector等等。


9、事件系统Event


事件是用户与页面交互的基础，到目前为止，DOM事件从PC端的鼠标事件(mouse)发展到移动端的触摸事件(touch)
和手势事件(guesture)


由于DOM结构可能会多层嵌套，因此也衍生出了两种事件流：事件捕获和事件冒泡，后者最常用。利用事件冒泡机制可以实现很多功能，比如页面点击统计。关于两种事件流的介绍请参考：事件冒泡和捕获


除此之外，在页面初始化、滚动、隐藏、返回等操作时分别内置了onload/onDOMContentLoaded、onscroll、onvisibility和onhashchange等事件，如果想要捕获这些事件，需要通过addEventLisener/attachEvent来进行绑定。


10、全局对象window


在JS中，当一段JS代码在浏览器中被加载执行，JS引擎会在内容中构建一个全局执行环境，执行环境的作用是保证所有的函数能按照正确的顺序被执行，而window对象则是这个执行环境中的一个全局对象，window对象中内置了很多操作api和对象，document对象就是其中一个。关于JS执行环境的介绍请参考博客：深入理解JS执行细节


二、CSS篇


css是用来对html进行修饰的一门语言。


1、选择器


css的选择器有很多种，常用的有类选择器、标签选择器、ID选择器、后代选择器、群组选择器、伪类选择器(before/after)、兄弟选择器(+~)、属性选择器等等。


2、定位


定位一般有相对定位(relative)、绝对定位(absolute)、固定定位(fixed),
relative和absolute在移动端用的最多，fixed在移动端的兼容性有问题，因此不推荐使用，在移动端替代fixed的方案是
absolute+内部滚动。


3、浮动


设置float为left或right，就能使该元素脱离文档流，向左或向右浮动。一般在做宫格模式布局时会用到，如果子元素全部设置为浮动，则父元素是塌陷的，这时就需要清除浮动，清除浮动的方法也很多，常用的方法是在元素末尾加空元素设置clear:both,
更高级一点的就给父容器设置before/after来模拟一个空元素，还可以直接设置overflow:auto/hidden。除过浮动可以实现宫格模式，行内盒子(inline-block)和table也可以。


4、盒子模型


盒子模型是css最重要的一个概念，也是css布局的基石。
常见的盒子模型有块级盒子(block)和行内盒子(inline-block)，盒子最关键的几个属性包括margin、border、padding和content,这几个元素可以设置盒子和盒子之间的关系以及盒子和内容之间的关系。还有一个问题是计算盒子的大小，需要注意的是，box-sizing属性的设置会影响盒子的width和height。只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。


5、Flex布局


Flex布局的容器是一个伸缩容器，首先容器本身会更具容器中的元素动态设置自身大小;然后当Flex容器被应用一个大小时(width和height)，将会自动调整容器中的元素适应新大小。Flex容器也可以设置伸缩比例和固定宽度，还可以设置容器中元素的排列方向(横向和纵向)和是否支持元素的自动换行。有了这个神器，做页面布局的可以方便很多了。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。


6、transition(过渡)和transform(旋转)


应用transform可以对元素进行平移(translate)、旋转(rotate)、放大缩小(scale)、倾斜(skew)等处理，而transition使css属性值(包括transform)在一段时间内平滑的过渡。使用transition和transform就可以实现页面的滑动切换效果。


7、动画Animation


Animation首先需要设置一个动画函数，然后以这个动画的方式来改变元素的css属性之的变化，动画可以被设置为永久循环演示。
和transition相比，animation设置动画效果更灵活更丰富，二者还有一个区别是：transition只能通过主动改变元素的css值才能触发动画效果，而animation一旦被应用，就开始执行动画。


8、Sprite图


对于大型站点，为了减少http请求的次数，一般会将常用的小图标排到一个大图中，页面加载时只需请求一次网络，然后在css中通过设置background-position来控制显示所需要的小图标。


9、字体图标iconfont


所谓字体图标就是将常用的图标转化为字体资源存在文件中，通过在CSS中引用该字体文件，然后可以直接通过控制字体的css属性来设置图标的样式。


三、HTML篇


1、Web语义化和SEO


html
常规标签有html,head,body,div,span,table,ul,ol,dl,p,b,h1~h6,strong,form,input,img,em,i
等等，另外html5还新增了很多语义化的标签，比如header,acticle,aside,section,footer,audio,radio
等等。


Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。


SEO是指在了解搜索引擎自然排名机制的基础之上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中关键词的自然排名，获得更多的展现量，吸引更多目标客户点击访问网站，从而达到互联网营销及品牌建设的目标。


搜索引擎通过爬虫技术获取的页面就是由一堆html标签组成的代码,，人可以通过可视化的方式来判断页面上哪些内容是重点，而机器做不到。但搜索引擎会根据标签的含义来判断内容的权重，因此，在合适的位置使用恰当的标签，使整个页面的语义明确，结构清晰，搜索引擎才能正确识别页面中的重要内容，并予以较高的权值。比如h1~h6这几个标签在SEO中的权值非常高，用它们作页面的标题就是一个简单的SEO优化。


2、本地存储


本地存储最原始的方式就是cookie,cookie是存放在本地浏览器的一段文本，数据以键值对的形式保存，可以设置过期时间。但是cookie
不适合大量数据的存储，因为每次请求一次页面，cookie都会发送给服务器，这使得cookie
速度很慢而且效率也不高。因此cookie的大小被限制为4k左右(不同浏览器可能不同,分HOST)，如下所示：


·Firefox和Safari允许cookie多达4097个字节，包括名(name)、值(value)和等号。


·Opera允许cookie多达4096个字节，包括：名(name)、值(value)和等号。


·InternetExplorer允许cookie多达4095个字节，包括：名(name)、值(value)和等号。


在所有浏览器中，任何cookie大小超过限制都被忽略，且永远不会被设置。


html5提供了两种在客户端存储数据的新方法：localStorage和sessionStorage,它们都是以key/value
的形式来存储数据，前者是永久存储，后者的存储期限仅限于浏览器会话(session),即当浏览器窗口关闭后，sessionStorage中的数据被清除。


localStorage的存储空间大约5M左右(不同浏览器可能不同，分
HOST)，这个相当于一个5M大小的前端页面的数据库，相比于cookie可以节约带宽，但localStorage在浏览器隐私模式下是不可读取的，当存储数据超过了localStorage的存储空间后会抛出异常。


此外，H5还提供了逆天的Websql和indexedDB,允许前端以关系型数据库的方式来存储本地数据，相对来说，这个功能目前应用的场景比较少，此处不作介绍。


3、浏览器缓存机制


浏览器缓存机制是指通过HTTP协议头里的Cache-Control(或Expires)和Last-Modified(或
Etag)等字段来控制文件缓存的机制。


Cache-Control用于控制文件在本地缓存有效时长。最常见的，比如服务器回包：Cache-Control:max-age=600
表示文件在本地应该缓存，且有效时长是600秒(从发出请求算起)。在接下来600秒内，如果有请求这个资源，浏览器不会发出HTTP
请求，而是直接使用本地缓存的文件。


Last-Modified是标识文件在服务器上的最新更新时间。下次请求时，如果文件缓存过期，浏览器通过If-Modified-Since
字段带上这个时间，发送给服务器，由服务器比较时间戳来判断文件是否有修改。如果没有修改，服务器返回304告诉浏览器继续使用缓存;如果有修改，则返回200，同时返回最新的文件。


Cache-Control通常与Last-Modified一起使用。一个用于控制缓存有效时间，一个在缓存失效后，向服务查询是否有更新。


Cache-Control还有一个同功能的字段：Expires。Expires的值一个绝对的时间点，如：Expires:Thu,10Nov
201508:45:11GMT，表示在这个时间点之前，缓存都是有效的。


Expires是HTTP1.0标准中的字段，Cache-Control是HTTP1.1
标准中新加的字段，功能一样，都是控制缓存的有效时间。当这两个字段同时出现时，Cache-Control是高优化级的。


Etag也是和Last-Modified一样，对文件进行标识的字段。不同的是，Etag
的取值是一个对文件进行标识的特征字串。在向服务器查询文件是否有更新时，浏览器通过If-None-Match
字段把特征字串发送给服务器，由服务器和文件最新特征字串进行匹配，来判断文件是否有更新。没有更新回包304，有更新回包200。Etag和
Last-Modified可根据需求使用一个或两个同时使用。两个同时使用时，只要满足基中一个条件，就认为文件没有更新。


另外有两种特殊的情况：


·
手动刷新页面(F5)，浏览器会直接认为缓存已经过期(可能缓存还没有过期)，在请求中加上字段：Cache-Control:max-age=0，发包向服务器查询是否有文件是否有更新。


·
强制刷新页面(Ctrl+F5)，浏览器会直接忽略本地的缓存(有缓存也会认为本地没有缓存)，在请求中加上字段：Cache-Control:no-cache(或
Pragma:no-cache)，发包向服务重新拉取文件。


4、HTML5离线缓存


HTML5离线缓存又叫Application
Cache，是从浏览器的缓存中分出来的一块缓存区，如果要在这个缓存中保存数据，可以使用一个描述文件(manifest
file)，列出要下载和缓存的资源。


manifest文件是简单的文本文件，它告知浏览器被缓存的内容(以及不缓存的内容)。manifest文件可分为三个部分：


-CACHEMANIFEST-在此标题下列出的文件将在首次下载后进行缓存


-NETWORK-在此标题下列出的文件需要与服务器的连接，且不会被缓存


-FALLBACK-在此标题下列出的文件规定当页面无法访问时的回退页面(比如404页面)


离线缓存为应用带来三个优势：


·离线浏览-用户可在应用离线时使用它们


·速度-已缓存资源加载得更快


·减少服务器负载-浏览器将只从服务器下载更新过或更改过的资源。


5、Canvas和SVG


Canvas通过Javascript来绘制2D图形。Canvas是逐像素进行渲染的。在Canvas
中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。


SVG是一种使用XML描述2D图形的语言。SVG基于XML，这意味着SVGDOM中的每个元素都是可用的。你可以为某个元素附加
JavaScript事件处理器。在SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。


Canvas和SVG相比，canvas更依赖于分辨率，不支持事件处理器，文本渲染能力弱，比较适合密集型游戏，其中的许多对象会被频繁绘制，而svg则比较适用于类似谷歌地图带有大型渲染区域的应用程序。


以上就是小编今天为大家分享的Web前端知识体系简介的文章，希望本篇文章能够对正在从事Web工作和学习Web前端知识的小伙伴们有所帮助。想要了解更多Web前端知识记得关注北大青鸟Web培训官网。最后祝愿小伙伴们工作顺利！


原文地址：#/onepixel/p/7021506.html

F. Web前端中关于url、href、src的知识汇总

今天小编要跟大家分享的文章是Web前端中关于url、href、src的知识汇总。熟悉web前端的小伙伴们一定不会对这三个内容陌生。但是对于刚刚接触web的小伙伴肯定不是很了解，今天小编就为大家准备了这篇文章让我们一起来看一看关于url、href、src的知识汇总。

一、URL的概念


统一资源定位符(或称统一资源定位器/定位地址、URL地址等，英语：UniformResource
Locator，常缩写为URL)，有时也被俗称为网页地址(网址)。如同在网络上的门牌，是因特网上标准的资源的地址(Address)。


二、URL的格式


2.1标准格式


协议类型:[//服务器地址[:端口号]][/资源层级UNIX文件路径]文件名?查询


2.2完整格式


协议类型:[//[访问资源需要的凭证信息@]服务器地址[:端口号]][/资源层级UNIX文件路径]文件名?查询


其中【访问凭证信息@;:端口号;?查询;#片段ID】都属于选填项。


三、URL的语法规则


比如网址#/html/index.asp，必须遵守以下的语法规则：


scheme://host.domain:port/path/filename


3.1说明


(1)scheme-定义因特网服务的类型。最常见的类型是http(2)host-定义域主机(http的默认主机是www)
(3)domain-定义因特网域名，比如w3school.com.cn(4):port-定义主机上的端口号(http的默认端口号是80)
(5)path-定义服务器上的路径(如果省略，则文档必须位于网站的根目录中)。(6)filename-定义文档/资源的名称


3.2URLSchemes


以下是其中一些最流行的scheme：


Scheme访问用于...


http超文本传输协议以http://开头的普通网页。不加密。


https安全超文本传输协议安全网页。加密所有信息交换。


ftp文件传输协议用于将文件下载或上传至网站。


file您计算机上的文件。


四、URL的类型


4.1绝对URL


绝对URL(absoluteURL)显示文件的完整路径，这意味着绝对URL本身所在的位置与被引用的实际文件的位置无关。


4.2相对URL


相对URL(relativeURL)以包含URL本身的文件夹的位置为参考点，描述目标文件夹的位置。


一般来说，对于同一服务器上的文件，应该总是使用相对URL，它们更容易输入，而且在将页面从本地系统转移到服务器上时更方便，只要每个文件的相对位置保持不变，链接就仍然是有效地。


以下为建立路径所使用的几个特殊符号，及其所代表的意义。


(1).：代表目前所在的目录，相对路径。如：文本或/>


(2)..：代表上一层目录，相对路径。如：文本或/>


(3)../../：代表的是上一层目录的上一层目录，相对路径。如：


(4)/：代表根目录，绝对路径。如：[文本](/abc)或


五、href的概念


5.1规范解释


href(Hypertext
Reference)指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。


5.2通俗理解


href目的不是为了引用资源，而是为了建立联系，让当前标签能够链接到目标地址。


六、src的概念


source(缩写)，指向外部资源的位置，指向的内容将会应用到文档中当前标签所在位置。


七、href和src的区别


7.1请求资源类型不同


(1)href指向网络资源所在位置，建立和当前元素(锚点)或当前文档(链接)之间的联系。


(2)在请求src资源时会将其指向的资源下载并应用到文档中，比如JavaScript脚本，img图片;


7.2作用结果不同


(1)href用于在当前文档和引用资源之间确立联系;


(2)src用于替换当前内容;


7.3浏览器解析方式不同


(1)若在文档中添加，浏览器会识别该文档为CSS文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式加载
CSS，而不是使用@import方式。


(2)当浏览器解析到
，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把js
脚本放在底部而不是头部的原因。


八、link和@import的区别


两者都是外部引用CSS的方式，但是存在一定的区别：


(1)link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务;而@import属于CSS范畴，只可以加载CSS。


(2)link引用CSS时，在页面载入时同时加载;@import需要页面完全载入以后再加载。


(3)link是XHTML标签，无兼容问题;@import则是在CSS2.1提出的，低版本的浏览器不支持。


(4)link支持使用Javascript控制DOM改变样式;而@import不支持。


以上就是小编今天为大家分享的关于Web前端中关于url、href、src的知识汇总的文章，希望本篇文章能够对正在从事web学习和工作的小伙伴们有所帮助，想要了解更多web相关知识记得关注北大青鸟web培训官网哦~


作者：WEBING


#/a/1190000013845173


*声明：内容与图片均来源于网络(部分内容有修改)，版权归原作者所有，如来源信息有误或侵犯权益，请联系我们删除或授权事宜。