Html&Css test questions

1. Multiple-choice questions (2 points for each question)
1. In HTML, what mark is used to define an empty link? A

     A、<a href='#'>   
     B、<a href=';'>   
     C、<a href='@'>  
     D、<a href='!'>

2. Which of the following descriptions of html is incorrect? A

  A、html是一种超文本标记语言，标签不能交叉嵌套使用；不能在html中插入特殊标签，比如：img
  B、html是一种超文本标记语言，标签可以交叉嵌套使用，可以在html中插入特殊标签，比如：img
  C、html是一种超文本标记语言，大小写不敏感，标签可以交叉嵌套使用
  D、html是一种超文本标记语言，大小写敏感，标签可以交叉嵌套使用

3. Which of the following labels can achieve forced line break? A

  A、br
  B、dr
  C、hr
  D、dl

5. In HTML, the following are not the basic components of the HTML document C

  A、<html>
  B、<body>
  C、<style>
  D、<head>

6. How many syntax errors are there in the following CSS codes? C (including &, 666666)

  &li {font-size:12px ,    color:666666; }
  A、1
  B、2
  C、3
  D、4

7. Which of the following methods of inserting style sheets into HTML documents has the highest priority? B

  A、外部link引入
  B、style属性（行内的优先级高于外联式）
  C、外部@import引入（写在外联css里面，相当于外部引入）
  D、style标签

8. Realization effect: The link font color is red, no underline, and the underline is displayed when the mouse is moved over. Which of the following options are correct? D

  A、a:link{color:red;} a:hover{text-decoration:underline;}
  B、a{color:red;text-decoration:none;} a:hover{text-decoration:overline;}
  C、a{text-decoration:underline;} a:hover{color:red;text-decoration:none;}
  D、a{color:red;text-decoration:none;} a:hover{text-decoration:underline;}

9. Which of the following statements about the box model in CSS is wrong? A

  A、padding代表盒子与其他盒子之间的距离     (内容区与边框的距离)

  B、border代表盒子的边框
  C、可以通过box-sizing属性设置不同的盒子模型：W3C标准盒子、边框盒子
  D、盒子模型是页面布局的基础，它包括外边距、边框、内边距以及元素的内容

10. In the following code, what is the final color of the text in the paragraph p tag? C

  <style type='text/css'>
      body { color:#333; }
      #text{ color:#666; }
      body p.content { color:#00f; }
      p.gray { color:#f00; }
  </style>
  <p id='text' class='content gray'>移动互联方向</p> ------->>>>id选择器的优先级高于类选择器

  A、#F00
  B、#00F
  C、#666
  D、#333

One additional question:
In HTML, how to pop up a new webpage window if clicking a hyperlink? B

  A、<a href='https://www.baidu.com' target="_self">百度
  B、<a href='https://www.baidu.com' target="_blank">百度
  C、<a href='https://www.baidu.com' target="_new">百度
  D、<a href='https://www.baidu.com' target="_top">百度

2. Fill in the blank questions (4 points for each question)

1. html中的注释为__<!---->____,CSS中的注释为__/* */_____。

2.表格中合并单元格的属性为  cellspacing   ，定义表格与内容间距的属性为   cellpadding  ，列合并的属性为 colspan  ，行合并的属性为 rowspan 。
3.表单中单选框为  radio    ，复选框为   checkbox  ，单行文本框为   text，文件上传按钮为   file ，多行文本框为    textarea    ，下拉菜单为   select
4.form表单中定义表单提交方式的属性为    method    ，其常见的属性值为 get 和  post  ,  action 属性表示当提交表单时，向何处发送表单数据。
5、css中盒子模型有 边框 盒子 和 内容  盒子；通过 border-box 属性修改盒子模型；给  边框   盒子设置宽度时，设置的宽度值直接设置给盒子的宽度；

3. Short answer questions (5 points for each question)
1. Briefly describe how to center the block-level element in the parent element?

- 子绝父相，margin：auto,     top:0,bottom:o,left:0,right:0

- 子绝父相，top:50%,left:50%,      margin-top:子元素高度的一半(负数)，margin-left：子元素宽度的一半(负数)      

- 运用flex布局，父元素display:flex,justify-content:center; align-items:center

- 父元素display:table-cell; vertical-align:middle; 子元素margin:auto

2. What are the ways to clear floats?

- 给父元素 overflow：hidden       
- 在子元素的后面添加一个空白div，设置属性为clear:both
- 浮动元素的父级元素：  ::after{clear:both;content:'';display:block;}

3. What are the block-level elements? What are the elements in the line? What are the characteristics of inline elements and block-level elements? How to set the width and height of inline elements?


- 块级元素有 p，h1~h6，div，ul>li，ol>li，body，html，section，form，table

- 行内元素有 span，a，b(加粗)，i(斜体)，img，strong(加粗)，input，textarea，select

- 行内元素的特点：

  1.和其他元素都在一行

  2.高度、宽度以及内边距都是不可控的

  3.宽高就是内容的高度，不可以改变

  4.行内元素只能行内元素，不能包含块级元素

- 块级元素的特点：

  1.独占一行

  2.高度、宽度都是可以设置的

  3.宽度没有设置时，默认为100%

  4.块级元素中可以包含块级元素和行内元素

4. Briefly describe several solutions to the problem of merging parent and child margins?

- 给父元素添加边框属性，border

- 将本应该设置给子元素的margin设置给父元素的padding

- 给父级或者子级添加float属性

- 给父级或者子级添加position: absolute;

- 给父元素或者子元素添加display: inline-block;

- 给父级元素添加overflow: hidden;

5. What are the ways to introduce css into html? And explain the difference;

     四种

- 内部style标签【内部样式表】

- 内联style属性【内联样式表】

- 外部link导入【外部样式表】

- @import导入

Examples of the fourth method:

6. Briefly describe the steps to submit local code to gitee/github

  git init 
  git add *
  git commit -m '[小仙女]第一次提交'
  git pull origin master
  git push origin master

7. Briefly describe the three ways to hide and display the elements? What is the difference?

1.    display  浏览器是否显示该元素, 如果隐藏也不占据页面空间
      - display: none ----->> 将元素的显示设为无，即在网页中不占任何的位置
      - display: block----->> 显示被隐藏的元素
2.    opcity:0    浏览器不显示该元素,但是会占据页面空间，交互事件正常
3.    visibility  浏览器不显示该元素,但是会占据页面空间，交互事件失效
      - visibility: hidden  ----->> 将元素隐藏，但是在网页中该占的位置还是占着
      - visibility: visible  ------>>显示被隐藏的元素

8. Use css code to realize the carousel diagram?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>

    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .wrap{
            width: 400px;
            height: 300px;
            margin: 100px auto;
            /* border: 2px solid blueviolet; */
            overflow: hidden;
        }
        .content{
            width: 1600px;
            height: 300px;
            /* background-color: chartreuse; */
            /* margin-left: -400px; */
            
            /*动画名称 
            animation-name: move; */
            /* animation-duration: 5s; */
            /* 动画播放速度 */
            /* animation-timing-function: linear; */
            /* 动画播放次数 */
            /* animation-iteration-count: infinite; */
            /* steps()  逐帧播放 */
                /*   infinite  循环播放  */
            animation: move 4s infinite steps(4);

            /* 动画延迟时间
            animation-delay: 4s;
             动画填充模式
            animation-fill-mode: backwards;

            animation-play-state: paused;

            animation-direction: alternate; */

        }
         /* 光标滑过动画暂停 */
        .content:hover{
            animation-play-state: paused;
        }
        .content ul li{
            width: 400px;
            height: 300px;
            float: left;
        }
        /* .content ul li:nth-child(odd){
            background-color: cornflowerblue;

        }

        .content ul li:nth-child(even){
            background-color: cyan;

} */
       .content ul li img{
            width: 400px;
            height: 300px;
           /* background-size: 100%; */
       }
       @keyframes move{
           from{
               margin-left: 0;
               }
           to{
               margin-left: -1600px;
               }
       }


    </style>
</head>
<body>
    <div class="wrap">
        <div class="content">
           <ul>
               <li><img src="https://yanxuan-item.nosdn.127.net/d02bdeac95f9493cb9062a7455821384.png?type=webp&imageView&quality=95&thumbnail=355x355"></li>
               <li><img src="https://yanxuan-item.nosdn.127.net/670456928cd4f6a42ca47226e3b832eb.jpg?type=webp&imageView&quality=95&thumbnail=355x355"></li>
               <li><img src="https://yanxuan-item.nosdn.127.net/a0c3f252a1826411be45f58b1d0be19d.jpg?type=webp&imageView&quality=95&thumbnail=355x355"></li>
               <li><img src="https://yanxuan-item.nosdn.127.net/0ae4a38da4f742b01a89dd840f7239d6.png?type=webp&imageView&quality=95&thumbnail=355x355"></li>
           </ul>
        </div>

    </div>


</body>
</html>

9. Please write at least 10 text and font style attributes?


font-size:大小
color:字体颜色
font-weitht：粗细
text-indent：首行缩进
text-decrotion：添加下划线
text-transform：改变字体大小写
font-family：字体
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少单个字符间的空白（字符间距）
word-break：规定自动换行的处理方法（如：word-break:break-all;）
word-wrap：允许长单词或 URL 地址换行到下一行
overflow：规定当内容溢出元素框时发生的事情
hidden：规定对元素进行隐藏
scroll：滚动条
width：
height：
max-width：定义元素的最大宽度
max-height：定义元素的最大高度
min-width：设置元素的最小宽度
min-height：设置元素的最小高度

10. Please write at least 5 new attributes in html5? At least 5 new tags in html5?

                date     日期
                datetime-local     日期时间控件
                time      时间控件
                number      数字控件（只能输入数字）
                range      范围控件（通过控制条可以调整取值）
                search      搜索控件
                tel      电话控件
                url      地址控件
                color      颜色控件
                email      email控件                                                 
   header    头部
                nav       导航栏
                article   主体
                section   部分
                footer    底部
                aside     侧边栏

At least 5 new tags in html5:


1. 结构标签
   （1）section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分；

   （2）article：特殊独立区块，表示这篇页眉中的核心内容；

   （3）aside：标签内容之外与标签内容相关的辅助信息；

   （4）header：某个区块的头部信息/标题；

   （5）hgroup：头部信息/标题的补充内容；

   （6）footer：底部信息；

   （7）nav：导航条部分信息

   （8）figure：独立的单元，例如某个有图片与内容的新闻块。

   2、表单标签

   （1）email：必须输入邮件；

   （2）url：必须输入url地址；

   （3）number：必须输入数值；

   （4）range：必须输入一定范围内的数值；

   （5）Date Pickers：日期选择器；

   　　a.date：选取日、月、年

   　　b.month：选取月、年

   　　c.week：选取周和年

   　　d.time：选取时间（小时和分钟）

   　　e.datetime：选取时间、日、月、年（UTC时间）

   　　f.datetime-local：选取时间、日、月、年（本地时间）

   （6）search：搜索常规的文本域；

   （7）color：颜色

   3、媒体标签

   （1）video：视频

   （2）audio：音频

   （3）embed：嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。

   4、其他功能标签

   （1）mark：标注（像荧光笔做笔记）

   （2）progress：进度条；

11. How to define the anchor point in html? for example

Just a hyperlink

Jump to One

12. Please write down several ways to set the color value in the css attribute?

1. 关键字；    如：red，black，green
2. rgb(r,g,b); 取值范围在0-255之间，如rgb(233,244,222)
3. rgba(r,g,b,a);    
    a：0-1取值；
    0代表完全透明，1代表完全不透明
4. 16进制的颜色值；   比如#fff,取值范围在0~f 十六进制数之间

Html&Css test questions

云绮棠兮

引用和评论

vue-print-nb打印只能打印一页？（已解决）

网页设计的垂直居中

CSS团队协作规范

100个React最佳实践小技巧

前端开发工具

开发插件集合

Javascript(turfjs)等值线图绘制