一.单项选择题
1.在CSS选择器中,优先级排序正确的是(D) D
A.id选择器>标签选择器>类选择器
B.标签选择器>类选择器>id选择器
C.类选择器>标签选择器>id选择器
D.id选择器>类选择器>标签选择器
2.有一段html代码
<div style="color:red;text-color:blue;">
<span style="color:green;text-color:black;">Hello</span>
<div>
那么"Hello"的字体颜色是(B) B
A.red
B.blue
C.green
D.black
3.下面关于HTML语法错误的是(D) D
A.HTML是一种标记语言 B.HTML可以控制页面和内容的外观样式 C.HTML文档是静态的 D.HTML文档是超文本文档
4.什么标签定义的内容将显示在浏览器窗口的标题栏中(D) D A.html B.head C.body D.title
5.以下哪个样式可以设置鼠标经过标签的状态(C) C A.visited B.active C.hover D.link
6.以下哪些是块级标签(D) D A.a B.span C.input D.div
7.在HTML中,<pre>的作用是(D) D A.转行标记 B.标题标记 C.文字效果标记 D.预定义格式化
8.下列哪一组属性不属于字体<img />标记的属性 A A.color B.alt C.title D.src E.以上都不对
9.以下(B)标签用于在表单中构建复选框 B
A.<input type="hidden" /> B.<input type="radio"/> C.<input type="checkbox"/> D.<input type="password"/>
10.下列 () 是鼠标点击时的超链接样式 a是标签名称 D A.a:link B.a:visited C.a:hover D.a:active
11.下面关于外部样式的说法错误的是(A) A A.文件扩展名为.cs
B.外部样式内容不需要加入<style>标签
C.使用<link>标签引入外部样式
D.使用外部样式可以更加简洁
12.在HTML中有效,规范的注释声明是(D) D A.<!--这是--注释--> B.//这是注释 C./这是注释/ D.<!--这是注释-->
13.在HTML中,通过(C) 可以实现鼠标悬停在超链接时,为无下划线效果(C) C
A.a{ text-decoration:underline; } B.a{ text-decoration:none; } C.a:hover{ text-decoration:none; } D.a:link{ text-decoration:underline; }
14.在HTML中,使用img标签插入图像,关于src属性描述正确的是(B) B A.用来设置图片文件的格式 B.用来设置图片文件的所在位置 C.用来设置鼠标指向图片的文字 D.用来设置图片周围的文字
15.在HTML中,(A)用来表示特殊字符引号 A A."e; B.> C.© D.
16.在HTML中,实现表格跨列(A) A A.colspan属性 B.rowspan属性 C.colspan标签 D.rowspan标签
17.在html中,若要实现点击超连接时,弹出一个新的网页窗口,下列(A)符号 A A.节目 B.节目 C.节目 D.节目
18.在HTML中,将表单标签Input元素的type属性设置为(A)时,可以创建重置按钮 A A.reset B.submit C.button D.hidden
19.html中,以下哪个是隐藏域元素(A) (提示隐藏域(没有效果,提交可以携带数据) 指定的是input的type属性值"hidden") A A.<input type="hidden" name="user" value="111"/> B.<input name="hidden" name="user" value="111"/> C.<input name="hidden" value="111"/> D.<input name="user" text="111"/>
20.以下框架集(D)属性,可以左右分割窗口 D A.row B.rows C.col D.cols
二.简答题
1.表单提交的get和post有什么区别?
浏览器默认的提交方式:get
1.是否将表单的数据提供到地址栏上
form action="http://ip 地址或域名/登录的接口"
http://ip地址或域名/登录的接口login?表单项的name属性=输入的内容&name属性2=内容2...(地址栏携带参数)
get是将数据提供到地址栏上
post提交,不会提交到地址栏上--在浏览器--f12--->网络部分可以查看到负载数据
2.是否安全(相对性)
get提交,相对post不安全,将数据信息(涉及到隐私数据)提交到地址栏上
post,相对安全---浏览器---浏览网络--->负载--查看form data
3.提交数据大小是否有限制
get:有限制(地址栏是不能无限去拼数据 key-value&key2-vulue2...)
post:没有限制(后端io流去读前端post数据)
io:input/output
2.描述下框架标签和框架集标签
frame:框架标签
一个frame包含一个html页面,src="链接的html页面地址"
name="给页面所在的框架起一个名称"
frameset:框架集
当整个结构有两个或者两个以上的html页面组成,必须使用框架集frameset
rows:由上而下划分的每一个部分所占用的权重百分比 ;在通过frame规定某一个html页面的位置
cols:从左而右划分的每一个部分所占的权重百分比
frameset不能和body共存(要么在body的前面,要么将body删掉)
3.列举出常用的CSS选择器有哪些?(4个即可)
后代选择器: 父标签 子标签{}
选择器(id/class/标签名称 ){
color:字体颜色;
text-align:文本对齐方式
word-spacing:单词间距
text-decoration:文本装饰(underline/none/overline/linethrough)
}
4.列出表单标签中的元素(表单项)有哪些?(6个即可)
<select>
<option>xxx</option>
</select>
<input type="file" />
<textarea rows="" cols="">文本域</textarea>
<input type="reset" value="重置" />
<input type="eamil"/> <!--通过表单提交的时候,如果邮件内容不包含@标记,自行校验是否满足邮箱格式-->
<input type="text" />
5.超链接标签有哪些用途?
方式1:
普通跳转链接
url:统一资源定位符
协议://域名或ip地址:端口号/访问路径
<a href="链接url" target="_self 或者_blank">xxx</a>
方式2:
锚链接
同一个页面下:
创建锚点(跳转标记)
<a name="锚点名称"></a>
创建跳转连接
<a href="#锚点名称">跳转文本</a>
在不同页面下
创建锚点(跳转标记)
<a name="锚点名称"></a>
创建跳转链接
<a href="链接url地址#锚点名称">跳转文本</a>
三.利用HTML标签编写页面
1.完成表单页面,(注册页面)(背景图片自己设置就行,不强制) (1)有用户名输入框,密码输入框,日期组件,复选框,单项按钮都要包含在这个页面中 (2)完成(1)之后,在注册按钮的旁边,写一个超链接,名字"登录",然后打开登录页注册页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册</title>
<style type="text/css">
#formDiv{
border: 1px solid black;
width: 420px;
height: 400px;
border-radius: 5px;
margin: 200px 0 0 500px;
background-image: url(img/微信图片_20230711152919.jpg);
opacity: 0.6;
}
#userDiv{
margin: 40px 0 0 100px;
}
#pwdDiv,#emailDiv{
margin: 20px 0 0 100px;
}
#repwdDiv{
margin: 20px 0 0 82px;
}
#btnDiv{
margin: 20px 0 0 150px;
}
#dataDiv{
margin: 20px 0 0 82px;
}
#sexDiv{
margin: 20px 0 0 100px;
}
#cityDiv{
margin: 20px 0 0 80px;
}
body{
background-image: url(img/微信图片_20230711152919.jpg);
}
.register{
background-color: chartreuse;
}
</style>
</head>
<body>
<div id="formDiv">
<form>
<div id="userDiv">
用户名:<input type="text" placeholder="请输入用户名" />
</div>
<div id="pwdDiv">
密 码:<input type="password" placeholder="再次输入密码" />
</div>
<div id="repwdDiv">
确认密码:<input type="password" placeholder="请输入密码"/><br>
</div>
<div id="emailDiv">
邮 箱:<input type="email" placeholder="请输入邮箱"/>
</div>
<div id="sexDiv">
性 别:
<input type="radio" name="sex" value="0" />男
<input type="radio" name="sex" value="1" />女
</div>
<div id="dataDiv">
出生日期:<input type="date" placeholder="" />
</div>
<div id="cityDiv">
所在城市:
<select >
<option>太原</option>
<option>临汾</option>
<option>北京</option>
</select>
</div>
<div id="btnDiv">
<a href="登录表单.html" style="text-decoration: none;">
<input style="background-color: #00FFFF;" type="button"value="登录" />
</a>
<a href="注册.html" style="margin-left: 30px;" >
<input style="background-color: #00FFFF;" type="button" value="注册" />
</a>
</div>
</form>
</div>
</body>
</html>面 (3)登录页面 --显示用户名和密码输入框
2.参考qq群里的搜狗的首页,进行布局 底部的导航栏些部分写第一行即可(搜狗输入 浏览器 网址导航)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>搜狗</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.top-nav{
float: left;
margin: 10px 10px 0px 10px;
font-size: 10px;
font-family: "楷体";
}
.select_1{
border: 0px solid white;
font-size: 15px;
font-family: "楷体";
}
a{
text-decoration: none;
color: black;
font-size: 15px;
}
.a_1{
color: #FF0000;
text-decoration: none;
}
.a_2{
color: white;
}
.user-box{
float: right;
margin: 10px 10px 0px 10px;
font-size: 10px;
font-family: "楷体";
}
.denglu{
float: right;
color: white;
background-color: #FF0000;
margin: 0 0 0 10px;
}
.logo{
width: 50%;
margin: 100px 0px 0px 550px;
}
.searchBox{
}
.clear{
clear: both;
}
.inputBox{
width: 600px;
height: 40px;
margin: 0 0 0 450px;
}
.inputBox2{
width: 150px;
height: 45px;
margin: 10px 0 0 -155px;
}
.inputImg{
background-size: 50px 22px;
margin: 0px 0px -10px -220px;
background-position: 23px 0px;
border: 0;
}
.bottom1{
margin: 350px 0 0 550px;
float: left;
font-size: 10px;
font-family: "楷体";
}
.line{
height: 1px;
overflow: hidden;
border: 1px solid #e0e0e0;
border-top: 0;
clear: both;
margin: 5px 10px 0;
}
ul li{
list-style-type: none;
display:inline;
}
</style>
</head>
<body>
<!-- 整体页面 -->
<div>
<!-- 头部导航 -->
<div>
<!-- 左边导航 -->
<div class="top-nav">
<ul>
<li><a href="#" class="a_1">网页</a></li>
<span class="line"></span>
<li><a href="#" >微信</a></li>
<span class="line"></span>
<li><a href="#" >知乎</a></li>
<span class="line"></span>
<li><a href="#" >图片</a></li>
<span class="line"></span>
<li><a href="#" >视频</a></li>
<span class="line"></span>
<li><a href="#" >医疗</a></li>
<span class="line"></span>
<li><a href="#" >汉语</a></li>
<span class="line"></span>
<li><a href="#" >翻译</a></li>
<span class="line"></span>
<li><a href="#" >问问</a></li>
<span class="line"></span>
<li><a href="#" >百科</a></li>
<span class="line"></span>
<li><a href="#" >地图</a></li>
<span class="line"></span>
<select class="select_1">
<option>更多</option>
<option>知识</option>
<option>应用</option>
<option>全部</option>
</select>
</ul>
</div>
<!-- 右边导航 -->
<div class="user-box">
<ul>
<li>无障碍</li>
<span class="line"></span>
<li>山西 太原</li>
<span class="line"></span>
<li>30°</li>
<span class="line"></span>
<div class="denglu">
<a href="" class="a_2">登录</a>
</div>
</ul>
</div>
</div>
<!-- 中间logo-->
<div class="clear"></div>
<div class="logo">
<img src="img/logo_440x140_31de1d2.png" >
</div>
<!-- 中间搜索框 -->
<div class="searchBox">
<form >
<input type="text" class="inputBox"/>
<input class="inputBox2" type="submit" value="搜狗搜索" />
<img class="inputImg" src="img/UI582KJWT%7B%5D3C0L77ONZNER.png" >
</form>
</div>
<!-- 底部 -->
<div class="bottom1">
<img style="width: 15px;" src="./img/T$%5BBU195%7DJUSA%7BA%5BR%7B)(B%5BO.png">
<a href="">搜狗输入法</a>
<span class="line"></span>
<img style="width: 12px;" src="img/CI4N853MBHVI1N~B)XR~ISI.png" >
<a href="">浏览器</a>
<span class="line"></span>
<img style="width: 15px; src="img/O~@ZK1SN%7DB9JICK%602%25EN6$I.png" >
<a href="">网址导航</a>
</div>
</div>
</body>
</html>