Web前端面试题总结(day6)

1.html文件结构

   <! doctype html>   声明文档类型

   <html>                   html文件

      <head>网页标题,在浏览器顶部显示</head>

      <body>网页的主体部分,即浏览器的内容区域</body>

   </html> 

2. <img>属性

    <img>标签有两个必须的属性:src属性和alt属性

      src   属性告诉浏览器图片的具体位置,就像连接的href标签一样告诉浏览器要链接到的文件,可以用URL表示。

      alt    图片的替代文字,有些浏览者不想看到图片(比如由于网速太慢),有些早期的浏览器也不支持图片,还有一种可能‘你把        图片的具体位置写错了’,这些情况浏览者是看不到图片的,这是alt可以在图片的位置上显示出代替的文字,这是非常有用的,        记得一定要加上 

       1. url:统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,url就是互联网上标准资源的地            址。互联网上的每个文件都有一个唯一的URL;一般就是浏览器地址栏填写的。

        2. href:Hypertext Reference的缩写。意思是超文本引用,用来建立当前元素和文档之间的链接,属性的值可以是任何有效文档的相对或绝对URL,包括片段表示符和JavaScript代码段。常见的就是a标签中的。

        3. rel:relationship的英文缩写,REL属性用于定义链接的文件和HTML文档之间的关系,eg:StyleSheet,用于定义链接               的文件和HTML文档之间的关系。

         4. src:也可以是源文件(source)的简写,一般用作目录名称用于存放源代码,一般指的是引用外部文件的路径,像img              标签中src表示图片路径。

3.关于border-radius

   Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。                       

   Firefox 、 Chrome 以及 Safari 支持所有新的边框属性。

   注释:对于 border-image , Safari 5 以及更老的版本需要前缀 -webkit- 。

   Opera 支持 border-radius 和 box-shadow 属性,但是对于 border-image 需要前缀 -o-

                                

4.在HTML页面上包含如下所示的层对象,则javascript语句document.getElementById("info").innerHTML的值是(B

    <div id="info" style="display:block"><p>请填写</p></div>

     A. 请填写

     B. <p>请填写</p>

     C. id="info" style="display:block"

     D. <div id="info" style="display"block"<p>请填写</p></div> 

test.innerHTML:

也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。

test.innerText: 

从起始位置到终止位置的内容, 但它去除Html标签 

上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

test.outerHTML:

除了包含innerHTML的全部内容外, 还包含对象标签本身。

上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>

5. obj.options[obj.selectedIndex].text   获取下面表单 select  

    <form name="a">
      <select name="a" size="1" id=”obj”>
       <option value="a">1</option>
       <option value="b">2</option>
       <option value="c">3</option>
      </select>
    </form> 
域的选择部分的文本

     window.onload = function(){

      //首先获得下拉框的节点对象; var obj = document.getElementById(&quot;obj&quot;);

      //1.如何获得当前选中的值?: var value = obj.value;

      //2.如何获得该下拉框所有的option的节点对象 var options = obj.options;

      //注意:得到的options是一个对象数组

      //3.如何获得第几个option的value值?比如我要获取第一option的value,可以这样: var value1 =options[0].value;

      //4.如何获得第几个option的文本内容?比如我要获取第一option的文本,可以这样: var text1 = options[0].text;

      //5.如何获得当前选中的option的索引? var index = obj.selectedIndex;

      //6.如何获得当前选中的option的文本内容? //从第2个问题,我们已经获得所有的option的对象数组options了 //又从第5个问           题,我们获取到了当前选中的option的索引值 //所以我们只要同options[index]下标的方法得到当前选中的option了 var                   selectedText =options[index].text; }

6.浏览器在一次HTTP请求中,需要传输一个4097字节的文本数据给服务端,可以采用 使用POST

   IndexdDB 是 HTML5 的本地存储,把一些数据存储到浏览器(客户端)中,当与网络断开时,可以从浏览器中读取数据,用       来做一些离线应用。

   Cookie 通过在客户端 ( 浏览器 ) 记录信息确定用户身份,最大为 4 kb 。

   url 参数用的是 get 方法,从服务器上获取数据,大小不能大于 2 kb 。

   Session 是服务器端使用的一种记录客户端状态的机制 。

   post 是向服务器传送数据,数据量较大。

   local Storage 也是 HTML5 的本地存储,将数据保存在客户端中(一般是永久的)。

7.基于以下HTML结构和CSS样式,文本Dijkstra的颜色应该是 (C)

   

   A. red

   B. black

   C. orange

   D.默认颜色

   标签的权重是1,类的权重是10 ,id的权重是100

    ul#related span 的权重为 1+100+1=102

    #favorite .highlight 的权重为 100+10=110

    highlight 的权重为 10

    选最高权重的  C

8.当表单中包含上传控件时,需要将enctype设置为   multipart/form-data

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

属性值
application/x-www-form-urlencoded 
在发送前编码所有字符(默认) 

multipart/form-data 
不对字符编码。 在使用包含文件上传控件的表单时,必须使用该值。

text/plain 
空格转换为 "+" 加号,但不对特殊字符编码。

9.现有如下html结构

1

2

3

4

5

6

<ul>

 <li>click me</li>

 <li>click me</li>

 <li>click me</li>

 <li>click me</li>

</ul>

运行如下代码:

1

2

3

4

5

6

7

    var elements=document.getElementsByTagName('li');

    var length=elements.length;

    for(var i=0;i<length;i++){

        elements[i].onclick=function(){

        alert(i);

    }

 }

依次点击4个li标签,运行结果为:依次弹出4,4,4,4

 这里考的是JS的运行机制! 事件(click,focus等等),定时器(setTimeout和setInterval),ajax,都是会触发异步,属于异步任务;js   是单线程的,一个时间点只能做一件事,优先处理同步任务; 按照代码从上往下执行,遇到异步,就挂起,放到异步任务里,   继续执行同步任务,只有同步任务执行完了,才去看看有没有异步任务,然后再按照顺序执行! 这里for循环是同步任务,   onclick是异步任务,所以等for循环执行完了,i变成4了,注意:这里因为i是全局变量,最后一个i++,使得i为4(后面的onclick函   数,最后在循环外面执行,不受i<length限制); 所以for循环每执行一次,onclick事件函数都会被挂起一次,共4次; for循环结   束后,点击事件 触发了4个onclick函数,接着输出4个4!

10. span标签的width和height分别为:width=0px, height=200px

<div style=”width:400px;height:200px;”>

  <span style=”float:left;width:auto;height:100%;”>

           <i style=”position:absolute;float:left;width:100px;height:50px;”>hello</i>

  </span>

</div>

     span元素继承父元素的height的高度200px,由于i设置为绝对定位会脱离原先的文档流,span元素width设置为auto,所以塌       陷为0,高度还是200px。

11.下列说法正确的有:(AB)

   A. visibility:hidden;所占据的空间位置仍然存在,仅为视觉上的完全透明;

   B. display:none;不为被隐藏的对象保留其物理空间;

   C. visibility:hidden;与display:none;两者没有本质上的区别;

   D. visibility:hidden;产生reflow和repaint(回流与重绘);

   E. display:none是不符合html5标准的;

   F. visibility:hidden是不符合html5标准的;

   display:none指的是元素完全不陈列出来,不占据空间,涉及到了DOM结构,故产生reflow与repaint

   visibility:hidden指的是元素不可见但存在,保留空间,不影响结构,故只产生repaint

  display: none和visibility:hidden的区别就是

     visibility:hidden会保留元素的空间 repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发             生,如改变outline,visibility,background color,不会影响到dom结构渲染。 reflow(渲染),与repaint区别就是他会影响到dom         的结构渲染,同时他会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然         的,页面元素越多效果越明显。 所以display:none才会产生reflow visibility:hidden只会出发repaint

12.添加样式的方式有

  1. 导入样式:在 .css文件中使用@import url("css/style.css")来引入另一个css样式表

  2. 外部(引用)样式:在html页面中的head中使用 link 标签引入(即将样式单独放到一个文件夹中,然后用link标签引用页面的形        式),如<link rel="stylesheet" type="text/css" href="a.css" />

  3. 内部样式(嵌入式):在HTML页面中的 style 标签中使用样式 , [即用]<style>.classname {width: 100px;}</style>[标签括起来写        在页面中的样式]

  4. 内联样式:与html标签的内部使用style属性设置的样式,直接与当前html标签相关联,如<div style=" width:100px; "></div>

13. 嵌入在HTML文档中的图像格式

    网页html文档支持的图片格式有jpg     ,    gif   ,    png   和   bmp   这四种,jpg , gif   和   png 格式的图片特点是体积很小,因      为在网上很常见,然而 bmp就不常见了,因为这种格式虽然很清晰色彩丰富,但是所占内存很大,所以很少见,但是也是支        持的。一共这4种。

14.H5新增标签

article: 标签定义外部的内容。

aside:标签定义 article 以外的内容。a

audio:h5新增音频标签。没有高宽属性。

canvas:h5新增画布标签。

command: 定义命令按钮(未测试)

datalist:标签定义选项列表。

datalist 及其选项不会被想显示出来,它仅仅是合法的输入值列表。

details:标签用于描述文档或文档某个部分的细节。

figure:标签用于对元素进行组合。

figcaption:定义 figure 元素的标题。

footer:定义 section 或 document 的页脚。

header:定义 section 或 document 的页眉。

hgroup:用于对网页或区段(section)的标题进行组合。

keygen:标签规定用于表单的密钥对生成器字段

mark:标签定义带有记号的文本。

meter:通过min="0" max="20"的方式定义度量衡。仅用于已知最大和最小值的度量。

nav:定义document或section或article的导航。

output:定义不同的输出类型,比如脚本。

progress:定义任何类型的任务的进度。

rp:定义若浏览器不支持 ruby 元素显示的内容

rt:定义 ruby 注释的解释

ruby:定义 ruby 注释

section:标签定义文档中的节、区段。比如章节、页眉、页脚或文档中的其他部分。

source:audio和video的属性之一。为audio和video定义媒介源。

summary:为details定义标题。

time:定义日期或时间。

video:h5新增视频标签。具有高宽属性。

15.以下分析以下代码说法正确的是(CD)

   <html>

   <head>

    <script type="text/javascript">

     function writeIt (value) { document.myfm.first_text.value=value;}

    </script>

   </head>

   <body bgcolor="#ffffff">

    <form name="myfm">

     <input type="text" name="first_text">

     <input type="text" name="second_text" onchange="writeIt(value)">

    </form>

   </body>

   </html>

      A. 在页面的第二个文本框中输入内容后,当光标离开第二个文本框时,第一个文本框的内容不变

      B. 在页面的第一个文本框中输入内容后,当光标离开第一个文本框时,将在第二个文本框中复制第一个文本框的内容

      C.在页面的第二个文本框中输入内容后,当光标离开第二个文本框时,将在第一个文本框中复制第二个文本框的内容

      D.在页面的第一个文本框中输入内容后,当光标离开第一个文本框时,第二个文本框的内容不变

   onchange 事件

   Event 对象

   定义和用法

   onchange 事件会在域的内容改变时发生。

   语法

   οnchange="SomeJavaScriptCode"

 

参数

描述

SomeJavaScriptCode

必需。规定该事件发生时执行的 JavaScript。

   支持该事件的 HTML 标签:

   <input type="text">, <select>, <textarea>

   支持该事件的 JavaScript 对象:

   fileUpload, select, text, textarea

16.在bootstrap中, 关于导航条

   1.应该将被包裹的元素放到navbar-collapse类中

   2.表单应该放置于navbar-form内

   3.可以使用navbar-left和navbar-right来对齐导航条

   4.可以使用navbar-fixed-top和navbar-fixed-bottom来将导航条固定到顶部或底部

17.关于bootstrap以下说法正确的是(ACD)

   A.为<table>标签添加.table类可以给表格添加水平分割线

   B.给表格添加table-striped类可以使IE8中的表格出现斑马线

   C.为表格添加table-bordered类可为表格中每个元素增加边框

   D.为表格添加table-hover类可为表格中增加鼠标悬停样式

bootstrap

.table为任意 <table> 添加基本样式 (只有横向分隔线)尝试一下
.table-striped在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)尝试一下
.table-bordered为所有表格的单元格添加边框尝试一下
.table-hover在 <tbody> 内的任一行启用鼠标悬停状态尝试一下
.table-condensed让表格更加紧凑

18.常见的浏览器端的存储技术有哪些?(ABD)

   A. cookie

   B. localStorage

   C. session

   D. userData

   浏览器端:

   cookie

   WebStorage(localStorage、sessionStorage)

   userData

   indexedDB

   服务器端:

   session

有时需要将网页中的一些数据保存在浏览器端,这样做的好处是,当下次访问页面时,不需要再次向服务器请求数据,直接就    可以从本地读取数据。目前常用的有以下几种方法:

cookie

cookie会随着每次HTTP请求头信息一起发送,无形中增加了网络流量,另外,cookie能存储的数据容量有限,根据浏览器类型不同而不同,IE6大约只能存储2K。

Flash ShareObject

这种方式能能解决上面提到的cookie存储的两个弊端,而且能够跨浏览器,应该说是目前最好的本地存储方案。不过,需要在页面中插入一个Flash,当浏览器没有安装Flash控件时就不能用了。所幸的是,没有安装Flash的用户极少。

缺点:需要安装Flash插件。

Google Gear

Google开发出的一种本地存储技术。

缺点:需要安装Gear组件。

userData

IE浏览器可以使用userData来存储数据,容量可达到640K,这种方案是很可靠的,不需要安装额外的插件。缺点:它仅在IE下有效。

sessionStorage

使用于Firefox2+的火狐浏览器,用这种方式存储的数据仅窗口级别有效,同一个窗口(或者Tab)页面刷新或者跳转,都能获取到本地存储的数据,当新开窗口或者页面时,原来的数据就失效了。

缺点:IE不支持、不能实现数据的持久保存。

globalStorage

使用于Firefox2+的火狐浏览器,类似于IE的userData。

1 //赋值 2 globalStorage[location.hostname]['name'] = 'tugai'; 3 //读取 4 globalStorage[location.hostname]['name']; 5 //删除 6 globalStorage[location.hostname].removeItem('name');

缺点:IE不支持。

localStorage

localStorage是Web Storage互联网存储规范中的一部分,现在在Firefox 3.5、Safari 4和IE8中得到支持。

缺点:低版本浏览器不支持。

结论:
Flash shareobject是不错的选择,如果你不想在页面上嵌入Flash,可以结合使用userData(IE6+)和globalStorage(Firefox2+)和localStorage(chrome3+)实现跨浏览器。

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值