日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問(wèn) 生活随笔！

生活随笔

當(dāng)前位置： 首頁(yè) > 前端技术 > HTML >内容正文

HTML

前端学习-试卷

發(fā)布時(shí)間：2025/7/25 HTML 64 豆豆
生活随笔 收集整理的這篇文章主要介紹了 前端学习-试卷 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

前端學(xué)習(xí)-試卷 1（滿分100+20，90分及格）

?一、填空題（每題4分，共20分）：

  • html{ font-size: 12px; } div{ font-size: 2.5rem }，div的字號(hào)是： _30px_____
  • 有上下兩個(gè)div分別標(biāo)記為A和B，A{ margin-bottom: 20px } B{ margin-top: 30px }，在不考慮瀏覽器兼容的前提下，AB之間的間距是：__30px______
  • 使一個(gè)div左右居中且上下外邊距均為3倍字號(hào)的最簡(jiǎn)潔寫法是：__margin:3em auto__________________
  • 在不使用浮動(dòng)的前提下，能使塊級(jí)元素橫向排列的css屬性是：_________inline inline-block _________
  • 在css選擇器中，聲明節(jié)點(diǎn)ID的選擇器是：______#____選擇器

    • ?二、選擇題（每題4分，共同20分）：

  • (?D )? 可以呈現(xiàn)透明度的圖片格式是：

    • A.? jpg

    B.? gif

    C.? png8

    D.? png24

    //透明度！=透明度0//只有PNG24

    //GIF PNG8都是不帶阿爾法通道的

    ?

    • (??C? )? 下列選項(xiàng)哪個(gè)為群組選擇器：

    A.? div > span >p{ ... }

    B.? div #span #p{ ... }

    C.? div, span, p{ ... }

    D.? div .span .p{ ... }

    ?

  • (??? A)? 下列選擇，不是塊級(jí)元素和行內(nèi)元素差異的是：

    • A.? 需要清除浮動(dòng)與否

    B.? 獨(dú)占一行與另起一行

    C.? 高寬屬性有效與否

    D.? 與相鄰元素在同一行與否?

  • ?(?C )? 下列標(biāo)簽中，默認(rèn)為inline-block的是：

    • A.? section

    B.? article

    C.? label

    D.? blockquote

    //html有默認(rèn)IB ，所有表單元素都是默認(rèn)IB? //C是表單元素?

  • ?(??C? )? 能控制元素隱藏并占位的屬性是：

    • A.? overflow: hidden;

    B.? display: none;

    C.? visibility: hidden;

    D.? text-indent: -100%;

    ?? //A 隱藏溢出部分 //B隱藏 C可視區(qū)域可見與否，占位。?

    三、是非題（每題4分，共20分）：

  • (錯(cuò))?<!DOCTYPE HTML>是錯(cuò)誤的聲明寫法，聲明文檔類型必須使用小寫；
  • (??錯(cuò)? )? 一張網(wǎng)頁(yè)只能有一個(gè)<head>，但可以有多個(gè)<body>；
  • (??錯(cuò)? )? 內(nèi)聯(lián)樣式表應(yīng)當(dāng)寫在網(wǎng)頁(yè)內(nèi)部，外聯(lián)樣式表應(yīng)當(dāng)寫在網(wǎng)頁(yè)外部；
  • (???是?? )? rgba和opacity都是實(shí)現(xiàn)透明度，不同的是：rgba僅針對(duì)于顏色透明；而opacity可使dom元素及元素所有內(nèi)容透明；
  • (??是? )? content屬性可以用在任何元素的before/after偽類上，用來(lái)插入生成內(nèi)容。?

    • 四、應(yīng)用題（每題10分，共40分）：

  • 用最簡(jiǎn)潔的方式編寫一個(gè)clearfix類，用于清除浮動(dòng)：?

    • . .clearfix:before,.clearfix:after {???? content:"";???? display:table; };

    ?.clearfix:after {???? clear:both;???? overflow:hidden; } ;

    .clearfix {???? zoom:1; }/* for ie6 & ie7 */?

  • 闡述5個(gè)塊級(jí)元素和行內(nèi)元素的區(qū)別：

    • 1.

    2. 默認(rèn)情況下塊級(jí)元素寬度自動(dòng)填滿其父元素寬度,行內(nèi)元素

  • 獨(dú)占一行與另起一行
  • 高寬屬性有效與否
  • ?與相鄰元素在同一行與否?
    • 補(bǔ)充代碼，使得容器內(nèi)的多行文字上下左右居中顯示：

    html：

    <div>

    <p></p>

    </div>

    css：

    div{

    display: table;

    }

    p{

    [補(bǔ)充代碼]

    }

    補(bǔ)充代碼：display: table-row;?

  • 找出代碼中的5處錯(cuò)誤，在語(yǔ)義相同的前提下，加以改正：

    • div{

    width: auto;

    height: none;

    line-height: 1;

    text-align: justify;

    display: table-caption;

    position: none;

    visibility: show;

    verticle-align: center;

    list-style: point;

    }

    改正：

    height:0;

    position:static;

    visibility: visible;

    list-style:: disc;

    cursor: point;

    ?五、附加題（每題10分，共20分）：

  • 使用純css，實(shí)現(xiàn)一個(gè)自動(dòng)切換的幻燈片效果：
  • #wrap{
  • ????? position: relative;
  • ????? width: 300px;
  • ????? height: 200px;
  • }
  • .a,.b{
  • ????? position: absolute;
  • ????? left: 0;
  • 10. ????? top: 0;
  • 11. ????? width: 100%;
  • 12. ????? height: 100%;

    • 13. }

    14. .a{

  • 15. ????? background: #f00;
  • 16. ????? opacity: 1;
  • 17. ????? -webkit-animation: show 6s linear 0s infinite normal both;

    • 18. }

    19. .b{?

  • 20. ????? background: #ff0;
  • 21. ????? opacity:1;
  • 22. ????? -webkit-animation: show 6s linear 3s infinite normal both;

    • 23. }

    24. @-webkit-keyframes show{

  • 25. ????? 0%,20%{
  • 26. ?????????? opacity:1;
  • 27. ????? }
  • 28. ????? 40%,60%{
  • 29. ?????????? opacity: 0;
  • 30. ????? }
  • 31. ????? 80%,100%{
  • 32. ?????????? opacity: 1;
  • 33. ????? }

    • 34. }

    35. <div id="wrap">

  • 36. ????? <div class="a"></div>
  • 37. ????? <div class="b"></div>
  • 38. ????????????????
  • 39. ????????????????

    • 40. </div>

  • 41. ?

    • 42. 編寫一個(gè)表單，要求如下：

    1).? 點(diǎn)擊按鈕自動(dòng)提交

    2).? 表單請(qǐng)求類型為post

    3).? 表單提交參數(shù)：account、password、captcha

    4).? 使用html5自帶屬性校驗(yàn)元素是否為空

    ?

    <form action=”/”method=”post””這里貌似有一串那個(gè)什么設(shè)置編碼還是什么的”>

    <label for=”account”>account：</label>

    <input type=”text” name=”account” id=”account”required/>

    <label for=”password”>account：</label>

    <input type=”password” name=”password” id=”password”required/>

    <label for=”captcha”>account：</label>

    <input type=”text” name=”captcha” id=”captcha”required/>

    ????? <input value=”submit” type=”submit”/>

    </form>

    ?

    轉(zhuǎn)載于:https://www.cnblogs.com/eveblog/p/4728062.html

    總結(jié)

    以上是生活随笔為你收集整理的前端学习-试卷的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

    如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。