html面试总结-CSDN博客

本文链接：https://blog.csdn.net/Li_xiaodian/article/details/79228312

1.doctype的作用是什么？

声明文档的解析类型(document.compatMode)，目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档避免浏览器的怪异模式。没有DOCTYPE的声明，那么compatMode默认就是BackCompat(怪异模式)，

2标准模式，接近标准模式，怪异模式的区别？

在标准模式页面按照HTML,CSS的定义渲染，而在怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计，并未严格遵循W3C标准而产生的一种页面渲染模式。

（1 ）盒模型：

（2）图片元素的垂直对齐方式：

对于inline元素和table-cell元素，标准模式下vertical-align属性默认取值为baseline，在怪异模式下，table单元格中的图片的vertical-align属性默认取值为bottom，因此在图片底部会有及像素的空间。

（3）<table>元素中的字体：

CSS中，对于font的属性都是可以继承的，怪异模式下，对于table元素，字体的某些元素将不会从body等其他封装元素中继承得到，特别是font-size属性。

（4）内联元素的尺寸：

标准模式下，non-replaced inline元素无法自定义大小，怪异模式下，定义这些元素的width，height属性可以影响这些元素显示的尺寸。

（5）元素的百分比高度：

a：CSS中对于元素的百分比高度规定如下：百分比为元素包含块的高度，不可为负值，如果包含块的高度没有显示给出，该值等同于auto，所以百分比的高度必须在父元素有高度声明的情况下使用。

b：当一个元素使用百分比高度时，标准模式下，高度取决于内容变化，怪异模式下，百分比高度被正确应用。

（6）元素溢出的处理：

标准模式下，overflow取默认值visible，在怪异模式下，该溢出会被当做扩展box来对待，即元素的大小由其内容决定，溢出不会裁减，元素框自动调整，包含溢出内容。

3.HTML和XHTML的区别？

XHTML 是更严格更纯净的 HTML 代码，指可扩展超文本标签语言，是一个 W3C 标准

HTML 是用来描述网页的一种语言，指的是超文本标记语言，是一套标记标签

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭

标签名必须用小写字母。

XHTML 文档必须拥有根元素

4.服务器返回application/xhtml+xml格式的页面有什么问题？

是XHTML系列文档的类型，要求比较严格，必须有head、body标签且每个元素必须是关闭的。一些老的浏览器不支持

5.cookie,sessionStorage以及localStorage有什么不同？

答： sessionStorage、localStorage、cookie都是在浏览器端存储的数据有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。 sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可用于web请求之间保存数据。 ① session保存在服务器，客户端不知道其中的信息，数据可以保存在集群、数据库、文件中；cookie保存在客户端，服务器能够知道其中的信息； ② session中保存的是对象，cookie中保存的是字符串； ③ session不能区分路径，同一个用户在访问一个网站期间，所有的session在任何一个地方都可以访问到。而cookie中如果设置了路径参数，那么同一个网站中不同路径下的cookie互相是访问不到的； ④ session 的运行依赖 session id，而 session id 是存在 cookie 中的，也就是说，如果浏览器禁用了 cookie ，同时 session 也会失效； ⑤ 单个cookie在客户端的限制是3K；

① cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存； ② cookie不是很安全。 ③ cookie储存的数据小；4k－5M ④ 数据有效期不同，localStorage始终有效； ⑤ 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的； ⑥ sessionStorage和localStorage接口更多。

6.<script>,<script async>以及<script defer>的不同？

浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前，不等待后续加载的文档元素，读到就开始加载和执行，此举会阻塞后续文档的加载；

有了async(并行异步)属性，表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行；------加载完就执行

有了defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本的执行需要等到文档所有元素解析完成之后，DOMContentLoaded事件触发执行之前；虽然异步但是按顺序，按加载顺序执行脚本

7.使用data-*属性的好处是什么？

用于存储页面或应用程序的私有自定义数据，存储的（自定义）数据能够被页面的 JavaScript 中利用，

属性名不应该包含任何大写字母，并且在前缀data-`` 之后必须有至少一个字符属性值可以是任意字符串data-* ```属性是 HTML5 中的新属性。

<element data-*="somevalue"> dataset属性存取data-*自定义属性的值data 去掉，后变大写。只有在Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+浏览器中实现

使用attribute方法可以存取 data-* 自定义属性的值

8.为什么说把CSS <link>标签放在<head></head>标签里，把<script>正好放在</body>的前面是个好的主意？你知道哪些例外情况吗？

css和JavaScript不一定写在head里比较好，我习惯于单独设立css和js文件，把代码写在里面，这样方便查找和管理
而css和js的引用位置是放在头部还是尾部取决于一个加载顺序
当加载头部以后会同步加载头部中引用的文件，而css样式表在这里加载会规定网页的总体样式
js如果需要先加载后运行则写在头里，需要其他内容加载完之后在运行则可以写在尾部。（其他内容加载完再运行）

9.使用过哪些HTML模板语言？

Vue中文本{{}}，使用 v-html 指令用于输出 html 代码，绑定v-bind 指令，{{JavaScript 表达式}},指令是带有 v- 前缀的特殊属性,v-model,|过滤器，

html模板是别人做出来的网页模板 html是一种编程语音

10.什么是渐进式渲染？说一说你所了解的技术？

对渲染进行分割从具体的使用的场景, 不同的 Level 实际上对应不同的页面内容,论坛是一个比较清晰的例子, 想象一个论坛:

网页的静态部分, HTML 固定的内容, 比如导航栏和底部

页面首屏的内容, 比如一个论坛的话题页面首屏看不到的内容, 比如话题下面多少回复切换路由才会显示的页面, 比如导航的另一个页面对于这样的情况, 显然有若干种可行的渲染分割的方案全在客户端渲染

1, 2, 3 在服务端渲染, 4 等到用户点击从浏览器抓
1, 2 在服务器渲染, 评论由客户端加载
只有 1 在服务端渲染,动态的数据全部由客户端抓取.
而这些方案对于服务端来说, 性能的开销各不相同, 形成一个梯度,
而最后一种情况,服务端预编译页面就好了, 几乎没有渲染负担.根据实际的场景, 可以有更多 Level 可以设计.. 只是没这么简单罢了

个人博客： https://lixiaoyu2017.github.io/