【复习作业 HTML-CSS】

HTML

  1. 在html中,样式表按照应用方式可以分为三种类型,其中不包括(D )。
    A. 内嵌样式表 B. 行内样式表 C. 外部样式表文件 D. 类样式表

1.内联(内嵌)样式 :内联样式就是将css代码直接写进style属性里面.

<p style="color:red;font-size:10px">

2.内部样式 : 内部样式就是将css代码写在

<style>
div{
    width:250px;
    height:76px;
}
</style>

3.外部样式 :外部样式就是将css代码写入样式表中.样式表是一个独立文件,可以使用元素

<link rel="stylesheet" href="文件名.css"  type="text/css"/>
<!-- 或者 使用 import  -->
  1. 在HTML中,可以使用( <D> )标记向网页中插入GIF动画文件。
    A. form B. body C. table D. img

  2. 在HTML上,将表单中input元素的type属性值设置为( A )时,用于创建重置按钮。
    A. reset B. set C. button D. image

有时候,用户填完表单信息后,发现填写错误,希望将表单数据还原为页面加载时的状态。为此,可以在表单上创建一个重置按钮(reset按钮)。

  1. 在CSS中,下面不属于box模型属性的有( A
    A. font B. margin C. padding D. border

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。

  1. 以下不属于position定位盒子方式的是( C
    A. 绝对定位 B. 相对定位 C. 直接定位 D. 静态定位

Position(定位) :
- 静态定位
- 相对定位
- 固定定位
- 绝对定位
- Sticky

  1. CSS是利用HTML的( B)标记构建网页布局
    A. <p> B. <div> C. <table> D. <ul>

  2. 关于div标记,下列说法错误的是( C
    A. div是一个无任何语义的标签 √
    B. 若将div设置宽高,若其背景图片比它大,则多余的背景图片显示不出来
    C. 若将某个div标记的visibility属性设为hidden,则该div标记会让出其原来占有的空间
    D. 可以用div来制作导航菜单 √

使用visibility:hidden 属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。

  • div section article ,语义是从无到有,逐渐增强的。
    - div 无任何语义,仅仅用作样式化或者脚本化;对于一段主题性的内容,则就适用 section;假如一段主题性内容脱离上下文后仍是完整且独立存在的一段内容,则就适用 article。
  1. 以下选项中可以为所有H1定义背景颜色的是(B
    A. all.h1 {background-color:#FFFFFF}
    B. h1 {background-color:#FFFFFF;}
    C. h1.all {background-color:#FFFFFF}
    D. h1#all {background-color:#FFFFFF}
  2. 下列不属于行内标签的是( D
    A. <a> B. <span> C. <br> D. <div>

行内元素列表:
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea
块级元素:
address, article, audio, aside, blockquote, canvas, div, dl, dd, figure, footer,form, h1- h6,header, hr,ol, output, p,ul, video

  1. 以下代码片断中,属于绝对定位的是(B
    A. #box{width:100px;height:50px;}
    B. #box{width:100px;height:50px;position:absolute;}
    C. #box{width:100px;height:50px; position:static;}
    D. #box{width:100px;height:50px; position:relative;}
  2. 下列CSS语法规则正确的是(C
    A. body:color=black B. {body;color:black}
    C. body {color: black} D. {body:color=black(body}
  3. 以下说法正确的是( C
    A. background-color:设置文字颜色 B. back-corlor:设置背景色
    C. background-color:设置背景色 D. color:设置背景色
  4. 下列选项中,用来改变背景颜色的样式属性是(A
    A. background-color B. Bgcolor C.color D. backgroundcolor
  5. 以下代码片断中,属于相对定位的是(A
    A. #bb{width:100px;position:relative }
    B. #bb{width:100px;position:sastic }
    C. #bb{width:100px;}
    D. #bb{width:100px;position:absolute }
  6. 在CSS中,关于box的margin属性的叙述正确的是(B
    A. 边距margin只能取一个值
    B. margin属性的参数有margin-left.margin-right.margin-top.margin-bottom
    C. margin属性的值不可为auto
    D. margin属性的参数值不能全部设置成0px
    在这里插入图片描述

内容区域 content area
内边距区域 padding area
边框区域 border area
外边距区域 margin area

  1. 根据以下的HTML代码片段,以下正确的是( D
    A. 在样式表中声明了ul类选择器
    B. 该段中ol列表从ul中继承属性
    C. “苹果”和“提子”的字体颜色是红色
    D. Ul选择器将覆盖body选择器的说明
    在这里插入图片描述

.类名前有一个点号(.)
比如: *.important {color:red;}

  1. 要在表单中创建一个多行文本输入框,初始值为:这是一个多行文本框。下面语句正 确的是( D )//A?
    A. < textarea name=”text1” value=”这是一个多行文本框”></ textarea>
    B. <input type=”text” value=” 这是一个多行文本框” name=”text1”/>
    C. <input type=”textarea” value=” 这是一个多行文本框” name=”text1”/>
    D. < textarea name=”text1” cols=”20” rows=”5”>这是一个多行文本框< /textarea >

  2. 下面对于HTML表单中的复选框(checkbox)说法不正确的是(B
    A.选定了checkbox元素时,会将一个name/value对与form一并提交 √
    B.复选框在默认情况下为选中状态
    C.checkbox的checked属性设置该复选框被选中 √
    D.一组复选框的name属性值必须相同 √

  3. input元素的type属性用于指定表单元素的类型,可用的类型有(B ) //D?
    A.name B.textarea C.select D.hidden

  4. 下面标记中,( C)在标记的位置添加一个换行符
    A.< a> B.< center> C.< br/> D.< hr/>

  5. 以下的HTML代码片段中:以下哪些是正确的判断( A
    在这里插入图片描述

A. 铅笔一定位于首行中的第一列 B. 圆珠笔一定位于首列中的第一行
C. 文具应位于首列首行 D. 水笔与圆珠笔在不同的行

  1. 参看以下的HTML代码,描述正确的是( C
    在这里插入图片描述

A.该网页内容的第一行显示“表格” B.1和2的单元格在同一列
C.1和2的单元格在同一行 D.1和3的单元格在同一行

  1. 链接元素A有很多属性,其中用来指明链接所指向的URL的属性是( A )。
    A. href B. herf C. target D. link

  2. 将2个横向相邻的单元格合并的属性是( A )。
    A.colspan B.Rowspan C.cols D.rows

  3. htmlL文件中,下面( C )标签中包含了网页的全部内容。
    A. < center>„< /center> B. < pre>„< /pre>
    C. < Body>„< /Body> D. < Br>„< /Br>

  4. html代码< select name=“name”>< /select>表示( D )。
    A. 创建表格 B. 创建一个滚动菜单
    C. 设置每个表单项的内容 D. 创建一个下拉菜单

  5. 对于标签〈input type=*〉,如果希望实现密码框效果,*值是( C )。
    A. hidden B. text C. password D. submit

  6. 对于标签,其中*代表get或( C )。
    A. set B. put C. post D. input

  7. 在插入图片标签中,对插入的图片进行文字说明使用的属性是( D )。
    A. name B. id C. src D. alt

  8. 有关下列方框 属性正确的是( B )。
    A. margin-left是设置对象的左填充 ×
    B. border-width是设置边框的宽度
    C. padding-left是设置内容与右边框之间的距离
    D. 以上说法都不对

  9. 在html中,CSS样式表按照应用方式可以分为三种类型,其中不包括(D)。
    A. 内嵌样式表 B. 行内样式表
    C. 外部样式表文件 D. 类样式表

  10. 在HTML中,可以使用(D )标记向网页中插入GIF动画文件。
    A. < FORM> B. < BODY>
    C. < TABLE> D. < IMG>

  11. 在HTML上,将表单中INPUT元素的TYPE属性值设置为( A)时,用于创建重置按钮。
    A. reset B. set
    C. button D. image

  12. 在制作HTML页面时,页面的布局技术主要分为(D )。//C?
    A. 框架布局 B. 表格布局
    C. DIV层布局 D. 以上全部选项

  13. 如果在catalog.html中包含如下代码,则该HTML文档IE浏览器中打开后,用户单击此链接将( C)。
    < A href="#novel">小说< /A>
    A. 使页面跳转到同一文件夹下名为“novel.html”的HTML文档
    B. 使页面跳转到同一文件夹下名为“小说.html”的HTML文档
    C. 使页面跳转到catalog.htm包含名为“novel”的锚记处
    D. 使页面跳转到同一文件夹下名为“小说.html”的HTML文档中名为“novel”的锚记 处

  14. 要在网页中显示“欢迎访问我的主页!”文本,要求字体类型为隶书、字体大小为6,则下列HTML代码正确的是(C )。
    A. < p>< font size=’6’ type=’隶书’>欢迎访问我的主页!< /font>
    B. < p>< font size=’+2’ face=’隶书’>欢迎访问我的主页!< /font>
    C. < p>< font size=’6’ face=’隶书’>欢迎访问我的主页!< /font>
    D. < p>< font size=’+3’ style=’隶书’>欢迎访问我的主页!< /font>

  15. 分析下面的HTML代码片段,选项中的说法正确的是(C )。
    在这里插入图片描述

A. 该表格共有2行3列 B. 该表格的边框宽度为10毫米
C. 该表格中的文字均居中显示 D. “姓名”单元个跨2行

  1. 某一站点主页面index.html的代码如下所示,则选项中关于这段代码的说法正确的是 (A
    在这里插入图片描述

A. 该页面共分为三部分
B. top.html显示在页面上部分,其宽度和窗口宽度一致
C. left.html显示在页面左下部分,其高度为100像素
D. right.html显示在页面右下部分,其高度小于窗口高度

  1. 在HTML中,以下关于CSS样式中文本属性的说法,错误的是(D )。
    A. font-size用来设置文本的字体大小
    B. font-family用来设置文本的字体类型
    C. color用来设置文本的颜色
    D. text-align用来设置文本的字体形状

  2. 分析下面的HTML代码段,该页面在浏览器中的显示效果为( A)。//B?
    在这里插入图片描述

A. 从左向右滚动显示“Welcome!” B. 从右向左滚动显示“Welcome!”
C. 从上向下滚动显示“Welcome!” D. 从下向上滚动显示“Welcome!” marquee

  1. 以下关于HTML语言中的表格的说法正确的是(B )。
    A. 在HTML语言中,表单由< TABLE>标签、< TR>标签、< TD>标签组成,缺一不可。
    B. 有多少对< TD>标签,就有多少个单元格
    C. 有多少对< TR>标签,就有多少个单元格
    D. 有多少对< TD>标签,就有多少行

  2. 在HTML中,(D )标签用于在网页中创建表单。
    A. < INPUT> B. < SELECT> C. < TABLE> D. < FORM>

  3. 在HTML中,使用HTML元素的class属性,将样式应用于网页上某个段落的代码如下所 示: < P class=”firstp”>这是一个段落< /P> 下面选项中,( C)正确定义了上面代码引用的样式规则。
    A. < style type=”text/css”> .P{color:red} < /style>
    B. < style type=”text/css”> #firstp{color:red} < /style>
    C. < style type=”text/css”> .firstp{color:red} < /style>
    D. < style type=”text/css”> P.{color:red} < /style>

  4. 在HTML中,下列标签中的(C )标签在标记的位置强制换行
    A. < H1> B. < P> C. < BR> D. < HR>

  5. 下列语句能够正确在一个HTML页面中导入在同一目录下的“StyleSheet1.css”样式表 的是( B)。
    A. < style>import StyleSheet1.css;< /style>
    B. < link rel=”stylesheet” type=”text/css” href=”StyleSheet1.css”>
    C. < link rel=”stylesheet1.css” type=”text/css”>
    D. < style rel=”stylesheet” type=”text/css” src=”StyleSheet1.css”> < /style>

  6. 为了设置页面的背景色为黑色,应该使用 ( A)。
    A. < BODY bgcolor=“Black”>< /BODY>
    B. < BODY background=“Black”>< /BODY>
    C. < BODY backgroundcolor=“Black”>< /BODY>
    D. < BODY bg=“Black”>< /BODY>

< body bgcolor=“color”> // < body style=“background:red”>

  1. 想要使用户在单击超链接时,弹出一个新的网页窗口,代码是(A )。
    A. < A href=“right.html” target="_blank">新闻< /A>
    B. < A href=“right.html” target="_parent">新闻< /A>
    C. < A href=“right.html” target="_top">新闻< /A>
    D. < A href=“right.html” target="_self">新闻< /A>

  2. 有关下列方框 属性正确的是(B )。
    A. margin-left是设置对象的左填充
    B. border-width是设置边框的宽度
    C. padding-left是设置内容与右边框之间的距离
    D. 以上说法都不对

padding:
  • padding-left:10px; 左内边距
  • padding-right:10px; 右内边距
  • padding-top:10px; 上内边距
  • padding-bottom:10px; 下内边距
  • padding:10px; 四边统一内边距
  • padding:10px 20px; 上下、左右内边距
  • padding:10px 20px 30px; 上、左右、下内边距
  • padding:10px 20px 30px 40px; 上、右、下、左内边距
    可能取的值 :
  • length 规定具体单位记的内边距长度
  • % 基于父元素的宽度的内边距的长度
  • auto 浏览器计算内边距
  • inherit 规定应该从父元素继承内边距
margin:
  • margin-left:10px; 左外边距
  • margin-right:10px; 右外边距
  • margin-top:10px; 上外边距
  • margin-bottom:10px; 下外边距
  • margin:10px; 四边统一外边距
  • margin:10px 20px; 上下、左右外边距
  • margin:10px 20px 30px; 上、左右、下外边距
  • margin:10px 20px 30px 40px; 上、右、下、左外边距

border-width 属性可以设置盒子模型的边框宽度

  1. B)样式表一般用于大型网站。
    A. 内嵌 B. 链接外部 C. 选入 D. 嵌入

  2. 分析下面的HTML代码片段,则选项中的说法错误的是(C )。
    在这里插入图片描述

A. "red"为类样式
B. “P"为文档样式
C. “你好”和“欢迎”都应用了类样式"red” (注:这里是标签用到样式而不是字)
D. “你好”的文本颜色为红色

二.简答题

  1. html的含义?
    hyper text markup langage 超文本标记语言 , 超文本是指超链接,标记是指标签 。是用于制作网页,无需要编译,直接由浏览器执行。

  2. 引入外部样式表的代码?

< head>
	<link rel=”stylesheet” type=”text/css”href=”./abc.css”
< /head>
2.	import 方式
< style>
		@import url(“abc.css”)	;
< /style>
  1. HTML文件的文档结构。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
  1. 请写出无序列表和有序列表的标签。
<ol></ol>

<ul></ul>
  1. 写出5个行内元素?5个块级元素有哪些?

行内元素列表:
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea
块级元素:
address, article, audio, aside, blockquote, canvas, div, dl, dd, figure, footer,form, h1- h6,header, hr,ol, output, p,ul, video

  1. CSS中class和id的区别
    ( class 像名字 可以重复, id 像身份证 不可以重复 )

class是设置标签的类,用于指定元素属于何种样式的类。在CSS样式中以小写的“点”及“.”来命名
id是设置标签的标识。用于定义一个元素的独特的样式。在CSS样式定义的时候 以“#”来开头命名id名称
优先级 : 通过继承来的属性id的优先级高于class

  1. 写几个CSS的选择器(至少5个)
  • 基本选择器:
    标签选择器:针对一类标签
    ID选择器:针对某一个特定的标签使用
    类选择器:针对你想要的所有标签使用
    通用选择器(通配符):针对所有的标签都适用(不建议使用)

  • 高级选择器:
    后代选择器:用空格隔开
    交集选择器:用.隔开
    并集选择器(分组选择器):用逗号隔开
    伪类选择器

  1. 引入外部样式表的代码?
    < link rel=’ ’ type=‘text/css’ href= ’ '>
    @import url( ’ ’ )

  2. < p>标记和< br>标记的作用是什么?
    < p > ------段落标签
    < br > ----- 换行

  3. 写出表单对应属性
    只读属性 ------------- readonly
    禁用属性 -------------- disabled
    下拉框默认选择属性 -------------- selected
    强制填写属性(必填项属性) -------------- required
    单选多选框默认选择属性 -------------- checked

三.看图写代码

  1. 请编写代码实现以下图片显示效果。
    在这里插入图片描述
<table border="1px" cellspacing="1px" align="center" v-align="middle" cellpadding="0px" width="400px" height="100px" >
    <caption>学生信息表</caption>
    <tr align="center" v-align="middle" >
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>

    </tr>
    <tr  >

       <td colspan="2" >张三</td>
       <td >10</td>
     
    </tr>
    <tr  >
      
        <td>李四</td>
        <td rowspan="2"></td>
        <td >21</td>
     </tr>
     <tr  >
      
        <td>王五</td>
        <td >12</td>
     </tr>
     <tr  >
      
        <td colspan="2" rowspan="2" align="center" valign="bottom">张三疯</td>
        <td >13</td>
     </tr>
     <tr  >
      
    
        <td >14</td>
     </tr>
</table>
  1. 请编写代码实现以下图片显示效果。

在这里插入图片描述

<form action="./bd.php" method="POST" enctype="multipart/form-data" >
    <!-- cellspacing="0px" 边框与边框距离 -->
    <table  align="center" width="auto" height="50px" cellspacing="0px" cellpadding="0px" frame=void>
        <tr>
            <th>
                账户:
            </th>
            <td>
                <input type="text" name="name" placeholder="username">
            </td>
        </tr>
        <tr>
            <th>
                密码:
            </th>
            <td>
                <input type="password" name="password"  >
            </td>
        </tr>
        <tr>
            <th>
                性别:
            </th>
            <td>
                <input type="radio" name="xingbie"  value="nan" ><input type="radio" name="xingbie"  value="nv" checked></td>
        </tr>
        <tr>
            <th>
                爱好:
            </th>
            <td>
                <input type="checkbox" name="robbie"  value="manger" ><input type="checkbox" name="robbie"  value="boire" checked><input type="checkbox" name="robbie"  value="jouer" checked><input type="checkbox" name="robbie"  value="play" checked></td>
        </tr>
        <tr>
            <th>
                性格:
            </th>
            <td>
                <select name="table">
                    <option value="smart">聪明伶俐</option>
                    <option  value="QAQ">可可爱爱</option>
                    <option  value="=Q=">没有脑袋</option>
                </select>
            </td>
        </tr>
        <tr>
            <th>
                颜色:
            </th>
            <td>
                <input type="color" name="color"  >
            </td>
        </tr>
        <tr>
            <th>
               邮箱:
            </th>
            <td>
                <input type="text" name="mail"  >
            </td>
        </tr>
        <tr>
            <th>
               网址:
            </th>
            <td>
                <input type="text" name="url"  >
            </td>
        </tr>
    
        <tr>
         
            <td colspan="2" align="center">
              <input type="submit" value="提交">
            </td>
        </tr>
    </table>
</form>

</table>

  • 0
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值