HTML面试题整理

2020-10-15  本文已影响0人  Territory_Cheng

doctype(⽂档类型)

告知浏览器的解析器⽤什么⽂档标准解析这个⽂档<!DOCTYPE HTML>，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript 脚本的解析

HTML语义化

语义化从html代码来展示页面的结构，语义化的优点：

  1. 标签语义化有助于搭建良好的HTML结构，有助于搜索引擎建立索引和爬取
  2. 有利于不同设备的解析，
  3. 有利于搭建清晰的代码结构，有助于团队开发维护
H5新增标签

cookies，sessionStorage 和 localStorage 的区别

sessionStorage 和 localStorage
cookies
项目经验

DOM事件

事件处理程序
事件流机制

即元素从页面接收事件的顺序，也即事件在页面的传播顺序

事件捕获和事件冒泡
事件对象

标准的Event对象主要有6个：

  1. bubbles 布尔值，表示事件是否是冒泡类型
  2. cancelable 布尔值，表示事件是否可以取消默认动作
  3. currentTarget 当前目标元素，即添加当前事件处理程序的元素
  4. target 实际目标元素，即实际触发事件的元素
  5. type 返回当前事件的名称
  6. eventPhase 事件传播的当前阶段，1表示捕获阶段
currentTarget VS target
  • ==target==: 在事件的目标阶段，指向被单击的对象
  • ==currentTarget==: 在事件流捕获、目标及冒泡阶段，只有在目标阶段，两者相同，指向当前事件的活动对象(一般为父级)

标准Event对象的方法主要有以下几个

  1. preventDefault 通知浏览器不要执行该事件的默认动作，如阻止默认跳转、表单提交等标签默认行为
    2.stopPropagation 冒泡阶段下，阻止事件继续向上冒泡
事件委托

事件委托其实就是利用冒泡事件机制，针对多子元素绑定事件的处理方式，采用父级绑定，利用target获取到子元素并响应事件

优雅降级和渐进增强概述

SEO优化(搜索引擎优化)

iframe有那些缺点

  1. iframe会阻塞主页面的onload事件
  2. 相同域iframe和主页面共享http连接池，多个相同域的iframe会阻塞加载
    • 解决方案：主页面加载完再去动态生成iframe
  3. iframe对seo不友好

iframe跨域通信

postMessage
quoteWindow.postmessage(data, origin, [transfer])
接收方
window.addEventListener('message',e=>{
    // 有三个重要属性
    // origin 表示发送消息的窗口源
    // data 表示发送消息的数据
    // source 表示对发送消息窗口的引用，可以用此来向发送消息的窗口返回数据
})

onload和domcontentloaded

HTML文档的加载与页面的首次渲染

  1. 浏览器首选下载该地址所对应的html页面
  2. 浏览器解析html页面的DOM结构
  3. 开启下载线程对文档中的所有资源按优先级排序下载
  4. 主线程继续解析文档，到达head节点，head里的外部资源无非是外链样式表和外链js
  5. 解析到body
  1. 文档解析完毕，页面渲染，但是页面引用的所有js同步代码执行完毕，厨房DOMContentLoaded事件
  2. html文档中的图片资源、js代码中有的异步加载的css、js、图片资源都加载完毕之后，load事件触发

src和href的区别

img的srcset和sizes

script标签中defer和async的区别

data-属性

HTML的数据属性，用于将数据存储在标准的HTML元素中作为额外信息，可以通过js访问，xxx.getAttribute("data-xxxx")

meta标签

name

name属性主要用于描述网页，比如网页的关键词、叙述等，与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。

<meta name="参数" content="具体的描述" >
参数 描述
keywords(关键词) 网页关键词，<meta name="keywords" content="Lxxyx,博客，文科生，前端">
description(网站内容的描述) <meta name="description" content="文科生，热爱前端与编程。目前大二，这是我的前端博客">
viewport(移动端的窗口) meta name="viewport" content="width=device-width, initial-scale=1">
robots(定义搜索引擎爬虫的索引方式)) robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。<meta name="robots" content="none">
author(作者) <meta name="author" content="Lxxyx,80530@qq.com">
copyright(版权) <meta name="copyright" content="Lxxyx">
revisit-after(搜索引擎爬虫重访时间) 如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。<meta name="revisit-after" content="7 days" >
renderer(双核浏览器渲染方式) <meta name="renderer" content="webkit">//默认webkit内核 <meta name="renderer" content="ie-comp"> //默认IE兼容模式 <meta name="renderer" content="ie-stand"> //默认IE标准模式
http-equiv

<meta http-equiv="参数" content="具体的描述">

<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML，不推荐 
<meta charset="utf-8"> //HTML5设定网页字符集的方式，推荐使用UTF-8```

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面

<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />

<meta http-equiv="refresh" content="2；URL=http://www.lxxyx.win/"> //意思是2秒后跳转向我的博客

<meta http-equiv="Set-Cookie" content="name, date"> //格式

<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具体范例

img的srcset和sizes

H5中img有2个新属性，srcset、sizes，主要作用：

srcset
srcset="1.jpg 580w, 2.png 618w"

千万注意：描述图片的像素宽度是用'w'单位，且一定要是图片的真实像素宽度，如果私自改动，那么会影响浏览器对图片的选择！

表示图片1.jpg的像素宽度为580px，图片2.png的像素宽度为618px，两个图片源之间用逗号隔开

srcset="1.jpg 1x, 2.png 2x"

表示图片1.jpg为DPR为1时下显示的图片；2.png为DPR为2时显示的图片，如果没有更大的DPR设置的图片源，那么当大于当前设置的DPR最高值时，会采用当前设置的最大DPR的图片源。如这里如果屏幕DPR为3，那么还是会用2.png。

sizes

只有当设置了srcset，且单位为w时，sizes的设置才会起效。

srcset中设置的图片像素宽度（'w'的值），组成了相应的半开半闭区间(a, b]。 图片的显示宽度（sizes规定的值）看落在哪个区间内，取区间中最大值对应的图片。若没有最大值（如∞），则取上个区间最大值。

<img src="4.jpg" srcset="3.jpg 229w,2.png 618w,1.jpg 1000w", sizes="300px">

上面设置图片要显示成300px（sizes里的值），在srcset里的几个临界值中形成了(0, 229px]、(229px, 618px]、(618px, 1000px]、(1000px, ∞]。300px落在了(229px, 618px]中，取最大值618，因此最终选择的图片就是2.png

sizes的语法结构：

[媒体查询 空格 ]图片显示宽度[, [媒体查询 空格 ]图片显示宽], ..., 其余条件宽度值]

sizes="(max-width: 500px) 400px, (max-width: 900px) 700px, 1200px"

在屏幕小于等于500px情况下，图片显示成400px宽；在屏幕小于等于900px情况下，图片显示成700px宽；其余情况显示成1200px宽。

sizes里的媒体查询条件顺序是很重要的，只要满足了越靠前的某个条件，那么后面的条件会被忽略的

如果sizes属性没有值，或者在有媒体条件下，其余条件宽度没有设值，那么默认是100vw

DPR的影响
<img src="4.jpg" srcset="3.jpg 229w,2.png 618w" sizes="(max-width: 600px) 114px">

srcset里的'w'符号，是代表的是图像的宽度像素，是个物理像素；sizes里的114px是表示逻辑像素！在DPR不为1时，要转化一下像素值才能去区间里比较，套用上述规则，如在DPR=2时，把114px转化为物理像素，即114px * 2 = 228px，用228px去(0, 229px]、(229px, 618px]、(618px, ∞]里做比较，落在了(0, 229px]中，取229px对应的3.jpg

哪⼀个标签能起到跟srcset相似作⽤

<picture>元素通过包含零或多个<source>元素和⼀个<img>元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的⼦<source>元素，如果没有匹配的，就选择<img>元素的src属性中的URL。然后，所选图像呈现在<img>元素占据的空间中

<picture>
    <source srcset="/media/examples/surfer-240-200.jpg" media="(min-width: 800px)">
    <img src="/media/examples/painted-hand-298-332.jpg" />
</picture>

html5和html4区别

上一篇 下一篇

猜你喜欢

热点阅读