Html&Css测试试题（简单版）

一、选择题(每题2分)
1、在HTML中，要定义一个空链接使用的标记是？ A

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

2、以下对html的描述不正确的是？ A

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

3、以下哪个标签可以实现强制换行？ A

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

5、在HTML中，下面不属于HTML文档的基本组成部分的是？ C

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

6、下列CSS代码中有几处语法错误？ C (包括& ， 666666)

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

7、下列在HTML文档中插入样式表的方式，优先级最高的是？ B

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

8、实现效果：链接字体颜色为红色，无下划线，当鼠标移过时显示下划线。以下选项正确的是？ 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、下列关于CSS中盒子模型说法错误的是？ A

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

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

10、下面代码中，段落p标签内文本最终显示的颜色是？ 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

补充一题：
在HTML中，若实现点击超链接，如何弹出一个新的网页窗口？ 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">百度

二、填空题（每题4分）

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 属性修改盒子模型；给  边框   盒子设置宽度时，设置的宽度值直接设置给盒子的宽度；

三、简答题(每题5分)
1、简述块级元素在父元素的居中方法有哪些？

- 子绝父相，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、清除浮动的方式有哪些？

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

3、块级元素有哪些？行内元素有哪些？行内元素与块级元素分别有什么特点？如何给行内元素设置宽高？


- 块级元素有 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、简述父子级外边距合并问题的几种解决方案？

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

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

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

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

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

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

5、简述html中引入css的方式有哪些？并说明区别；

     四种

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

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

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

- @import导入

第四种方法举例：

6、简述将本地代码提交至gitee/github的步骤

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

7、简述设置元素的隐藏和显示的三种方式？区别是什么？

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

8、用css代码实现轮播图？

<!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、请写出至少10个文本、字体样式属性？


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、请写出至少5个html5中的新增属性？至少5个html5中的新增标签？

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

至少5个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、html中的锚点如何定义？举例说明

就是一个超链接

跳转到one

12、请写出css属性中设置颜色值的几种方式？

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测试试题（简单版）

云绮棠兮

引用和评论

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

网页设计的垂直居中

CSS团队协作规范

100个React最佳实践小技巧

前端开发工具

开发插件集合

Javascript(turfjs)等值线图绘制