HTML5 + CSS3面试题集锦
1.HTML5面试题
1.1 H5的新特性有哪些
- 画布(Canvas) API
- 地理(Geolocation) API
- 音频、视频API(audio,video)
- localStorage和sessionStorage
- webworker和 websocket
- header,nav,footer,aside,article,section
- web worker是运行在浏览器后台的js程序，他不影响主程序的运行，是另开的一个js线程，可以用这个线程执行复杂的数据操作，然后把操作结果通过postMessage传递给主线程，这样在进行复杂且耗时的操作时就不会阻塞主线程了
1.2 Label的作用是什么？是怎么用的？
label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>
1.3 HTML5的form如何关闭自动完成功能
给不想要提示的 form 或某个 input 设置为 autocomplete=off
1.4 dom如何实现浏览器内多个标签页之间的通信? (阿里)
- WebSocket、SharedWorker；
- 也可以调用localstorge、cookies等本地存储方式；localstorge另一 个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通 过监听事件，控制它的值来进行页面信息通信；
- 注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；
1.5 实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果
<div style="height:1px;overflow:hidden;background:red"></div>
1.6 title与h1的区别、b与strong的区别、i与em的区别？
title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；
strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时： <strong>会重读，而<B>是展示强调内容。
i内容展示为斜体，me表示强调的文本；
Physical Style Elements -- 自然样式标签
b, i, u, s, pre
Semantic Style Elements -- 语义样式标签
strong, em, ins, del, code
应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。
1.7 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
Trident内核:IE系列
Gecko内核:Firefox
Webkit内核:Safari
Blink内核：是基于Webkit内核的子项目,使用的浏览器有：
Chrome/opera等除IE、Firefox、Safari之外的几乎所有浏览器
几乎所有国产双内核浏览器（Trident/Blink）如360、猎豹、qq、百度等
1.8 每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
文档声明。
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）
IE下如不书写文档声明会使用怪异模式解析网页导致一系列CSS兼容性问题
1.9 div+css的布局较table布局有什么优点
正常场景一般都适用div+CSS布局，
优点：
1. 结构与样式分离
2. 代码语义性好
3. 更符合HTML标准规范
4. SEO友好
Table布局的适用场景：
某种原因不方便加载外部CSS的场景，例如邮件正文，此时用table布局可以在无css情况下保持页面布局正常
1.10 img的alt与title有何异同？ strong与em的异同
alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息。
em:表现为斜体，语义表示强调
strong:表现为粗体，语义为强烈语气，强调程度超过em
1.11 简述一下src与href的区别
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
<script src =”js.js”></script>
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
<link href=”common.css” rel=”stylesheet”/>
那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。
1.12 知道的网页制作会用到的图片格式有哪些
png-8，png-24，jpeg，gif，svg。
但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp。（是否有关注新技术，新鲜事物）
科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%
1.13 在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理
dns缓存，cdn缓存，浏览器缓存，服务器缓存
1.14 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验
- 图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
- 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
- 如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
- 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
- 如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致
1.15你如何理解HTML结构的语义化
- 更符合W3C统一的规范标准，是技术趋势。
- 没有样式时浏览器的默认样式也能让页面结构很清晰。
- 对功能障碍用户友好。屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。
- 对其他非主流终端设备友好。例如机顶盒、PDA、各种移动终端。
- 对SEO友好。
1.16谈谈以前端角度出发做好SEO需要考虑什么
搜索引擎主要以:
外链数量和质量,网页内容和结构等来决定某关键字下的网页搜索排名。
前端应该注意网页结构和内容方面的情况：
- Meta
最低0.47元/天 解锁文章
809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
