2、HTML-CSS-JavaScript 自学+刷题

最新推荐文章于 2024-06-10 22:18:41 发布

hiohlgf

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量195

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/hiohlgf/article/details/124780132

版权

2022.5.15

JavaScript：

排他思想：先清除其他元素的样式，再设置目标元素的样式。

背景图片形式：‘url（‘ ’）’

隔行换色：

思路：鼠标经过/离开变色；thead不变色，tbody变色；基于伪数组利用循环；

实现：

.new{
  color:red;
}

2022.5.16

HTML+CSS 牛客网刷题

1、为同一个文件添加多种文件格式的原因是：提供备份支持并解决媒体支持问题

2、选择器权重：

第一等级：代表内联样式，如 style=""，权值为 1,0,0,0；

第二等级：代表 ID选择器，如 #id="", 权值为 0,1,0,0；

第三等级：代表 calss | 伪类 | 属性选择器，如 .class | :hover,:link,:target | [type], 权值 0,0,1,0；

第四等级：代表标签 | 伪元素选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1；

此外，通用选择器（*），子选择器（>），相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0；

3、innerHTML包括html标签一起输出，innerText去除html标签。

4、CSS：animation-timing-function指定动画以什么速度完成。默认值 ease 动画以低速开始，然后加快，在结束前变慢。linear 从头到尾速度相同。 ease-in低速进。 ease-out低速出。cubic-bezier(n,n,n,n) 函数中设置0-1的值。

Chrome, Safari 和 Opera游览器中：-webkit-animation-timing-function

5、.list > p:last-child{ } list中最后一个元素且是p元素。

6、HTML<form>标签的enctype属性：规定在将表单数据发送到服务器之前如何对其进行编码/表明提交数据的格式。

只有 method="post" 时才使用 enctype 属性。

application/x-www-form-urlencoded	默认。在发送前对所有字符进行编码（将空格转换为 "+" 符号，特殊字符转换为 ASCII HEX 值）。
multipart/form-data	不对字符编码。当使用有文件上传控件的表单时，该值是必需的。
text/plain	将空格转换为 "+" 符号，但不编码特殊字符。

7、 <input type='date'>包括年月日。

<input type='datetime'>包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区

<input type='datetime-local'>包括年、月、日、时、分、秒、几分之一秒，不带时区

8、HTML5 Web 存储：本地存储

数据以 键/值对 存在。

客户端存储数据的两个对象为：

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 针对session进行数据存储。用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

实例：

// 存储
localStorage.setItem("sitename", "菜鸟教程");
// 查找
document.getElementById("result").innerHTML = "网站名：" +  localStorage.getItem("sitename");
//删除
localStorage.removeItem("sitename");

常用API

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

cookie、sessionStorage、localStorage的区别：

1.都是浏览器存储

2.都存储在浏览器本地

区别：

1.cookie由服务器写入， sessionStorage以及localStorage都是由前端写入

2.cookie的生命周期由服务器端写入时就设置好的，localStorage是写入就一直存在，除非手动清除，sessionStorage是由页面关闭时自动清除

3.cookie存储空间大小约4kb， sessionStorage及localStorage空间比较大，大约5M

4.三者的数据共享都遵循同源原则，sessionStorage还限制必须是同一个页面

5.cookie一般存储登录验证信息或者token，localStorage常用于存储不易变动的数据，减轻服务器压力，sessionStorage可以用来监测用户是否是刷新进入页面，如音乐播放器恢复进度条功能

同源原则：为了保护用户信息的安全，防止恶意网站窃取信息。不同源的页面之间无法请求数据。

一个 URL 有三部分组成：协议（http/https等）、域名(指向主机)、端口（http协议默认端口为80），只有这三个完全相同的 URL 才能称之为同源。

发送ajax请求时，不判断两个页面是否同源（可以发送请求）
浏览器也可以接收到后台响应的内容（能接收响应）
接收到响应后，浏览器才会根据同源策略判断响应内容的页面和当前页面是否是同源的，如果是同源的，请求发送成功；否则就拦截

学习于：(40条消息) 同源和跨域的知识点_北寻北爱的博客-CSDN博客

9、<address> 标签定义文档作者/所有者的联系信息。

9、块级格式上下文BFC(block formatting context)

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：

1 浮动元素：float的值不是none。
2 绝对定位元素：position的值不是static或者relative。
3 display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4 overflow的值不是visible，可以是hidden、auto、scroll

5 body根元素

BFC的特性（功能）

1 BFC的下外边距会发生折叠，解决方法：将两个元素放在不同的BFC容器中。

2 BFC可以包裹浮动元素（清除浮动）

3 BFC可以解决其他元素被浮动元素覆盖的问题，只需要将第二个元素overflow：hidden。

来源：10 分钟理解 BFC 原理 - 知乎 (zhihu.com)

10、#classname > .idname选择是子元素（直系后代），并不是孙子元素。

11、DOM getElementsByName() 方法：返回带有指定名称（name = ‘ ’）的对象的集合。

12、position：fixed 和absolute属性的元素在标准流中不占位置，脱离了普通文档流。

13、一个常用的针对移动网页优化过的页面的 viewport<meta>大致如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
initial-scale：初始化缩放比例。

14、根据 HTML5 规范，在没有其他合适标签更合适时，才应该把 <b> 标签作为最后的选项。HTML5 规范声明：应该使用 <h1> - <h6> 来表示标题，使用 <em> 标签来表示强调的文本，应该使用 <strong> 标签来表示重要文本，应该使用 <mark> 标签来表示标注的/突出显示的文本。

15、<fieldset disable form="form_id" name=“”> 标签可以将表单内的相关元素分组。

<legend></legend> 标签为 <fieldset> 元素定义标题。

2022.5.17

HTML+CSS 牛客网刷题

1、overfolow：

visible：默认值，多余元素展示在元素框之外；

hidden：过多元素不可见；

auto 如果内容过多，展示不全，则产生滚动条；

stroll 滚动条一直有，无论内容多少；

2、列表样式：list-style-type

ul.circle {list-style-type:circle} 圆环环
ul.square {list-style-type:square} 小方块
ol.upper-roman {list-style-type:upper-roman} 罗马数字从I开始
ol.lower-alpha {list-style-type:lower-alpha} 从小写字母a开始

3、<input>新增type属性

range：手动拖拉进度条；

email：用于输入email地址，会自动提示邮件地址；

color：拾色器；

search：站内搜索框；

4、<option> 标签中的内容作为 <select> 或者<datalist> 一个元素使用。显示为一个下拉框；

5、<a href=" ">href的值可以是：

绝对路径网址格式指向另一个站点

相对路径文件名格式指向站内的某个文件

锚路径指向页面中的锚（href="#top" 就会回到id为top的元素位置）；

6、<wbr>标签：在响应式布局中，为了不错误换行（某个单词被拆开）使用<wbr>这里是不可拆分的内容</wbr>

7、<meter>标签定义度量衡，像进度条，但不同于进度条，是静态的。仅用于已知最大和最小值的度量。比如：磁盘使用情况，查询结果的相关性等。

8、HTML5拖放：使用 File API实现

1 可拖动：draggable属性：‘true’

链接和图片默认可拖放，可以不用设置；

2 DataTransfer对象：用来保存拖起到放下过程间的数据，可以是一项到多项数据；

3 被拖动元素（源元素）方法

ondragstart：开始拖动时触发

ondrag：正在拖动时触发

ondraged：完成拖动后（鼠标松开）触发

4 释放目标时触发的元素（目标元素）方法

ondragenter：进入容器范围内触发

ondragleave：原目标离开时触发

ondragover：被拖动元素在另一对象元素范围内拖动；在ondragover中一定要执行preventDefault（），否则ondrop事件不会被触发。

ondrop：拖进容器内，释放鼠标时触发；把被拖动对象捕获到容器内：this.appendChild（dragItem）；

9、HTML5使用data-xxx-type自定义数据： <li data-animal-type="鸟类">喜鹊</li>

10、特殊边距

element.clientWidth = 宽度 + padding

element.offsetWidth = 宽度 + padding + border

element.scrollTop = 被卷去的上侧距离

element.scrollHeight = 自身实际的高度（不包括边框）

11、空元素（empty element/void element）不存在子节点的元素，就是不闭合的元素，比如：<input><img><embed><wbr>

12、CSS 预编译工具有stylus，sass，less

13、p元素不能包含任何块级元素(包括自身)；a元素可以包含任何其他元素(除了自身)；Dom Tree的根节点是document；

14、表单登录用到图形验证码功能：服务器端生成验证码后，一方面通过图片将验证码返回给客户端,同时在服务器端保存文本的验证码,由服务器端验证输入内容是否正确；

JavaScript 牛客网刷题

1、检验复杂数据类型：left instanceof right；左边是对象，右边是类，当对象是右边类或子类所创建的对象时，返回true；

2、用字符串拼接方法，实现两个数字参数拼接后以字符串形式输出：return ' ' + left + right

3、数组求和

function sum(arr) {
    var m = 0;
    for(var i = 0; i < arr.length ; i++){
//原先i < arr.length-1，输出结果错误。
//原因：一共有几个元素就要加几次，所以是i < arr.length
        //原先 var m = 0;写在了这里，输出结果错误
        m = m + arr[i];//原先写成了arr.indexOf(i)
    }
    return m
}

4、返回星期数：getDay（）返回的数字作为数组的索引号，谨记：星期天的索引号必须是0。

正确写法：

var date = new Date( );    //创建Date对象
var today=date.getDay();   //返回的是数字，星期天返回0；
arr=['星期天','星期一','星期二','星期三','星期四','星期五','星期六']；
console.log('今天是'+arr[today]);

//根据输入的value返回星期几

function _getday(value) {
    // 补全代码
    let arr = ['星期一','星期二','星期三','星期四','星期五','星期六','星期天'];
    return arr[value-1]；
}

第一次做时怎么写都错，哪怕复制粘贴别人的题解也错，结果是因为数组内元素都是双引号

数组元素必须用单引号？

5、全选/取消全选按钮

复选框的checked属性与全选按钮的属性保持一致。

用for循环实现所有复选框与全选按钮的checked属性一致；

给每个小按钮绑定事件，每次点击都循环查看其他复选框是否被选中，如果全选中，则全选按钮也被选中（用变量标记是否全选中）。

6、双重for循环，若变量一样var i；则必须处于不同作用域（比如内层for循环被函数包含）

7、获取、设置、移除元素属性：

element.属性；element.getAttribute（‘属性’）

区别：获取元素内置元素；后者获取自定义属性；

设置属性值：element.属性值=‘ ’；element.setAttribute（‘属性’，‘值’）；

同样，后者适用于自定义属性。

特殊：div.className = 'new'

div.setAttribute （'class','new'）

移除：

div.removeAttribute（‘属性’）

2022.5.21

AJAX：不刷新页面的情况下，向服务端发送HTTP请求，得到HTTP响应。可基于事件触发。

四种方式发送ajax：原生、jquery、fetch、axios

XML：可拓展标记语言。被设计用来传输和存储数据。全都是自定义标签。

服务端向客户端发送的是XML格式的文件。被前端JS解析。

XML被JSON取代了。

HTML：呈现数据。

AJAX缺点：没有游览历史，不能回退；存在跨域问题；SEO（搜索引擎优化）不友好（例如淘宝的商品信息就是ajax获取，在爬虫时无法爬取到商品信息）。

AJAX请求实现步骤：

1、创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();//XMLHttpRequest用于和服务端交换数据

2、初始化设置请求的方法和URL，使用open方法与服务器建立连接

xhr.open('GET','http://',true);
//true异步，false同步
//设置为true则需要写onreadystatechange函数

3、发送数据

xhr.send();
//POST时，send(' ');

4、设置回调函数，事件绑定，针对不同状态码处理服务端发送回来的结果

//方法：xhr.onreadystatechange = function( ){   }
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)//服务器返回所有结果且状态码为200
    {
        document.getElementById("myDiv").innerHTML=xhr.response;
          //将response的信息返回在HTML的myDiv中
    }
}
//readystateshi1xhr对象中的属性，表示状态，0 1 2 3 4（4是成功）

每当 readyState 改变时，就会触发 onreadystatechange 事件。

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

属性

描述

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status

200: "OK"
404: 未找到页面

在以下情况中，请使用 POST 请求：

不愿使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

GET发送信息：

在URL后添加参数：用？分割，参数=值&参数=值；

POST发送信息：

添加HTTP头：xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");在send（）中添加数据；

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

  xmlhttp.open("GET","/try/ajax/json_ajax.json",true);
  xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
  xmlhttp.send();