前端面试题集锦——HTML篇
作者：Paula Hu
点赞是对原创者最大的肯定，我希望在这里看到你努力的身影~~~😘😘😘
写在前面
近期题主开始准备校招面试啦（感谢内推~~~😝😝😝）。目前总结了各大站点面经出现的比较高频的知识点和一些经典的面试题，汇总在一起，并且分享给大家。这个系列会不断更新，希望能够帮助到大家，也欢迎各位提出宝贵的意见和建议。
高频
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>
