技术

前端面试（一）

前端面试题–HTML

1. 浏览器的本地存储

在HTML5中提供了sessionStorage和localStorage两种浏览器的本地存储方式。
sessionStorage用于在本地存储一个会话(session)中的数据，这些数据只有在同一个会话中的页面才能访问并且会话结束之后数据也随之销毁，是会话级别的存储。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是不会过期的。

2. web storeage和cookie的区别

  • cookie的大小是受限制的（大概4K左右）
  • 每次请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽
  • cookie需要指定作用域，不可以跨域调用
  • web stroage拥有setltem，getltem等方法,cookie需要前端开发者自己封装setCookie，getCookie
  • cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而WebStroage津津是为了在本地“存储”数据而生
  • IE6，7中的UserData通过简单的代码封装可以统一到所有的浏览器都支持web stroage

    3. 请谈谈cookie的弊端

  • 每个特定的域名下最多生成的cookie个数有限制
  • IE和opera会清理近期最少使用的cookie，firefox会随机清理cookie
  • cookie的最大字节约为4096字节，为了兼容性，一般不能超过4095字节
  • 安全性问题。如果cookie被人拦截了，那人就可以去的所有的cookie信息。

4. <img>标签上的title属性和alt属性的区别

  • alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的，而且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。这一属性有助于那些使用本来就不支持图像显示或者图像显示被关闭的浏览器用户，视觉障碍的用户，以及屏幕阅读器的用户。
    title属性为设置该属性的元素提供建设性的信息，使用title属性提供非本质的额外信息。

5. 分别写出以下html标签L文字加粗，下标，居中，字体

加粗：<b>,<strong>
下标： <sub>
居中： <center>
字体： <font>,<basefont>

6. 请至少写出5个html5新增的标签，并说明其语义和应用场景

selection: 定义文档中的一个章节；
nav : 定义只包含导航连接的章节
header: 定义页面或者章节的头部。经常包括logo，页面标题和导航性的目录。
footer: 定义页面或者章节的尾部，经常包含版权信息，法律信息连接和反馈建议用的地址。
aside: 定义和页面内容关联度较低的内容–如果被删除，剩下的内容仍然合理。

7. 标签语义化的理解

  • 去掉或者丢失样式的时候能够让页面呈现清晰的结构
  • 有利于SEO和搜索引擎建立良好的沟通，有助于爬虫抓取更多有效的信息：爬虫依赖于标签来确定上下文和各个关键自的权重；
  • 方便其他设备，比如：屏幕阅读器，盲人阅读器，移动设备解析，以意义的方式来渲染页面；
  • 便于团队的开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化

8.Doctype的作用？严格模式与混杂模式如何区分？有何意义？

  • <!Doctype>位于文档最前面，处于html标签之前。告知浏览器以何种模式来渲染文档。
  • 严格模式的排版和JS运作是以该浏览器支持的最高标准运行。
  • 在混杂模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为，防止站点无法工作。
  • 在doctype不存在或者格式不正确的时候会导致文档以混杂模式呈现。

9.你知道多少种Doctype文档类型？

标签可以声明三种DTD类型，分别表示严格版本，过渡版本和基于框架的HTML文档。
HTML4.0规定了三种文档类型：Strict、Transitional和Frameset;
XHTML1.0规定了三种XML文档类型：Strict、Transitional和Frameset;

Standards(标准)模式也就是严格呈现模式用于呈现遵循最新标准的网页，
Quirks（包容）模式也就是松散呈现模式或者兼容模式，用于呈现为传统浏览器而设计的网页。

10.HTML和XHTML的区别

  • XHTML元素必须被正确地嵌套
  • XHTML元素必须关闭
  • 标签名必须使用小写字母
  • XHTML元素必须要有根元素

11.Html5有那些新特性，移除了那些元素

  • HTML现在已经不是SGML（标准通用标记语言，XML是其子集）的子集，主要是关于图像，位置，存储，多任务等功能的增加。
  • 拖拽释放(drag and drap )API
  • 语义化更好的内容标签（header,nav,footer,aside,article,section）
  • 音频audio视频videoAPI
  • 画布canvasAPI
  • 地理API
  • 本地离线存储 ：localStorage长期存储数据，浏览器关闭之后数据不会丢失，sessionStroage的数据会在页面会话结束时清除
  • 表单控件，calendar、date、time、emai、url、search
  • 新技术webworker，websocket等
    移除的元素：
  • 纯表现的元素：basefont，big，center，s ，strike，tt,u;
  • 对可用性产生负面影响的元素：frame，frameset，noframes；

12. iframe的优缺点

优点

  • 解决加载缓慢的第三方内容如图标和广告的加载问题
  • iframe无刷新文件上传
  • iframe跨域通信

缺点

  • iframe会阻塞主页面的onload事件
  • 无法被一些搜索引擎索引到
  • 页面会增加http请求
  • 会产生很多页面不容易管理

    13. Quirks模式是什么？和Standards模式有何区别？

    IE6以前的页面大家都不会去写DTD，所以IE6就假定，如果写了DTD，就意味着这个页面采用对css支持更好的布局，而如果没有的话，则采用兼容之前的布局方式。这就是Quirks模式（怪异模式，诡异模式，怪癖模式）.
    区别：总体会有布局、样式解析和脚本执行三个方面的区别。
  • 盒模型： 在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容（content-box）的宽度和高度，在Quirks模式下，IE的宽高还包含了padding和border。
  • 设置行内元素的宽高： 在Standards模式下，给<spam>等行内元素设置宽高的都不会生效，在Quirks模式下，则会生效。
  • 设置百分比的高度： 在standards模式下，一个元素的高度是由其包含的内容决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的
  • 设置水平居中： 使用margin: 0 auto在Standards模式下可以是元素水平居中，但是在quirks模式下无效。

14. table的缺点

  • 太深的嵌套，比如：table>tr>td>h3，会导致搜索引擎读取困难，而且大大增加了代码的冗余。
  • 灵活性差，比如要将tr设置border等属性是不行的，需要通过td
  • 代码臃肿，但在table中嵌套table的时候阅读代码会显得非常混乱
  • 混乱的colspan和rowspan,用来布局的时候，频繁使用会造成文档顺序的混乱。
  • table需要多次计算才能确定好其在渲染树中节点的属性，通常需要花3倍等同于元素的时间
  • 不够语义

15. src和href的区别

  • src用于替换当前元素；href用于在当前文档和引用资源自减确立联系；
  • src是source的缩写，指向外部资源的位置，指向的内容将会嵌入当前标签所在的位置；
  • href是Hypertext Reference的缩写,指向网络资源所在的位置，建立当前元素（锚点）或当前文档（连接）之间的链接；

Recommended Posts