前端面试笔试题目-HTML专项练习(基础)

简介: 前端面试笔试题目-HTML专项练习(基础)

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 中的新属性:


image.png


相关文章
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
55 6
|
2月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
76 1
|
3月前
|
缓存 关系型数据库 MySQL
面试题目总结
面试题目总结
112 6
|
4月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
279 1
|
4月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
74 13
|
3月前
|
Java C++ Python
【面试宝典】深入Python高级:直戳痛点的题目演示(下)
【面试宝典】深入Python高级:直戳痛点的题目演示(下)
|
3月前
|
设计模式 Unix Python
【面试宝典】深入Python高级:直戳痛点的题目演示(上)
【面试宝典】深入Python高级:直戳痛点的题目演示(上)
|
4月前
|
移动开发 前端开发 JavaScript
使用html-to-image代替html2canvas,结合jspdf实现下载pdf(下载截图下载前端dom元素)
本文介绍了在前端项目中,当使用`html2canvas`遇到问题时,如何使用`html-to-image`库作为替代方案,结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题,并提供了该库的使用示例代码。随后,详细介绍了`html-to-image`库的安装和使用方法,展示了如何将DOM元素转换为Canvas,再利用`jspdf`生成PDF文件。最后,文章通过示例代码说明了整个转换和下载的过程,并展示了效果截图。
254 0
|
5月前
|
存储 移动开发 前端开发
HTML5时代来临,这些新特性你掌握了吗?一篇文章带你玩转Web前端技术潮流!
【8月更文挑战第26天】HTML5(简称H5)作为新一代Web标准,相比HTML4带来了诸多增强功能。
81 2
|
5月前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
81 0