一、前端是作什么的css
二、咱们为何要学前端?html
三、前端都有哪些内容?前端
一、HTMLgit
二、CSSgithub
三、JavaScript数据库
一、浏览器输入网址回车都发生了什么?编程
一、浏览器给服务端发送了一个消息后端
二、服务端拿到消息浏览器
三、服务端返回消息
四、浏览器展现页面
二、name属性:主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
基本标签(块级标签和内联标签)
div标签用来定义一个块级元素,并没有实际意义。主要是经过CSS样式为其赋予不一样的表现。
span标签用来定义内联(行内)元素,并没有实际意义。主要经过CSS样式为其赋予不一样表现。
块级元素与行内元素的区别:
所谓块元素,是以另起一行开始渲染的元素,行内元素则不须要另起一行。若是单独在网页中插入这两个元素,不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
关于标签嵌套:一般块级元素能够包含内联元素或某些块级元素,但内联元素不能包括块级元素,它只能包括其它内联元素。
p标签不能包含块级标签,p标签也不能包含p标签。
所谓的超连接是指从一个网页指向一个目标的链接关系,这个目标能够是另外一个网页,也能够是相同网页上的不一样位置,还能够是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。
href属性指定目标网页地址。该地址能够有几种类型:
绝对URL - 指向另外一个站点(好比 href=")
font-weight用来设置字体的字重(粗细)
文字对齐:text-align属性规定元素中的文本的水平对齐方式。
left 左边对齐,默认值
center 居中对齐
文字装饰:text-decoration属性用来给文字添加特殊效果
none 默认,定义标准的文本
underline 定义文本下的一条线
overline 定义文本上的一条线
none 无边框
将border-radius设置为长或高的一半便可获得一个圆形
display:"none" HTML文档中元素存在,但在浏览器中不显示。通常用于配合JavaScript代码使用
display:"block" 默认占满整个页面宽度,若是设定了指定宽度,则会用margin填充剩下的部分
margin:用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。
padding:用于控制内容与边框之间的距离。
border(边框):围绕在内边框与内容外的边框。
content(内容):盒子的内容,显示文本和图像。
提供两个,第一个用于上下,第二个用于左右
提供三个,第一个用于上,第二个用于左右,第三个用于下
提供四个,上右下左(顺时针)
浮动元素会生成一个块级框,而不论它自己是何种元素。
浮动的框能够向左或向右移动,直到它的外边缘碰到包含框或另外一个浮动框的边框为止
因为浮动框不在文档的普通流中,因此文档的普通流中的块框表现得就像浮动框不存在同样。
clear属性规定元素的哪一侧不容许其余浮动元素
left 在左侧不容许浮动元素
both 在左右两侧均不容许浮动元素
none 默认值。容许浮动元素出如今两侧
注意:clear属性只会对自身起做用,而不会影响其它元素
visible 默认值。内容不会被修剪,会呈如今元素框以外
hidden 内容会被修剪,并且其它内容是不可见的
scroll 内容会被修剪,可是浏览器会显示滚动条以便查看其他的内容
auto 若是内容被修剪,则浏览器会显示滚动条以便查看其他的内容
默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起做用的。
相对定位是相对于该元素在文档流中的原始位置,即以本身的原始位置为参照物。即便设定了元素的相对定位1偏移值,元素仍是占着原来的位置,即占据文档流空间。对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠经过z-index属性定义。
定义:设置为绝对定位的元素框从文档流彻底删除,并相对于最近的以定位祖先元素定位,若是元素没有以定位的祖先元素,那么它的位置相对于最初的包含块(即body元素)。元素原先在正常的文档流中所占的空间会关闭,就好像该元素原来不存在同样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
重点:若是父级设置了position属性,例如position:relative;,那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题,即父级为自适应的,那我子元素就设置position:absolute;父元素设置position:relative;,而后Top、Right、Bottom、Left用百分比宽度表示。
另外,对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠经过z-index属性定义。
fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。而其层叠经过z-index属性 定义。 注意点: 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点,由于这是两个不一样的流,一个是浮动流,另外一个是“定位流”。可是 relative 却能够。由于它本来所占的空间仍然占据文档流。
在理论上,被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。
今天小编要跟大家分享的文章是关于常见面试笔试题分享。准备参加面试的小伙伴们来和小编一起看一看吧,希望本篇文章能够对大家有所帮助。
答:html5不是基于sgml(标准通用标记语言),不需要对dtd文件进行引用,但是需要doctype来规范浏览器的行为,
否则浏览器将开启怪异模式,而html4.01基于sgml,需要引入dtd,才能告知浏览器文档使用的文档类型
2、行内元素有哪些?块级元素有哪些?空(void)元素有哪些?
3、页面导入样式时,使用link和@import有什么区别?
两者都是外部引用CSS的方式,但是存在一定的区别:
区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
@import的写法一般有下列几种:
4、常见的浏览器内核有哪些?
使用Presto内核的浏览器:Opera7及以上版本;
5、html5有哪些新特性?移除了哪些元素?如何处理HTML5新标签的浏览器兼容性问题?如何区分html和html5?
新增的元素有绘画 canvas ,用于媒介回放的 video 和 audio 元素,本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失,而sessionStorage的数据在浏览器关闭后自动删除,此外,还新增了以下的几大类元素。
移出的元素有下列这些:
如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?
处理兼容问题有两种方式:
1.IE8/IE7/IE6支持通过document.方法产生的标签,利用这一特性让这些浏览器支持HTML5新标签。
另外,DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素,此外,还可以根据新增的结构、功能元素来加以区分。
1.用来实现长连接,在websocket不可用的时候作为一种替代,最开始由google发明。Comet:基于 HTTP 长连接的”服务器推”技术
2.跨域通信。跨域总结与解决办法 ,类似的还有浏览器多页面通信,比如音乐播放器,用户如果打开了多个tab页,应该只有一个在播放。
3.历史记录管理,解决ajax化网站响应浏览器前进后退按钮的方案,在html5的history api不可用时作为一种替代。
4.纯前端的utf8和gbk编码互转。比如在utf8页面需要生成一个gbk的encodeURIComponent字符串,可以通过页面加载一个gbk的iframe,然后主页面与子页面通信的方式实现转换,这样就不用在页面上插入一个非常巨大的编码映射表文件了
1、在网页中使用框架结构最大的弊病是搜索引擎的”蜘蛛”程序无法解读这种页面。当”蜘蛛”程序遇到由数个框架组成的网页时,它们只看到框架而无法找到链接,因此它们会以为该网站是个死站点,并且很快转身离去。对一个网站来说这无异于一场灾难。
如果你想销售产品,你需要客户;如想得到客户,你首先要让人们访问你的网站,而要做到这一点,你就非求助于搜索引擎不可。你花费了大量的时间、 精力和金钱开设了一家网上商店,却又故意不让搜索引擎检索你,这就好象开家零售商店,却将窗户全部漆成黑色,而且还不挂任何招牌一样。
2、框架结构有时会让人感到迷惑,特别是在几个框架中都出现上下、左右滚动条的时候。这些滚动条除了会挤占已经非常有限的页面空间外,还会分散访问者的注意力。访问者遇到这种网站往往会立刻转身离开。他们会想,既然你的主页如此混乱,那么网站的其他部分也许更不值得浏览。
3、链接导航问题。使用框架结构时,你必须保证正确设置所有的导航链接,如不然,会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内,这种情况下访问者便被陷住了,因为此时他没有其他地方可去。
7、label的作用是什么?是怎么使用的?
Label 中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。
功能:表示Label标签要绑定的HTML元素,你点击这个标签的时候,所绑定的元素将获取焦点。
功能:表示访问Label标签所绑定的元素的热键,当您按下热键,所绑定的元素将获取焦点。
局限性:accessKey属性所设置的快捷键不能与浏览器的快捷键冲突,否则将优先激活浏览器的快捷键。
8、实现不使用border,画出1px高的线,在不同浏览器下的Quirksmode和CSSCompat模式下都能保持一致的效果?
9、网页验证码是干嘛的?是为了解决什么安全问题?
测试中,作为服务器的计算机会自动生成一个问题由用户来解答。这个问题可以由计算机生成并评判,但是必须只有人类才能解答。由于计算机无法解答 CAPTCHA 的问题,所以回答出问题的用户就可以被认为是人类。CAPTCHA 是由计算机来考人类,而不是标准图灵测试中那样由人类来考计算机,因此人们有时称 CAPTCHA 是一种反向图灵测试。
验证码的原理:服务器端随机生成验证码字符串,保存在内存中,并写入图片,发送给浏览器端显示,浏览器端输入验证码图片上字符,然后提交服务器端,提交的字符和服务器端保存的该字符比较是否一致,一致就继续,否则返回提示。攻击者编写的robot程序,很难识别验证码字符,顺利的完成自动注册,登录;而用户可以识别填写,所以这就实现了阻挡攻击的作用。而图片的字符识别,就是看图片上的干扰强度了。就实际的效果来说,验证码只是增加攻击者的难度,而不可能完全的防止。
10、介绍一下标准的css的盒子模型?与低版本IE的盒子模型有什么不同?
盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型
11、如何居中div,如何居中一个浮动元素?如何让绝对定位的div居中?
b.确定容器的宽高,这里宽度是必须的,高度可以不设,设置外层的上外边距和左外边距分别是宽高的一半。
12、display有哪些值?说明他们的作用?
block :块对象的默认值。用该值为对象之后添加新行
none :隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline :内联对象的默认值。用该值将从对象中删除行
compact :分配对象为块对象或基于内容之上的内联对象
marker :指定内容在容器对象之前或之后。要使用此参数,对象必须和:after及:before 伪元素一起使用
inline-table :将表格显示为无前后换行的内联对象或内联容器
list-item :将块对象指定为列表项目。并可以添加可选项目标志
run-in :分配对象为块对象或基于内容之上的内联对象
table :将对象作为块元素级的表格显示
Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。
Relative,CSS中的写法是:position:relative; 他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。
14、display设置为inline-block时,li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
行框的排列会受到中间空白(回车空格等等)的影响,这些空白也会被应用样式,占据空间,所以会有间隔
解决:设置ul的font-size为0,缺陷是必须重新在li中去设置字体大小
15、请解释下为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式?
c.据说是最高大上的方法 :after
方法:(注意:作用于浮动元素的父亲)IE6-7不支持:after,
f.父元素设置display:table 盒模型属性已经改变,由此造成的一系列问题,得不偿失,不推荐使用
16、在网页中的应该使用奇数还是偶数的字体?为什么呢?
偶数字号相对更容易和 web 设计的其他部分构成比例关系
使用奇数号字体不好的地方是,文本段落无法对齐
何时应当使用margin:
(1)需要在border外侧添加空白时,
(2)空白处不需要有背景(色)时,
(3)上下相连的两个盒子之间的空白需要相互抵消时,比如15px+20px的margin,将得到20px的空白(注意地方见第三点)。
(1)需要在border内侧添加空白时(往往是文字与边框距离的设置),
(2)空白处需要背景(色)时,
(3)上下相连的两个盒子之间的空白希望等于两者之和时,比如15px+20px的padding,将得到35px的空白。
margin使用时应该注意的地方
margin在垂直方向上相邻的值相同时会发生叠加,水平方向上相邻的值会相加。margin取负值时,在垂直方向上,两个元素的边界仍然会重叠。但是,此时一个为正值,一个为负值,并不是取其中较大的值,而是用正边界减去负边界的绝对值,也就是说,把正的边界值和负的边界值相加。
18、元素竖向的百分比设定是相对于容器的高度吗?
答:相对于父容器的宽度
19、什么是响应式设计?响应式设计的基本原理是什么?如何兼容较低版本的IE?
答:一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
兼容各种设备工作量大,效率低下
代码累赘,会出现隐藏无用的元素,加载时间加长
其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构,会出现用户混淆的情况
20、设置元素浮动后,该元素的display值是多少?
以上就是小编今天为大家分享的关于Web前端常见面试笔试题分享对的文章,希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助,想要了解更多web前端知识记得关注达内官网,最后祝愿小伙伴们工作顺利,成为一名优秀的。
文章来源:原创 冯梦兰 IT高级程序吸金
【免责声明:本文图片及文字信息均由小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除。】
为了彻底弄清楚它们之间的区别,我不得不要先说一下javascript中两种事件传播模式:
捕获模式又称为“滴流模式”(trickling),个人认为滴流模式更好理解,滴流就是“从上向下”,而冒泡就是“从下向上”,好了,先记住这两种模式的特点。
同时你还要记住,这两种模式是为了干什么的?
这两种模式就是为了一点:决定html中“元素”(比如div, p, button)接收到事件的“顺序”!当然接收到事件的顺序不同,自然事件监听函数被触发的顺序就不同了,于是间接地就出现了监听函数被执行顺序的不同。
当事件发生时,该事件首先被最外层元素接受到,然后依次向内层元素传播。(从上向下)
当事件发生时,该事件首先被最内层元素接受到,然后依次向外层元素传播。(从下向上)
顺便提一句,以前网景公司主推捕获模式而微软则偏向于冒泡模式,不过两者都是
IE9以下仅仅支持冒泡模式,但是IE9+以及现在的主流浏览器都支持两种模式了。
用哪种事件传播方式完全是我们自己说了算的,我们可以使用
来注册事件处理方式,以及以何种传播模式进行。
我们可以对上述代码添加一些样式,这样在网页中更直观。
对最外层,中间层,最内层分别用“捕获”模式注册事件监听,我们上面说了,如果使用捕获模式,那么addEventListener第三个参数应该是true,否则则是冒泡模式,如果不声明,默认为冒泡模式。
我们点击中间层Middle字样,如图:
可以看到,事件触发从外向里进行,如果大家把addEventListener中第三个参数改为false或者留空,点击middle字样,则会得到相反的结果,大家可以自己试一下。
stopPropagation了,大家可能注意到了,我上面的例子中没有涉及到点击click链接,为什么呢?大家可以试一下,点击click会发生什么?它会又立即跳转到了当前页面(因为我们href是一个空连接,这是链接元素的一个默认特性),虽然我们的监听函数被执行了,但是有时候我们不想这个默认特性被执行,比如,我们可能想在监听函数里面改变div的背景颜色等等,这样如果这个链接元素a默认特性的存在就会立即“刷新”了该页面,让我们的改变背景颜色无法进行。
所以为了“阻止”元素的“默认特性”,所以事件对象中有了一个preventDefault方法,如下:
这样我们点击click就会得到:
向上面这种情况,如果当你点击click的时候,只想出发绑定在click上的监听函数,而不想触发“传播链”上的其他函数,那么则使用stopPropagation。
注意:你在那个事件监听函数中使用event.stopPropagation();那么传播链就会终止,向上面这个例子,因为我们使用的是捕获模式,即使我们添加了:
依然会得到和上面一样的结果,为什么呢?因为捕获模式是由外往里传播,我们只是在a这里阻止了继续像里传播,因为没有更里的元素了,所以结果一样,为了更好地演示,我们可以把捕获模式改为冒泡模式如下:
这样点击click,就只得到了一条log:
这两个工作,你可以看做是一种快捷方式,但是你在原生javascript中的监听回调函数中写return false; 是没有任何用的。比如:
只是jQuery提供的一种特性。
冒泡还有一大优点,就是事件委托,而且经常用到,还能提高很大的性能,详情见:及