2023-07-26
浏览器
00
请注意,本文编写于 211 天前,最后修改于 172 天前,其中某些信息可能已经过时。

目录

1. src与href的区别
2. 对HTML语义化的理解
3. DOCTYPE的作用
4. script标签中defer和async的区别
5. 常⽤的meta标签有哪些
6. HTML5有哪些更新
7. html表单元素
表单类型
表单属性
表单事件:
8. 标签分类
9.img的srcset属性的作⽤?
10. iframe 有那些优点和缺点?
11. label 的作用是什么?如何使用?
12. head 标签有什么作用,其中什么标签必不可少?
13. html元素之间的嵌套关系
14. SVG
15. Canvas
16. 浏览器乱码是什么原因?如何解决?
17 渐进增强和优雅降级之间的区别
18. 说一下HTML5 drag API
draggable属性
鼠标事件-滑动验证码

本文系统梳理HTML知识点,常见面试题

1. src与href的区别

srchref
src用于替换当前元素href用于在当前文档和引用资源之间确立联系
src是source的缩写href是Hypertext Reference 的缩写
<img><script><iframe>中, 表示引入用在 <link><a>
会暂停其他资源的下载和处理并行下载资源

2. 对HTML语义化的理解

语义化是指根据内容的结构化(内容语义化),选择合适的标签(代码语义化)

语义化的优点

  1. 有利于SEO,支持读屏软件(如根据文章生成目录)
  2. 对开发者友好,增强代码的可读性,便于团队开发和维护

常见的语义化标签:

  • <header> <nav> <main> <article> <aside> <footer>
  • image.png

3. DOCTYPE的作用

DOCTYPE(⽂档类型)是HTML5中一种标准通用标记语言的文档类型声明,它的目的是告诉浏览器(解析器)应该以什么样(html或xhtml)的文档类型定义来解析文档,不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。

浏览器渲染页面的两种模式

可通过document.compatMode获取,比如,语雀官网的文档类型是CSS1Compat

  • CSS1Compat:标准模式(Strick mode),默认模式,浏览器使用W3C的标准解析渲染页面。在标准模式中,浏览器以其支持的最高标准呈现页面。
  • BackCompat:怪异模式(混杂模式)(Quick mode),浏览器使用自己的怪异模式解析渲染页面。混杂模式通常模拟老式浏览器的行为,以防止老站点无法工作.

4. script标签中defer和async的区别

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

image.png

其中蓝色代表js脚本网络加载时间,红色代表js脚本执行时间,绿色代表html解析。

defer 和 async属性都是去异步加载外部的JS脚本文件,它们都不会阻塞页面的解析,其区别如下:

  • 执行顺序: 多个带async属性的标签,不能保证加载的顺序;多个带defer属性的标签,按照加载顺序执行
  • 脚本是否并行执行:async属性,表示后续文档的加载和执行与js脚本的加载和执行是并行进行的,即异步执行;defer属性,加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步),js脚本需要等到文档所有元素解析完成之后才执行,DOMContentLoaded事件触发执行之前

5. 常⽤的meta标签有哪些

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

常用的meta标签:

  • 设置编码 <meta charset="UTF-8" >
  • 设置关键字 SEO <meta name="keywords" content="关键词" />
  • 页面描述 SEO <meta name="description" content="页面描述内容" />
  • 页面重定向和刷新 <meta http-equiv="refresh" content="0;url=" />
  • 禁止缓存 <meta http-equiv="Pragma" content="no-cache">
  • 不使用强缓存 <meta http-equiv="Cache-Control" content="no-cache">
  • viewport适配移动端 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 禁用双指缩放
    • viewport还有一个作用,处理ios刘海,不写该属性则设置iphone刘海无效
  • 搜索引擎索引方式:<meta name="robots" content="index,follow" />
  • 隐藏safari界面
    • <meta name="apple-mobile-web-app-capable" content="yes">
    • ios专门定义来实现全屏显示,通过window.navigator.standalone来侦测的
  • 改变状态栏 <meta name="apple-mobile-web-app-status-bar-style" content="black">
  • WebApp全屏模式:伪装app,离线应用。 <meta name="apple-mobile-web-app-capable" content="yes" />
  • 添加到主屏后的标题 <meta name="apple-mobile-web-app-title" content="标题">
  • 忽略数字自动识别为电话号码 <meta content="telephone=no" name="format-detection" />
  • 忽略识别邮箱  <meta content="email=no" name="format-detection" />
  • 添加智能 App 广告条 下载app

总结,meta标签用途很广,设置编码、http相关(设置缓存与重定向)、SEO、CSP、离线App、safari相关、

搜索引擎索引方式 content属性值

类型含义
all文件被索引,且页面上的链接可以被查询
none文件不被索引,且页面上的链接不可以被查询
index文件将被检索
follow页面上的链接可以被查询
noindex文件将不被检索
nofollow页面上的链接不可以被查询

6. HTML5有哪些更新

  1. 语义化标签
  2. 标签 <audio> <video>
  3. 废弃元素
    • 表现类 用css替代
    • 属性类 用css替代
      • 如body标签上的link、vlink、alink、text属性
      • 如height和width
    • 框架类 frame frameset
    • 其他
      • object取代了applet
    • 《html5废弃了哪些元素》
  4. 表单
  5. 进度条、度量器
  6. DOM查询操作
    • querySelector querySelectorAll
  7. Web存储 localStorage sessionStorage
  8. SVG、Canvas
  9. 拖拽

7. html表单元素

表单类型

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

如日期相关控制,支持性不是很好, 一般项目中使用开源UI组件。

表单属性

| 属性 | 作用 | | placeholder | 提示信息 | | autofocus | 自动获取焦点 | | autocomplete | 有两个值on off
使用前提:表单必须提交过,必须有name属性 | | required | 要求输入框不能为空,必须有值才能够提交 | | pattern | 正则表达式校验 | | multiple | 可以选择多个文件或者多个邮箱 | | form | form表单的ID |

表单事件:

  • oninput 每当input里的输入框内容发生变化都会触发此事件。
  • oninvalid 当验证不通过时触发此事件。

8. 标签分类

  • html标签 及属性 不区分大小写,属性值区分大小写
  • 某些 HTML 元素对于放在其中的元素类型有限制例如 <ul><ol><table><select>,相应的,某些元素仅在放置于特定元素中时才会显示,例如 <li><tr><option>

自闭合的标签

  • 表单元素 input
  • img
  • br hr
  • meta link base

非自闭合标签,如果强行自闭合会出问题,但使用了框架如vue可以兼容这种情况

行内元素有:a b span img input select strong

块级元素有:div ul ol li dl dt dd h1~6 p

9.img的srcset属性的作⽤?

响应式页面中经常用到根据屏幕密度设置不同的图片。

srcset 属性通常与 sizes 属性一起使用,后者指定了不同视口条件下图像的大小。两者共同使得浏览器能够选择最合适的图像进行显示,从而优化用户体验,减少带宽使用和加载时间。

html
<img src="fallback-image.jpg" srcset="image1.jpg 1024w, image2.jpg 800w, image3.jpg 480w" sizes="(max-width: 600px) 480px, (max-width: 1024px) 800px, 1024px">

10. iframe 有那些优点和缺点?

优点:

  • 用来加载速度较慢的内容(如广告)
  • 可以使脚本可以并行下载
  • 可以实现跨子域通信

缺点:

  • iframe 会阻塞主页面的 onload 事件
  • 无法被一些搜索引擎索识别
  • 会产生很多页面,不容易管理

11. label 的作用是什么?如何使用?

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

html
<!-- 使用方法1 --> <label for="mobile">Number:</label> <input type="text" id="mobile"/> <!-- 使用方法2 --> <label>Date:<input type="text"/></label>

12. head 标签有什么作用,其中什么标签必不可少?

  • 用于定义文档的头部,它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。
  • 文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。除去<title>包含的数据都不会真正作为内容显示给读者。

13. html元素之间的嵌套关系

  • 块级元素可以包含行内元素
  • 块级元素不一定能包含块级元素 p
  • “行内元素一般不能包含块级元素” 特例 a标签包含div 具体规则在这个网站查询

14. SVG

定义:SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言XML描述的2D图形的语言,SVG基于XML就意味着SVG DOM中的每个元素都是可用的,可以为某个元素附加Javascript事件处理器。在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。

特点:

  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序(比如谷歌地图)
  • 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
  • 不适合游戏应用

15. Canvas

Canvas是画布,通过Javascript来绘制2D图形,是逐像素进行渲染的。其位置发生改变,就会重新进行绘制。

特点:

  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘

svg 与 canvas 区别

-CanvasSvg
历史较新、由Apple私有技术发展而来历史悠久,2003年成为W3C标准
功能功能简单,2D绘图API功能丰富,各种图像、滤镜、动画等
特点像素,只能脚本驱动矢量,XML,CSS,元素操作
兼容性主流浏览器,IE9+主流浏览器,IE9+,其它SVG阅读器
操作对象基于像素(动态点阵图)基于图形元素
元素单个HTML元素多种图形元素
驱动只能脚本驱动支持脚本和CSS
事件交互用户交互到像素点(x,y)用户交互到图形元素(rect, path)
性能适合小面积,大数量应用场景适合大面积,小数量应用场景

16. 浏览器乱码是什么原因?如何解决?

编码和解码使用的字符集不同就会导致乱码

一般浏览器乱码的原因升级, 开发者使用window电脑创建的html文件默认是gbk编码,网页中也没有编码声明 <meta charset="utf-8">,浏览器使用默认方式utf-8解码,这就导致了乱码

解决方案

  1. 使用软件编辑HTML修改编码
  2. 或修改http响应头content-type: text/html; charset=utf-8
  3. 配置meta标签 <meta charset="utf-8">

补充知识点:浏览器有一套自己的编码解析机制

  1. 文件开头的 Byte Order mark 字符
  2. http响应头字段content-type
  3. html <meta @charset='XX'>
  4. 默认utf-8

17 渐进增强和优雅降级之间的区别

  • 渐进增强:主要是针对低版本的浏览器进行页面重构,保证基本的功能情况下,再针对高级浏览器进行效果、交互等方面的改进和追加功能,以达到更好的用户体验。
  • 优雅降级: 一开始就构建完整的功能,然后再针对低版本的浏览器进行兼容。

18. 说一下HTML5 drag API

原生的JavaScript拖拽有两种方式

  • html5 draggable API
  • 鼠标事件

draggable属性

  • 图片默认是可以拖拽的,但并不是所有元素默认都是可以拖拽的,如<div>
  • 在元素本身加上draggable属性,这个属性是H5新增的,定义这个属性就可以注册事件了
  • 拖动时 dragstart drag dragend 发生在拖拽元素身上
  • 进入区域 进入时dragenter 进入后dragover 离开dragleave 放置drop 发生在目标元素身上

我写一个drag的Demo image

示例&源码点这里

鼠标事件-滑动验证码

  • mousedown 鼠标按下
  • mousemove 鼠标移动
  • mouseup 鼠标松开

我也写了一个滑块验证的demo yzm.gif

示例&源码点这里

推荐资料

本文作者:郭敬文

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!