前端面试有这几篇就够了--HTML篇

个人博客： smile小站
欢迎各位来访，交换友链

1.前端需要注意哪些 SEO

• 合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词不要超过2次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度适合，不可过分堆砌关键词，不同页面的 description 有所不同；keywords 列出重要关键词即可。
• 语义化的 HTML 代码，符合W3C 规范：语义化代码让搜索引擎理解网页
• 重要的 HTML代码放在最前面：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度走限制，保证重要内容一定会被抓取
• 重要内容不要用 js 输出：爬虫不会执行 js 获取内容
• 少用 iframe ：搜索引擎不会抓取 iframe 中的内容
• 非装饰性图片必须加 alt
• 提高网站速度：网站速度是搜索引擎排序的一个重要指标

2. HTML 语义化

HTML 与细化就是让页面内容结构化，它有如下优点：

1. 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构
2. 有利于 SEO ，搜索因年轻根据标签来确定上下文和各关键词的权重
3. 方便其他设备解析，如盲人阅读器根据语义渲染网页
4. 有利于开发和维护，语义化更具有可读性，代码更好维护，与 CSS3 关系更加和谐

如：

• header 代表头部
• nav代表超链接区域（导航栏）
• main 定义文档的主要内容
• article 可以表示文章、博客等内容
• footer 代表尾部

3. H5 新特性

• canvas 绘图
• svg 绘图
• video 和 audio
• 地理定位
• Web Worker ：运行在后台的 js ，独立于其他脚本，不会影响页面的性能
• Web Storage
• Cookie 技术（兼容性不好，数据不能超4kb，操作复杂）
• session Storage （兼容性较差，数据8MB，操作简单）
• WebSocket：协议基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工通信——允许服务器主动发信息给客户端
• 语义化更好的内容元素：article footer header nav section
• 表单控件 calendar date time email url search

移除的元素：

• 纯表现的元素 basefont big center font s strike tt u
• 对可用性产生负面影响的元素：frame frameset noframes

4. img 的 title 和 alt 有啥区别

• title 中的内容通常当鼠标滑动到元素上的时候显示
• alt 是 img 的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提高图片可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析

5. 页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

1. 输入域名地址
2. 发送至 DNS 服务器并获得域名对应的 WEB 服务器 IP 地址
3. 与 Web 服务器简历 TCP 链接
4. 服务器永久重定向响应
5. 浏览器跟踪重定向地址
6. 服务器处理请求
7. 服务器返回一个 HTTP 响应
8. 浏览器显示 HTML
9. 浏览器发送请求获取的资源（如图片、音频、视频、CSS、JS等）
   10.浏览器发送异步请求

简便：

1. 浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP ，向服务器发起请求
2. 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图像等）
3. 浏览器对加载得到的资源进行语法解析，建立对应的内部结构
4. 载入解析到的资源文件，渲染页面，完成

6.介绍一下对浏览器内核的理解

主要分为两个部分：渲染引擎 和 js引擎

渲染引擎：负责取得网页的内容，整理讯息，以及计算网页的显示方式，然后回输出至显示器或打印机。浏览器的内核的不同对网页的语法解释会有不同，所以渲染的效果也不同。所哟网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核

js引擎：解析和执行 javascript 来实现网页的动态效果

最开始渲染引擎和js引擎并没有区分的很明确，后来js引擎越来越独立内核就倾向于只指渲染引擎

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

• cookie 是网站为了表示用户身份而存储在本地终端上的数据
• cookie 数据在同源的 http 请求中携带（即使不需要），即会在浏览器和服务器之间来回传递
• sessionStorage 和 localStorage 不会自动把数据发给服务器，仅会在本地保存

存储大小

• cookie 数据大小不能超过 4k
• sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大

有效时间

• localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除
• sessionStorage 数据在当前浏览器窗口关闭后自动删除
• cookie 设置的 cookie 过期时间之前一直有效，即使窗口关闭或浏览器关闭

8.浏览器同源政策

同源：

• 协议相同
• 域名相同
• 端口相同

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

如果非同源，共有三种行为受到限制。

• Cookie、LocalStorage 和 IndexDB 无法读取。
• DOM 无法获得。
• AJAX 请求不能发送。

9.静态网页和动态网页的区别

静态：网页内容任何人在任何时间访问都是不变的
动态：网页内容不同人在不同时间访问可能是不同的

10. iframe 有哪些缺点

• iframe 会阻塞主页面的 Onload 事件
• 搜索页引擎检索程序无法解读这种页面，不利于 SEO
• iframe 和 主页面共享连接池，而浏览器对相同域的链接有限制，所以会影响页面的并行加载

使用 iframe 之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe 添加 src 属性值，这样可以烧开以上两个问题

11.Web 标准以及 W3C 标准是什么

• 标签闭合
• 标签小写
• 不乱嵌套
• 使用外链 css 和 js
• 结构 行为 表现 分离

12. xhtml 和 html 有什么区别

功能上：
主要是 XHTML 可兼容各大浏览器，手机以及PDA，并且浏览器也能快速正确地编译网页
书写习惯上：
XHTML 元素必须正确地嵌套，闭合，区分大小写，文档必须拥有根元素

13.Doctype 作用？严格模式与混杂模式如何区分？他们有何意义？

• 页面被加载时，link 会同时被加载，而@import 引用的 CSS 会等到页面加载完再加载
• import 只在 IE5 以上才能识别，而 link 是 XHTML 标签，无兼容问题
• link 方式的样式权重高于 @import 的权重
• < !DOCTYPE > 声明位于文档中的最前面，处于 标签之间。告知浏览器的解析器，用什么文档类型规范来解析这个文档
• 严格模式的排版和 js 运作模式是：以浏览器支持的最高标准运行
• 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
• DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现

14.行内元素有哪些？块级元素有哪些？空元素有哪些？行内元素和块级元素有什么区别？

行内元素：a b span img input select strong
块级元素：div ul ol li dl dt dd h1 h2… p
空元素 br hr img input link meta

行内元素：不可以设置宽高，不独占一行
块级元素：可以设置宽高，独占一行

15. HTML 全局属性有哪些

• class
• data-*
• draggable
• id
• lang
• style
• title