刷题总结827

最新推荐文章于 2024-04-04 19:23:32 发布

Tarafireworks

最新推荐文章于 2024-04-04 19:23:32 发布

阅读量295

点赞数

分类专栏：前端文章标签： html html5 jquery

本文链接：https://blog.csdn.net/weixin_44760073/article/details/119954952

版权

前端专栏收录该内容

82 篇文章 1 订阅

订阅专栏

html盒模型中的border的正确写法？为了代码的可读性，建议按照，border-width，border-style，border-color，的顺序书写。
但其实顺序调换是不影响呈现的

p{  border:5px   solid red;}

AngularJs框架中给元素动态绑定

给元素绑定样式 ng-style
给元素绑定类名 ng-class
eg:用法①：<div ng-class="{'A':isA,'B':isB,'C':isC}"></div>
用法②：<div ng-class = "{{A}}" > </ div >
给元素绑定监听 ng-click等
显示隐藏 ng-show ng-hide

表单标记

table是html的表格标签，和表单标记没有关系

表单作用：为了收集用户信息，如登录、注册、搜索。
表单标记有文本框、密码框、单选框、多选框、下拉框、多行文本框、上传按钮、隐藏表单、提交按钮、重置按钮、图片提交按钮、普通按钮。SELECT、INPUT、INPUT

以下的代码，从上到下img标签的背景色依次是 blue / red / blue / blue / red / blue

在这里插入图片描述

        .list>p:nth-child(even) img {
            background: red;
        }

这个是指.list下的子代p的所有兄弟p p div p div(不包括兄弟的儿子) 的偶数位,p(奇) p(偶) div(奇) p(偶) div(奇),命中第2和第5个img 红色

        .list>p:last-child img {
            background: orange;
        }

这个是指.list下的子代p的所有兄弟p p div p div(不包括兄弟的儿子)的最后1个元素p(如果是p,则p)为橙色,但最后1个元素是div,不是p,所以这个属性是无效的,最后1个img是蓝色. p:last-child等同于p:nth-last-child(1)

p:last-child是要p在最后一个元素才有效
.list>p :nth-child(even)
在class=list的所有元素的偶元素中，如果是p元素，则被选中。

在HTML5中，为input元素新增了以下一些type属性值：

color：用于指定颜色的控件。
date：用于输入日期的控件（年，月，日，不包括时间）。
month：用于输入年月的控件，不带时区。
week：用于输入一个由星期-年组成的日期，日期不包括时区
time：用于输入不含时区的时间控件。
datetime：基于UTC时区的日期时间输入控件（时，分，秒及几分之一秒）。
datetime-local：用于输入日期时间控件，不包含时区。
email：用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。
number: 用于应该包含数值的输入域。只能输入数字
range：用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。
search：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
tel：用于输入电话号码的控件。在移动端输入会显示数字键盘，PC端无效果
url：用于编辑URL的字段。

用于播放 HTML5 音频文件的正确 HTML5 元素是：`<audio>`

使用css 选择器定义某个父元素中子元素的样式：

nth-child(odd) ：定义某个父元素中所有第"奇数"个子元素的样式
nth-child(n) : 匹配父元素中的第 n 个子元素，元素类型没有限制。
nth-of-type(odd) ：定义某个父元素中的不同类型中的所有第"奇数"个子元素的样式

javascirpt中的数字在计算机内存储为多少Byte？8Byte

关于Javascript中数字的部分知识总结：
1.Javascript中，由于其变量内容不同，变量被分为基本数据类型变量和引用数据类型变量。

基本类型变量用8字节内存，存储基本数据类型(数值、布尔值、null和未定义)的值；
引用类型变量则只保存对对象、数组和函数等引用类型的值的引用(即内存地址)。

JS中的数字是不分类型的，也就是没有byte/int/float/double等的差异。

“JavaScript内部，所有数字都是以64位浮点数形式储存，即使整数也是如此。” （8 Byte = 64bit。8个字节，64位）

创建带有id属性的DOM元素副作用：会创建同名的全局变量

如果一个元素拥有ID属性,那么ID属性的属性值就会成为window对象的属性名.
带有id的DOM树元素会成为全局变量！
对于DOM树中具有ID的给定HTMLElement，可以使用其ID作为变量名来检索div。所以对于一个div

<div id="example">some text</div>

alert(window['example'].innerHTML); //=> 'some text'

javascript的全局函数：()

js的全局属性：Infinity、NAN、undefined
js的全局函数：

decodeURI() 解码某个编码的 URI。
decodeURIComponent() 解码一个编码的 URI 组件。
encodeURI() 把字符串编码为 URI。
encodeURIComponent() 把字符串编码为 URI 组件。
5. escape() 对字符串进行编码。
6. eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。
isFinite() 检查某个值是否为有穷大的数。
isNaN() 检查某个值是否是数字。
Number() 把对象的值转换为数字。
parseFloat() 解析一个字符串并返回一个浮点数。
parseInt() 解析一个字符串并返回一个整数。
String() 把对象的值转换为字符串。
unescape() 对由 escape() 编码的字符串进行解码。

在jquery中指定一个`toggleClass(class)`类，如果存在就执行删除功能，如果不存在就执行添加功能

toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。
不过，通过使用 “switch” 参数，您能够规定只删除或只添加类。

基于以下 HTML 结构，判断浏览器会发送多少个图片请求？

在这里插入图片描述
经过测试的结果是:

只要是img src引用的都会请求；
background: url()所属样式如果挂靠在某个元素上，就一定会请求；单独写了这么一个样式并不请求。
所以这道题目中，只有#bg不请求。
浏览器解析dom,然后根据类名去渲染样式，而#bg根本不会引用到，故不会请求里面的图片， css中的图片用到的时候才会被加载；bg这个id在主体中并不存在所以#bg的url并不会产生请求

在body中只要有src并且有地址，就会请求
在css中，将图片设置成背景，除了display：none和visibility：hidden之外都请求

在这里插入图片描述

CSS控制前端图片HTTP请求的各种情况示例
1、对于隐藏图片和隐藏元素的背景，Opera不会产生请求。
2、对于隐藏元素的背景，Firefox也不会产生请求。
3、对于尚未插入DOM树的img元素，Opera不会产生请求。
4、基于webkit引擎的Safari和Chrome，支持多背景图。
5、其它情景，所有主流浏览器保持一致。