前端基础问题整理-HTML相关

时间 2019-12-06

标签前端基础问题整理 html 相关栏目 HTML 繁體版

原文原文链接

`DOCTYPE`的做用以及常见的`DOCTYPE`类型

<!DOCTYPE>声明位于文档中的最前面的位置,处于 <html> 标签以前,用来告知浏览器页面目前的文件是用哪一种版本的HTML(或XML)撰写。css

常见类型

HTML 5
<!DOCTYPE html>html

HTML 4.01
三种文档类型:Strict、Transitional、Frameset。前端

XHTML 1.0
三种XML文档类型:Strict、Transitional、Frameset。web

浏览器标准模式和怪异模式之间的区别

标准模式:严格遵循W3C标准来呈现网页的渲染模式。ajax
怪异模式:兼容旧版本浏览器,不会严格遵循W3C标准的网页的一种渲染模式chrome

每一个HTML文档的首行都是一个文档声明,这种文档声明是用来表示后面的那些个页面标签遵循哪个原则的,这是HTML5的文档类型声明：浏览器

<!DOCTYPE html>

这个是XHTML 1.0严格模式的文档类型声明：服务器

<!DOCTYPE html PUBLIC "-//W3C//DTD *XHTML 1.0* Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

保留文档类型声明主要是历史缘由,没有文档声明的话大多数浏览器都将会转换到为怪异模式(quirk mode),这种模式下浏览器会以老版本的浏览器使用的规则来渲染页面,而且不一样浏览器的怪异模式仍是不同的,咱们在平时码代码时应该尽可能回避这种错误。cookie

在添加了文档类型声明以后,浏览器使用的就是标准模式(standard mode),这种状况下浏览器会用W3C的标准来渲染网页。网络

附上两篇
Mozilla Quirks Mode Behavior
怪异模式（Quirks Mode）对 HTML 页面的影响

`HTML`和`XHTML`有什么区别?

XHTML中的标签都必须被正确地嵌套,HTML中的某些标签能够彼此不正确的嵌套。
XHTML中的全部标签必需要关闭。
XHTML中规范定义：标签名和属性对大小写敏感,全部XHTML标签名必须用小写字母。
XHTML文档必须拥有根元素。
XHTML中标签的属性值要使用双引号"。

若是页面使用`'application/xhtml+xml'`会有什么问题吗？

使用xhtml,页面结构中必须包含head标签,而且每一个标签结构都要关闭,包括空标签。全部标签都要小写。使用了'application/xhtml+xml'以后,部分老浏览器不会支持。

使用`data-`属性的好处是什么？

经过data-能够自定义属性,能够经过HTMLElement.dataset获取这些属性的值,data-中-后接自定义属性的名字,例如data-url。实际开发中能够利用这一点在生成DOM结构时把数据储存在自定义属性中,经过一系列交互操做,能够再得到这些数据,而不用再去ajax去后台取得数据。

`cookies`、`sessionStorage`和`localStorage`的区别。

sessionStorage和localStorage是web storage的两种储存方式,其中sessionStorage是会话级别储存,在浏览器或页面关闭时数据就会销毁,而localStorage是持久化的本地储存,不刻意去删除数据,数据是不会销毁的。以上这两种方式只是客户端的储存,不会涉及到服务器储存。与之相比,每次发送HTTP请求时会将cookie添加到Cookie头字段,发送给服务器。

在储存量方面也有差别,单个cookie保存的数据不能超过4K,而localStorage和sessionStorage通常有5-10M。

除此以外,每一个域名下cookie的个数会有限制,依据浏览器不一样会有不一样,而localStorage数量是无限制的。

`<script>`、`<script async>`和`<script defer>`的区别

<script>加载js文件会阻塞页面的渲染和交互,而<script async>和<script defer>都是异步加载js文件,期间不会才生阻塞,区别在于<script async>是加载完以后自动执行,<script defer>须要等到页面加载以后再执行。

为何一般将`css`的`<link>`放置在`<head></head>`之间,而将`js`的`<script>`放置在`</body>`以前?有哪些例外吗?

浏览器在处理HTML页面渲染和JavaScript脚本执行的时候是单一进程的,因此在当浏览器在渲染HTML遇到了<script>标签会先去执行标签内的代码(若是是使用src属性加载的外链文件,则先下载再执行),在这个过程当中,页面渲染和交互都会被阻塞。因此将<script>放在</body>以前,当页面渲染完成再去执行<script>。

通常但愿DOM还没加载必须须要先加载的js会放置在<head>中,有些加了defer、async的<script>也会放在<head>中。

渐进加强 (progressive enhancement) 和优雅降级 (graceful degradation) 的区别

渐进加强: 先保证低版本浏览器的基本功能,再去兼容高版本浏览器效果和交互。
优雅降级: 先保证高版本浏览器的效果和交互等,再去兼容低版本的浏览器。

白屏和FOUC (无样式内容闪烁)是什么?如何来避免?

白屏与无样式内容闪烁(FOUC)是由于不一样浏览器加载与显示页面的机制不一样而形成的。

当把css样式放在底部或者使用@import方式引入样式时

一些浏览器例如chrome,他的加载和渲染机制是等css所有加载解析完后再渲染展现页面,而这个等待的时间就为白屏。
另外一些浏览器例如Firefox,他会在css未加载前先展示页面,等css加载后再重绘一次,这就形成了FOUC (无样式内容闪烁)。

因此为了不这些问题,最好使用LINK标签将样式表放在文档的HEAD中。

相关问题以及资料从网络查阅,本文用于本身扎实前端基础,若有错误欢迎指出。

前端基础问题整理-HTML相关

DOCTYPE的做用以及常见的DOCTYPE类型

常见类型

浏览器标准模式和怪异模式之间的区别

HTML和XHTML有什么区别?

若是页面使用'application/xhtml+xml'会有什么问题吗？

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

cookies、sessionStorage和localStorage的区别。

<script>、<script async>和<script defer>的区别

为何一般将css的<link>放置在<head></head>之间,而将js的<script>放置在</body>以前?有哪些例外吗?