HTML～

qq_40055200

已于 2024-03-10 18:02:51 修改

阅读量3.4k

点赞数 4

文章标签： html javascript firefox 1024程序员节

于 2021-11-11 09:17:16 首次发布

本文链接：https://blog.csdn.net/qq_40055200/article/details/121261187

版权

1.DOCTYPE有什么作用？包标准模式和混杂模式如何区分？它们有什么意义？

告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。标准模式（Standards mode）以浏览器支持最高标准运行。混杂模式中页面是一种比较宽松向后兼容的方式显示。

2.什么是浏览器内核？（考）

总结:浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎主要负责获取页面内容（HTML,CSS,JS,XML，图像）等然后进行解析来渲染网页。渲染引擎决定浏览器如何显示页面,不同浏览器内核不同,对于网页的语法解释也不同，所以显示网页的内容以及页面格式信息也就不同。

Trident：代表作是IE,俗称IE内核；使用IE内核的浏览器包括、傲游、世界之窗、百度浏览器、兼容模式的浏览器等
Webkit内核：代表作Safari,旧版的Chorme
Blink内核：Chorme,Opera
Gecko内核：代表作Firefox

CSDN

4.对HTML语义化的理解

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。

语义化的优点如下：

1、样式丢失、页面呈现清晰的结构
2、爬虫依赖、确定上下文和各个关键字的权重(爬虫很大程度上忽略用于表现的标记、而只注重语义标记)
3、便于团队开发和维护

HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;易于后期维护
利于SEO优化、爬虫依赖于HTML标记来确定上下文和各个关键字的权重
即使在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的;

5.你能描述一下渐进增强和优雅降级之间的不同吗?

渐进增强：针对低版浏览器进行页面构建、保证最基本的功能、在针对高级浏览器进行效果、交互等改进和追加功能以达到更好的用户体验
优雅降级：一开始就构建完整的功能、然后再针对低版浏览器进行兼容
区别：
优雅降级针对高级浏览器做开发、对低版本浏览器减少用户体验供给的方案(低版本浏览器给予简陋却无妨的浏览体验)
渐进增强以基础开始、对不同的浏览器不断的扩充功能以适应未来的环境需求

6.为什么利用多个域名来存储网站资源会更有效？

因为同一时间针对同一域名下的请求有一定数量限制。超过限制数目请求会被堵塞，因此需要使用多个域名来存储网站资源

突破浏览器并发限制
因为在:同一时间针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞\因此需要使用多个域名来存储网站资源
节约cookie带宽
CDN缓存更方便
解决主域名的连接数、优化页面响应速度
防止不必要的安全问题
 
新的浏览器加大了并发数的限制，但却仍控制在8以内。
IE6、7\HTTP1.1和HTTP1.0 限制为2和4
HTTP/2.0
1、提升网站访问速度
2、降低服务器压力
3、部分替代异步加载的使用
4、保护网站安全(HTTP/2.0现阶段必须使用https)

7.script标签中defer和async的区别（考）

script 标签的 defer 与 async 属性_script的async和defer_mrlmx的博客-CSDN博客

如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

下图可以直观的看出三者之间的区别:

8.HTML5的离线储存怎么使用，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)
通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。
之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
如何使用：
1、页面头部像下面一样加入一个manifest的属性；
2、离线存储的manifest一般由三个部分组成:
1.CACHE:表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
2.NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。
3.FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html。
![enter description here][1]
[有趣的HTML5：离线存储](https://segmentfault.com/a/1190000000732617)

9.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

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

10.如何实现浏览器内多个标签页之间的通信? (阿里)

调用localstorge、cookies等本地存储方式

11.HTML5的form如何关闭自动完成功能？

action:表单提交目标的url,当用户提交表单时，浏览器会将表单数据发送到url
method:提交时所用的http方法，通常是get或者post
target:表单提交后服务器响应位置，_blank新窗口打开
name:表单名称
autocomplete:是否自动填充
enctype:提交前浏览器进行编码
novalidate:阻止浏览器对表单数据进行验证
onsubmit:提交表单时触发

<form action="sumbit-form.php" method="post" target="_blank" name="myform" autocomplete="on" enctype="multipart/form-data" novalidate onsubmit="return validateForm()"/>

12，一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。（考）

CSSsprite（css精灵图）、Base64、压缩图片、懒加载、WebP格式、图片预加载、

为什么需要精灵图？

精灵图是将多个小图标或图片合并成一张大图，在页面加载时只需要请求一次该大图，然后使用CSS的背景定位来显示所需的小图标。这样可以减少请求次数，提高加载速度。

好处：可以减少 HTTP 请求的数量，从而减少了网络传输的时间。减小图片文件的总体积，因为多个小图标合并在一张大图中，可以减少每个图标的头部信息和压缩算法带来的开销

缺点：

图片文件比较大
图片本身放大和缩小会失真
排版不容易控制

base64

将图片数据编码成一段字符串，使用该字符串代替图像地址

减少HTTP请求：将图片嵌入到 HTML 或 CSS 文件中，可以减少对服务器的 HTTP 请求次数，从而加快网页加载速度
简化文件管理：图片以 Base64 编码形式直接嵌入到代码中，不需要单独管理图片文件，方便维护和部署。
提高页面性能：减少外部资源请求可以降低页面加载时间，从而改善用户体验和提高页面的整体性能

压缩图片

好处：减少图片文件大小；加快网页加载速度，提升页面性能和用户体验。

坏处：图片质量受损

压缩图片后会改变分辨率吗

在压缩图片时，压缩并不会改变图像的分辨率（即图像的宽度和高度）。压缩主要是通过减少图像文件的大小来降低图像的质量，而不会改变图像的实际分辨率。

懒加载：

lazyload的核心是按需加载

前端加载大图片的解决方案汇总

图片压缩：将图片进行压缩，可以减小图片大小，从而缩短加载时间。但要注意图片质量，不要过分压缩导致图片失真。
图片分割：将超大图片分割成多个小图进行加载，从而加快加载速度。这种方式需要在前端进行图片拼接，需要确保拼接后的图片无缝衔接。
CDN加速：使用 CDN 将图片缓存在附近的节点上，以便快速访问。
懒加载：也就是一种图片延迟加载的方式，即当用户浏览到需要加载的图片时才进行加载，可以有效避免一次性加载大量资源导致页面加载过慢。
WebP 格式：使用 WebP 格式可以将图片大小减小到 JPEG 和 PNG 的一半以下，从而加快图片加载速度。
HTTP/2 : 使用 HTTP/2 协议可以并行加载多个图片，从而加快页面加载速度
预加载：是在页面加载完成之后，提前加载下一步所需要的资源，以便用户快速浏览。

13.知道的网页制作会用到的图片格式有哪些？

png、jpg、jpg、svg、Webp、fig、
在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%

14.常见浏览器内核有哪些？

1.Trident:IE,360,搜狗浏览器

2.Webkit：Safari Chrome

3.Geckos:FireFox Mozilla Suite/SeaMonkey

4.Presto：Opera7及以上(Opera内核原为：Presto，现为：Blink)

15.H5有哪些新特性？移除了哪些元素？如何却分HTML和HTML5？（考）

新增元素

1.canvas(用于绘画)

2.音视频：audio、video

3.本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除

4.表单控件，calendar search datalist datetime output keygen date month week time color number range email url。

5.位置API：Geolocation

6.拖放API：drag、drop

7.语意化标签： article、footer、header、nav、section，aside

8.web worker

移除元素：

纯表现的元素：

big(呈现大号字体效果)

font(规定文本的字体、字体尺寸、字体颜色)

<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>

u(文本添加下划线)

<p>如果文本不是超链接，就不要<u>对其使用下划线</u>。</p>

basefont center s strike tt

性能较差的元素：frame

区分:

DOCTYPE:告诉浏览器用哪个版本的HTML来渲染文档

<header></header>				头标记

<nav></nav>						导航标记，表示页面中导航链接部分

<!--main标记在一个网页中只能有一个，主要内容区域要区别-->
<main></main>					主要内容标记

<selection></selection>			块标记，类似于div，可混合使用

<article></article>				文章标记，与上下文不想关的独立内容，一般作用于文章或报纸里的一篇文章

<!--表示文档主体内容中的一个独立单元，一个figure里只能有一个figcaption，类似于自定义列表dl-->
<figure>						图文标记
	<figcaption></figcaption>	figure的标题
</figure>		

<aside></aside>					侧边栏标记

<footer></footer>				页脚标记

<address></address>				地址标记，文字会变成斜体

<canvas></canvas>				画布标记，必须配合js使用，属于内联块

<mark></mark>					高亮标记，属于内联标记

<time></time>					时间标记，定义日期和时间，属于内联标记

<video></video>					视频标记

<audio></audio>					音频标记，属于内联块

<embed></embed>					插件标记，视频和音频都可以插入

16.cookies,sessionStorage(html5)和localStorage(html5)的区别？（考）

共同点：存储数据，，，都是本地存储

区别：

localStorage长期存储数据，浏览器关闭数据后不丢失，用作长久数据保存；
sessionStorage数据仅在浏览器窗口关闭之前有效，关闭后自动删除；
cookie在设置的cookie过期时间之前一直有效
存储大小的限制不同。cookie保存的数据很小，sessionStorage和localStorage保存数据大
cookie每次都会携带在HTTP头中，即cookies在浏览器和服务器之间来回传递，使用cookie保存过多数据会带来性能问题（cookie是网站为了标识用户身份而存储在用户本地终端（Client Side）上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器之间来回传递）。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存，不参与和服务器的通信(仅在客户端（即浏览器）中保存，不参与和服务器的通信)。----面试不用说，但是要知道
作用域不同。cookie在所有的同源窗口都是共享（不同浏览器、不同窗口中都是共享的：记住密码）；sessionStorage不在不同的浏览器共享，即使同一页面（同一个浏览器、同站点不同窗口中可以共享）；localStorage在所有同源窗口都是共享（仅同一个页面窗口中才能共享：购物车缓存）。----面试不用说，但是要知道

Cookie, LocalStorage 与 SessionStorage-布布扣-bubuko.com

前端如何设置cookie过期时间

document.cookie = newCookie;

用newCookie来设置cookie的一些属性

cookie是存在客户端还是服务端

Cookie是存在客户端的小型文件，用于在用户访问网站时存储特定信息。当用户访问一个网站时，服务器会将包含的一些数据Cookie发送给用户的浏览器，浏览器会将这些 Cookie 保存在用户的计算机上。之后，当用户再次访问该网站时，浏览器会将保存的 Cookie 发送回服务器，从而实现一些个性化设置、用户识别、跟踪等功能。

因此，Cookie 是存储在客户端（用户浏览器）的信息，由服务器生成并发送到客户端，客户端再将其发送回服务器。服务器端可以通过设置响应头中的 Set-Cookie 字段来向客户端发送 Cookie，客户端通过浏览器来存储和管理这些 Cookie。

17. 为什么cookie每次都会携带在HTTP头中？

每次向服务器发送请求时，如果需要包含cookie信息回传，那么这些cookie信息需要包含在请求头(request headers)中。当浏览器向服务器发送请求时，如果在请求中携带了cookie信息，那么在服务器接收请求时，就可以获取到携带的cookie信息并作出相应的响应.服务器利用响应报头set-Cookie来发送信息的因此，每次请求需要将cookie信息包含在请求头中，以确保正确处理请求。

Cookie和Token都存放在Header里面，为什么只劫持前者

Cookie的引用为了解决什么问题

Cookie 是一种通讯协议，用于在客户端和服务器之间传递信息。它是为了解决 HTTP 协议的无状态性而引入的。

在 HTTP 协议中，每次客户端发送请求到服务器时，服务器都无法识别出请求来自于哪个客户端，因为 HTTP 协议本身是无状态的。这导致服务器无法跟踪客户端状态，无法记录客户端的登陆状态、购物车信息等。

为了解决这个问题，Cookie 技术被引入。当客户端第一次请求服务器时，服务器会生成一个名为 Set-Cookie 的响应头，其中包含了客户端需要存储的信息，例如用户的登陆状态、购物车信息等。客户端收到服务器的响应后，会把该信息存储在本地的 Cookie 文件中。之后客户端每次向服务器发送请求时，会自动把 Cookie 文件中的信息发送到服务器端，这样服务器就可以根据 Cookie 文件中的信息来识别客户端，从而保持客户端的状态信息和数据。

因此，Cookie 技术的引入使得客户端和服务器之间可以跟踪客户端的状态和数据，从而实现了一些基础的功能，如登陆状态、购物车等数据的保存与共享，以及用户喜好的记忆等功能。

18.cookie 不设置过期时间，默认过期时间是多少？

关闭浏览器就结束了

19.iframe框架有哪些优缺点？（考）

优点：

iframe能够原封不动的把嵌入的网页展现出来。
如果有多个网页引入iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

缺点：

搜索引擎的爬虫程序无法解读这种页面
框架结构中出现各种滚动条
使用框架结构时，保证设置正确的导航链接
iframe页面会增加服务器的http请求
iframe页面必须先加载这部分内容，加载完成才加载其他的，影响用户体验

20.label的作用是什么？是怎么用的？

<label>标签为input元素定义标注（标记）

<label>标签的for属性应当与相关元素<input>的id属性相同

<label for="male">Male</label>
<input type="radio" name="sex" id="male"/>

注释："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

21.新的HTML5字符集是？

HTML5 使用 UTF-8 编码。

22.HTML5中如何嵌入音频？

audio标签

HTML5 支持 MP3、Wav 和 Ogg 格式的音频，下面是在网页中嵌入音频。

<audio src="htmls/1.mp3"  controls="controls">
你的浏览器不支持video元素
</audio>

src:播放音频的路径
controls:播放按钮
autoplay 自动播放
loop=‘true’ 循环播放
play()开始,pause()暂停

23.HTML5中如何嵌入视频？

video标签

和音频类似，HTML5 支持 MP4、WebM 和 Ogg 格式的视频。

<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>

src:播放音频的路径

controls:播放按钮

preload

24.除了audio和video，HTML5还有哪些媒体标签？

HTML5 对于多媒体提供了强有力的支持，除了 audio 和 video 标签外，标签定义嵌入的内容，比如插件。<embed>

<embed type=”video/quicktime” src=”Fishing.mov”>

对于定义多个数据源很有用。标签为诸如 <track>元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。

<video width=”450″ height=”340″ controls>
     <source src=”W3Cschool.mp4″ type=”video/mp4″>
     <source src=”W3Cschool.ogg” type=”video/ogg”>
     <track kind=”subtitles” label=”English” src=”W3Cschool_en.vtt” srclang=”en” default></track>
      <track kind=”subtitles” label=”Arabic” src=”W3Cschool_ar.vtt” srclang=”ar”></track>
</video>

25.HTML5Canvas元素有什么用？有哪些API？

Canvas 元素用于在网页上绘制图形

属性：

getContext() 这个方法就是绘图的一个属性
beginPath()：起始的一条路径
arc():创建弧，曲线
strock():绘制已定义的路径
fillStyle:用于填充绘画的颜色、渐变或模式
fillRect:绘制"被填充"的矩形
moveTo：移动画笔位置
closePath：结束绘制

常用api

fillRect(x,y,width,height)实心矩形
strockRect(x,y,width,height)空心矩形
fillText("Hello world",200,200):实心文字
strokeText（“Hello world",200,300)空心文字

举例子：

画圆：

<canvas id="myCanvas">
浏览器不支持 HTML5 canvas 标签
</canvas>
<script>
var c = document.getElementById("myCanvas")
var ctx = c.getContext("2d")
ctx.beginPath()
ctx.arc(95,50,40,0,2*Math.PI)
ctx.stroke()
</script>

画矩形：

<canvas id="myCanvas">
浏览器
</canvas>
<script>
var c = document.getElementById('myCanvas')
vat ctx = c.getContext('2d')
ctx.fillStyle = '#FF0000'
ctx.fillRect(0,0,80,100)
</script>

画一条直线

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>

<script>
  // 获取对应的 Canvas 元素
  var canvas = document.getElementById("myCanvas");
  // 获取上下文
  var ctx = canvas.getContext("2d");
  // 开始路径
  ctx.beginPath();
  // 设置起点
  ctx.moveTo(20, 20);
  // 绘制直线到指定点
  ctx.lineTo(180, 80);
  // 设置线条样式
  ctx.lineWidth = 2;
  ctx.strokeStyle = "#000";
  // 描边
  ctx.stroke();
</script>

</body>
</html>

画三角形

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas绘制三角形</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="400" height="300"></canvas>

    <script>
      // 获取Canvas元素
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      // 绘制三角形路径
      ctx.beginPath();
      ctx.moveTo(200, 50); // 第一个点坐标
      ctx.lineTo(100, 250); // 第二个点坐标
      ctx.lineTo(300, 250); // 第三个点坐标
      ctx.closePath(); // 将路径闭合

      // 设置填充颜色
      ctx.fillStyle = "red";

      // 填充三角形
      ctx.fill();

      // 绘制边框
      ctx.strokeStyle = "black";
      ctx.lineWidth = 2;
      ctx.stroke();
    </script>
  </body>
</html>

26.HTML5存储类型有什么区别？

HTML5 能够本地存储数据，在之前都是使用 cookies 使用的。HTML5 提供了下面两种本地存储方案： localStorage 用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失。 sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储

loacalStorage:持久化存储，数据长期存在，只要不手动删除就不会销毁。也就相当于你给小明发语音，小明想什么时候听就可以什么时候听，除非他把你们的聊天记录删掉，才会销毁

sessionStorage:会话存储。就像两个人在谈话，谈话完成就OK了。也就相当于关闭浏览器后，数据也就销毁了

27.HTML5应用程序缓存和浏览器缓存有什么区别？

应用缓存最关键的就是支持离线应用，可获取少数或者全部网站内容，包括 HTML、CSS、图像和 JavaScript 脚本并存在本地。该特性加速了网站的性能，可通过如下方式实现：
<!doctype html>
<html manifest="example.appcache">
.....
</html>
与传统的浏览器缓存比较，该特性并不强制要求用户访问网站。

HTML5中datalist是什么？

HTML5中的Datalist元素有助于提供文本框自动完成特性，如下图所示：

28.请至少写出5个HTML块级元素标签。（考）

div,p,form,table,h1~h6，li，select,ol,ul,dl，dd

29.请至少写出5个行内元素标签。（考）

span,img,input,button,a,label,dt

30.行内元素和块级元素的区别

行内元素不可以设置宽高，不独占一行
块级元素可以设置宽高，独占一行

31.如何给行元素设置宽高 --行内元素设置为块级元素、脱离文档流

1.使用display:

display:block/inline-block/flex/inline-flex

<style>
        * {
            list-style: none;
            border: 0; 
            padding: 0;
            margin: 0
        }
        span { 
            width: 100px;    // 宽
            height: 100px;     // 高
            background: red; 
            text-align: center;
            line-height: 100px;
            display: block/inline-block/flex/inline-flex;     //display
        }
</style>
<span>1</span>

2.使用position

position：absolute/flex

<style>
        * {
            list-style: none;
            border: 0; 
            padding: 0;
            margin: 0
        }
        span {
            width: 100px; 
            height: 100px; 
            background: red; 
            text-align: center;
            line-height: 100px;
            position：absolate/fixed; 
        }
</style>
<span>1</span>

3.使用float

float:left/right

<style>
        * {
            list-style: none;
            border: 0; 
            padding: 0;
            margin: 0
        }
        span {
            width: 100px; 
            height: 100px; 
            background: red; 
            text-align: center;
            line-height: 100px;
            float:left/right; 
        }
</style>
<span>1</span>

效果图：

如何给行内元素设置宽高？ - 坤嬷嬷 - 博客园

32.写出空元素。

33.写出table标签下包含哪些标签元素。

tr,th,td,thead,tfoot,tbody

tr:表格中的行,tr 元素包含一个或多个 th 或 td 元素。

td:代表HTML表格中的一个单元格

th:为表格标题

34.很多网站不用iframe,table这两个元素，为什么？

因为浏览器页面渲染从上向下加载的，用iframe和table这两个标签要先加载这两个标签的内容，加载完成在整体加载然后渲染，用户体验效果不好。

35.至少写出5个HTML5的新标签。

header,footer,nav,section,video

36.a标签在新窗口打开链接怎么加属性。

37.写了2个<a>标签，两个标签之间有空格的情况怎么解决。

将2个<a>标签写在一行里

38.页面导入样式时，link与import的区别。

link方式的样式权重比import的权重高。
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
link支持js可以改变样式，而import不支持

39.如何区分html和html5。

DOCTYPE的声明方式
根据新增加的结构，功能来区分

40.无样式内容闪烁？（FOUC）Flash Of Unstyle Content（考）

FOUC：CSS样式最后才加载出来渲染html,因此会先看到混乱的网页在看到正常的网页

导致原因：

使用import导入样式
将样式表放在页面底部
使用import导入css

解决方法：使用link标签加载CSS样式文件。因为link是顺序加载的，这样的页面会等到CSS加载完成后再下载HTML文件，这样先布局好，然后就不会出现FOUC的问题了。

41.jpg和png的区别。（了解即可）

jpg:是有损所压缩格式，png是无损压缩格式。所以，相同的图片，jpg体积会小。
png:压缩比高，色彩好。
jpg:在www网站，用来存储和传输照片的格式

42.从浏览器地址栏输入url到显示页面的步骤（考）

浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
载入解析到的资源文件，渲染页面，完成。

43.DNS域名解析

详解DNS域名解析全过程_ninghuax的博客-CSDN博客_dns域名解析

44.title与h1的区别，b与strong的区别，i与em的区别

title与h1的区别：

定义：title是网站标题，h1是文章标题

作用：

title概括网站信息，可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的，是显示在网页Tab栏里的；
h1突出文章主题，面对用户，更突出其视觉效果，指向页面主体信息，是显示在网页中的。

b与strong的区别：

定义：b(bold)是实体标签，用来给文字加粗；strong是逻辑标签，作用是加强字符语气。

区别：　

b标签只是加粗的样式，没有实际含义，常用来表达无强调或着重意味的粗体文字，比如文章摘要中的关键词、评测文章中的产品名称、文章的导言；
strong表示标签内字符重要，用以强调，其默认格式是加粗，但是可以通过CSS添加样式，使用别的样式强调。

建议：为了符合CSS3的规范，b应尽量少用而改用strong

i与em的区别

定义：i(italic)是实体标签，用来使字符倾斜；em(emphasis)是逻辑标签，作用是强调文本内容

区别：

i标签只是斜体的样式，没有实际含义，常用来表达无强调或着重意味的斜体，比如生物学名、术语、外来语；
em表示标签内字符重要，用以强调，其默认格式是斜体，但是可以通过CSS添加样式。

建议：为了符合CSS3的规范，i应尽量少用而改用em

45.img标签的title和alt有什么区别？

相同点：它们都会出现一个小浮层，显示图片相关的内容

通俗来讲，alt属性的实质是通过文字来代替图片的内容，而title属性的实质是对图片的描述或者注释。

不同点：

alt属性的特点：

倘若图片加载不成功未能显示出来，就会在图片未显示的地方出现一段文字。这一作用是为了给未加载出来的图片提供信息，方便用户浏览网页，同时也方便开发人员维护网页。
搜索引擎可以通过这个属性的文字描述获取图片

title属性的特点：

title属性可以用在任何元素上，当用户把鼠标移动到元素上时，就会出现title的内容，起到对图片说明的作用，其实质就是对图片的一种备注或者注释

46.input标签

用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

属性：

accept:上传文件的类型
autocomplete（on,off）:规定是否使用输入字段的自动完成功能
autofocus：是否获取焦点
checked：是否被选中
disabled:是否被禁用
height:定义输入框的高度
max:输入字段的最大值
value输入的值
size:该属性规定输入字段的尺寸
require:是否必填

47.div+css的布局较table布局有什么优点？

改版的时候更方便只要改css文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前。

48.前端页面有那三层，分别是什么？作用是什么？

结构层 Html 表示层 CSS 行为层 js。

49.常⽤的meta标签有哪些

meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。

常用的meta标签：

50.表单

表单类型：

email ：能够验证当前输入的邮箱地址是否合法
url ：验证URL
number ：只能输入数字，其他输入不了，而且自带上下增大减小箭头，max属性可以设置为最大值，min可以设置为最小值，value为默认值。
search ：输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化。
range ：可以提供给一个范围，其中可以设置max和min以及value，其中value属性可以设置为默认值
color ：提供了一个颜色拾取器
time ：时分秒
data ：日期选择年月日
datatime ：时间和日期(目前只有Safari支持)
datatime-local ：日期时间控件
week ：周控件
month：月控件

表单属性：

placeholder ：提示信息
autofocus ：自动获取焦点
autocomplete=“on” 或者 autocomplete=“off” 使用这个属性需要有两个前提：
表单必须提交过
必须有name属性。
required：要求输入框不能为空，必须有值才能够提交。
pattern=" " 里面写入想要的正则模式，例如手机号patte="^(+86)?\d{10}$"
multiple：可以选择多个文件或者多个邮箱
form=" form表单的ID"

51.进度条，度量器

progress标签：用来表示任务的进度（IE、Safari不支持），max用来表示任务的进度，value表示已完成多少

meter属性：用来显示剩余容量或剩余库存

high/low：规定被视作高/低的范围
max/min：规定最大/小值
value：规定当前度量值

设置规则：min < low < high < max

52.canvas和svg

画布（canvas ）： canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

<canvas id="myCanvas" width="200" height="100"></canvas>

SVG：SVG 指可伸缩矢量图形，用于定义用于网络的基于矢量的图形，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失，它是万维网联盟的标准
地理定位：Geolocation（地理定位）用于定位用户的位置。‘

53.浏览器乱码的原因是什么？如何解决？

原因：

网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码，反之也会出现乱码；
html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码；
浏览器不能自动检测网页编码，造成网页乱码。

解决办法：

使用软件编辑HTML网页内容；
如果网页设置编码是gbk，而数据库储存数据编码格式是UTF-8，此时需要程序查询数据库数据显示数据前进程序转码；
如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换。

web worker有什么作用？应用场景有哪些？

创建多线程的JS执行环境，从而在后台进行一些耗时的计算而不会堵塞主线程，提高性能和响应速度

// 创建 Worker：
const worker = new Worker('worker.js');

//监听消息：
主线程可以监听 Worker 发送的消息，并进行相应的处理。
worker.onmessage = function(event) {
  console.log('Received message from worker:', event.data);
};


// 发送消息给 Worker：
主线程可以通过 postMessage 方法向 Worker 发送消息。
worker.postMessage('Hello, worker!');

// 关闭 Worker：
当不再需要 Worker 时，可以通过 terminate 方法关闭 Worker。
worker.terminate();

原理

利用浏览器提供的多线程机制，在主线程之外创建一个独立的 JavaScript 执行环境，这个独立的执行环境即为 Worker 线程。主线程和 Worker 线程之间通过消息传递进行通信。

主线程和 Worker 线程互相独立，它们不能直接访问彼此的数据，只能通过消息传递进行通信。
Worker 线程可以执行一些耗时的任务，比如复杂的计算、数据处理等，而不会阻塞主线程的执行。
在 Worker 中无法直接访问 DOM，也无法使用一些全局对象和方法，因为它是在一个独立的上下文中运行的。

54.HTML5为什么只需要写！DOCTYPE HTML？

HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来进行）
而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

55.html document是干嘛的？

HTML即：超文本标记语言，标准通用标记语言的一个应用，“超文本”就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素。
HTML Document即：HTML Document对象，每个载入浏览器的HTML文档都会成为Document对象。由于Document对象是window对象的一部分，所以可通过window.document属性对其进行访问。

56浏览器渲染引擎的主要模块

HTML解析器：解释HTML文档的解析器，主要作用是将HTML文本解析为DOM树
CSS解析器：作用是DOM中各个元素对象计算出样式信息，为布局提供基础设施
JavaScript引擎：JavaScript引擎能够解释JavaScript代码，并通过DOM接口和CSS接口来修改网页内容和样式信息，从而改变渲染的结果
布局（layout）：在DOM创建之后，WebKit需要将其中的元素对象同样式信息结合起来，计算他们的大小位置等布局信息，形成一个能表达着所有信息的内部表示模型
绘图模块（paint）：使用图形库将布局计算后的各个网页的节点绘制成图像结果

大致的渲染过程

1、浏览器会从上到下解析文档
2、遇见HTML标记，调用HTML解析器解析为对应的token(一个token就是一个标签文本的序列化)并构建DOM树(就是一块内存，保存着tokens，建立他们之间的关系)
3、遇见style/link标记调用相应解析器处理CSS标记，并构建出CSS样式树
4、遇见script标记，调用JavaScript引擎处理script标记，绑定事件，修改DOM树/CSS树等
5、将DOM树与CSS合并成一个渲染树
6、根据渲染树来渲染，以计算每个节点的几何信息(这一过程需要依赖GPU)
7、最终将各个节点绘制在屏幕上

56.html5哪些操作可以SEO优化

title标签；meta标签；header标签；footer标签

title:更多的可供搜索引擎识别的代码，我们将改代码的等级微降。
meta:字符集编码声明标签：该标签原本就是搜索引擎必看且首先要看的标签

元标签（meta标签）；导航标签（nav标签）；文章标签（article标签）；左或右侧标签（aside标签）

因为HTML5中标签可以使网页内容更加结构化，更加清楚的展示页面内容的结构，可以提升对于搜索引擎的友好型，更容易识别网站内容以及站点的类型

57.构建DOM树，css树，规则，原理

浏览器渲染顺序

构建dom 树
构建css 树
构建渲染树
节点布局
页面渲染

其实DOM节点可以分为可视化节点和非可视化节点

像 div、p 等这种结构性的标签节点可被称为可视化节点，
而 script、meta 等这种在页面上显示不出来的节点则被称为非可视化节点；

58.浏览器是如何渲染 UI 的？（考）

浏览器获取 HTML 文件，然后对文件进行解析，形成 DOM Tree
与此同时，进行 CSS 解析，生成 Style Rules
接着将 DOM Tree 与 Style Rules 合成为 Render Tree
元素在页面中布局，然后绘制
render 树就是根据可视化节点和 css 样式表结合诞生出来的树；

注意：PS: display: none 的元素会出现在 DOM树中，但不会出现在 render 树中；

59.什么是DOM树？

浏览器将HTML解析成树形的数据结构，简称DOM。
DOM 是文档对象模型 (Document Object Model) 的缩写。它是 HTML 文档的对象表示，同时也是外部内容（例如 JavaScript）与 HTML 元素之间的接口。解析树的根节点是Document对象。

60.什么会阻塞dom渲染（考）

1. css解析会阻塞渲染。因为构造渲染树需要CSSOM，因此CSS解析完成是后续工作的先决条件。

2. css下载会阻塞js执行，不会阻塞html解析。

3. js下载和执行会阻塞html。

4. 在执行 JavaScript 脚本之前，会先加载并解析页面中的CSS样式（包括link标签和style标签）（如果存在）。也就是说 CSS 在部分情况下也会阻塞 DOM 的生成。

61.script标签什么情况不阻塞渲染

async、defer和动态创建标签。

可以让script异步加载避免阻塞dom渲染，提升首屏渲染速度。

62.什么是CSS树？ （考）

生成css规则树，web浏览器将DOM和CSSOM结合，并构建出渲染树，对每个节点进行布局，然后绘制

构建DOM树
构建CSS规则树：生成CSS规则树（CSS Rule Tree）
构建render树：Web浏览器将DOM和CSSOM结合，并构建出渲染树（render tree）
布局（Layout）：计算出每个节点在屏幕中的位置
绘制（Painting）：即遍历render树，并使用UI后端层绘制每个节点

渲染树构建(renderTree)

渲染树是dom树结合css树形成的一个新的树。当renderTree构建完毕后，浏览器会根据它去绘制页面。

特点:
(1)渲染树每个节点都有自己的样式。
(2)不包含隐藏节点(display: none)、不需要绘制的节点(html/head/style/title)，这些节点在renderTree形成之前就会被剔除。
(3)visibility: hidden相对应的节点是包含在渲染树上的，因为它影响布局(layout)。
(4)渲染树上的每一个节点都会被当成一个盒子，具有内容填充、边距、边框、位置、大小及其它样式。

58.HTML应如何应用缓存？

59.meta viewport 是做什么用的，怎么写？

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">

目的是为了在移动端不让用户缩放页面使用的

解释每个单词的含义
with=device-width 将布局视窗（layout viewport）的宽度设置为设备屏幕分辨率的宽度
initial-scale=1 页面初始缩放比例为屏幕分辨率的宽度
maximum-scale=1 指定用户能够放大的最大比例
minimum-scale=1 指定用户能够缩小的最大比例

60.XHTML和HTML的区别

XML 用来传输和存储数据，HTML 用来显示数据；
XML 使用的标签不用预先定义
XML 标签必须成对出现
XML 对大小写敏感
XML 中空格不会被删减
XML 中所有特殊符号必须用编码表示
XML 中的图片必须有文字说明

qq_40055200

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
HTML～

1.DOCTYPE有什么作用？包标准模式和混杂模式如何区分？它们有什么意义？告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。标准模式（Standards mode）以浏览器支持最高标准运行。混杂模式中页面是一种比较宽松向后兼容的方式显示。2.什么是浏览器内核？总结:浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎主要负责获取页面内容（HTML,CSS,JS,XML，图像）等然后进行解析来渲染网页。渲染引擎决定浏览器如何显示.
复制链接

扫一扫