前端面试那些事【dt/dd、audio、onerror、标签、类、ID选择器、伪类选择器......

简介: 前端面试那些事【dt/dd、audio、onerror、标签、类、ID选择器、伪类选择器......

自定义列表

问题 1:

请写出列表项为"这是dt标签"且列表项内容也为"这是dd标签"的自定义列表。

解答:

<dl>
    <!-- 补全代码 -->
    <dt>这是dt标签<dt/>
    <dd>这是dd标签<dd/>
    <dd>这是第二个dd标签<dd/>
</dl>

image.png有没有发现dd相比于dt缩进了一段距离。dd和dt在开发商还是很常见的,这两个标签只需要记住就好。


总结:

🥭🥭1、dl是自定义列表的整体,用于包裹dt和dd

🥭🥭2、dt是表示自定义列表的主题

🥭🥭3、dd是表示针对自定义列表主题的每一项内容

语义化标签

问题 2:

请使用语义化标签创建头部标签且包含导航标签。

注意:只需在html模块填写标签结构,有且仅有一个头部标签和一个导航标签。


解答:

<!-- 补全代码 -->
<html>
    <head><head>
    <title>标题</title>
    <body>
       <header>
         <nav>导航栏</nav>   
       </header>
    </body>
 <html>

image.png总结:

🥭🥭这个语义化标签大家自由发挥,很简单就不做总结了。

音频媒体标签属性

问题 3:

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

<!-- 补全代码 -->
<figure>
    <figcaption>Listen to the T-Rex:</figcaption>
    <audio
        controls
        src="https://y.qq.com/n/ryqq/songDetail/002iaZUX0Uo1O2">       
    </audio>
</figure>

image.png怎么样,是不是特别酷,点击播放按钮就可以播放音乐了。因为牛客这个不支持,所以无法播放,感兴趣思维小伙伴可以那专门写前端的工具(Vscode、Webstorm等等)试一试,感受一把前端的魅力。


总结:

🥭🥭1、audio是音频,看成视频了,视频是video,图片是Img。

🥭🥭2、src可以使用在线地址,也可以使用本地的音频地址。

🥭🥭3、,核心代码。

视频媒体标签属性

问题 4:

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

<!-- 补全代码 -->
<video src="movie.mp4" onerror="myFunction()" controls="controls">
抱歉,加载视频失败
</video>

image.pngCSS选择器——标签、类、ID选择器

问题 4:

请将html模块中字体内容是"红色"的字体颜色设置为"rgb(255, 0, 0)",“绿色"设置为"rgb(0, 128, 0)”,“黑色"设置为"rgb(0, 0, 0)”,且字体大小都为20px。

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            div{
    font-size:20px;
    color:rgb(255,0,0);
}
.green{
    color:rgb(0, 128, 0)
}
#black{
    color:rgb(0, 0, 0)
}
        </style>
    </head>
    <body>
        <div>红色</div>
        <div class='green'>绿色</div>
        <div id='black'>黑色</div>
    </body>
</html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            div{
    font-size:20px;
    color:rgb(255,0,0);
}
.green{
    color:rgb(0, 128, 0)
}
#black{
    color:rgb(0, 0, 0)
}
        </style>
    </head>
    <body>
        <div>红色</div>
        <div class='green'>绿色</div>
        <div id='black'>黑色</div>
    </body>
</html>

CSS选择器——伪类选择器

问题 4:

请将html模块中字体内容是"红色"的字体颜色设置为"rgb(255, 0, 0)",“绿色"设置为"rgb(0, 128, 0)”,“黑色"设置为"rgb(0, 0, 0)”,且字体大小都为20px。

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            ul li:nth-child(2n) {
                background-color: rgb(255,0,0);
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </body>
</html>

image.png总结:

🥭🥭CSS有以下十一种选择器。

1、元素选择器; 2、id选择器; 3、类选择器; 4、分组选择器(并集选择器); 5、复合选择器(交集选择器); 6、通配选择器; 7、后代元素选择器; 8、子元素选择; 9、伪类选择器; 10、属性选择器; 11、兄弟元素选择器。


🥭🥭css选择器就是用于指向需要css作用的标签,让css样式知道自己需要到那个标签上去;所以想要用css为html页面中的元素添加样式,就需要用到css选择器,而css设置样式都是通过css选择器进行控制。


目录
相关文章
|
3月前
|
安全 Java 容器
【Java集合类面试二十七】、谈谈CopyOnWriteArrayList的原理
CopyOnWriteArrayList是一种线程安全的ArrayList,通过在写操作时复制新数组来保证线程安全,适用于读多写少的场景,但可能因内存占用和无法保证实时性而有性能问题。
|
3月前
|
存储 安全 Java
【Java集合类面试二十五】、有哪些线程安全的List?
线程安全的List包括Vector、Collections.SynchronizedList和CopyOnWriteArrayList,其中CopyOnWriteArrayList通过复制底层数组实现写操作,提供了最优的线程安全性能。
|
3月前
|
Java
【Java集合类面试二十八】、说一说TreeSet和HashSet的区别
HashSet基于哈希表实现,无序且可以有一个null元素;TreeSet基于红黑树实现,支持排序,不允许null元素。
|
3月前
|
Java
【Java集合类面试二十三】、List和Set有什么区别?
List和Set的主要区别在于List是一个有序且允许元素重复的集合,而Set是一个无序且元素不重复的集合。
|
3月前
|
Java
【Java集合类面试二十六】、介绍一下ArrayList的数据结构?
ArrayList是基于可动态扩展的数组实现的,支持快速随机访问,但在插入和删除操作时可能需要数组复制而性能较差。
|
3月前
|
存储 Java 索引
【Java集合类面试二十四】、ArrayList和LinkedList有什么区别?
ArrayList基于动态数组实现,支持快速随机访问;LinkedList基于双向链表实现,插入和删除操作更高效,但占用更多内存。
|
15天前
|
存储 Java 程序员
Java基础的灵魂——Object类方法详解(社招面试不踩坑)
本文介绍了Java中`Object`类的几个重要方法,包括`toString`、`equals`、`hashCode`、`finalize`、`clone`、`getClass`、`notify`和`wait`。这些方法是面试中的常考点,掌握它们有助于理解Java对象的行为和实现多线程编程。作者通过具体示例和应用场景,详细解析了每个方法的作用和重写技巧,帮助读者更好地应对面试和技术开发。
55 4
|
2月前
|
安全 Java 应用服务中间件
JVM常见面试题(三):类加载器,双亲委派模型,类装载的执行过程
什么是类加载器,类加载器有哪些;什么是双亲委派模型,JVM为什么采用双亲委派机制,打破双亲委派机制;类装载的执行过程
JVM常见面试题(三):类加载器,双亲委派模型,类装载的执行过程
|
24天前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
60 1
|
2月前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点

热门文章

最新文章

下一篇
无影云桌面