ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML、CSS和JS的练习题解析

2021-01-21 16:00:46  阅读:182  来源: 互联网

标签:练习题 XML 变量 10 元素 HTML var 内联 CSS


1.在这里插入图片描述
常用的块状元素有:
< div>、< p>、< h1>…< h6>、< ol>、< ul>、< dl>、< table>、< address>、< blockquote> 、< form>
什么是块级元素?
在html中**< div>、< p>、< h1>、< form>、< ul>和< li>就是块级元素。
设置
display:block**就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。 a{display:block;}
块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

常用的内联元素有:
< a>、< span>、< br>、< i>、< em>、< strong>、< label>、< q>、< var>、< cite>、< code> 在html中,< span>、< a>、< label>、< strong> 和< em> 就是典型的内联元素(行内元素)(inline)元素。
当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素,从而使div 元素具有内联元素特点。
div{ display:inline; } … < div>我要变成内联元素< /div>
内联元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

常用的内联块状元素有:
< img>、< input>
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。
inline-block 元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

2.在这里插入图片描述
display:none指的是元素完全不陈列出来,不占据空间,涉及到了DOM结构,故产生reflow与repaint
visibility:hidden指的是元素不可见但存在,保留空间,不影响结构,故只产生repaint,但不可触发绑定事件
opacity=0指的是元素不可见但存在,保留空间,不影响结构,并且,如果该元素已经绑定一些事件,如click事件,那么点击该区域,也能触发点击事件的。

还有就是“重排一定重绘,重绘不一定重排”
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
3.
在这里插入图片描述
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
(SVG是HTML下的一个分支)
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
4.在这里插入图片描述
默认的盒子模型是content-box
另外补充:
相对定位(relative),不脱离文档流,根据自身的位置进行偏移
绝对定位(absolute),脱离文档流,如果父元素没有进行position,相对于浏览器左上角进行定位,否则相对于父元素定位
固定定位(fixed),脱离文档流,相对于浏览器左上角定位
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
5.、在这里插入图片描述
1.默认语法:<?php ... ?>
2.短标记:<? ... ?>
3.脚本:< script language=“php”> … < /script>
4.asp风格:<% …%>
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
6.在这里插入图片描述
enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。
属性值
application/x-www-form-urlencoded
在发送前编码所有字符(默认)
multipart/form-data
不对字符编码。 在使用包含文件上传控件的表单时,必须使用该值。
text/plain
空格转换为 “+” 加号,但不对特殊字符编码。
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
7.
在这里插入图片描述
浮动清除的方法总结:
在这里插入图片描述
所以这道题实际上ABCD都可以,但是C的方法可能不好用,可以尝试一下。
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
8.在这里插入图片描述
如果页面中包含框架,那么每个框架都拥有自己的window对象

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
9.在这里插入图片描述
disabled和readonly这两个属性有一些共同之处,比如都设为true,则form属性将不能被编辑,往往在写js代码的时候容易混合使用这两个属性,其实他们之间是有一定区别的:
1.如果一个输入项的disabled设为true,则该表单输入项不能获取焦点,用户的所有操作(鼠标点击和键盘输入等)对该输入项都无效,最重要的一点是当提交表单时,这个表单输入项将不会被提交。
2.readonly只是针对文本输入框这类可以输入文本的输入项,如果设为true,用户只是不能编辑对应的文本,但是仍然可以聚焦焦点,并且在提交表单的时候,该输入项会作为form的一项提交。

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
10.在这里插入图片描述
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
11.在这里插入图片描述
one变量的值是undefined,two的值是null,undefined==null,但undefined的type是undefined,但null的类型是object。所以类型不相等。注意在js中,值有类型,变量没有类型。
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
12.在这里插入图片描述
open() 方法可以查找一个已经存在或者新建的浏览器窗口。

语法:
window.open([URL], [窗口名称], [参数字符串])

参数说明:
URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。窗口名称:可选参数,被打开窗口的名称。

1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_selft"具有特殊意义的名称。
   _blank:在新窗口显示目标网页
   _self:在当前窗口显示目标网页
   _top:框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。

参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
13.在这里插入图片描述
if(! “a” in window)这句代码的意思是:判断全局对象window中是否有变量a,如果没有变量a,就进入判断将a赋值为1,由于变量的提前声明特性,在执行这段代码之后,全局对象window中就已经存在a这个变量了,所以不能进入判断,对a进行赋值,所以a的值为undefined。
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
14.在这里插入图片描述
link和@import的区别:
1)link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
2)link可以加载CSS,Javascript;@import只能加载CSS。
3)link加载的内容是与页面同时加载;@import需要页面网页完全载入以后加载。
用法:
1)link的写法:
< link rel=“stylesheet” href=“index.css”>
2)import的写法:
< style type=”text/css”>
@import url(“index.css”);
< /style>
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
15.在这里插入图片描述
注意JS和c语言的区别
在这里插入图片描述
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
17.在这里插入图片描述
setTimeout中的闭包函数是每1s执行一次,由于for循环的执行速度远小于1s,所以当开始执行闭包函数的时候for循环已经结束了(i=10),之后闭包函数执行十次(因为循环了10次),所以打印了10个10。
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
18.
在这里插入图片描述
获取文本为 text; 获取值为 value
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
19.
在这里插入图片描述
linear: 动画从头到尾的速度是相同的。
ease (默认): 动画以低速开始,然后加快,在结束前变慢。
ease-in: 动画以低速开始。
ease-out: 动画以低速结束。
ease-in-out :动画以低速开始和结束。
cubic-bezier(n,n,n,n): 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
20.
在这里插入图片描述
每个li标签的onclick事件执行时,本身onclick绑定的function的作用域中没有变量i,i为undefined,则解析引擎会寻找父级作用域,发现父级作用域中有i,且for循环绑定事件结束后,i已经赋值为4,所以每个li标签的onclick事件执行时,alert的都是父作用域中的i,也就是4。
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
21.

在这里插入图片描述
优点:
(1)CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
(2)CSS Sprites能减少图片的字节;
(3)CSS Sprites解决了网页设计师在图片命名上的困扰,只需对一张集合的图片命名,不需要对每一个小图片进行命名,从而提高了网页制作效率。
(4)CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
缺点:
(1)图片合并麻烦:图片合并时,需要把多张图片有序的合理的合并成一张图片,并留好足够的空间防止版块出现不必要的背景。
(2)图片适应性差:在高分辨的屏幕下自适应页面,若图片不够宽会出现背景断裂。
(3)图片定位繁琐:开发时需要通过工具测量计算每个背景单元的精确位置。
(4)可维护性差:页面背景需要少许改动,可能要修改部分或整张已合并的图片,进而要改动css。在避免改动图片的前提下,又只能(最好)往下追加图片,但这样增加了图片字节。
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
22.在这里插入图片描述
闭包可以访问其他函数内部变量的函数,而立即执行函数穿参,相当于父级变量;闭包需要手动执行,不能自主释放内存;而立即执行函数相当于做了一次函数执行,最后释放内存。
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
23.在这里插入图片描述
1.什么是 XML?
XML 指可扩展标记语言(EXtensible Markup Language)
XML 是一种标记语言,很类似 HTML
XML 的设计宗旨是传输数据,而非显示数据
XML 标签没有被预定义。您需要自行定义标签。
XML 被设计为具有自我描述性。
XML 是 W3C 的推荐标准

2.XML 与 HTML 的主要差异:
XML 不是 HTML 的替代。
XML 和 HTML 为不同的目的而设计:
XML 被设计为传输和存储数据,其焦点是数据的内容。
HTML 被设计用来显示数据,其焦点是数据的外观。
HTML 旨在显示信息,而 XML 旨在传输信息。

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
24.在这里插入图片描述
d.setDate(n);
n表示一个月中的一天的一个数值(1 ~ 31):
0 为上一个月的最后一天
-1 为上一个月最后一天之前的一天
如果当月有 31 天:
32 为下个月的第一天
如果当月有 30 天:
32 为下一个月的第二天;
40 为下一个月的第9天;

其次就是排序是0~ 11等于1月~ 12月。
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
25.在这里插入图片描述
A 的center是指< center>< /center>标签
B 的center-block是bootstrap的样式 .center-block
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
26.在这里插入图片描述
b表示加粗
strong表示重要文本
fieldset用来分组
legend用来分组描述
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
27.在这里插入图片描述
var datas=[10,20,30];
datas.unshift(40,50); // 首部添加 [40,50,10,20,30]
data.pop(); // 尾部删除 [40,50,10,20]
datas.push(60,70); // 尾部添加 [40,50,10,20,60,70]
data.shift(); // 首部删除 [50,10,20,60,70]
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
28.在这里插入图片描述
B:使用object.defineProperty可向对象添加或者修改属性这里是小写的object而非Object,所以错误。
C: 每个对象都有prototype属性,返回对象类型原型的引用
D: 通过hasOwnProperty可判断一个对象以及其原型链上是否具有指定名称的属性
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
29.在这里插入图片描述
1.局部 JavaScript 变量:在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它(该变量的作用域是局部的)。
2.全局 JavaScript 变量:在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
3.typeof: typeof 操作符来检测变量的数据类型。
4.new:new是用来实例化一个对象的
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
30.
在这里插入图片描述
javascript 一般使用**var key = val;**的形式复制,声明变量的时候也要用var key; 如果不用var关键字,声明的就是全局变量,一般不要这么做;
变量重复声明也不会错,js里有声明提前,如果两次声明都有赋值,如:var a=10; var a=100; 则变量a的值是100; 若var a=10; var a; 则变量a的值是10;第二次的var a;没什么用。

标签:练习题,XML,变量,10,元素,HTML,var,内联,CSS
来源: https://blog.csdn.net/WikL116824/article/details/112942840

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有