html面试题｜青训营笔记这是我参与「第四届青训营」笔记创作活动的的第1天 html相关面试题汇总(最后公布答案)

这是我参与「第四届青训营」笔记创作活动的的第1天

html相关面试题汇总(最后公布答案)

[常用的列表标签都有哪些？]
[哪些标签会阻塞浏览器渲染？]
[图片img标签为什么要设置alt属性？]
[如何使表单标签自动对焦？]
[input 输入框标签有哪些常用的属性？]
[什么场景下会禁用表单标签？]
[如何为video设置缩略图？]
[textarea 文本域标签如何禁止拉伸？]
[请说出两种html下拉框的实现方式]
[为什么设置'autoplay'的音视频标签仍无法自动播放？]

暂且列举了10道相关的面试题，请先思考几分钟是否有一个合理的回答之后，再看下面的答案解释

（部分答案是自己从网上搜素资料后总结，不一定完全正确，仅供参考）

常用的列表标签都有哪些？

ex: 常用的列表标签有三种无序列表，有序列表，键-值对列表；无序列表. 无序列表ul标签内可以包含多个li标签，即一个ul内可含多个li元素的无序列表或项目符号列表;li 标签默认会含有黑色或者空心小圆点，我们可以通过全局使用list-style-type:none来取消小圆点的展示，有序列表ol标签内可以包含多个ol标签，ol标签默认按照数字1，2，3..的顺序排列，我们可以设置type的属性或者通过css设置list-style-type来调整ol标签的排列，type值可以取'a'(从a开始) 'A','i','I'(罗马数字)，另外还有键-值对列表，平时用的可能比较少，外层是dl标签，里面dt和dd标签为相关的键值对，代码举例说明 name: 张三

<dl>
  <dt>Name</dt>
  <dd>张三</dd>
</dl>

哪些标签会阻塞浏览器渲染？

一般情况下，阻塞渲染有两种情况，css阻塞和js阻塞，大多数情况是由于外部或内部的link标签的引入，使得后面的标签需要等待前面css和js引入后才会进行后续的dom的渲染。

css,js 阻塞渲染的示例代码：

<body>
    <h1>AAA</h1>
    <link href="style.css" rel="stylesheet">
    <script src="./test.js"></script>
    <h2>BBB</h2>
</body>

解决方案，css文件一般在head部分引入，js文件根据需求可以在head部分或者最后html渲染完毕后引入

图片img标签为什么要设置alt属性？

alt属性是img元素的必选属性，它给出了图像的备选文本，供图像无法显示时采用。

当用户因为某种原因（比如：打开速度慢、src属性存在错误或者用户使用了屏幕阅读器）不能查看图像时，alt属性提供了替代信息，能够在一定程度上缓解用户的等待焦虑

如何使表单标签自动对焦？

要实现这种效果，我们需要用到 input 标签的 autofocus 属性

<input autofocus="autofocus" />

实测如果两个 input 标签都使用了 autofocus 属性，在谷歌浏览器中，鼠标仍会聚焦于第一个 input 标签

input 输入框标签有哪些常用的属性？

name: 名称
id: 唯一ID
maxlength：最大长度
minlength：最小长度
required：是否必填
placeholder：当表单控件为空时，控件中显示的内容

什么场景下会禁用表单标签？

点击提交按钮后，向服务器发送请求暂时未得到反馈，可以将提交按钮和表单内部元素设置为禁用，避免多次点击，对服务器产生不必要的压力。

禁用标签常用disable 属性设置

如果出现权限无法查看某些表单元素，一般可以采取hidden（隐藏）的属性设置表单

某些表单元素仅支持观看不支持修改，一般可以采取readonly（只读），不可以修改内部内容

如何为video设置缩略图？

将视频第一帧显示为缩略图：

添加 preload="metadata"到您的视频标签和第一帧的第二个#t=0.5到您的视频源：

<video width="400" controls="controls" preload="metadata">
  <source src="视频地址.mp4#t=0.5" type="video/mp4">
</video>

textarea 文本域标签如何禁止拉伸？

可以设置文本域内部的样式： style="resize:none"

请说出两种html下拉框的实现方式

可以使用select和option 或者 input和datalist，option结合使用

<!-- 两种下拉框 -->
		<select name="cars"><!-- 下拉框 -->
			<option value="1"></option>
			<option value="2"></option>
			<option value="3"></option>
			<option value="4"></option>
		</select><br />
		<form>
			<input list="browsers"/><!-- 这里input配合input使用，list要和id相同 -->
			<datalist id="browsers"><!-- 这样就可以搜索选项 -->
				<option value="1"></option>
				<option value="2"></option>
				<option value="3"></option>
				<option value="4"></option>
			</datalist>
		</form>

为什么设置'autoplay'的音视频标签仍无法自动播放？

首先这个问题可能在某些浏览器中不存在，这也导致某些浏览器突然弹出一个有声音广告弹窗或者'有颜色'的视频，可能会导致某些不必要的尴尬。

但作为兼容性比较好的浏览器Chorme浏览器解析时会产生这个问题，首先Chrome浏览器只允许用户对网页进行主动触发后才可自动播放音频和视频。但是Chrome不允许在用户对网页进行触发之前播放音频，而视频其实是不受限制的。但因为视频文件同样包含了音频，所以也一同被禁止了。Chrome这样做的目的是为了防止开发者滥用自动播放功能而对用户产生骚扰。

比较常规的做法是，为video标签设置muted属性，使它静音，这样视频就能自动播放了，但是没有声音。然后待用户在网页上有了任意触发或者根据提示点击取消静音后，再将muted去掉。或者让用户手动去打开音频（前几天青训营用的飞书直播，腾讯视频等都是这样处理的）。

<video muted></video>

html面试题 ｜ 青训营笔记