前端学习记录 dy04

最新推荐文章于 2023-10-02 19:59:33 发布

小新sama

最新推荐文章于 2023-10-02 19:59:33 发布

阅读量126

点赞数

文章标签：前端学习

本文链接：https://blog.csdn.net/weixin_64817400/article/details/131730880

版权

文章介绍了HTML中的CSS选择器优先级，包括ID选择器、类选择器和标签选择器的顺序；详细讲解了HTML表单元素，如输入类型、颜色、字体样式以及按钮和复选框的用法；还涵盖了超链接的不同用途，如普通跳转和锚点链接。此外，文章还讨论了框架标签和框架集的概念及其在页面布局中的作用。

摘要由CSDN通过智能技术生成

一.单项选择题

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.&quote; 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个即可)

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>
           
           <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>

小新sama

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端学习记录 dy04

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"/>
复制链接

扫一扫