1.前端需要注意哪些SEO？
- 合理的
title、description、keywords：搜索对着三项的权重逐个减小，
a.title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面 title 要有所不同；
b.description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；
c.keywords列举出重要关键词即可 - 语义化的 HTML 代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
- 重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对 抓取长度有限制，保证重要内容一定会被抓取
- 重要内容不要用 js 输出：爬虫不会执行js获取内容
- 少用 iframe ：搜索引擎不会抓取 iframe 中的内容
- 非装饰性图片必须加 alt
- 提高网站速度：网站速度是搜索引擎排序的一个重要指标
2.什么是盒模型？
- 之所以叫盒模型，是因为网页上的元素基本都是一些方方正正的很像一个个盒子，因此形象的称为盒模型。
- 盒模型分为两种：分别是W3C标准盒模型和IE盒模型。它们都包括margin（外边距）、border（边框）、padding（内边距）、content（内容这五个部分。不同之处在于IE盒模型中content部分包括了border和padding。也就是说IE盒模型的高度=2margin+content.height，而W3C标准盒模型的高度＝2margin＋2border＋2padding＋content.height。宽度也是一样的
3.行内元素和块级元素的具体区别是什么？inline-block是什么？
-
区别
-
行内元素会在一条直线上排列（
默认宽度只与内容有关），都是同一行的，水平方向排列。 -
块级元素各占据一行（
默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。 -
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。
-
行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
-
-
行内元素和块级元素转换
display:block; (字面意思表现形式设为块级元素) display:inline; (字面意思表现形式设为行内元素) -
inline-block
inline-block 的元素（如input、img)既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效） 属性。
HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生元素间的空隙。 -
行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img
4.img 的 title和 alt有什么区别
- title通常当鼠标滑动到元素上的时候显示
- alt 是
<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提高图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。
5.如何让Chrome浏览器显示小于12px的文字
- 用transform:scale()这个属性进行缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p {
font-size: 10px;
transform: scale(0.8);
display: block;
}
</style>
</head>
<body>
<p>显示小于12px的文字,这是10px的字</p>
</body>
</html>
6、列举几个前端性能方面的优化
- content方面
- 减少HTTP请求：合并文件、css精灵、inline Image
- 减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名
- 减少DOM元素数量
- Server方面
- 使用CDN
- 配置ETag
- 对组件使用Gzip压缩
- Cookie方面
- 减小cookie大小
- css方面
- 将样式表放到页面顶部
- Javascript方面
- 将脚本放到页面底部
- 将javascipt和css从外部引入
- 压缩javascript和css
- 删除不需要的脚本
- 减少DOM访问
- 图片方面
- 优化图片：根据实际颜色需要选择色深、压缩
- 优化css精灵
- 不要在HTML中拉伸图片
7.语义化的理解
- 用正确的标签做正确的事情！
- html语义化就是让页面的内容结构化，便于浏览器、搜索引擎解析
- 在没有样式css情况下也以一种文档格式显示，并且是容易阅读的
- 在搜索引擎的爬虫依赖于标记确定上下文和各个关键字的权重，利于SEO
- 使阅读源码的人对网站更容易将网站分块，便于阅读维护理解
8、HTML5的离线储存怎么使用，工作原理能不能解释一下？
- 在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件
- 原理： HTML5 的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示
- 如何使用：
页面头部像下面一样加入一个 manifest 的属性；
在 cache.manifest 文件的编写离线存储的资源
在离线状态时，操作 window.applicationCache 进行需求实现
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
9、浏览器是怎么对 HTML5的离线储存资源进行管理和加载的呢
- 在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问 app ，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifes t文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
- 离线的情况下，浏览器就直接使用离线存储的资源。