前端学习
关注
分享
扫一扫
文章平均质量分 87
〔晴【天】º〕
仰天大笑出门去，我辈岂是蓬蒿人。
展开
-
JavaScript 运行机制
JS主要用途是与用户互动，以及操作DOM。如果JS是多进程的话，那么它可以同时在某个DOM节点上添加内容，又可以删除这个节点，从而导致浏览器不知该以哪个为准。原创 2023-11-20 16:00:00 · 215 阅读 · 0 评论 -
如何调用本地 json 文件数据
在 public 文件夹下，新建一个存放 json 数据的文件夹 [ testdata ]；在原本需要调用接口的地方，将 url 地址，换为我们需要的 json 文件的地址。使用场景：当无数据接口时，需要调用自己写的 json 文件，请求数据。在新建的文件夹 testdata 下，存放我们的 json 数据；在需要请求数据的地方，正常调用接口，即可。原创 2023-11-20 10:34:35 · 769 阅读 · 0 评论 -
回流( reflow )与重绘( repaint )
文章目录1、了解浏览器的渲染机制2、回流3、重绘4、避免方法1、了解浏览器的渲染机制（1）浏览器采用流式布局模型。（2）首先浏览器会将 HTML 解析成 DOM，把 CSS 解析成 CSSOM，把 CSSOM 与 DOM 结合产生 render tree。（3）有 render tree 之后，我们知道了节点样式，然后浏览器会计算节点的位置，然后把节点绘制到页面上。2、回流当 render tree 中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流( ref原创 2021-10-15 10:14:33 · 364 阅读 · 1 评论 -
JavaScript学习笔记（二）两种操作属性的方法，常用的属性
JavaScript中两种操作属性的方法点-.用法：元素.属性方括号->[ ]用法：元素[‘属性’]例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do原创 2021-05-30 21:22:19 · 272 阅读 · 4 评论 -
JavaScript学习笔记（一）JavaScript的几种写法，获取元素的两种方法，JavaScript 变量
JavaScript 使用创建变量var+变量名变量名的规范：变量名称：小写字母 大写字母 $ _ 1数字不能放在最前面变量名称尽量避免和函数库有关系prompt() 方法HTML DOM Window 对象定义和用法prompt() 方法用于显示可提示用户进行输入的对话框。语法prompt(text,defaultText)说明如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本。在用户点击确定按钮或取消按钮把对话框关闭之前，它原创 2021-05-28 10:01:35 · 304 阅读 · 2 评论 -
CSS学习笔记（二十三）CSS 网格布局
CSS 网格布局模块网格布局CSS 网格布局模块（CSS Grid Layout Module）提供了带有行和列的基于网格的布局系统，它使网页设计变得更加容易，而无需使用浮动和定位。网格元素网格布局由一个父元素以及一个或多个子元素组成。实例<!DOCTYPE html><html><head><style>.grid-container { display: grid; grid-template-columns: auto aut原创 2021-05-27 10:11:33 · 324 阅读 · 0 评论 -
CSS学习笔记（二十二）弹性布局
CSS FlexboxCSS Flexbox 布局模块在 Flexbox 布局模块（问世）之前，可用的布局模式有以下四种：块（Block），用于网页中的部分（节）行内（Inline），用于文本表，用于二维表数据定位，用于元素的明确位置弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。Flexbox 元素如需开始使用 Flexbox 模型，您需要首先定义 Flex 容器。上面的元素表示一个带有三个 flex 项目的 flex 容器（蓝色区域）。实例含有三原创 2021-05-24 21:44:49 · 330 阅读 · 1 评论 -
CSS学习笔记（二十一）CSS变量var()
CSS 变量CSS 变量var() 函数用于插入 CSS 变量的值。CSS 变量可以访问 DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。使用 CSS 变量的一种好方法涉及设计的颜色。您可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。var() 函数的语法var() 函数用于插入 CSS 变量的值。var() 函数的语法如下：var(name, value)注释：变量名称必须以两个破折号（–）开头，且原创 2021-05-24 14:54:45 · 4460 阅读 · 0 评论 -
CSS学习笔记（二十）CSS object-fit 属性,按钮，分页，多列
CSS object-fit 属性CSS object-fit 属性用于规定应如何调整 <img> 或 <video> 的大小来适应其容器。CSS object-fit 属性CSS object-fit 属性用于指定应如何调整 <img> 或 <video> 的大小以适合其容器。这个属性告诉内容以不同的方式填充容器。比如“保留长宽比”或者“展开并占用尽可能多的空间”。一个300x300 像素的图片，如果设置成了 200x300 像素，图片就会被压缩。原创 2021-05-24 12:08:03 · 549 阅读 · 0 评论 -
CSS学习笔记（十九）CSS 工具提示，图像样式
CSS 工具提示基础的工具提示创建一个鼠标移到元素上时显示的工具提示：实例<!DOCTYPE html><html><style>.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black;}.tooltip .tooltiptext { visibility: hidden; width: 120px; backgr原创 2021-05-24 10:14:02 · 211 阅读 · 0 评论 -
CSS学习笔记（十八）CSS 2D 转换，3D 转换，过渡，动画
CSS 2D 转换CSS 2D 转换方法通过使用 CSS transform 属性，您可以利用以下 2D 转换方法：translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()translate() 方法translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。下面的例子把 <div> 元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素：实原创 2021-05-23 20:52:38 · 375 阅读 · 0 评论 -
CSS学习笔记（十七）CSS 文本效果，Web 字体
CSS Box ShadowCSS box-shadow 属性CSS box-shadow 属性应用阴影于元素。最简单的用法是只指定水平阴影和垂直阴影：为阴影添加颜色：向阴影添加模糊效果：div { box-shadow: 10px 10px 5px grey;}CSS 文本效果CSS 文字溢出CSS text-overflow 属性规定应如何向用户呈现未显示的溢出内容。可以被裁剪：也可以将其呈现为省略号（…）：代码如下：<!DOCTYPE html><原创 2021-05-23 16:55:44 · 250 阅读 · 0 评论 -
CSS学习笔记（十六）CSS渐变
如果希望对渐变角度做更多的控制，您可以定义一个角度，来取代预定义的方向（向下、向上、向右、向左、向右下等等）。rgba() 函数中的最后一个参数可以是 0 到 1 的值，它定义颜色的透明度：0 表示全透明，1 表示全彩色（无透明）。如需创建线性渐变，您必须定义至少两个色标。下面的例子展示了从左开始的线性渐变。CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。CSS 渐变还支持透明度，也可用于创建渐变效果。size 参数定义渐变的大小。如需创建径向渐变，您还必须定义至少两个色标。原创 2021-05-23 16:20:56 · 281 阅读 · 0 评论 -
CSS学习笔记（十五）CSS 圆角，多重背景
CSS 圆角CSS 圆角通过 CSS border-radius 属性，可以实现任何元素的“圆角”样式。CSS border-radius 属性定义元素角的半径。提示：您可以使用此属性为元素添加圆角带有指定背景颜色的元素的圆角：带边框元素的圆角：带有背景图像的元素的圆角：提示：border-radius 属性实际上是以下属性的简写属性：border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusbo原创 2021-05-23 15:47:41 · 396 阅读 · 0 评论 -
CSS学习笔记（十四）CSS 计数器，特异性
CSS 计数器CSS 计数器是由 CSS 保持的“变量”，其值可以通过 CSS 规则递增（以跟踪其使用次数）。计数器使您可以根据内容在文档中的位置来调整其外观。带计数器的自动编号CSS 计数器就像“变量”。变量值可以通过 CSS 规则递增（将跟踪它们的使用次数）。如需使用 CSS 计数器，我们将使用以下属性：counter-reset - 创建或重置计数器counter-increment - 递增计数器值content - 插入生成的内容counter() 或 counters() 函数原创 2021-05-23 15:05:54 · 273 阅读 · 0 评论 -
CSS学习笔记（十三）CSS 下拉菜单，属性选择器
CSS 下拉菜单基础的下拉菜单创建当用户将鼠标移到元素上时出现的下拉框。实例<style>.dropdown { position: relative; display: inline-block;}.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px原创 2021-05-23 14:40:20 · 1144 阅读 · 0 评论 -
CSS学习笔记（十二）CSS 水平导航栏
CSS 水平导航栏水平导航栏有两种创建水平导航栏的方法：使用行内或浮动列表项。行内列表项构建水平导航栏的一种方法是，除了上一章中的“标准”代码外，还要将 <li> 元素指定为 inline：实例li { display: inline;}例子解释：display: inline; -默认情况下，<li> 元素是块元素。在这里，我们删除每个列表项之前和之后的换行符，这样它们才能显示在一行。浮动列表项创建水平导航栏的另一种方法是浮动 元素，并为导航链接规定布原创 2021-05-21 21:28:24 · 1479 阅读 · 0 评论 -
CSS学习笔记（十一）透明悬停效果，CSS 导航栏
透明悬停效果opacity 属性通常与 :hover 选择器一同使用，这样就可以在鼠标悬停时更改不透明度：实例img { opacity: 0.5;}img:hover { opacity: 1.0;}例子解释第一个 CSS 块类似于实例 1 中的代码。此外，我们还添加了当用户将鼠标悬停在其中一个图像上时的效果。在这种情况下，当用户将鼠标悬停在图像上时，我们希望图像不透明。这条 CSS 是 opacity:1;。当鼠标指针离开图像时，图像将再次透明。反向悬停效果的例子：实例原创 2021-05-21 21:07:59 · 1891 阅读 · 0 评论 -
CSS学习笔记（十）CSS 组合器，伪类，伪元素
CSS 组合器CSS 组合器组合器是解释选择器之间关系的某种机制。CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。CSS 中有四种不同的组合器：后代选择器 (空格)子选择器 (>)相邻兄弟选择器 (+)通用兄弟选择器 (~)后代选择器后代选择器匹配属于指定元素后代的所有元素。下面的例子选择 <div> 元素内的所有 <p> 元素：（包含在里面的所有p元素）实例div p { background-color: ye原创 2021-05-18 12:33:32 · 254 阅读 · 1 评论 -
CSS学习笔记（九）display: inline-block，CSS 布局- 水平和垂直对齐
CSS 布局 - display: inline-blockdisplay: inline-block与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他原创 2021-05-17 14:01:01 · 1899 阅读 · 0 评论 -
CSS学习笔记（八）CSS 布局 - display 属性，width 和 max-width，溢出，浮动和清除
CSS 布局 - display 属性display 属性是用于控制布局的最重要的 CSS 属性。display 属性display 属性规定是否/如何显示元素。每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。块级元素（block element）块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。块级元素的一些例子：<div><h1> - <原创 2021-05-17 13:32:04 · 1657 阅读 · 0 评论 -
CSS学习笔记（七）CSS图标，CSS 链接，cursor，CSS 列表，CSS 表格
CSS图标如何添加图标向 HTML 页面添加图标的最简单方法是使用图标库，比如 Font Awesome。将指定的图标类的名称添加到任何行内 HTML 元素（如 <i> 或 <span>）。下面的图标库中的所有图标都是可缩放矢量，可以使用 CSS进行自定义（大小、颜色、阴影等）。Font Awesome 图标如需使用 Font Awesome 图标，请访问 fontawesome.com，登录并获取代码添加到 HTML 页面的 <head> 部分：<s原创 2021-05-16 16:25:41 · 5330 阅读 · 0 评论 -
CSS学习笔记（六）CSS 字体
CSS 字体通用字体族在 CSS 中，有五个通用字体族：衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。无衬线字体（Sans-serif）-字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。草书字体（Cursive）- 模仿了人类的笔迹。幻想字体（Fantasy）-是装饰性/俏皮的字体。所有不同的字体名称都属于这五个通用字体系列之一。Serif 和原创 2021-05-16 15:09:48 · 445 阅读 · 0 评论 -
CSS学习笔记（五）CSS 文本
CSS 文本文本颜色color 属性用于设置文本的颜色。颜色由以下值指定：颜色名 - 比如 “red”十六进制值 - 比如 “#ff0000”RGB 值 - 比如 “rgb(255,0,0)”页面的默认文本颜色是在 body 选择器中定义的。CSS 文本对齐文本对齐text-align 属性用于设置文本的水平对齐方式。文本可以左对齐或右对齐，或居中对齐。下例展示了居中对齐以及左右对齐的文本（如果文本方向是从左到右，则默认为左对齐；如果文本方向是从右到左，则默认是右对齐）：<原创 2021-05-15 16:09:02 · 398 阅读 · 1 评论 -
CSS学习笔记（四）CSS 轮廓
CSS 轮廓CSS 轮廓轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。CSS 拥有如下轮廓属性：outline-styleoutline-coloroutline-widthoutline-offsetoutline注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。CSS 轮廓样式outline-style 属性指定轮廓的样式，并可设置如下值：dotted -原创 2021-05-15 15:31:29 · 330 阅读 · 0 评论 -
CSS学习笔记（三）CSS 背景，CSS 边框
CSS 背景CSS 背景属性用于定义元素的背景效果。我们将学习如下 CSS 背景属性：background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionCSS background-colorbackground-color 属性指定元素的背景色。通过 CSS，颜色通常由以下方式指定：有效的颜色名称 - 比如 “red”十六进制值 - 比如 “#ff0000”RGB原创 2021-05-14 15:51:22 · 267 阅读 · 1 评论 -
CSS学习笔记（二）标准盒模型与怪异盒模型，margin，border，padding
标准盒模型与怪异盒模型一、盒子模型盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版。W3C组织建议把网页上元素看成是一个个盒子。盒模型主要定义四个区域:内容( content)、内边距( padding)、边框( border)、外边距( margin)。转换到我们日常生活中,可以拿手机盒来对比,手机=内容,内边距=盒子中的填充物,边框-盒子的厚度,外边距两个手机盒之间的距离。通常我们设置的宽和高是指“手机” content的宽高,一整个盒子还包含了“填充物”、盒子、盒子与盒子的距离。二原创 2021-05-12 19:14:51 · 582 阅读 · 0 评论 -
CSS学习笔记（一）CSS选择器，添加 CSS
CSS选择器CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。我们可以将 CSS 选择器分为五类：简单选择器（根据名称、id、类来选取元素）组合器选择器（根据它们之间的特定关系来选取元素）伪类选择器（根据特定状态选取元素）伪元素选择器（选取元素的一部分并设置其样式）属性选择器（根据属性或属性值来选取元素）CSS 元素选择器元素选择器根据元素名称来选择 HTML 元素。实例在这里，页面上的所有 元素都将居中对齐，并带有红色文本颜色：p { text-align原创 2021-05-09 15:09:10 · 354 阅读 · 0 评论 -
HTML学习笔记（第五天）
通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。原创 2021-05-09 14:49:11 · 138 阅读 · 0 评论 -
HTML学习笔记（第四天）
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。原创 2021-05-08 15:08:40 · 186 阅读 · 3 评论 -
HTML学习笔记（第三天）
required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.pattern 属性适用于以下输入类型：text、search、url、tel、email、and password。表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。注释：表单本身并不可见。POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。原创 2021-05-07 15:34:10 · 350 阅读 · 0 评论 -
HTML 快速参考
【代码】HTML 快速参考。原创 2021-05-06 15:58:27 · 171 阅读 · 0 评论 -
HTML学习笔记（第二天）
如果使用了相对路径，那么您的网页就不会与当前的基准 URL 进行绑定。所有链接在您的电脑上 (localhost) 或未来的公共域中均可正常工作。一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。为了正确显示 HTML 页面，Web 浏览器必须知道页面中使用的字符集。name 和 content 属性的作用是描述页面的内容。原创 2021-05-06 15:57:34 · 135 阅读 · 0 评论 -
HTML学习笔记（第一天）
浏览器通常会对元素进行缩进处理。实例< p > 以下内容引用自 WWF 的网站： </ p > < blockquote cite = " http://www.worldwildlife.org/who/index.html " > 五十年来，WWF 一直致力于保护自然界的未来。世界领先的环保组织，WWF 工作于 100 个国家，并得到美国一百二十万会员及全球近五百万会员的支持。</原创 2021-05-05 21:11:32 · 146 阅读 · 0 评论