2023 最新前端面试题 (HTML 篇)

这篇具有很好参考价值的文章主要介绍了2023 最新前端面试题 (HTML 篇)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

2023 最新前端面试题 (HTML 篇),前端,javascript,开发语言

1. src 和 href 的区别

src 用于替换当前元素(引入),href 用于在当前文档和引用资源之间确立联系(引用)

(1)src(source)

指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;

在请求 src 资源时会将其指向的资源下载并应用到文档内,例如 js 脚本,img 图片和 frame 等元素。

<script src =”js.js”></script>

当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。

(2)href(Hypertext Reference)

指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果在文档中添加

<link href=”common.css” rel=”stylesheet”/>

那么浏览器会识别该文档为 css 文件,就会并行下载资源并且不会停止对当前文档的处理。 这也是为什么建议使用 link 方式来加载 css,而不是使用 @import 方式。

2. @import 和 link 区别

同:都为外部引用 CSS 的方式

异:

  1. link 还能定义 RSS 等其他事务;@import 只能加载 CSS;
  2. link 在页面载入时同时加载;@import 需要页面完全加入之后加载;
  3. link 无兼容问题;@import 在 CSS 2.1 提出,低版本不支持;
  4. link 支持使用 JS 控制 DOM 区改变样式,@import 不支持

推荐文章: link 和 @import 区别

3. 对 HTML 语义化的理解

通俗来讲就是用正确的标签做正确的事情。

包括 内容语义化(内容结构化) 和 代码语义化(选择合适的标签)。

语义化的优点:

  1. 样式丢失时候还能让页面呈现清晰的结构
  2. 读屏软件,根据文章可以自动生成目录
  3. 有利于SEO
  4. 对开发者友好,增强了可读性,结构更加清晰,开发者能清晰的看出网页的结构,便于团队的开发与维护。

常见的语义化标签:

<header></header>  头部

<nav></nav>  导航栏

<section></section>  区块(有语义化的div)

<main></main>  主要区域

<article></article>  主要内容

<aside></aside>  侧边栏

<footer></footer>  底部

4. DOCTYPE(文档类型 - document type) 的作⽤,严格模式与混杂模式如何区分?它们有何意义?

DOCTYPE 是 HTML5 中一种标准通用标记语言的文档类型声明

它的作用是告诉浏览器(解析器)应该以什么样(html或xhtml)的文档类型定义来解析文档,不同的渲染模式会影响浏览器对 CSS 代码甚至 JavaScript 脚本的解析;

它必须声明在HTML文档的第一行。

浏览器渲染页面的两种模式(可通过document.compatMode获取):

  • CSS1Compat:标准模式(Strick mode),默认模式,浏览器使用W3C的标准解析渲染页面。在标准模式中,浏览器以其支持的最高标准呈现页面。
  • BackCompat:怪异模式(混杂模式)(Quick mode),浏览器使用自己的怪异模式解析渲染页面。在怪异模式中,页面以一种比较宽松的向后兼容的方式显示。

<!doctype html>的作用:<!doctype html> 的作用就是让浏览器进入标准模式,使用最新的 HTML5 标准来解析渲染页面;如果不写,浏览器就会进入混杂模式。

严格模式与混杂模式的区分:

  • 严格模式: 又称为标准模式,指浏览器按照W3C标准解析代码;
  • 混杂模式: 又称怪异模式、兼容模式,是指浏览器用自己的方式解析代码。混杂模式通常模拟老式浏览器的行为,以防止老站点无法工作;

区分:网页中的DTD,直接影响到使用的是严格模式还是浏览模式,可以说DTD的使用与这两种方式的区别息息相关。

  • 如果文档包含严格的DOCTYPE ,那么它一般以严格模式呈现(严格 DTD ——严格模式)
  • 包含过渡 DTD 和 URI 的 DOCTYPE ,也以严格模式呈现,但有过渡 DTD 而没有 URI (统一资源标识符,就是声明最后的地址)会导致页面以混杂模式呈现(有 URI 的过渡 DTD ——严格模式;没有 URI 的过渡 DTD ——混杂模式)
  • DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现(DTD不存在或者格式不正确——混杂模式)
  • HTML5 没有 DTD ,因此也就没有严格模式与混杂模式的区别,HTML5 有相对宽松的 法,实现时,已经尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)

总之,严格模式让各个浏览器统一执行一套规范兼容模式保证了旧网站的正常运行。

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

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

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

2023 最新前端面试题 (HTML 篇),前端,javascript,开发语言

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

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

defer:

HTML 5 规范要求按出现顺序执行且在 DOMContentLoaded 事件之前执行,但实际并没有按照规范执行;

async:

不保证按出现次序执行,可在 DOMContentLoaded 之前或之后执行

6. 常用的 meta 标签有哪些

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

常用的meta标签:

(1)charset,用来描述HTML文档的编码类型:

<meta charset="UTF-8" >

(2) keywords,页面关键词:

<meta name="keywords" content="关键词" />

(3)description,页面描述:

<meta name="description" content="页面描述内容" />

(4)refresh,页面重定向和刷新:

<meta http-equiv="refresh" content="0;url=" />

(5)viewport,适配移动端,可以控制视口的大小和比例:

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

其中,content 参数有以下几种:

  • width viewport :宽度(数值/device-width)
  • height viewport :高度(数值/device-height)
  • initial-scale :初始缩放比例
  • maximum-scale :最大缩放比例
  • minimum-scale :最小缩放比例
  • user-scalable :是否允许用户缩放(yes/no)

(6)搜索引擎索引方式:

<meta name="robots" content="index,follow" />

其中,content 参数有以下几种:

  • all:文件将被检索,且页面上的链接可以被查询;
  • none:文件将不被检索,且页面上的链接不可以被查询;
  • index:文件将被检索;
  • follow:页面上的链接可以被查询;
  • noindex:文件将不被检索;
  • nofollow:页面上的链接不可以被查询。

7. HTML5 有哪些更新

1. 语义化标签

  • header:定义文档的页眉(头部);
  • nav:定义导航链接的部分;
  • footer:定义文档或节的页脚(底部);
  • article:定义文章内容;
  • section:定义文档中的节(section、区段);
  • aside:定义其所处内容之外的内容(侧边);

2. 媒体标签

(1) audio:音频

<audio src='' controls autoplay loop='true'></audio>

属性:

  • controls 控制面板
  • autoplay 自动播放
  • loop='true' 循环播放

(2)video视频

<video src='' poster='imgs/aa.jpg' controls></video>

属性:

  • poster:指定视频还没有完全下载完毕,或者用户还没有点击播放前显示的封面。默认显示当前视频文件的第一针画面,当然通过poster也可以自己指定。
  • controls 控制面板
  • width
  • height

(3)source 标签

<video>
 	<source src='aa.flv' type='video/flv'></source>
 	<source src='aa.mp4' type='video/mp4'></source>
</video>

因为浏览器对视频格式支持程度不一样,为了能够兼容不同的浏览器,可以通过source来指定视频源。

3. 表单

表单类型:

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

表单属性:

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

表单事件:

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

4. 进度条、度量器

  • progress 标签:用来表示任务的进度(IE、Safari不支持),max 用来表示任务的进度,value 表示已完成多少
  • meter 属性:用来显示剩余容量或剩余库存(IE、Safari不支持)
    • high/low:规定被视作高/低的范围
    • max/min:规定最大/小值
    • value:规定当前度量值

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

5.DOM查询操作

  • document.querySelector()
  • document.querySelectorAll()

它们选择的对象可以是标签,可以是类(需要加点),可以是ID(需要加#)

6. Web存储

HTML5 提供了两种在客户端存储数据的新方法:

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

7. 其他

  • 拖放:拖放是一种常见的特性,即抓取对象以后拖到另一个位置。设置元素可拖放:
    <img draggable="true" />
  • 画布(canvas ): canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
    <canvas id="myCanvas" width="200" height="100"></canvas>
  • SVG:SVG 指可伸缩矢量图形,用于定义用于网络的基于矢量的图形,使用 XML 格式定义图形,图像在放大或改变尺寸的情况下其图形质量不会有损失,它是万维网联盟的标准
  • 地理定位:Geolocation(地理定位)用于定位用户的位置。‘

拖放效果(黑色箭头指代鼠标):

2023 最新前端面试题 (HTML 篇),前端,javascript,开发语言

总结:

(1)新增语义化标签:nav、header、footer、aside、section、article

(2)音频、视频标签:audio、video

(3)数据存储:localStorage、sessionStorage

(4)canvas(画布)、Geolocation(地理定位)、websocket(通信协议)

(5)input标签新增属性:placeholder、autocomplete、autofocus、required

(6)history API:go、forward、back、pushstate

移除的元素有:

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

7. img 的 srcset 属性的作用?

不同屏幕密度下,img 会自动加载不同的图片。用法如下:

<img src="image-128.png" srcset="image-256.png 2x" />

使用上面的代码,就能实现在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。

按照上面的实现,不同的屏幕密度都要设置图片地址,目前的屏幕密度有1x,2x,3x,4x四种,如果每一个图片都设置4张图片,加载就会很慢。所以就有了新的srcset标准。代码如下:

<img 
  src="https://cloud4.gogoing.site/files/2020-08-21/bbc63bf5-6f56-4d0a-a996-72fff804725c.png"
  sizes="(max-width: 376px) 375px, (max-width: 769px) 768px, 1024px"
  srcset="
    https://cloud3.gogoing.site/files/2020-08-21/bbc63bf5-6f56-4d0a-a996-72fff804725c.png 375w,
    https://cloud2.gogoing.site/files/2020-08-21/69d2679d-eefe-434a-8755-7f8b09166bf3.png 768w,
    https://cloud1.gogoing.site/files/2020-08-21/291087d7-beda-402f-9c28-b23e71beb32e.png 1024w"
>

其中 srcset 指定图片的地址和对应的图片质量。sizes用来设置图片的尺寸零界点。对于 srcset 中的 w 单位,可以理解成图片质量。如果可视区域小于这个质量的值,就可以使用。浏览器会自动选择一个最小的可用图片。

  1. 在普通的PC电脑上,屏幕像素比是1,sizes属性计算值为375px,那么,img的实际宽度为375*1=375w,因此,浏览器会加载375px这张图片。
  2. 在iphone678这类机型中,屏幕像素比是2,sizes属性计算值为375px,那么,img的实际宽度为375*2=750w,此时,375w < 750w < 768w, 因此,浏览器会加载768px这张图片。
  3. iphone plus 和iphone X这类机型中,屏幕像素比是3,sizes属性计算值为375px,那么,img的实际宽度为375*3=1125w,此时,浏览器会加载1024px这张图片。

sizes语法如下:文章来源地址https://www.toymoban.com/news/detail-693833.html

sizes="[media query] [length], [media query] [length] ... "

8. 行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

  • 行内元素:
    • 一个行内元素只占据它对应标签的边框所包含的空间。
    • a b span img input select strong;
  • 块级元素有:
    • 块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。
    • div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p;
  • 行内元素和块级元素的对比:
    • 内容:
      • 一般情况下,行内元素只能包含数据和其他行内元素。
      • 块级元素可以包含行内元素和其他块级元素。
    • 格式:
      • 默认情况下,行内元素不会以新行开始,而块级元素会新起一行
  • 空元素,即没有内容的HTML元素。空元素是在开始标签中关闭的,也就是空元素没有闭合标签:
    • 常见的有:<br>、<hr>、<img>、<input>、<link>、<meta>;
    • 鲜见的有:<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。

到了这里,关于2023 最新前端面试题 (HTML 篇)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【自看】2023前端面试上岸手册——JavaScript

    JavaScript 共有八种数据类型,分别是 Undefined、Null、Boolean、 Number、String、Object、Symbol、BigInt。 其中 Symbol 和 BigInt 是ES6 中新增的数据类型: Symbol 代表创建后独一无二且不可变的数据类型,它主要是为了解决可能出现的全局变量冲突的问题。 BigInt 是一种数字类型的数据,它可

    2024年02月02日
    浏览(53)
  • 2023前端面试上岸手册——JavaScript部分

    JavaScript 共有八种数据类型,分别是 Undefined、Null、Boolean、 Number、String、Object、Symbol、BigInt。 其中 Symbol 和 BigInt 是ES6 中新增的数据类型: Symbol 代表创建后独一无二且不可变的数据类型,它主要是为了解决可能出现的全局变量冲突的问题。 BigInt 是一种数字类型的数据,它可

    2024年02月02日
    浏览(51)
  • 2023年最新前端面试题(小程序相关)

    一、小程序 tabbar的限制(配置参数) 修改项目根目录中的 app.json 配置文件,与pages平级的位置新增 tabBar 的配置节点如下: \\\"tabBar\\\": { \\\"selectedColor\\\": \\\"#C00000\\\", \\\"list\\\": [ { \\\"pagePath\\\": \\\"pages/home/home\\\", \\\"text\\\": \\\"首页\\\", \\\"iconPath\\\": \\\"static/tab_icons/home.png\\\", \\\"selectedIconPath\\\": \\\"static/tab_icons/home-active.png\\\"

    2024年02月07日
    浏览(37)
  • 2023最新前端高频面试题及答案(轻松拿捏面试官)

    废话就不多说了直接上题 set和map的区别?    set:     (1)成员是不可以重复的     (2)只有键值没有键名,类似数组     (3)可以遍历,方法有add,delete,has   map:     (1)本质上是键值对的集合,类似集合     (2)可以遍历,可以跟各种数据格式转换 for in,for of,

    2024年02月15日
    浏览(50)
  • 2023前端面试笔记 —— HTML5

    内容 链接 2023前端面试笔记 HTML5 HTML5作为最新的HTML标准,为前端开发带来了许多新的特性和功能。在前端面试中,HTML5的知识和应用已经成为了必备的技能。本篇文章将总结HTML5的 重要知识点和常见面试题 ,帮助读者更好地准备前端面试,提升自己的竞争力。 HTML 超文本标记

    2024年02月11日
    浏览(52)
  • 前端 | ( 十)HTML5简介及相关新增属性 | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月16日
    浏览(54)
  • 2023年最新前端各系列面试题及答案

    Vue系列 面试官:说说你对vue的理解? 面试官:说说你对双向绑定的理解? 面试官:说说你对SPA(单页应用)的理解? 面试官:Vue中的v-show和v-if怎么理解? 面试官:Vue实例挂载的过程中发生了什么? 面试官:说说你对Vue生命周期的理解? 面试官:为什么Vue中的v-if和v-

    2024年02月16日
    浏览(47)
  • 前端面试:常见的HTML、CSS和JavaScript问题解答

    前端开发面试中,HTML、CSS和JavaScript是必考点。以下是常见的HTML、CSS和JavaScript问题的解答,希望能对前端开发者的面试有所帮助。 文档类型(doctype)的作用是什么? 文档类型用来告诉浏览器当前页面使用哪种HTML标准进行渲染。不同的HTML标准支持的标签和属性有所差异,因

    2024年02月08日
    浏览(72)
  • 前端 | (二)各种各样的常用标签 | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月16日
    浏览(54)
  • 前端 | (五)CSS三大特性及常用属性 | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月17日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包