02HTML和CSS知识总结

Posted 2020-11-26 yujiao-99

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了02HTML和CSS知识总结相关的知识，希望对你有一定的参考价值。

[目录]

1、如何理解html结构的语义化？

html 语义化主要指的是我们应该使用合适的标签来划分网页内容的结构。html 的本质作用其实就是定义网页文档的结构，一个语义化的文档，能够使页面的结构更加清晰，易于理解。这样不仅有利于开发者的维护和理解，同时也能够使机器对文档内容进行正确的解读。比如说我们常用的 b 标签和 strong 标签，它们在样式上都是文字的加粗，但是 strong 标签拥有强调的语义。对于一般显示来说，可能我们看上去没有差异，但是对于机器来说，就会有很大的不同。如果用户使用的是屏幕阅读器来访问网页的话，使用 strong 标签就会有明显的语调上的变化，而 b 标签则没有。如果是搜索引擎的爬虫对我们网页进行分析的话，那么它会依赖于 html 标签来确定上下文和各个关键字的权重，一个语义化的文档对爬虫来说是友好的，是有利于爬虫对文档内容解读的，从而有利于我们网站的 SEO 。从 html5 我们可以看出，标准是倾向于以语义化的方式来构建网页的，比如新增了 header 、footer 这些语义标签，删除了 big 、font 这些没有语义的标签。（去掉样式或样式丢失的时候能让页面呈现清晰的结构）

（html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不能认为这是html的表现，这些其实是html默认的css样式在起作用，所以去掉样式或样式丢失的时候能让页面呈现清晰的结构不是语义化的有点，但是浏览器都有默认的样式，默认样式的目的也是为了更好的表达html的语义可以说浏览器的默认样式和语义化的html结构是不可分割的)

2、以前端角度出发做好SEO需要考虑什么？

了解搜索引擎如何抓取网页和如何索引网页
meta标签优化
如何选取关键字并在网页中放置关键字
了解主要的搜索引擎
主要的互联网目录
按点击付费的搜索引擎
搜索引擎登录连接交换和连接广泛度
合理的标签使用

3、有哪些方式可以对一个DOM设置它的CSS样式？

外部样式表:引入一个外部CSS文件
内部样式表：将CSS代码放在<head>标签内部
内联样式：将CSS样式直接定义在HTML元素内部

4、CSS都有哪些选择器？

派生选择器（用HTML标签声明）
ID选择器（用DOM的ID声明）
类选择器（用一个样式类声明）
属性选择器（用DOM的属性声明，属于CSS2，IE6不支持，不常用）

除了前三种基本选择器，还有一些扩展选择器，包括：

???后代选择器（利用空格间隔，比如div .a{ }）
???群组选择器（利用逗号jange，比如p,div,#a{ }）

5、CSS选择器的优先级是怎么样的？

DI选择器>类选择器>标签选择器
复杂的计算方法：

用1表示派生选择器的优先级，用10表示类选择器的优先级，用100表示ID选择器的优先级

//例子
//div.test .span var   优先级为：1+10   +10   +1
//span#xxx  .songs  li 优先级为：1+100   +10   +1

//下列代码<p>标签内的文字是什么颜色的？
<style>
    .classA{
        color:blue;
    }
    .classB{
        color:red;
    }
</style>
<body>
    <p class=‘classB classA‘> 123 </p>
</body>
//答案：red，后面的样式覆盖前面的样式

6、CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

最基本的：设置display属性为none，或者设置visibility属性为hidden
技巧性：设置宽高为0，设置透明度为0，设置z-index位置在-1000

7、超链接访问过后hover样式就不出现的问题是什么？怎么解决？

被点击访问过后的超链接样式不再具有hover和active了，解决办法是改变CSS属性的排列顺序：L-V-H-A（link，visited，hover，active）

8、什么是CSS Hack？

针对不同的浏览器写不同的CSS code的过程，就是CSS hack

//实例如下：
#test{
    width:300px;
    height:300px;
    background-color:blue;              /*firefox*/
    background-color:red9;             /*all ie*/
    background-color:yellow;            /*ie8*/
    +background-color:pink;             /*ie7*/
    _background-color:orange;           /*ie6*/
}
    :root #test {background-color:purple9;}        /*ie9*/
@media all and (min-width:0px){#test {background-color:black;}}     /*opera*/
}

9、什么是文档的预解析？（浏览器的解析过程）

webkit和Firefox都做了这个优化，当执行javascript脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。需要注意的是，预解析并不改变DOM树，它将这个工作留给主解析过程，自己直解析外部资源的引用，比如外部脚本、样式表及图片

10、CSS如何阻挡文档解析？（浏览器解析过程）

理论上，既然样式表不改变 DOM 树，也就没有必要停下文档的解析等待它们，然而，存在一个问题，JavaScript 脚本执行时可能在文档的解析过程中请求样式信息，如果样式还没有加载和解析，脚本将得到错误的值，显然这将会导致很多问题。
所以如果浏览器尚未完成 CSSOM 的下载和构建，而我们却想在此时运行脚本，那么浏览器将延迟 JavaScript 脚本执行和文档的解析，直至其完成 CSSOM 的下载和构建。也就是说，在这种情况下，浏览器会先下载和构建 CSSOM，然后再执行 JavaScript，最后再继续文档的解析。

11、渲染页面时常见哪些不良现象？（浏览器渲染过程）

FOUC：主要指的是样式闪烁的问题，由于浏览器渲染机制（比如firefox），在 CSS 加载之前，先呈现了 HTML，就会导致展示出无样式内容，然后样式突然呈现的现象。会出现这个问题的原因主要是 css 加载时间过长，或者 css 被放在了文档底部。
白屏：有些浏览器渲染机制（比如chrome）要先构建 DOM 树和 CSSOM 树，构建完成后再进行渲染，如果 CSS 部分放在 HTML 尾部，由于 CSS 未加载完成，浏览器迟迟未渲染，从而导致白屏；也可能是把 js 文件放在头部，脚本的加载会阻塞后面文档内容的解析，从而页面迟迟未渲染出来，出现白屏问题。

12、如何优化关键渲染路径？（浏览器渲染过程）

为尽快完成首次渲染，我们需要最大限度减小以下三种可变因素：

关键资源的数量：关键资源是可能阻止网页首次渲染的资源。这些资源越少，浏览器的工作量就越小，对 CPU 以及其他资源的占用也就越少
关键路径长度：关键路径长度受所有关键资源与其字节大小之间依赖关系图的影响：某些资源只能在上一资源处理完毕之后才能开始下载，并且资源越大，下载所需的往返次数就越多
关键字节的数量：浏览器需要下载的关键字节越少，处理内容并让其出现在屏幕上的速度就越快。要减少字节数，我们可以减少资源数（将它
们删除或设为非关键资源），此外还要压缩和优化各项资源，确保最大限度减小传送大小

优化关键渲染路径的常规步骤如下：

对关键路径进行分析和特性描述：资源数、字节数、长度
最大限度减少关键资源的数量：删除它们，延迟它们的下载，将它们标记为异步等
优化关键字节数以缩短下载时间（往返次数）
优化其余关键资源的加载顺序：您需要尽早下载所有关键资产，以缩短关键路径长度

13、什么是重绘和回流？（浏览器绘制过程）

重绘: 当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的操作，比如 background-color，我们将这样的操作称为重绘
回流：当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局的操作，这样的操作我们称为回流

常见引起回流属性和方法：（任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流）

添加或者删除可见的 DOM 元素
元素尺寸改变——边距、填充、边框、宽度和高度
内容变化，比如用户在 input 框中输入文字
浏览器窗口尺寸改变——resize事件发生时
计算 offsetWidth 和 offsetHeight 属性
设置 style 属性的值
当你修改网页的默认字体时

回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流

常见引起重绘属性和方法：


color	border-style	visibility	background	text-decoration	background-image
bacground-positiong	background-repeat	outline-color	outline	outline-style	border-radius
outline-width	box-shadow	background-size

常见引起回流属性和方法：


width	height	margin	padding	display	border
position	overflow	clientWidth	clientHeight	clientTop	clientLeft
offsetWidth	offsetHeight	offsetTop	offsetLeft	scrollWidth	scrollHeight
scrollTop	scrollLeft	scrollIntoView()	scrollTo()	getComputedStyle()	getBoundingClientRect（）
scrollIntoViewIfNeeded()

14、如何减少回流？（浏览器绘制过程）

使用transform替代top
不要把节点的属性值放在一个循环里当成循环了的变量
不要使用table布局，可能很小的一个小改动会造成整个table的重新布局
把DOM离线后修改。如：使用documentFragment对象在内存里操作DOM
不要一条一条地修改DOMDL 样式。一起这样，还不如预先定义好CSS的class，然后修改DOM的className

15、为什么操作DOM慢？（浏览器绘制过程）

一些DOM的操作或者属性访问可能会引起页面的回流和重绘，从而引起性能上的消耗

16、DOMContentLoad事件和Load事件的区别？

当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像和子框架的加载完成。Load事件是当所有资源加载完成后触发的

17、HTML5有哪些新特性、移除了哪些元素？

HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加

新增的有：

绘画canvas
用于媒介回放的video和audio元素
本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失
sessionStorage的数据在浏览器关闭后自动删除
语义化更好的内容元素，比如：article、footer、header、nav、section
表单控件：calendar、date、time、email、url、search
新的技术：webworker、websocket
新的文档属性：document、visibilityState

移除的元素有：

纯表现的元素：basefont、big、center、font、s、strike、tt、u
对可用性产生负面影响的元素：frame、frameset、noframes

18、如何处理HTML5新标签的浏览器兼容问题？

IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式
当然也可以直接使用成熟的框架，比如 html5shim ; 
[if lte IE 9]……[endif] 判断 IE 的版本，限定只有 IE9 以下浏览器版本需要执行的语句

19、b与strong的区别和i与em的区别是什么？

从页面显示效果来看，被<b>和<strong>包围的文字将会被加粗，而被<i>和<em>包围的文字将以斜体的形式呈现。但是<b><i>是自然样式标签，分别表示无意义的加粗，无意义的斜体，表现样式为{font-weight:bolder}，仅仅表示“这里该用粗体显示”或者“这里该用斜体显示”，此两个标签在HTML4.01中并不被推荐使用。而<em>和<strong>是语义样式标签。<em>表示一般的强调文本，而<strong>表示比<em>语义更强调文本。使用阅读设备阅读网页时：<strong>会重读，而<b>是展示强调内容

20、前端需要注意哪些SEO？

合理的title、description、keyword：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词不出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度适合，不可过分堆砌关键词，不同页面description有所不同；keyword列举出重要关键词即可
语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
重要内容HTML代码放在最前：搜索引擎榨取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容肯定被抓取
重要内容不要用js输出：爬虫不会执行js获取内容
少用iframe:搜索引擎不会抓取iframe中的内容
非装饰性图片必须加alt
提高网站速度：网站速度是搜索引擎排序的一个重要指标

21、HTML5的离线存储怎么使用，工作原理是什么？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件

原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制（不是存储技术），通过这个文件上的解析清单利息那存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被利息那存储的数据进行页面展示。
如何使用：

创建一个和html同名的manifest文件，然后在页面头部像下面一样加入manifest的属性<html lang="en" manifest="index.manifest">
在如下cache.manifest文件的编写离线存储的资源

CACHE MANIFEST
   	#v0.11
   	CACHE:
   	js/app.js
   	css/style.css
   	NETWORK:
   	resourse/logo.png
   	FALLBACK:
   	/ /offline.html
   	
   	// CACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来
   	//NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高
   	// FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问 offline.html

在离线状态时，操作window.applicationCache进行离线缓存的操作

如何更新缓存：

更新 manifest 文件
通过 javascript 操作
清除浏览器缓存

注意事项：

浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）
如果 manifest 文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存
引用 manifest 的 html 必须与 manifest 文件同源，在同一个域下
FALLBACK 中的资源必须和 manifest 文件同源
当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源
站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问
当 manifest 文件发生改变时，资源请求本身也会触发更新

22、浏览器是怎么对HTML5的利息那存储资源尽心管理和加载的呢？

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问 app ，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储
离线的情况下，浏览器就直接使用离线存储的资源

23、常见的浏览器端的存储技术有哪些？

浏览器常见的存储技术有 cookie、localStorage 和 sessionStorage
还有两种存储技术用于大规模数据存储，webSQL（已被废除）和 indexDB
IE 支持 userData 存储数据，但是基本很少使用到，除非有很强的浏览器兼容需求。

24、iframe有哪些缺点？

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）
主要缺点有：

iframe 会阻塞主页面的 onload 事件。window 的 onload 事件需要在所有 iframe 加载完毕后（包含里面的元素）才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态设置 iframe 的 src 可以避免这种阻塞情况
搜索引擎的检索程序无法解读这种页面，不利于网页的SEO
iframe和主页面共享连接池，二浏览器对相同域的连接有限制，所以会影响页面的并行加载
浏览器的后退按钮失效
小型的移动设备无法完全显示框架

25、 Label 的作用是什么？是怎么用的？

label 标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上

//例如：
 <label for="Name">Number:</label>
 <input type=“text“ name="Name" id="Name"/>

26、HTML5 的 form 的自动完成功能是什么？

autocomplete 属性规定输入字段是否应该启用自动完成功能。默认为启用，设置为 autocomplete=off 可以关闭该功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。autocomplete 属性适用于

，以及下面的类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

27、如何实现浏览器内多个标签页之间的通信?

实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信，因此我们可以找一个中介者，让标签页和中介者进行通信，然后让这个中介者来进行消息的转发

第一种实现的方式是使用 websocket 协议，因为 websocket 协议可以实现服务器推送，所以服务器就可以用来当做这个中介者。标签页通过向服务器发送数据，然后由服务器向其他标签页推送转发
第二种是使用 ShareWorker 的方式，shareWorker 会在页面存在的生命周期内创建一个唯一的线程，并且开启多个页面也只会使用同一个线程。这个时候共享线程就可以充当中介者的角色。标签页间通过共享一个线程，然后通过这个共享的线程来实现数据的交换
第三种方式是使用 localStorage 的方式，我们可以在一个标签页对 localStorage 的变化事件进行监听，然后当另一个标签页修改数据的时候，我们就可以通过这个监听事件来获取到数据。这个时候 localStorage 对象就是充当的中介者的角色
第四种方式是使用 postMessage 方法，如果我们能够获得对应标签页的引用，我们就可以使用 postMessage 方法，进行通信

28、webSocket 如何兼容低版本浏览器？

Adobe Flash Socket
ActiveX HTMLFile (IE)
基于 multipart 编码发送 XHR
基于长轮询的 XHR

29、页面可见性（Page Visibility API）可以有哪些用途？

这个新的 API 的意义在于，通过监听网页的可见性，可以预判网页的卸载，还可以用来节省资源，减缓电能的消耗。比如，一旦用户不看网页，下面这些网页行为都是可以暂停的

对服务器的轮询
网页动画
正在播放的音频或视频

30、如何在页面上实现一个圆形的可点击区域？

纯 html 实现，使用 <area>来给 <img> 图像标记热点区域的方式，<map> 标签用来定义一个客户端图像映射，<area> 标签用来定义图像映射中的区域，area 元素永远嵌套在 map 元素内部，我们可以将 area 区域设置为圆形，从而实现可点击的圆形区域。
纯 css 实现，使用 border-radius ，当 border-radius 的长度等于宽高相等的元素值的一半时，即可实现一个圆形的点击区域
纯 js 实现，判断一个点在不在圆上的简单算法，通过监听文档的点击事件，获取每次点击时鼠标的位置，判断该位置是否在我们规定的圆形区域内

参考：https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Html/Html.md

以上是关于02HTML和CSS知识总结的主要内容，如果未能解决你的问题，请参考以下文章

HTML和CSS(部分)知识点总结

Tailwind.css 体验总结

Emmet语法总结