HTML面试题整理

Html篇：

1.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

  • IE: trident内核
  • Firefox：gecko内核
  • Safari:webkit内核
  • Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
  • Chrome:Blink(基于webkit，Google与Opera Software共同开发)

2.每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

答案：<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

3.Quirks模式是什么？它和Standards模式有什么区别

从IE6开始，引入了Standards模式，在写程序时我们也会经常遇到这样的问题，即当某个参数为真时，我们就使用新功能，而如果这个参数 不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能。IE6也是类似 这样做的，它将DTD当成了这个“参数”，因为以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持 更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）

区别：总体会有布局、样式解析和脚本执行三个方面的区别。

  • 盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。
  • 设置行内元素的高宽：在Standards模式下，给<span>等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
  • 设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度 是无效的。
  • 用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模 式下却会失效。

4.div+css的布局较table布局有什么优点？

  • 改版的时候更方便 只要改css文件。
  • 页面加载速度更快、结构化清晰、页面显示简洁。
  • 表现与结构相分离。
  • 易于优化（seo）搜索引擎更友好，排名更容易靠前。

5.a：img的alt与title有何异同？b：strong与em的异同？

a:

  • alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)
  • title(tool tip):该属性为设置该属性的元素提供建议性的信息。

b:

  • strong:粗体强调标签，强调，表示内容的重要性
  • em:斜体强调标签，更强烈强调，表示内容的强调点

6.你能描述一下渐进增强和优雅降级之间的不同吗?

  • 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
  • 优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

7.为什么利用多个域名来存储网站资源会更有效？

  • CDN缓存更方便
  • 突破浏览器并发限制
  • 节约cookie带宽
  • 节约主域名的连接数，优化页面响应速度
  • 防止不必要的安全问题

8.请描述一下cookies，sessionStorage和localStorage的区别？

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也 随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage和cookie的区别

  • Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
  • 除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发 者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部 分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

9.简述一下src与href的区别。

src（source）用于替换当前元素，href（Hypertext Reference）用于在当前文档和引用资源之间确立联系。

10.知道的网页制作会用到的图片格式有哪些？

png-8，png-24，jpeg，gif，svg

但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp。（是否有关注新技术，新鲜事物）

科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。

在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%

11.知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。

优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应用范例：豆瓣，有兴趣自行google）

12.在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

dns缓存，cdn缓存，浏览器缓存，服务器缓存。

13.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

  • 图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
  • 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
  • 如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
  • 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
  • 如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

14.你如何理解HTML结构的语义化？

  • 去掉或样式丢失的时候能让页面呈现清晰的结构
  • 屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.
  • 搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重
  • 你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.
  • 便于团队开发和维护

15.谈谈以前端角度出发做好SEO需要考虑什么？

  • 了解搜索引擎如何抓取网页和如何索引网页
  • Meta标签优化
  • 了解主要的搜索引擎
  • 主要的互联网目录
  • 搜索引擎登录
  • 链接交换和链接广泛度（Link Popularity）
  • 合理的标签使用

 

时间： 2024-10-11 14:37:51

HTML面试题整理的相关文章

小鹿·试题整理

1)在RHEL5系统中,以下命令(C)可用来查看系统的路由表信息 A) ip add list B) show ip route C) route -n D) route --print 补充:查看网络接口信息 ifconfig 查看网络连接情况 netstat 跟踪数据包       traceroute 目标主机地址 域名解析         nslookup 目标主机地址 2)在Linux系统日志消息中,重要性最低的是(C)级别,表示正常的程序或系统调试信息. A)EMERG B) WAR

Touch事件or手机卫士面试题整理回答(二)

Touch事件or手机卫士面试题整理回答(二) 自定义控件 1. Touch事件的传递机制 顶级View->父View->子View,不处理逆向返回 OnInterceptTouchEvent(),返回值控制Touch是否向下传递. true中断事件,false不中断事件. onTouchEvent() 返回值决定否处理事件.True消耗事件,False不处理事件向上传递. 2. 轮播动画的实现原理 ViewPage和TextView组合实现图片和标题的效果 ViewPage设置setOnPa

海量数据面试题整理1.给定a、b两个文件，各存放50亿个url，每个url各占64字节，内存限制是

海量数据面试题整理 1. 给定a.b两个文件,各存放50亿个url,每个url各占64字节,内存限制是4G,让你找出a.b文件共同的url? 方案1:可以估计每个文件安的大小为50G×64=320G,远远大于内存限制的4G.所以不可能将其完全加载到内存中处理.考虑采取分而治之的方法. s 遍历文件a,对每个url求取,然后根据所取得的值将url分别存储到1000个小文件(记为)中.这样每个小文件的大约为300M. s 遍历文件b,采取和a相同的方式将url分别存储到1000各小文件(记为).这样

Java笔试面试题整理第一波

(本系列同步更新于 个人博客小站) 本系列整理Java相关的笔试面试知识点.其它几篇文章例如以下: Java笔试面试题整理第八波 Java笔试面试题整理第七波 Java笔试面试题整理第六波 Java笔试面试题整理第五波 Java笔试面试题整理第四波 Java笔试面试题整理第三波 Java笔试面试题整理第二波 Java笔试面试题整理第一波 1.Java变量 Java中主要有例如以下几种类型的变量 局部变量 类变量(静态变量)-- 属于类 成员变量(非静态变量)-- 属于对象 2.关于枚举 pack

web前端面试题整理（HTML篇）

web前端面试题整理(HTML篇)需要web前端课程工具和电子书,可以加: 33群105601600;  22群1203428331. h5的改进:新元素画布canvas: HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成音频audio视频video语义性: article,  nav ,  footer, section, aside, hgroup等.时间time 新属性拖放: draggable   <img draggable=&q

Java笔试面试题整理第四波

1.HashMap.HashTable.ConcurrentHashMap的区别 [参考:http://www.cnblogs.com/carbs/archive/2012/07/04/2576995.html] (关于HashMap的分析,在第三篇总结<Java笔试面试题整理第三波>中的hashCode有分析,同样在这篇中有关于Java容器的介绍.HashMap和HashTable都属于Map类集合.) HashMap和HashTable都实现了Map接口,里面存放的元素不保证有序,并且不存

嵌入式c笔试题(整理)

嵌入式c笔试题 (2012-03-24 22:36) 预处理器(Preprocessor)1. 用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题)#define SECONDS_PER_YEAR (60 * 60 * 24 * 365)UL我在这想看到几件事情:1). #define 语法的基本知识(例如:不能以分号结束,括号的使用,等等)2). 懂得预处理器将为你计算常数表达式的值,因此,直接写出你是如何计算一年中有多少秒而不是计算出实际的值,是更清晰而没有代价的

Java笔试面试题整理第八波

本系列整理Java相关的笔试面试知识点,其他几篇文章如下: Java笔试面试题整理第七波 Java笔试面试题整理第六波 Java笔试面试题整理第五波 Java笔试面试题整理第四波 Java笔试面试题整理第三波 Java笔试面试题整理第二波 Java笔试面试题整理第一波 1.运算符相关 What results from the following code fragment? inti = 5; intj = 10; System.out.println(i + ~j); A.Compilati

Python面试题整理-更新中

几个链接: 编程零基础应当如何开始学习 Python ? - 路人甲的回答 网易云课堂上有哪些值得推荐的 Python 教程? - 路人甲的回答 怎么用最短时间高效而踏实地学习 Python? - 路人甲的回答 如何学习Python爬虫[入门篇] - 学习编程 - 知乎专栏 Python常用库整理 - 学习编程 - 知乎专栏 学好Python的11个优秀资源 - 学习编程 - 知乎专栏 在开头依然推荐一个Python面试题整理比较好的网站:GitHub : 关于Python的面试题.同样推荐几道

iO经典笔试题整理

iOS经典笔试题整理---2014年8月 1.回答person的retainCount值,并解释为什么 Person * per = [[Person alloc] init]; 此时person 的retainCount的值是1self.person = per; 在self.person 时,如果是assign,person的 retainCount的值不变,仍为1若是:retain person的retainCount的值加1,变为2 若是:copy person的retainCount值