关于html:HtmlCss测试试题

一、选择题(每题 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:HtmlCss测试试题

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）