• 【HTML/CSS篇】牛客题库练习

    【HTML/CSS】牛客题库练习

    1. HTML

    HTML菜鸟教程

    题库
    在这里插入图片描述

    1.1 FED1-表单类型

    在这里插入图片描述

    ⭐方法1

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

    • 1
    • 2
    • 3
    • 4
    • 5

    🌸注意

    在这里插入图片描述

    1.2 FED2-表格结构

    在这里插入图片描述

    ⭐方法1

     <table>
      <caption>nowcodercaption>
      <tr>
          <td>td>
          <td>td>
          <td>td>
      tr>
      <tr>
          <td>td>
          <td>td>
          <td>td>
      tr>
  table>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    🌸注意

    html表格菜鸟教程

    • 标签定义表格的标题。 标签必须直接放置到 标签之后。只能对每个表格定义一个标题。提示：通常这个标题会被居中于表格之上。然而，CSS 属性 "text-align" 和 "caption-side" 能用来设置标题的对齐方式和显示位置
    • 合并单元格
      横向 合并单元格在td标签中使用colspan属性，属性值为需要合并单元格的个数，同时将被合并的单元格td删除
      纵向 合并单元格在td标签中使用rowspan属性，属性值为需要合并单元格的个数，同时将被合并的单元格td删除

    1.3 FED3-图像标签属性

    在这里插入图片描述

    ⭐方法1

    <img alt="" title="">img>

    • 1

    🌸注意

    html图像菜鸟教程

    1.4 FED4-新窗口打开文档

    在这里插入图片描述

    ⭐方法1

    <a href="#" target="_blank">FFa>

    • 1

    🌸注意

    • 新窗口跳转属性 target=“_blank”

    1.5 FED5-自定义列表

    在这里插入图片描述

    ⭐方法1

    <dl>
    
    <dt>nowcoderdt>
    <dd>nowcoderdd>  
dl>

    • 1
    • 2
    • 3
    • 4
    • 5

    🌸注意

    html列表菜鸟教程

    • 有序列表 ol
    • 无序列表ul
    • 自定义列表
    <dl>
<dt>Coffeedt>
<dd>- black hot drinkdd>
<dt>Milkdt>
<dd>- white cold drinkdd>
dl>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    1.6 FED73-加粗字体

    在这里插入图片描述

    ⭐方法1

    <p><strong>牛客网strong>，程序员必备求职神器p>

    • 1

    🌸注意

    -加粗strong

    1.7 FED6-语义化标签

    在这里插入图片描述

    ⭐方法1

    <header>
    <nav>nav>
header>


    • 1
    • 2
    • 3
    • 4

    🌸注意

    • video属性在这里插入图片描述
    • onerror事件在这里插入图片描述

    2. CSS

    CSS菜鸟教程

    2.1 FED9-CSS选择器–标签、类、ID选择器

    在这里插入图片描述

    ⭐方法1

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

        style>
    head>
    <body>
        <div>红色div>
        <div class='green'>绿色div>
        <div id='black'>黑色div>
    body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    🌸注意

    • class是.
    • id是#

    2.2 FED10- CSS选择器–伪类选择器

    在这里插入图片描述

    ⭐方法1

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    🌸注意

    • 在这里插入图片描述

    2.3 FED11-CSS选择器–伪元素

    在这里插入图片描述

    ⭐方法1

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    🌸注意

    • div::after表示在div元素后插入内容。
    • 在元素上，content 的初始值为 ‘normal’。在:before和:after上，如果指定了content 的初始值为 ‘normal’，则计算为 ‘none’ 。content 的值设置为 ‘none’ 不会生成伪元素。所以:before和:after才需要指定一个看似无意义的 content: “”; 来初始化content的值。
    • 题目规定了宽高，为了使宽高设置有效又必须显式定义该伪元素为块级元素，也就是语句 display:block

    2.4 FED12- 按要求写一个圆

    在这里插入图片描述

    ⭐方法1

    <html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            div{
                border: 1px solid black;
                width:100px;
                height:100px;
                border-radius:50px;
                 }
        style>
    head>
    <body>
        <div>div>
    body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    🌸注意

    • 圆角属性可以用50%,也可50px
      在这里插入图片描述

    2.5 FED13-设置盒子宽高

    在这里插入图片描述

    ⭐方法1

    <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    🌸注意

    在这里插入图片描述

    2.6 FED14- 浮动和清除浮动

    在这里插入图片描述

    ⭐方法1

    <html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .wrap {
                /*补全代码*/
                overflow:hidden;
                
            }
             .left {
                width: 100px;
                height: 100px;
                /*补全代码*/
                 float:left;
                
            }
             .right {
                width: 100px;
                height: 100px;
                /*补全代码*/
                 float:left
                
            }
        style>
    head>
    <body>
        <div class='wrap'>
            <div class='left'>div>
            <div class='right'>div>
        div>
    body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    🌸注意

    2.7 FED15-固定定位

    在这里插入图片描述

    ⭐方法1

    <html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                /*补全代码*/
                position:fixed;
                top:0px;
                left:0px;
            }
        style>
    head>
    <body>
        <div class='box'>div>
    body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    🌸注意

    在这里插入图片描述

    2.8 FED74-段落标识

    在这里插入图片描述

    ⭐方法1

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

    • 1

    🌸注意

    2.9 FED75-设置文字颜色

    在这里插入图片描述

    ⭐方法1

    <p >欢迎来到牛客网p>
<p>在这里，我们为你提供了IT名企的笔试面试题库p>
<p>在这里，我们以题会友p>
<style>
    p{
        color:red
    }
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    🌸注意

    2.10 FED76-圣诞树

    在这里插入图片描述

    ⭐方法1

    DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .topbranch {
                width: 0px;
                height: 0px;
                /*
                * TODO: 上枝叶效果
                */
               float: left;
                border-bottom: 100px solid green;
                border-top: 100px solid transparent;
                border-left:100px solid transparent;
                border-right:100px solid transparent;
                margin-left: 100px;
            }
            .middleBranch {
                width: 0px;
                height: 0px;
                /*
                * TODO: 中枝叶效果
                */
                border-top: 200px solid transparent;
                border-bottom: 200px solid green;
                border-left:200px solid transparent;
                border-right:200px solid transparent;
            }
            .base {
                /*
                * TODO: 树干效果
                */
                height: 200px;
                width: 70px;
                background-color: gray;
                margin-left: 165px;
            }
        style>
    head>
    <body>
    	<section class="topbranch">section>
        <section class="middleBranch">section>
        <section class="base">section>
    body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

    🌸注意

    • 在这里插入图片描述
    • 利用树顶的浮动,使他脱离文档流,达到树中和树顶的靠拢;

    在这里插入图片描述

    2.11 FED18-CSS单位(一)

    在这里插入图片描述

    ⭐方法1

    <html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box {
                /*补全代码*/
                width: 4em;
                height: 4em;
            }
        style>
    head>
    <body>
        <div class='box'>div>
    body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    🌸注意

    • em是相对于自身字体大小的单位

    2.12 FED19-CSS单位(二)

    在这里插入图片描述

    ⭐方法1

    🌸注意

    在css中单位长度用的最多的是px、em、rem，这三个的区别是：

    • px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
    • em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
    • 对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。

    3. WebAPI

  • 相关阅读:
    力扣（494.474）补7.30
    SAP ABAP OBJECTS_NOT_CHARLIKE
    VMware虚拟机安装+Ubuntu安装+VMware Tools安装+虚拟机中系统的移动
    python版 html正文提取(CEPF)
    python-异常try-except
    【SpringBoot3.x教程03】SpringBoot自动配置详解
    jQuery之事务相关操作
    海藻酸钠-聚丙烯酸|PAA-alginate|海藻酸钠-聚乙二醇-聚丙烯酸
    Python学习笔记之运算符的使用
    Chapter 3. Char Drivers
  • 原文地址：https://blog.csdn.net/weixin_50927106/article/details/126441726