HTML、CSS、JavaScript基础知识总结

南派三叔
248 阅读9分钟

最近在一些博客上看到说：老前端在基础知识上也翻车了。

所以抱着学习的目的来收集总结以下问题：

HTML相关

  1. DTD是什么？什么是怪异模式？什么是标准模式？二者有什么差别？产生的历史原因是什么？使用时需要注意什么？ DTD全名Document Type Definition,意思为“文档类型定义”。 有两个作用，第一个可以帮助编写合法的代码，第二个让浏览器正确显示代码。 DTD应该放在每一个文档的第一行，这样才能告诉浏览器用的语言。

W3C在创立网络规则时，为了不破坏已有的网页网站标准（主要指网景与微软两大类型浏览器标准），所以出现了两种模式，用以把能符合新规范的网站和老旧网站区分开。

目前浏览器的排版引擎使用三种模式：怪异模式（Quirks mode）、接近标准模式（Almost standards mode）、以及标准模式（Standards mode）。在怪异模式下，排版会模拟 Navigator 4（网景） 与 Internet Explorer 5（微软） 的非标准行为。为了支持在网络标准被广泛采用前，就已经建好的网站，这么做是必要的。在标准模式下，行为即（但愿如此）由 HTML 与 CSS 的规范描述的行为。在接近标准模式下，只有少数的怪异行为被实现。

更多在MDN

  1. HTML5是什么？如何理解语义化？新增语义化标签有哪些？新增表单元素？新增属性/功能？
  • HTML5 是对HTML 标准的第五次修订。其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。
  • 语义化标签article、nav、header、aside、main、footer、section等
  • 新增表单元素：datalist表单可选值、output输出框、keygen表单键对生成器
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" name="b" value="50" /> +
    <input type="number" name="a" value="10" /> =
    <output name="result"></output>
</form>
  • 新增localStorage、sessionStorage浏览器缓存、新增history对象
  1. meta viewport是做什么用的，怎么写？ meta viewport 是用于适配移动设备的，为了使不管是什么宽度的页面都能在移动设备端得到完美适配（不需要用户缩放和滚动横向滚动条并且字体图片等显示正常）。
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  1. data-* 的作用以及怎么用？ 是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本在 HTML 与 DOM 表现之间进行专有数据的交换。
<div data-user='zhang' id="user"></div>
user.dataset.user==='zhang' //true
  1. <script async>与<script defer>区别

JS 的脚本加载(fetch)且执行(execution)会阻塞 DOM 的渲染，因此 JS 一般放到最后头 而 defer 与 async 的区别如下:

相同点: 异步加载 (fetch)。

不同点: async 加载(fetch)完成后立即执行 (execution)； defer 加载(fetch)完成后延迟到 DOM 解析完成后才会执行(execution)**，但会在事件 DomContentLoaded 之前。

  1. 为什么将link放在head中，将script标签放在</body>前？ 把<link>放在<head>中

把<link>标签放在<head></head>之间是规范要求的内容。此外，这种做法可以让页面逐步呈现，提高了用户体验。将样式表放在文档底部附近，会使许多浏览器（包括 Internet Explorer）不能逐步呈现页面。一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。

把<script>标签恰好放在</body>之前

脚本在下载和执行期间会阻止 HTML 解析。把<script>标签放在底部，保证 HTML 首先完成解析，将页面尽早呈现给用户。

例外情况是当你的脚本里包含document.write()时。但是现在，document.write()不推荐使用。同时，将<script>标签放在底部，意味着浏览器不能开始下载脚本，直到整个文档（document）被解析。也许，对此比较好的做法是，<script>使用defer属性，放在<head>中。

  1. FOUC和白屏是什么？

FOUC无样式内容闪烁：一些浏览器例如firefox,页面加载时，页面以样式A进行渲染，页面加载完成时，页面突然以样式B进行渲染，所以导致页面出现页面内容闪烁。（也就是说：CSS未完全加载前，会先渲染显示已经解析的HTML内容，然后CSS完全加载完成后，再次渲染。）

白屏：一些浏览器例如chrome,他的加载和渲染机制是等css全部加载解析完后再渲染展示页面,而这个等待的时间就为白屏。

  1. 浏览器渲染机制
  • 解析 HTML 标签, 构建 DOM 树
  • 解析 CSS 标签, 构建 CSSOM 树
  • 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
  • 在渲染树的基础上进行布局, 计算每个节点的几何结构
  • 把每个节点绘制到屏幕上 (painting)

image.png

CSS

  1. Grid布局

  2. BFC

  3. CSS reset与CSS normalize的区别

reset 的目的，是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性。

normalize 的理念则是尽量保留浏览器的默认样式，不进行太多的重置。 最主要的区别是Normalize.css保留不同浏览器同标签相同的默认值，只重置不同默认样式的差异，可以说css reset的高级版。 相对于普通的css reset，Normalize的的浏览器的兼容性更好，normalize.css支持更多的浏览器（包括手机端）

  1. float有哪些特性
  • 没设置宽度的块元素设置float后宽度会随内容变化而变化
  • 没设置高度的父元素高度会塌陷，可以在父元素添加overflow:hidden
  • 相邻元素会紧跟后面成半包围结构，可以通过clear:both消除半包围

  1. CSS sprites是什么？ CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的 “background-image”，“background- repeat”，“background-position” 的组合进行背景定位。

  2. 字体图标与SVG图标 如何使用SVG图标：

通过svg-sprite-loader内嵌svg标签，require整体引入（减少HTTP请求数），去除默认颜色可配置removingTagAttris去除fill

  1. 浏览器兼容

  • 不同浏览器的默认样式不同，可通过normalize.CSS抹平差异样式；

  • 为某个浏览器单独加样式前缀（效率低），使用css autoPrefixer；

image.png

  1. 浏览器运行机制

segmentfault.com/a/119000001…

  1. 栅格化布局 网页栅格系统：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。 网页栅格系统是从平面栅格系统中发展而来。一般分为12或者24列。

  2. 媒体查询@media 逻辑运算符：not、and、only、, 更多

  3. 什么是渐进增强、优雅降级？ 渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

  1. 伪元素的作用 本意是在不修改DOM的前提下为文档增添内容，但往往在使用中给伪元素的content:''，来添加样式，绘制一些基本图形。

  2. 优化打印样式。

//专门打印用的样式
<link rel="stylesheet" type="text/css" media="print" href="/css/print.css">

  • .打印机样式表中最好不要用背景图片，因为打印机不能打印CSS中的背景。如要显示图片，请使用html插入到页面中。

  • .最好不要使用像素作为单位，因为打印样式表要打印出来的会是实物，所以建议使用pt和cm。

  • .隐藏掉不必要的内容。（@print div{display:none;}）

  • .打印样式表中最好少用浮动属性，因为他们会消失。

  1. 浏览器如何判断某个元素匹配了对应CSS选择器？ 比如:
#wrapper > .child{
    //...
}

浏览器首先将所有包含child的class元素放到一个合集，然后逐级向上层匹配，将ID不为wrapper的元素从合集中剔除，剩下的就是选择器对应的元素了。

  1. 响应式布局与自适应布局的区别 自适应：自己根据屏幕宽度的改变而改变（典型的写法不需要media判断，直接让每个元素通过相对的宽度，比如百分比、vh、em 、rem等来改变容器的大小，文字的大小）

响应式：根据设备的不同而展示不同的效果（典型的写法就是通过media判断，在不同的设备、分辨率下展示不同的页面效果）

  1. 做动画推荐使用translate()而非absolute 使用绝对定位的动画效果会受制于利用像素(px)为单位进行位移，而使用 translate 函数的动画则可以不受像素的影响，以更小的单位进行位移。

另外，绝对定位的动画效果完全使用 CPU 进行计算，而使用 translate 函数的动画则是利用 GPU，因此在视觉上使用 translate 函数的动画可以有比绝对定位动画有更高的帧数。

  1. 高性能动画
  • 首先对需要动画的元素position:absolute脱离文档流
  • CSS使用tranform:translate()、animation动画
  • 通过JS增删className来添加对应元素对应的动画
  • 使用为JS做动画提供的API requestAnimationFrame() 总的来说CSS做动画性能要比JS好

JS

  1. 图片懒加载 主要是监听滚动条滚动事件
<img data-src="/img-1.jpg" alt=""/>
<img data-src="/img-2.jpg" alt=""/>

window.onscroll=function(){
    loadImg()
}

当图片即将进入页面可视区域时，再去加载图片 imgBoundTop=imgEle.getBoundingClientRect().top获取元素的相对于网页视口的top值与网页的clientHeight相比较，如果top<=clientHeight，则去加载图片。

let img=document.querySelector('img')
let clientHeight=document.documentElement.clientHeight
function loadImg(){
    for(let i in img){
        imgBoundTop=img[i].getBoundingClientRect().top
        if(imgBoundTop<=clientHeight){
           img[i].src=img[i].dataset.src
           img.splice(i,1)
           i-=1
        }
    }
}
  1. 斐波那契实现及优化

segmentfault.com/a/119000000…

未完待续。。。

avatar
文章
阅读
粉丝