html篇

HTML部分

1、前端页面有哪三层构成？

(1) 网页结构层。由HTML 或XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出这些标签不包含任何关于如何显示有关内容的信息。

(2) 网页表达层。由css创建

(3) 网页行为层。由JS创建。这是Javascript 语言和DOM 主宰的领域。

2、 Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

(1) 声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档、使用哪个版本的 HTML 规范来渲染文档。

(2) 严格模式、标准模式（Standards mode）的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。

(3) 在混杂模式（Quirks mode）中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

(4) DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

3、你知道多少种Doctype文档类型？

(1) 该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

(2) HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

(3) XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。

(4) Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks

(5) （包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

4、HTML语义化

(1) What: 根据内容的结构(内容语义化)，选择适合的标签(代码语义化) 便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器更好的解析。

(2) Why：

① 为了再没有css的情况下，页面也能呈现出很好的内容结构，代码结构

② 用户体验，例如: title, alt用于解释名词或解释图片信息，label标签的活用。

③ 有利于seo，和搜索引擎建立良好的沟通，有利于爬虫抓取更多有效的信息。爬虫依赖于标签来确定上下文和各个关键字的权重。

④ 方便其他设备进行解析(盲人阅读器，屏幕阅读器，移动设备)，以意义的方式来渲染网页。

⑤ 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

(3) How:

① 尽可能少的使用无语义的标签div和span

② 在语义不明显，可使用div和p时，尽量使用p标签，因为p在默认情况下有上下间距，对兼容特殊终端有益。

③ 不使用纯样式的标签，font、u，b，i 改用css设置

④ 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；

⑤ 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

⑥ 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；

⑦ 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

5、说说你对语义化的理解？

(1) 去掉或者丢失样式的时候能够让页面呈现出清晰的结构

(2) 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

(3) 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

(4) 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

6、标签上title属性与alt属性的区别是什么？

alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。

这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。

title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息

7、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

1、拖拽释放(Drag and drop) API

2、语义化更好的内容标签（header,nav,footer,aside,article,section）

3、音频、视频API(audio,video)

4、画布(Canvas) API

5、地理(Geolocation) API

6、本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

7、sessionStorage 的数据在浏览器关闭后自动删除

8、表单控件，calendar、date、time、email、url、search

9、新的技术webworker, websocket,Geolocation

10、移除的元素

11、纯表现的元素：basefont，big，center，font, s，strike，tt，u；

12、对可用性产生负面影响的元素：frame，frameset，noframes；

13、支持HTML5新标签：

兼容： IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

< !--[if lt IE 9]>

< script>src="[html5shim.googlecode.com/svn/trunk/h… ] (link.zhihu.com/?target=htt…)" < /script>

<![endif]-->

如何区分： DOCTYPE声明\新增的结构元素\功能元素

8、页面渲染html的过程？

浏览器渲染页面的一般过程：

1.浏览器解析html源码，然后创建一个 DOM树。并行请求 css/image/js在 DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会 有一个对应的文本节点。DOM树的根节点就是 documentElement，对应的 是html标签。

2.浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树。对CSS代 码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的 style。

3.DOM Tree + CSSOM --> 渲染树（rendering tree）。渲染树和DOM树有点像， 但是是有区别的。

DOM树完全和html标签一一对应，但是渲染树会忽略掉不需要渲染的元素， 比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树 中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性。

4.一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。

以上四个步骤并不是一次性顺序完成的。如果DOM或者CSSOM被修改，以 上过程会被重复执行。实际上，CSS和JavaScript往往会多次修改DOM或者 CSSOM。

9、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

• 块级元素标签： div p dl dt dd ul li table h1 … h6 form 等
• 行内元素标签：span a i label img input button textarea select 等
• 空(void)元素：即系没有内容的HTML元素，例如：< br> < hr> < link> < meta> img

10、a 标签在新窗口打开链接怎么加属性？target 有哪几个属性值？

< a target="_blank">链接< /a>

target 的属性值：

    _blank 在新窗口中打开被链接文档。
    _self 默认。在相同的框架中打开被链接文档。
    _parent 在父框架集中打开被链接文档。
    _top 在整个窗口中打开被链接文档。
    framename 在指定的框架中打开被链接文档。

11、h5的改进:

新元素

1）画布canvas: HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成
2）音频audio
3）视频video
4）语义性: article,  nav ,  footer, section, aside, hgroup等.
5）时间time

新属性

1）拖放: draggable   <img draggable="true">
2）可编辑: contenteditable

新事件

1）拖放 ondrag ondrop
2）关闭页面 onunload
3）窗口大小改变 onresize
取消了一些元素: font center等

新的DOCTYPE声明 < !DOCTYPE html>

完全支持CSS3

Video和Audio

2D/3D制图

本地存储

本地SQL数据

Web应用

12、 如何处理 HTML5 新标签的浏览器兼容问题？

IE6/IE7/IE8 支持通过 document 方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签；

使用静态资源的 html5shiv 包：

1）在 < head> 中调用以下代码：

  <!--[if lt IE9]>
      <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <![endif]-->

2）载入后，初始化新标签的css：

  header, section, footer, aside, nav, main, article, figure { display: block; }

13、优雅降级和渐进增强

(1) 优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

(2) 渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

另一版本：

§ 渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

§ 优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

14、浏览器是如何渲染页面的？

渲染的流程如下：

(1) 解析HTML文件，创建DOM树。

自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。

(2) 解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；

(3) 将CSS与DOM合并，构建渲染树（Render Tree）

(4) 布局和绘制，重绘（repaint）和重排（reflow）

15、说说TCP传输的三次握手四次挥手策略

为了准确无误地把数据送达目标处，TCP协议采用了三次握手策略。用TCP协议把数据包送出去后，TCP不会对传送 后的情况置之不理，它一定会向对方确认是否成功送达。握手过程中使用了TCP的标志：SYN和ACK。

发送端首先发送一个带SYN标志的数据包给对方。接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。 最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束。 若在握手过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包。

断开一个TCP连接则需要“四次握手”：

§ 第一次挥手：主动关闭方发送一个FIN，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不 会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，主动关闭方依然会重发这些数据)，但是，此时主动关闭方还可 以接受数据。

§ 第二次挥手：被动关闭方收到FIN包后，发送一个ACK给对方，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。

§ 第三次挥手：被动关闭方发送一个FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会再给你发数据了。

§ 第四次挥手：主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1，至此，完成四次挥手。

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

分为4个步骤：

（1），当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。

（2）， 浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。

（3），一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。

（4），此时，Web服务器提供资源服务，客户端开始下载资源。

请求返回后，便进入了我们关注的前端模块

简单来说，浏览器会解析HTML生成DOM Tree，其次会根据CSS生成CSS Rule Tree，而javascript又可以根据DOM API操作DOM

17、输入网址到现实的过程

1、重定向

2、查看缓存

3、DNS解析，获取IP地址

4、TCP连接建立

5、发送报文请求

6、响应报文数据

7、浏览器解析数据

8、渲染

18、FOUC，什么是无样式内容闪烁?如何避免?

1）what?

如果使用@import 方法对CSS进行导入，会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象：以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效（Flash of Unstyled Content），简称为FOUC。

2）why?

使用@import导入样式表

将样式表放在页面底部

有几个样式表，放在html结构的不同位置。

3）原理即:

当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。

4）how?

使用 link 标签加载CSS样式文件。因为 link 是顺序加载的，这样页面会等到CSS下载完之后再下载HTML文件，这样先布局好，就不会出现 FOUC 问题。

19、什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

FOUC - FlashOf Unstyled Content 文档样式闪烁

< style type="text/css"media="all">@import"../fouc.css";</ style>

而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。

解决方法简单的出奇，只要在< head>之间加入一个< link>或者< script>元素就可以了。

20、label 的作用是什么? 是怎么用的?

label 标签用来定义表单控件间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

label 中有两个属性是非常有用的，for 和 accesskey。

for属性功能：表示 label 标签要绑定的 HTML 元素，你点击这个标签的时候，所绑定的元素将获取焦点。
<Label for="name">姓名</Label><input ID="name" type="text"> 
accesskey属性功能：表示访问 label 标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。
<Label for="name" accesskey＝"N">姓名</Label><input ID="name" type="text">

21、为什么通常将css的放置在之间，而将js的之前?有哪些例外吗?

原因：浏览器在处理HTML页面渲染和JavaScript脚本执行的时候是单一进程的，所以在当浏览器在渲染HTML遇到了之前，当页面渲染完成再去执行

例外： 一般希望DOM还没加载必须需要先加载的 js 会放置在中，有些加了defer、async的

22、BFC/IFC

BFC（Block Formatting Context）叫做“块级格式化上下文"

（1）内部的盒子会在垂直方向，一个个地放置；

（2）盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；

（3）每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；

（4）BFC的区域不会与float重叠；

（5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；

（6）计算BFC的高度时，浮动元素也参与计算。

触发条件

（1）float的属性不为none；

（2）position为absolute或fixed；

（3）display为inline-block，table-cell，table-caption，flex；

（4）overflow不为visible

IFC（inline Formatting Context）叫做“行级格式化上下”

（1）内部的盒子会在水平方向，一个个地放置；

（2）IFC的高度，由里面最高盒子的高度决定；

（3）当一行不够放置的时候会自动切换到下一行；

23、上下 margin 重合的问题?

在重合元素外包裹一层容器，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠。

24、HTML5的离线储存怎么使用，以及工作原理？

（1）原理：在线情况下，浏览器发现 HTML 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问，那么浏览器就会根据 manifest 文件的内容下载相应的资源，并进行离线存储。如果已经访问过并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面。

然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不会做任何操作，如果文件改变了，那么就会重新下载文件中的资源，并且进行离线存储。

（2）使用：

①在页面头部加入 manifest 属性 < html manifest='cache.manifest'>

②在 cache.manifest 文件中编写离线存储的资源

    CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    Resourse/logo.png
    FALLBACK:
    //offline.html

24、如何实现浏览器内多个标签页之间的通信?

（1）WebSocket、SharedWorker

（2）可以调用 localstorge、cookie 等本地存储方式。localstorge 在另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。

注意：Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常。

25、存储

(1) 浏览器本地存储Web Storage：

localStorage和sessionStorage

(2) 谈谈cookie和localStorage、sessionStorage的异同

共同点：都是保存在浏览器端，且是同源的。

区别：

① 存储位置不同

a、cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密），始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递。

b、localStorage和sessionStorage不会自动把数据发给服务器，仅在本地保存。localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

②存储大小限制

a、Cookie数据大小不超过4k

b、localStorage和sessionStorage虽然也有限制，但是比cookie大的多，做多可5M或更大

③ 数据的有限时间

a、localStorage：始终有效，存储持久数据，浏览器关闭数据不丢失，除非主动删除数据，否则数据是永远不会过期的。

b、sessionStorage：用于本地存储一个会话（session）中的数据。数据在当前浏览器窗口关闭后自动删除，不是一种持久化的本地存储，仅仅是会话级别的存储。

c、Cookie： 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。cookie还需要指定作用域，不可以跨域调用

④ 作用域

a、sessionStorage：不在不同浏览器中共享，即使是同一页面

b、localStorage，cookie在所有同源窗口中共享

⑤ 个人建议

a、将登陆信息等重要信息存放为SESSION

b、其他信息如果需要保留，可以放在COOKIE中

26、请你谈谈Cookie的弊端

(1) 每个特定的域名下最多生成的cookie个数有限制

(2) IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie

(3) cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节

(4) 安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。

27、请你谈谈Cookie的弊端

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。

第一：每个特定的域名下最多生成20个cookie

1、IE6或更低版本最多20个cookie

2、IE7和之后的版本最后可以有50个cookie。

3、Firefox最多50个cookie

4、chrome和Safari没有做硬性限制

IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。

cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节。

IE 提供了一种存储可以持久化用户数据，叫做userdata，从IE5.0就开始支持。每个数据最多128K，每个域名下最多1M。这个持久化数据放在缓存中，如果缓存没有清理，那么会一直存在。

优点：极高的扩展性和可用性

1、通过良好的编程，控制保存在cookie中的session对象的大小。

2、通过加密和安全传输技术（SSL），减少cookie被破解的可能性。

3、只在cookie中存放不敏感数据，即使被盗也不会有重大损失。

4、控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

缺点：

1、Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉.

2、安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

3、有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

28、浏览器本地存储

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。

在HTML5中提供了localStorage来取代globalStorage。

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是cookie也是不可以或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的userData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

cookie 和session 的区别：

1、cookie数据存放在客户的浏览器上，session数据放在服务器上。

2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗，考虑到安全应当使用session。

3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能、考虑到减轻服务器性能方面，应当使用COOKIE。

4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

5、所以个人建议：

将登陆信息等重要信息存放为SESSION

其他信息如果需要保留，可以放在COOKIE中

29、如何删除一个cookie

1）将时间设为当前时间往前一点。

var date = newDate();

date.setDate(date.getDate() - 1);//真正的删除

setDate()方法用于设置一个月的某一天。

2）expires的设置

document.cookie= 'user='+ encodeURIComponent('name') + ';expires = ' + newDate(0)

< strong>，< em>和< b>，< i>标签

< strong>标签和 < em>标签一样，用于强调文本，但它强调的程度更强一些。

em 是 斜体强调标签，更强烈强调，表示内容的强调点。相当于html元素中的< i>...< /i>;

< b >< i >是视觉要素，分别表示无意义的加粗，无意义的斜体。

em 和 strong 是表达要素(phraseelements)。

30、HTTP和HTTPS

HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。

默认HTTP的端口号为80，HTTPS的端口号为443。

为什么HTTPS安全

因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性

31、HTTP状态码

100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息

200 OK 正常返回信息

201 Created 请求成功并且服务器创建了新的资源

202 Accepted 服务器已接受请求，但尚未处理

301 Moved Permanently 请求的网页已永久移动到新位置。

302 Found 临时性重定向。

303 SeeOther 临时性重定向，且总是使用 GET 请求新的 URI。

304 Not Modified 自从上次请求后，请求的网页未修改过。

400 BadRequest 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。

401 Unauthorized 请求未授权。

403Forbidden 禁止访问。

404 NotFound 找不到如何与 URI 相匹配的资源。

500 InternalServer Error 最常见的服务器端错误。

503 ServiceUnavailable 服务器端暂时无法处理请求（可能是过载或维护）。

32、从前端角度谈谈seo(搜索引擎优化)需要考虑什么？

(1) 语义化HTML标签

(2) 合理使用主题（Title)，网站描述(Description)，和关键词（Keywords）

(3) 重要的HTML放前面

(4) 少用iframe，搜索引擎不会抓取iframe的内容

(5) 图片加上alt

实际操作：

1）meta 标签，这个是重中之重

<title>html对seo的优化</title>
<meta name="title" content="html对SEO的优化">/*不推荐用这个*/
<meta name="keywords" content="SEO,爬虫，搜索引擎、百度、html优化">
<meta name="description" content="通过html标签及属性的使用提高网站被爬虫爬取的几率，使用户百度时网站尽量排在前面，提高用户的点击率">

2）logo，给logo图片添加 h1 标签、a 链接连接到首页以及alt

<h1>
   // 这个href应该是要写线上的首页地址，比项目目录地址要好
	<a href="https://xxx">
		<img src="images/logo.png"  alt="html对seo的优化"/>
	</a>
</h1>

3）img 标签，img标签增加 alt 属性

4）a 标签，a 标签增加 title 属性，不可以有 href="#" 这种空指向写法，另外大量的 title 感觉体验也不是很好，不需要的地方可以不用。

5）h1~h6 标签

a、h1 要分配给网站名称或给带 alt 标签的logo使用（这个前面也提到了），用以强调网站名称。

b、h2 标签用来定义站点副标题。如果没有副标题，h2 标签最好也空着，以备不时之需。

c、h3 标签用来定义导航栏目名称。

d、h4 标签用来定义文章列表标题，但大多数内容系统，文章列表输出用UL标签，所以h4可能就派不上用场，这里只是以此类推。浏览器会自动地在标题的前后添加空行。请确保将HTML heading标签只用于标题。不要仅仅是为了产生粗体或大号文本而使用标题因为搜索引擎使用标题为你的网页的结构和内容标志索引。

6）添加 robots.txt ，搭建网站与搜索引擎对话的桥梁

在项目根目录添加 robots.txt 文件，robots.txt 文件可以告诉搜索引擎哪些是重点，哪些又是可以忽略的，节约搜索引擎蜘蛛抓取网页的时间，也在一定程度上节省了服务器资源。

7）页面结构清晰

使用语义化标签比如header、footer、content、section，js、css使用外部文件。

8）增加外部链接

即是对方没有和你链接，你也是可以链接别人的，大概搜索引擎的算法体现了互联网“分享”的精神吧，通过外链网站的活跃度蹭点seo度。

9）前后端分离（vue、ajax）、flash不利于seo

33、对Web标准的理解

web标准简单来说可以分为结构、表现和行为。其中结构主要是有HTML标签组成。或许通俗点说，在页面body里面我们写入的标签都是为了页面的结构。

表现即指css样式表，通过css可以是页面的结构标签更具美感。

行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有js组成。

web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。

W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点

1）对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）

a、标签字母要小写

b、标签要闭合

c、标签不允许随意嵌套

2）对于css和js来说

a、尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。

b、样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版

c、不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

34、很多网站不常用table iframe这两个元素，知道原因吗？

答：因为浏览器页面渲染的时候是从上至下的，而table 和 iframe 这两种元素会改变这样渲染规则，他们是要等待自己元素内的内容加载完才整体渲染。用户体验会很不友好。

35、什么是渐进式渲染？

渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。

在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。

比如：

（1）图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript将加载并显示图像。

（2）确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的CSS、脚本和内容，然后可以使用延迟加载脚本或监听DOMContentLoaded/load事件加载其他资源和内容。

（3）异步加载HTML片段——当页面通过后台渲染时，把HTML拆分，通过异步请求，分块发送给浏览器。