牛客网前端面试题目（1）

不会编程的小任

已于 2022-10-19 20:56:22 修改

阅读量444

点赞数

分类专栏： html 文章标签： css html css3

于 2022-10-19 20:30:57 首次发布

本文链接：https://blog.csdn.net/aiyalhh/article/details/127408762

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

牛客网前端面试题目（1）

HTML篇

1、描述

请依次写出以下类型的输入框。

类型为密码，默认值为"nowcoder"
类型为复选框，且状态为已勾选

        <input type="password" value="nowcoder">
        <input type="checkbox" checked>

2、描述

请写出具有表格标题为"nowcoder"的2行3列表格结构。

<table border="1">
        <caption>nowcoder</caption> 
        <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
</table>

3、描述

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

<img src="xxx" alt="image" title="解释">

4、描述

请写出列表项为"nowcoder"且列表项内容也为"nowcoder"的自定义列表。

    <dl>
        <dt>nowcoder</dt>
        <dd>nowcoder</dd>
    </dl>

5、描述

请使用语义化标签创建头部标签且包含导航标签。
注意：只需在html模块填写标签结构，有且仅有一个头部标签和一个导航标签。

 <header>
    <nav></nav>
   </header>

6、描述

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

<audio controls></audio>

7、描述

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

  <video controls onerror="function()"/>

CSS篇

1、描述

请将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{
            color: rgb(255, 0, 0);
            font-size: 20px;
           } 
           .green{
            color: rgb(0, 128, 0);
           }
           #black{
            color: rgb(0, 0, 0);
           }
        </style>
    </head>
    <body>
        <div id="red">红色</div>
        <div class='green'>绿色</div>
        <div id='black'>黑色</div>
    </body>
</html>

2、描述

请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成"rgb(255, 0, 0)"。

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            #change{
                background-color: rgb(255, 0, 0);
            }
            
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li id="change">2</li>
            <li>3</li>
            <li id="change">4</li>
        </ul>
    </body>
</html>

3、描述

请给html模块的div元素加一个后伪元素，且后伪元素的宽度和高度都是20px，背景颜色为"rgb(255, 0, 0)"。

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
           div::after{
          content:"hh";
          width: 20px;
          height: 20px;
          background-color: rgb(255,0,0);
          display: block;
        }  
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

4、描述

请将html模块的div元素设置为一个半径是50px的圆，且边框为1px的黑色实线。
要求：

圆角属性仅设置一个值
圆角属性单位请使用px
注意：由于圆角属性设置广泛且都可以实现题目效果，所以请按照要求规范书写。

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
                margin: 10px;
                padding: 20px;
            }

        </style>
    </head>
    <body>
        <div class="box">
        </div>
    </body>
</html>

5、描述

请将html模块类为"box"的div元素宽度和高度都设置为100px，且内间距为20px、外间距为10px。

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
                margin: 20px;
                padding: 10px;
            }

        </style>
    </head>
    <body>
        <div class="box">
        </div>
    </body>
</html>

6、描述

请将下面这句话以段落的形式展示在浏览器中——“牛客网是一个专注于程序员的学习和成长的专业平台。”

<p>牛客网是一个专注于程序员的学习和成长的专业平台。</p>

待更新…

不会编程的小任

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
牛客网前端面试题目（1）

前端必刷题目
复制链接

扫一扫

专栏目录