一、前端需要注意的SEO
（1）合理的 title、description 和 keywords，他们的搜索权重逐个减小
title 强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；keywords 列举出重要关键词即可。
（2）语义化的 HTML 代码，符合 W3C 规范
语义化代码让搜索引擎容易理解网页。
（3）重要内容 HTML 代码放在最前
搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取。
（4）重要内容不要用JavaScript输出
爬虫不会执行JavaScript获取内容。
（5）少用iframe
搜索引擎不会抓取 <iframe>（内联框架） 中的内容。
（6）非装饰性图片必须加 alt
（7）提高网站速度
网站速度是搜索引擎排序的一个重要指标。
二、网页验证码的作用
（1）区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水。
（2）有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。
三、网页中使用字体
在网页中应该使用偶数字体，偶数字号相对奇数字号更容易和 web 设计的其他部分构成比例关系。
四、浏览器内核
1. 两部分
渲染引擎(layout engineer或Rendering Engine)和JS引擎。
2. 渲染引擎
负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
3. JS引擎
解析和执行JavaScript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
五、浏览器标准模式和怪异模式的区别
（1）“标准模式”(Standards Mode) 页面按照 HTML 与 CSS 的定义渲染。
（2）“怪异模式”(Quirks Mode)浏览器为兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式。
（3）标准模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
（4）怪异模式，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 <!doctype>不存在或格式不正确会导致文档以怪异模式呈现。
六、渐进增强
1. 概念
渐进增强是指在WEB设计时强调可访问性、语义化HTML标签、外部样式表和脚本。保证所有人都能访问页面的基本内容和功能同时为高级浏览器和高带宽用户提供更好的用户体验。
2. 原则
（1）所有浏览器都必须能访问基本内容
（2）所有浏览器都必须能使用基本功能
（3）所有内容都包含在语义化标签中
（4）通过外部CSS提供增强的布局
（5）通过非侵入式、外部JavaScript提供增强功能
七、link和@import的区别
（1）link是XHTML标签，无兼容问题；而@import只在 IE5 以上才能识别。
（2）页面被加载的时，link会同时被加载；而@import引用的CSS会等到页面被加载完再加载。
（3）link方式的样式的权重 高于 @import的权重。
（4）link可以通过rel=”alternate stylesheet”指定候选样式。
（5）@import必须在样式规则之前，可以在CSS文件中引用其他文件。
总结
link优于@import
八、PNG、JPG和GIF区别
| PNG | JPG | GIF |
|---|---|---|
| PNG8和truecolor PNG，PNG8颜色上限为256 | 颜色上限为256 | 8位像素，256色 |
| 文件小 | 有损压缩，可控制压缩质量 | 无损压缩 |
| 支持alpha透明度 | 不支持透明 | 支持boolean透明 |
| 无动画 | 支持简单动画 | |
| 适合背景、图标、按钮 | 适合照片 |
九、Canvas和SVG的区别
（1）canvas输出的是一整幅画布。
（2）svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。
（3）canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿。
（4）svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是真和锯齿。
十、ssessionStorage、localStorage和cookie
1. 概念
（1）sessionStorage、localStorage、cookie都是在浏览器端存储的数据。
（2）sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。
（3）sessionStorage 的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage 是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage 即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage 对象也是不同的。
（4）cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密），cookie数据始终在同源的http请求中携带（即使不需要），也会在浏览器和服务器间来回传递。
2. 数据发送
（1）sessionStorage和localStorage不会自动把数据发送到服务器端，仅在本地保存。
（2）cookies会把数据发送到服务器端。
3. 存储大小
（1）cookie数据大小不能超过4k。
（2）sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
4. 有期时间
（1）cookie 设置的过期时间之前一直有效，即使窗口或浏览器关闭。
（2）sessionStorage 数据在当前浏览器窗口关闭后自动删除。
（3）localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。
十一、XHTML和HTML的对比
1. XHTML
（1） xhtml 语法要求严格，区分大小写。
（2）元素必须被正确嵌套，必须有根元素。
（3）每个 DOM 必须要闭合；空标签也必须闭合,例如<img />, <br/>, <input />等。
（4）属性值使用双引号。一旦遇到错误，立刻停止解析，并显示错误信息。
2. HTML
可兼容各大浏览器、手机以及 PDA，并且浏览器也能快速正确地编译网页。
十二、<!doctype>的特点
（1）<!doctype>声明必须处于HTML文档的头部，在<html>标签之前，HTML5中不区分大小写。
（2）<!doctype>声明不是一个HTML标签，是一个用于告诉浏览器当前HTMl版本的指令。
（3）现代浏览器的html布局引擎通过检查doctype决定使用兼容模式还是标准模式对文档进行渲染，一些浏览器有一个接近标准模型。
十三、HTML5 <!DOCTYPE HTML>标签
（1）在HTML4.01中<!doctype>声明指向一个DTD，由于HTML4.01基于SGML，所以DTD指定了标记规则以保证浏览器正确渲染内容。
（2）HTML5不基于SGML，所以不用指定DTD，但是需要<!doctype>来规范浏览器的行为。
十四、HTML5的新特性
1. 增加的元素
（1）绘画 canvas
（2）用于媒介回放的 video 和 audio 元素
（3）本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除
（4）语意化更好的内容元素，比如 article、footer、header、nav、section
（5）表单控件，calendar、date、time、email、url、search
（6）新技术，webworker, websocket, Geolocation
2. 移除的元素
（1）纯表现的元素，basefont，big，center，font, s，strike，tt，u
（2）对可用性产生负面影响的元素，frame，frameset，noframes
十五、HTML全局属性(global attribute)
全局属性是所有HTML元素共有的属性; 它们可以用于所有元素，即使属性可能对某些元素不起作用。
| 属性 | 描述 |
|---|---|
| accesskey | 提供了一种使用快捷键访问当前元素的途径 |
| class | 为元素设置类标识，多个类名用空格分开，class允许css和javascript通过class选择器或者类似下面的DOM方法来选择和访问element |
| contenteditable | 指定元素内容是否可编辑 |
| contextmenu | 自定义鼠标右键弹出菜单内容 |
| data-* | 为元素增加自定义属性 |
| dir | 设置元素文本方向 |
| draggable | 设置元素是否可拖拽 |
| dropzone | 设置元素拖放类型： copy, move, link |
| hidden | 这个布尔（Boolean）属性表示element还没有或是不再存在。样式上会导致元素不显示，但是不能用这个属性实现样式效果 |
| id | 唯一的标识，它在整个document里应该是唯一的。当需要链接（使用片段标识符，锚点），执行脚本，控制样式时，可以用它来定位识别元素。 |
| lang | 元素内容的的语言 |
| spellcheck | 是否启动拼写和语法检查 |
| style | 行内css样式 |
| tabindex | 设置元素可以获得焦点，通过tab可以导航 |
| title | 元素相关的建议信息 |
| translate | 元素和子孙节点内容是否需要本地化 |
十六、<img>的title和alt区别
（1）title 是 global attributes（全局属性） 之一，用于为元素提供附加的 advisory information。通常当鼠标滑动到元素上的时候显示。
（2）alt 是 <img> 的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提高图片可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。
十七、初始化CSS样式
（1）浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
（2）初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，力求影响最小的情况下初始化CSS样式。
十八、CSS合并方法
（1）避免使用@import引入多个CSS文件。
（2）可以使用CSS工具将CSS合并为一个CSS文件，例如使用 Sass、Compass 等。
十九、CSS Sprite
1. 概念
将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。
2. 优点
（1）减少HTTP请求数，极大地提高页面加载速度
（2）增加图片信息重复度，提高压缩比，减少图片大小
（3）更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
3. 缺点
（1）图片合并麻烦
（2）维护麻烦，修改一个图片可能需要从新布局整个图片，样式。
二十、display: none;和visibility: hidden;
1. 联系
他们都能让元素不可见。
2. 区别
| display:none; | visibility: hidden; |
|---|---|
| 会让元素完全从渲染树消失，渲染时不占据任何空间 | 不会让元素从渲染树消失，渲染时元素继续占据空间，只是内容不可见 |
| 非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示； | 继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式 |
| 修改常规流中元素的display通常会造成文档重排。 | 修改visibility属性只会造成本元素的重绘。 |
| 读屏器不会读取display: none;元素内容； | 会读取visibility: hidden;元素内容 |
二十一、行内元素、块级元素和空元素
| 行内元素 | 块级元素 | 空元素 |
|---|---|---|
| a | div | meta |
| span | h1-h6 | link |
| img | p | img |
| b | ul-li | input |
| strong | dl-dt-dd | br |
| input | hr | |
| select |
二十二、行内元素浮动
（1）行内元素浮动后，不会成为块级元素，但是可以设置宽和高。
（1）行内元素转换为块级元素，占一行，直接设置 display:block; 但若元素设置浮动后，再设置 display:block;则就不会占一行。
二十三、盒模型
（1）在怪异模式下，盒模型为IE盒模型而非标准模式下的W3C 盒模型，在 IE 盒模型中
box width = content width + padding left + padding right + border left + border right
box height = content height + padding top + padding bottom + border top + border bottom
（2）而在 W3C 标准的盒模型中，box 的大小就是 content 的大小。
二十四、Viewport
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”>
（1）width 设置viewport宽度，为一个正整数，或字符串‘device-width’
（2）device-width 设备宽度
（3）height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
（4）initial-scale 默认缩放比例（初始缩放比例），为一个数字，可以带小数
（5）minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数
（6）maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数
（7）user-scalable 是否允许手动缩放
阅读更多
本文在GitHub的地址 GitHub Front-end-questions
