pinkowonote的博客

原创 预看vue源码所需的基础知识（一）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、对象二、[Function对象](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function)一、prototype的由来二、prototype和__proto__1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人

原创 HTTP和HTTPS

HTTP和HTTPS用户访问并登录网站过程名词解释：HTTP（HyperText Transfer Protocol）超文本传输协议HTTPS（Secure HyperText Transfer Protocol）安全超文本传输协议SSL（Secure Socket Layer）安全套接层TLS（Transport Layer Security）运输层安全用户访问并登录网站过程用户访问网站需要在网站上填写用户名和密码，然后这些信息会发送给服务器，这就是我们常说的HTTP协议。但是由于HTTP协议

原创 HTML ＜a＞ 标签

原创 用户代理

用户代理（uer-aget）是浏览器客户端与服务器交互时的重要信息之一，用于帮助网站识别请求用户的浏览器类别，以便于网站发送相应的网页数据。

原创 CSS overflow 属性

overflow属性值：举例：overflow：visible显示：内容会在元素框之外呈现overflow：hidden显示：显示在元素框外的内容会被隐藏，不可见overflow：scroll显示：显示在元素框外的内容会被隐藏，但是会显示右下滚动条，用来查看隐藏内容***（无论是否有内容被隐藏，都会显示出右下滚动条）***overflow：auto显示：只有在有内容溢出时才会显示右滚动条，内容不溢出不会显示滚动条...

原创 内联元素（行级元素）、块级元素、行内块元素

display属性：可替换元素、非替换元素内联元素（行级元素）、块级元素、行内块元素：https://www.cnblogs.com/zp0818/p/8695139.html

原创 HTML、XHTML、XML、HTML5

HTML（HyperText Markup Language）超文本置标语言XHTML （eXtensible HyperText Markup Language）可扩展超文本置标语言

原创 可替换元素、非替换元素、显示元素

可替换元素：（置换元素）浏览器可以直接显示出图片，但是在html文档中却只是一行代码：“<input img=“XXXXXX”>”html文档中CSS不能控制可替换元素的内容，但可以控制他的位置这是一种外部对象，在html文档中没有实际的内容，即是一个空元素浏览器会根据元素的标签类型和属性来显示这些元素。元素本身一般拥有固有尺寸例如宽度、高度、宽高比等的元素举例：典型的可替换元素有：<iframe><video><embed>&lt

原创 定位

定位：让盒子自由的在某个盒子内移动位置，或者固定在屏幕中的某个位置，并且可以压住其他盒子定位 = 定位模式（指定一个元素在文档中的定位方式） + 边偏移（决定该元素的最终位置）定位模式：static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位 边偏移：top，right，left，bottom定位模式：1. 静态定位：static：元素默认定位方式（无定位）是在标准文档流中摆放位置，没有边偏移（没有脱

原创 浮动float

很多布局效果标准流实现不了，可以利用浮动来完成。——>浮动可以改表标签默认排列方式<hr/>多个块级元素纵向排列用标准流： 多个块级元素横向排列用浮动： <hr/>float属性：用于创建浮动框，将其移到一边，直到左边缘或右边缘触及到包含快或另一个浮动框的边缘。<hr/>增加了float属性的元素：1.会脱离标准文档流（脱离标准普通流的控制（浮），移动到指定位置（动），浮动的盒子不再保留...

原创 行内元素和行内块元素水平居中

行内元素和行内块元素水平居中，只需要给他们的父亲设置text-align：center

原创 块元素水平居中margin

水平居中：1. 设置div盒子的宽度2. 设置margin左右为auto

原创 padding

个数 意义 padding：2px 上下左右2px padding：2px 10px 上下2px 左右10px padding：2px 10px 5px 上2px 左右10px 下5px padding：2px 10px 5px 6px 上2px 右10px 下5px 左6px 当盒子没有指定width或者heigth时，padding不会撑开盒子的width或者heigth子元素默认width是父元素宽度的100%，如果没有weight属性，不增加pa

原创 border / border-collapse

border上下左右边框进行设置border-top / border-right / border-bottom / border-leftborder-collapse：collapse：相邻边框合并在一起因为表格中，单元格和单元格之间如果没有cellspacing，那么两个单元格之间的边框就会粘连在一起，变成2px的边框我们需要将2px变成1px的话，就需要使用border-collapse属性，设置collapse...

原创 CSS三大特性（层叠性、继承性、优先级）

1. 层叠性相同选择器（不同选择器优先级不同，如果这里是不同的选择器则不遵循就近原则）设置样式属性一样，属性值不同，此时后个样式就会覆盖（层叠）前一个冲突的样式。CSS层叠性主要解决样式冲突的问题：样式冲突，就近原则2. 继承性CSS中的继承：子标签会继承父标签中的某些样式（text-，font-，line-，color）inherited from 父标签行高的继承：line-height可以加单位，也可以不加单位不加单位的行高表示：当前元素文字大小font-size的XX

原创 背景background

1. background-color：元素默认背景颜色默认值是transparent（透明的）2. background-repeat：repeat、no-repeat、repeat-x、repeat-y背景颜色在背景图片之下3. background-position：背景图片在背景中的位置background-position：x y / 方位名词 / 精确单位；background-position：center top；（无顺序）如果只指定了一个方位名词，另一个值省略，则这

原创 单行文字垂直居中line-height

让文字的行高等于盒子的高度height = line-height行高line-height = 上空隙 + 文字本身高度 + 下空隙行高的上空隙和下空隙把文字挤到中间了，如果是行高<盒子高度：文字偏上；如果行高>盒子高度：文字偏下...

原创 元素的显示模式：块元素、行内元素

元素的显示模式：元素（标签）以什么方式进行显示的1. 块元素独占一行、宽度高度外边距内边距都可以设置、【宽度】默认是父容器宽度100%文字类的元素内不能使用块元素：p、h1~h62. 行元素（内联元素）一行上可以显示多个、宽高设置都是无效的、默认宽度就是本身的宽度、行内元素只能收纳文本或其他行内元素a链接里不能再放链接a链接里可以放块级元素，但是给a转换成块级模式是最安全的3. 行内块元素img、input、td同时具有块元素和行内元素的特点和相邻行内元素（行内块元素

原创 伪类选择器

1. 链接伪类选择器：为了保证生效，按照lvha顺序声明：：link：未访问过的链接：visited：点击过的，访问过的链接：hover：鼠标放在连接上：active：鼠标点击上去的时候a链接在浏览器中有默认样式，需要单独制定a的样式一般只会制定a和a：hover的样式2. ：focus伪类选择器（主要针对表单元素来说）选取获得焦点（光标）的表单元素<input>input：focus...

原创 text-indent和em/rem/px【哎】

text-indent：首行缩进https://www.cnblogs.com/leejersey/p/3662612.htmlem：相对当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)任意浏

原创 font

1. font-weight：粗细一般用数字来表示：400是正常，700是加粗2. font-style斜体Italic样式一般是指书写体，相比无样式的字体，通常会占用较少的高度倾斜体oblique字形一般只是常规字形的倾斜版本：font-style: oblique 0deg;一种字体有粗体、斜体、下划线、删除线等诸多属性。但是并不是所有字体都做了这些，一些不常用的字体，或许就只有个正常体，如果你用 italic，就没有效果了~这时候你就要用 oblique，可以理解成 ita..

原创 CSS尺寸

原创 CSS类名命名规则

https://blog.csdn.net/wang414300980/article/details/79758008

原创 标签的语义

h1：header标题标签p：paragraph段落标签br：break强制打断、换行strong：strong强壮的、加粗【推荐，语义更强烈】b：bold加粗em：倾斜【推荐，语义更强烈】i：incline倾斜del：delete删除【推荐，语义更强烈】s：strikethrough删除ins：下划线【推荐，语义更强烈】u：underline下划线div：division分割，区分span：span跨度，跨距img：image图像 属性：...

原创 DOCTYPE、lang、meta标签

<!DOCTYPEhtml>：文档类型声明标签，不属于html标签。告诉浏览器使用哪种HTML版本来显示网页。这里是指当前页面采用HTML5版本来显示网页一定要写在文档最前面的位置，在<html>标签最前面<hr>什么语言的网站：<html lang = "en"><html lang = "zh-CN“><html lang = "fr">会显示是否需要翻译<hr>...

原创 艾瑞莎啊让法国

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="

原创 CSS 属性选择器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src=.

原创 响应式导航栏

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="

原创 设置了 *{padding: 0；margin: 0；} 但是没有用，仍然有padding【已解决】【蠢蛋】

@media screen and (min-width: 768px) { *{ padding: 0; margin: 0; } .container { width: 750px; /* background-color: aqua; */ margin: 0 auto; } .container ul li { float: left; /* display: inli

原创 display:inline-block元素之间产生空隙

https://blog.csdn.net/qq_32614411/article/details/82223624@media screen and (min-width: 768px) { *, *::before, *::after { margin: 0px; padding: 0px; } .container { width: 750px; background-color: aqua;

原创 将 需要获取className的方法 封装成函数

<!-- 将ul里的li中含有class = "box"的li的背景颜色设置为红色1. 获取含有class = "box"的li2. 设置背景颜色为红色 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0

原创 设置元素的属性：使用./[]/setAttribute方法

<!-- 设置元素的属性：使用./[]/setAttribute方法 点击按钮，将text里的值变换为其他值1. 获取按钮和文本框2. 按钮添加onclick事件，当点击时，文本框的value值变为其他--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device

原创 首尾节点和兄弟节点

<!-- 首尾节点和兄弟节点：将ul中的第一个li的背景颜色设置为红色1. 获取ul和li2. 将ul的firstChild.style.backgroundColor = "red"3. 兼容性问题也要考虑到 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=

原创 使用offsetParent

<!-- 使用offsetParent距离该子元素最近的进行过定位的父元素（position：absolute relative fixed），如果其父元素中不存在定位则offsetParent为：body元素 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=de

原创 点击li里的隐藏超链接，将ul里的li隐藏

<!-- 点击li里的隐藏超链接，将ul里的li隐藏1. 使用for获取ul的子节点，当点击隐藏按钮时，li消失 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&

原创 将ul里的li背景颜色变红（使用dom的方法）

<!-- 将ul里的li背景颜色变红（使用dom的方法） 获取ul的子节点，将li背景颜色设置为红色--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu

原创 手风琴

<!-- 手风琴：1. 一个横向ul有序列表，鼠标移到其中的li时，li的宽度增加2. 在ul里，鼠标移出li时，li宽度变为正常3. 当鼠标在ul外时，所有li宽度正常 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial

原创 闭包案例

https://blog.csdn.net/qq_42833001/article/details/87252890https://www.cnblogs.com/csuwujing/p/8021913.html异步，同步任务立即执行函数（方法（i））（调用前面的方法，所以可以写参数i）var obutton = document.getElementsByTagName("button");for (var i = 0; i < obutton.length; i++) { obu

原创 作用域链和预解析的案例

//问1——>123 function f1() { var num = 123; function f2() { console.log(num); } f2(); } var num = 456; f1(); //相当于 function f1() { var num; function f2() { console.log(num); } num = 123; .

原创 JavaScript作用域链的配置机制

作用域链是 JavaScript 提供的一套解决标识符的访问机制：JavaScript 规定每一个作用域都有一个与之相关联的作用域链。作用域链用来在函数执行时求出标识符的值。在对标识符进行求值的过程中：该链中包含多个对象，就会从【链首的对象】开始，然后依次查找后面的对象，直到在某个对象中找到与标识符名称相同的属性。如果在作用域链的顶端（全局对象）中仍然没有找到同名的属性，则返回 undefined 的属性值。（在每个对象中进行属性查找的时候，还会使用该对象的原型域链。在一个执行上下文，与其关联的作用.