前端面试汇总——HTML基础知识篇

• 关于浏览器

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

• 浏览器页面由哪三层组成，有什么作用？

构成：结构层、表示层、行为层
分别是：HTML、CSS、JavaScript
作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。

• 什么是HTML

HTML：HyperText Markup Language超文本标记语言

• XHTML和HTML有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的标记语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

• HTML语义化

用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

• SEO，用过没有？

搜索引擎优化（Search Engine Optimization）
用过META标签优化：例如:TITLE,KEYWORDS,DESCRIPTION等的优化；

• Doctype是什么

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

• 严格模式与混搭模式

严格模式：就是以W3C标准解析代码。（又称标准模式）
混杂模式：浏览器用自己的方式解析文档。（又称兼容模式）
如何区分：与网页中的DTD直接相关。
如何触发：
触发严格模式，就是正常的建立网页，声明正确的DTD，便是严格模式。
触发混杂模式可以通过在HTML文档开始不声明DTD，或者在DOCTYPE前加入XML声明来实现。
差异 :
（1）盒模型不同严格模式下，其高宽代表一个元素内容的高宽混杂模式下，其高宽代表content+padding+border
（2）设置行内元素的高宽严格模式下，不能给span等行内元素设置width和height混杂模式下，可以设置（3）设置百分比严格模式下，一个元素的高度由其内容来决定。如果父元素没有设置高度，子元素设置百分比是无效的。
（4）水平居中严格模式下：使用margin：0 auto混杂模式下，用text-align
（5）混杂模式下，无法设置图片的padding，table字体不能继承上层设置，quirk模式下white-space:pre会失效

• 优雅降级和渐进增强

渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：
优雅降级是从复杂的现状开始，并试图减少用户体验的供给
渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

• Web攻击技术

XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
SQL注入攻击
CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。