大前端——知识点回顾（HTML）

HTML

一、浏览器的标准模式和怪异模式？

标准模式：浏览器按W3C标准解析执行代码；

怪异模式：使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以称之为怪异模式
区别是：

1. 盒模型：
   在怪异模式下，盒模型为IE模型，即 box-sizing:border-box;
   在标准模式下，盒模型为标准盒子模型，即 box-sizing: content-box;

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

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

解决方案：

在.html头部加上代码

声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式，进入标准模式

二、xhtml和html,html5的区别

html:超文本标记语言
xhtml:可扩展超文本标记语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。
h5:最新一代的超文本标记语言

xhtml

XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

h5新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

三、使用data-的好处

在所有 HTML 元素上嵌入自定义 data 属性
存储页面或应用程序的私有自定义数据
data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格
可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过 getAttribute方法获取

data-user_list自定义属性 
var content= document.getElementById('content');
console.log(content.dataset.userList) // user_list
console.log(content.getAttribute('data-user-list'));

四、meta标签有哪些用途？

浏览器字符编码使用utf-8

主要是让移动端页面的宽等于设备宽，用户不可自己缩放，初始缩放比是1

五、IE6 bug，和一些定位写法
1、IE6双倍margin

当页面上的元素使用float浮动时，该元素margin都会乘以2

解决:

这个BUG就需要在该元素中加入display:inline 或 display:block 明确其元素类型即可解决双倍边距的BUG

2、IE6中3像素问题及解决办法

当元素使用float浮动后，元素与相邻的元素之间会产生3px的间隙。

解决:

这类BUG的话，需要使布局在同一行的元素都加上float浮动。

3、IE6中图片链接的下方有间隙

IE6中图片的下方会存在一定的间隙，尤其在图片垂直挨着图片的时候，即可看到这样的间隙。

解决:

此类问题，需要将img标签定义为display:block 或定义vertical-align对应的属性。也可以为img对应的样式写入font-size:0

4、IE6下空元素的高度BUG

如果一个元素中没有任何内容，当在样式中为这个元素设置了0-19px之间的高度时。此元素的高度始终为19px。

解决的方法有四种:

1. 在元素的css中加入：overflow:hidden
2. 在元素中插入html注释：
3. 在元素中插入html的空白符： 
4. 在元素的css中加入：font-size:0

六、什么是渐进式渲染

指浏览器不用等待所有页面资源都渲染好之后再呈现给用户看，而是边下载边渲染，所以用户打开一个网页的时候往往不能第一时间看到所有的内容，但是能够看到一个大概的样子，后续的内容浏览器会慢慢补上形成一个完整的页面。

其实就是为了解决js加载时间的问题。

怎么实现：

需要服务器端渲染SSR，流行的vue，react都有SSR解决方案。
进行首屏渲染，直接返回json和页面

为何需要服务器端渲染？

解决SEO问题：纯前端的项目，由于需要页面加载完成后再去拉取数据进行渲染，大部分搜索引擎没法读取页面内容。特别是SPA项目，更是无法读取到每个路由页面的页面Tite。
首屏渲染速度：纯前端项目，先要加载Js，再通过Js去加载数据，这两部分网络传输都需要时间，所以难以避免出现页面白屏时间，体验不友好。