002 html总结

1.题目

• 每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
• div+css的布局较table布局有什么优点？
• strong与em的异同？
• 你能描述一下渐进增强和优雅降级之间的不同吗?
• 为什么利用多个域名来存储网站资源会更有效？
• 请描述一下cookies，sessionStorage和localStorage的区别？
• 简述一下src与href的区别。
• 你如何理解HTML结构的语义化？

一：解答

1.Doctype

　　文档类型，一个文档类型标记是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。

　　Doctype还会对浏览器的渲染模式产生影响，不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析，所以Doctype是非常关键的，尤其是在 IE 系列浏览器中，由DOCTYPE 所决定的 HTML 页面的渲染模式至关重要。

　　总结为：

　　HTML5提供的<DOCTYPE html>是标准模式，向后兼容的, 等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的 标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

2.div+css的布局较和able布局的优点？

　　一、div+css布局的好处：

　　1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。

　　2.布局精准，网站版面布局修改简单。

　　3.加快了页面的加载速度（最重要的）（在IE中要将整个table加载完了才显示内容）。

　　4.节约站点所占的空间和站点的流量。

　　5.用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。

　　二、table布局的好处（table布局也不是一点用的没有，这点是毋庸置疑的）

　　1.容易上手。

　　2.可以形成复杂的变化，简单快速。

　　3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。

3.div+css的布局较table布局有什么优点？

　　1，其实也是div+css布局的第一个特点，table标签被严格地定义为存放数据的一个区域，而不是布局工具，它的布局形式不符合W3C标准，没有实现结构和表现的分离，它既有css的表现功能，也有html的结构功能。

　　2，table布局加载网页时，必须整体加载完，降低了网页的呈现速度，而div+css布局是边加载边显示的。

　　3，table布局在网页代码编写时，有时需要嵌套多重表格才能实现，但使用div+css布局，相对而言会减少许多嵌套时的代码，更容易检查和维护。

　　4，table布局不方便表现的更换，使用div+css布局，大多只要更改css样式表就能变化表现形式。

　　5、易于维护和改版。

4.strong与em的比较

　　strong：粗体强调标签，强调，表示内容的重要性； 
　　em：斜体强调标签，更强烈的强调，表示内容的强调点，即一个是粗体，一个是斜体，都表示强调。

5.你能描述一下渐进增强和优雅降级之间的不同吗?

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

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

　　区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

6.为什么利用多个域名来存储网站资源会更有效？

　　1. CDN缓存更方便

　　CDN：是构建在网络之上的内容发布网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容发布、调度等功能模块，是用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要是内容存储和分布技术。简单来说，CDN主要用来使用户就近获取资源。

　　2. 突破浏览器并发限制

　　同一时间针对同一域名下的请求有一定数量限制，超过限制数目的请求会被阻塞。大多数浏览器的并发数量都控制在6以内。有些资源的请求时间很长，因而会阻塞其他资源的请求。因此，对于一些静态资源，如果放到不同的域名下面就能实现与其他资源的并发请求。

　　因而后来衍生了domain dash来加大并发数，但是过多的域名会使DNS解析负担加重，因此一般控制在2-4个。
　　对于图片资源的加载，利用css sprites技术，结合background的定位在同一张图片中加载多个图片，这也是减少并发数量的一种常用方法。

　　3. 节约cookie带宽

　　假如twitter 的图片放在主站域名下，那么用户每次访问图片时，request header 里就会带有自己的cookie ，header 里的cookie 还不能压缩，而图片是不需要知道用户的cookie 的，所以这部分带宽就白白浪费了。 
写主站程序时，set-cookie 也不要set 到图片的域名上。 
　　在小流量的网站，这个cookie 其实节省不了多少带宽，当流量如facebook twitter 时，节省下来就很可观了。

　　4. 节约主域名的连接数，优化页面响应速度

　　5. 防止不必要的安全问题

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

　　　　相同点：都存储在客户端
　　不同点：

1.存储大小

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

2.有效时间

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

3. 数据与服务器之间的交互方式

• cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

8.简述一下src与href的区别

　　1.src用于替换当前元素，href用于在当前文档和引用资源之间确立关系。

　　src-source，指向外部资源位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的

　　资源下载并应用到文档内部，例如js脚本，img图片和frame等元素。

　　<script src="source.js"></script>

　　当浏览器解析到元素时，会暂停其他资源的下载和处理，直到该资源，编译，执行完毕，图片和框架也是如此，类似将所指向资源嵌入标签内，这也是为什么js放在底部而不是头部。

　　2.href - Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档之间的链接，如果我们在文档中添加

　　<link href="css.css" rel="stylesheet"/>

　　href 目的不是为了引用资源，而是为了建立联系，让当前标签能够链接到目标地址。

　　那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

9.如何理解语义化

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