前端面试那些事【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选择器进行控制。


目录
相关文章
|
1月前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
26天前
|
存储 XML 移动开发
前端大厂面试真题
前端大厂面试真题
|
2天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
24 13
|
23天前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
23 2
|
23天前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
19 0
|
24天前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
44 个 React 前端面试问题
|
29天前
|
存储 JavaScript 前端开发
|
29天前
|
前端开发 Java 编译器
【前端学java】java中的Object类和前端中的Object有什么区别(9)
【8月更文挑战第10天】java中的Object类和前端中的Object有什么区别
30 0
【前端学java】java中的Object类和前端中的Object有什么区别(9)
|
29天前
|
Web App开发 存储 缓存
|
30天前
|
存储 前端开发 JavaScript
【前端学java】面向对象编程基础-类的使用(4)
【8月更文挑战第9天】面向对象编程基础-类的使用
10 0
【前端学java】面向对象编程基础-类的使用(4)