阅读 3082

前端面试题集锦——HTML篇

前端面试题集锦——HTML篇

作者:Paula Hu

博客:掘金主页知乎主页GitHub主页

点赞是对原创者最大的肯定,我希望在这里看到你努力的身影~~~😘😘😘

写在前面

近期题主开始准备校招面试啦(感谢内推~~~😝😝😝)。目前总结了各大站点面经出现的比较高频的知识点和一些经典的面试题,汇总在一起,并且分享给大家。这个系列会不断更新,希望能够帮助到大家,也欢迎各位提出宝贵的意见和建议。

高频

1. 你是怎么理解HTML语义化

Step 1:先举例说明

HTML语义化简单来说就是用正确的标签来做正确的事。
比如表示段落用 p 标签、表示标题用 h1-h6 标签、表示文章就用 article 等。

Step 2:说说为什么需要使用语义化标签

  • 前期:前端工作主要由后端人员完成,也就是打野阶段,使用的是table布局
  • 中期:美工人员使用div+css来完成
  • 当前:专业的前端开发应该使用合适的标签来表达正确含义的页面结构

让页面具有良好的结构和含义,可以有效提高:

  • 可访问性:帮助辅助技术更好的阅读和转译你的网页,利于无障碍阅读;
  • 可检索性:有了良好的结构和语义,可以提高搜索引擎的有效爬取,提高网站流量;
  • 国际化:全球只有13%的人口是英语母语使用者,因此通用的语义化标签可以让各国开发者更容易弄懂你网页的结构;
  • 互用性:减少网页间的差异性,帮助其他开发者了解你网页的结构,方便后期开发和维护

2. 你用过哪些HTML5标签

表示结构的标签

<header>  <nav> <main> <article> <section> <aside> <footer>

表示文字形式

<data> :

举例:展示了一些产品名称,而且每个名称都和一个产品编码相关联。

<p>新产品</p>
<ul>
 <li><data value="398">迷你番茄酱</data></li>
 <li><data value="399">巨无霸番茄酱</data></li>
 <li><data value="400">超级巨无霸番茄酱</data></li>
</ul>
复制代码

<time> :

表示日期和时间值,机器读取通过 datetime 属性指定。

举例:

<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>
复制代码

<mark> :用于高亮文本

嵌入内容

<video> :

  • controls:展示视频自带的控件
  • autoplay:视频马上自动播放
  • poster:海报帧的URL
  • height、width:视频显示区域的宽和高
  • loop:视频结尾自动回到视频开始的地方
<video controls>
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is
     a <a href="myVideo.mp4">link to the video</a> instead.</p>
</video>

<!-- Simple video example -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
  抱歉,您的浏览器不支持内嵌视频,不过不用担心,你可以 <a href="videofile.ogg">下载</a>
  并用你喜欢的播放器观看!
</video>

<!-- Video with subtitles -->
<video src="foo.ogg">
  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>
复制代码

<audio> :

大部分同 <vedio>

  • controls:展示音频自带的控件
  • autoplay:音频马上自动播放
  • muted:是否静音
  • loop:音频结尾自动回到开始的地方
<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg">
  <source src="myAudio.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is
     a <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>

<!-- Simple audio playback -->
<audio
  src="AudioTest.ogg"
  autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>

<audio controls>
 <source src="foo.opus" type="audio/ogg; codecs=opus"/>
 <source src="foo.ogg" type="audio/ogg; codecs=vorbis"/>
 <source src="foo.mp3" type="audio/mpeg"/>
</audio>
复制代码

<canvas> :

通过JavaScript 和 HTML的 <canvas> 元素来绘制图形

<canvas id="canvas" width="300" height="300"></canvas>
复制代码
//获取HTML <canvas> 元素的引用
const canvas = document.getElementById('canvas');
//获得一个绘图上下文
const ctx = canvas.getContext('2d');

//让长方形变成绿色
ctx.fillStyle = 'green';
//将它的左上角放在(10, 10),把它的大小设置成宽150高100
ctx.fillRect(10, 10, 150, 100);
复制代码

3. meta viewport 是做什么用的,怎么写?

Step 1:使用目的

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

Step 2:怎么写

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

Step 3:解释每个单词的含义

  • with=device-width 将布局视窗(layout viewport)的宽度设置为设备屏幕分辨率的宽度
  • initial-scale=1 页面初始缩放比例为屏幕分辨率的宽度
  • maximum-scale=1 指定用户能够放大的最大比例
  • minimum-scale=1 指定用户能够缩小的最大比例

4.H5是什么

简单粗暴:就是一种移动端页面

深入点:微信上的一种移动营销页面
总之不是HTML5

中频

1. label标签的作用

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

<label for="Name">Number:</label>
<input type='text' name="Name" id="Name"/>

<label>Date:<input type="text" name="B"/></label>
复制代码

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

首先:CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,如div的display默认值为“block”,则为“块级”元素;span默认display属性值为“inline”,是“行内”元素。

  • 常用的块状元素有: <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

  • 常用的内联元素有: <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

  • 常用的内联块状元素有: <img>、<input>

  • 知名的空元素: <br/> <hr/> <img/> <input/> <link/> <meta/> <br />

低频

1. a标签中 如何禁用href 跳转页面 或 定位链接

e.preventDefault();
href="javascript:void(0);
复制代码

2. canvas在标签上设置宽高 和在style中设置宽高有什么区别

canvas标签的width和height是画布实际宽度和高度,绘制的图形都是在这个上面。而style的width和height是canvas在浏览器中被渲染的高度和宽度。如果canvas的width和height没指定或值不正确,就被设置成默认值 。

3. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

  • IE: trident内核
  • Firefox:gecko内核
  • Safari:webkit内核
  • Opera:以前是presto内核,Opera现已改用GoogleChrome的Blink内核
  • Chrome:Blink(基于webkit,Google与Opera Software共同开发)

4. iframe有哪些缺点?

iframe是一种框架,也是一种很常见的网页嵌入方

iframe的优点:
   1.iframe能够原封不动的把嵌入的网页展现出来。
   2.如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。
   3.网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。
   4.如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。
iframe的缺点:
   1.会产生很多页面,不容易管理。
   2.iframe框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差。
   3.代码复杂,无法被一些搜索引擎索引到,这一点很关键,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化。
   4.很多的移动设备(PDA 手机)无法完全显示框架,设备兼容性差。
   5.iframe框架页面会增加服务器的http请求,对于大型网站是不可取的。
   现在基本上都是用Ajax来代替iframe,所以iframe已经渐渐的退出了前端开发。

深入

1. HTML5新特性

  • 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失; sessionStorage 的数据在浏览器关闭后自动删除;
  • 新的技术webworker, websocket, Geolocation;

2. HTML5离线储存

在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。
原理: HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。
如何使用:

  • 页面头部像下面一样加入一个manifest的属性;
  • 在cache.manifest文件的编写离线存储的资源;

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html

  • 在离线状态时,操作window.applicationCache进行需求实现。


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

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

博文推荐

文章分类
前端
文章标签