前端面试笔试题目-HTML专项练习（基础）

题目来源：牛客网：https://www.nowcoder.com/

1、表单输入框（input）类型

• 请依次写出以下类型的输入框。
• 1、类型为密码，默认值为"nowcoder"
• 2、类型为复选框，且状态为已勾选

<form>
    <!-- 补全代码 -->
    <input type="password" value="nowcoder">
    <input type="checkbox" checked>
</form>

表单总结：

• <input>，最重要的表单元素，根据不同的 type 属性

type类型	描述
text	常规文本输入（默认）
password	密码字段
radio	单选按钮输入
checkbox	多选按钮输入
submit	提交按钮（提交表单）

2、图像标签属性（img）

• 请写出具有标题属性和代替文本属性的图片标签

<!-- 补全代码 -->
<img src="  图片地址 "    title=" 标题属性 "    alt=" 代替文本属性 "   >

---

3、新窗口打开文档（target）

• 请写出可以在新窗口打开文档的a标签

<!-- 补全代码 -->
<a href=" " target="_blank" ></a>

• <a> 标签的 target 属性：

值	描述
_self	默认。在相同的框架中打开被链接文档
_black	在新窗口中打开被链接文档
_top	在整个窗口中打开被链接文档
_parent	在父框架集中打开被链接文档

---

4、表单结构（标题、行、列）

• 1、标题为"nowcoder"
• 2、表格为2行3列

<table>
    <!-- 补全代码 -->
    <caption>nowcoder</caption>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

---

5、自定义列表（dl、dt、dd）

• 1、请写出列表项为"nowcoder"
• 2、列表项内容也为"nowcoder"的自定义列表

<dl>
    <!-- 补全代码 -->
    <dt>nowcoder</dt>
    <dd>nowcoder</dd>
</dl>

列表总结（无序、有序、自定义）:

• 1、无序列表（ul li）

• 2、有序列表（ol li）

• 3、自定义列表（dl dt dd）

---

6、音频媒体标签属性（audio）

• 请写出具有控件功能的音频媒体标签

<!-- 补全代码 -->
<audio src="" controls="true"></audio>

HTML5 中的新属性:

属性值	功能
autoplay	音频在就绪后马上播放
controls	显示控件，比如播放按钮
loop	每当音频结束时重新开始播放
muted	规定视频输出应该被静音
preload	音频在页面加载时进行加载，并预备播放
src	要播放的音频的 URL

---

7、视频媒体标签属性（video）

• 请写出具有当视频的媒体数据加载期间发生错误时执行某个方法事件的视频媒体标签

<!-- 补全代码 -->
<video onerror=""></video>

HTML5 中的新属性:

属性值	功能
autoplay	视频在就绪后马上播放
controls	显示控件，比如播放按钮
loop	当媒介文件完成播放后再次开始播放
muted	规定视频的音频输出应该被静音
preload	视频在页面加载时进行加载，并预备播放
src	要播放的视频的 URL
height	设置视频播放器的高度
width	设置视频播放器的宽度
poster	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像