<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[qq_52824207的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/qq_52824207</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; qq_52824207]]></copyright><item><title><![CDATA[html：链接a的所有属性和几种使用方式]]></title><link>https://blog.youkuaiyun.com/qq_52824207/article/details/124517626</link><guid>https://blog.youkuaiyun.com/qq_52824207/article/details/124517626</guid><author>qq_52824207</author><pubDate>Sat, 30 Apr 2022 20:11:12 +0800</pubDate><description><![CDATA[标签a的所有属性

href 目标链接的url

hreflang 目标链接的语言(英文en，中文zh)

rel 目标链接与当前页面关系

target 规定在何处打开链接

(H5)download 规定被下载的超链接目标文件名

(H5)meta 规定目标url用于什么设备

(H5)type 规定目标文档类型

代码：


&lt;a href="url"&gt;文本&lt;/a&gt;
&lt;a href="url" hreflang="zh"&gt;文本&lt;/a&gt;
&lt;a hre]]></description><category></category></item><item><title><![CDATA[js：按钮绑定多个事件的三种方法（js，DOM，jQuery）]]></title><link>https://blog.youkuaiyun.com/qq_52824207/article/details/124448387</link><guid>https://blog.youkuaiyun.com/qq_52824207/article/details/124448387</guid><author>qq_52824207</author><pubDate>Wed, 27 Apr 2022 13:02:46 +0800</pubDate><description><![CDATA[1.js可以直接通过通过button的onclick添加多个函数来绑定多个事件。

2.DOM可以通过事件监听函数addEventListener绑定事件。

3.Jquery可以通过click方法来绑定事件。

完整代码：


&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;title&gt;按钮绑定多个事件&lt;/title&gt;
        &lt;meta charset="utf-8"&gt]]></description><category></category></item><item><title><![CDATA[css3+jQuery：两种简单动画实现方式]]></title><link>https://blog.youkuaiyun.com/qq_52824207/article/details/124353545</link><guid>https://blog.youkuaiyun.com/qq_52824207/article/details/124353545</guid><author>qq_52824207</author><pubDate>Fri, 22 Apr 2022 21:00:02 +0800</pubDate><description><![CDATA[css3支持动画animate

完整代码（之后只给js部分）：


&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;title&gt;简单动画&lt;/title&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;]]></description><category></category></item><item><title><![CDATA[js：两种方法实现键盘按键控制]]></title><link>https://blog.youkuaiyun.com/qq_52824207/article/details/124309962</link><guid>https://blog.youkuaiyun.com/qq_52824207/article/details/124309962</guid><author>qq_52824207</author><pubDate>Wed, 20 Apr 2022 23:20:17 +0800</pubDate><description><![CDATA[第一步：先获取按键的键码（按下哪个键）

使用DOM（文档对象模型）或者jQuery（js常用框架）实现

完整代码（之后只给js部分）：


&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;键盘事件&lt;/title&gt;
    &lt;/head&gt;
    &lt;body style="text-align: center;"&gt;
        &lt;h1&gt;键盘事件&lt;/h1]]></description><category></category></item><item><title><![CDATA[js:三种简单的矩形绘制方法（画布canvas）]]></title><link>https://blog.youkuaiyun.com/qq_52824207/article/details/124218965</link><guid>https://blog.youkuaiyun.com/qq_52824207/article/details/124218965</guid><author>qq_52824207</author><pubDate>Sat, 16 Apr 2022 20:34:28 +0800</pubDate><description><![CDATA[之前提到过画布canvas通过lineto方法绘制矩形，实际上画布canvas还有三种其他更简便的方法绘制矩形，而lineto方法可以绘制任何直线图形

三种绘制矩形的方法分别是：

rect();创建矩形路径（只生成路径）

fillRect();创建填充的矩形路径（生成路径并填充）

strokeRect();创建矩形路径并绘制（生成路径并绘制）

另外有一种清除矩形填充的方法（个人理解为矩形形状的橡皮擦）：

clearRect()

这是之前的博客：https://blog.youkuaiyun.com/qq_]]></description><category></category></item><item><title><![CDATA[html+js：画布canvas + 绘制简单矩形]]></title><link>https://blog.youkuaiyun.com/qq_52824207/article/details/124218544</link><guid>https://blog.youkuaiyun.com/qq_52824207/article/details/124218544</guid><author>qq_52824207</author><pubDate>Sat, 16 Apr 2022 19:22:21 +0800</pubDate><description><![CDATA[html5支持canvas标签

canvas创建一个画布，通过.getContext方法创建一个CanvasRenderingContext2D对象进行图案的绘制,具体的方法可以前往HTML Canvas 参考手册查询

完整代码（之后只列出js部分）：



&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;画布canvas测试&lt;/title&gt;
        &lt;style&gt;
    ]]></description><category></category></item><item><title><![CDATA[js：存储（Storage） + 实现简单的注册登录注销功能]]></title><link>https://blog.youkuaiyun.com/qq_52824207/article/details/124115792</link><guid>https://blog.youkuaiyun.com/qq_52824207/article/details/124115792</guid><author>qq_52824207</author><pubDate>Tue, 12 Apr 2022 09:46:06 +0800</pubDate><description><![CDATA[window有两个简单的存储对象：localStorage和sessionStorage

localStorage永久存储在本地硬盘的数据中，生命周期是永久（除非手动删除硬盘中的文件）

sessionStorage临时存储在浏览器中，生命周期为浏览器页面打开时间（页面关闭时数据丢失）

两个对象都是以键值对的方式保存数据，有相同的属性和方法：

setItem(keyname，value) 存储键值对，如果键名相同，则更新值

getItem(keyname) 根据键名查找对应的值

key(n) 返回]]></description><category></category></item><item><title><![CDATA[js:定时事件setTimeout与setInterval]]></title><link>https://blog.youkuaiyun.com/qq_52824207/article/details/124087806</link><guid>https://blog.youkuaiyun.com/qq_52824207/article/details/124087806</guid><author>qq_52824207</author><pubDate>Sun, 10 Apr 2022 23:21:44 +0800</pubDate><description><![CDATA[setTimeout：

执行一次，第一个参数是要执行的函数（function），第二个参数是定时时间（number），单位毫秒，cleartimeout停止

代码：


&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;定时测试&lt;/title&gt;
    &lt;/head&gt;
    &lt;body style="text-align: center;"&gt;
        &lt;h1]]></description><category></category></item><item><title><![CDATA[js:三种弹出框（alter警告，confirm确认，prompt提示）]]></title><link>https://blog.youkuaiyun.com/qq_52824207/article/details/124081188</link><guid>https://blog.youkuaiyun.com/qq_52824207/article/details/124081188</guid><author>qq_52824207</author><pubDate>Sun, 10 Apr 2022 17:30:35 +0800</pubDate><description><![CDATA[三种弹出框都属于window对象，完整写作window.alter，三种弹出框都可省略window.

alter弹出警告框，只有一个确定按钮


alert("这是一个警告框");

confirm弹出确认框，有两个按钮：确定和取消，分别返回true和false


confirm("这是一个确认框，确定返回true，取消返回false");

prompt弹出提示框，确定，取消，输入框，确定返回输入框的值（不输入为空""），取消返回Null


prompt("这是一个提示框，确定返回输入值，取消返回N]]></description><category></category></item><item><title><![CDATA[html：href与src]]></title><link>https://blog.youkuaiyun.com/qq_52824207/article/details/124077610</link><guid>https://blog.youkuaiyun.com/qq_52824207/article/details/124077610</guid><author>qq_52824207</author><pubDate>Sun, 10 Apr 2022 14:39:07 +0800</pubDate><description><![CDATA[href(Hypertext Reference)超文本引用

常用于&lt;a&gt;&lt;link&gt;


&lt;a href="www.baidu.com"&gt;引用一个网页链接&lt;/a&gt;
&lt;link rel="stylesheet" href="css.css"/&gt;//引用一个css文件

href引用时不会终止当前文档的加载



src（source ）引用资源（或者说加载资源）

常用于&lt;img&gt;&lt;script&gt;


&lt;image ]]></description><category></category></item><item><title><![CDATA[js:或运算|| 布尔值Boolean]]></title><link>https://blog.youkuaiyun.com/qq_52824207/article/details/124074719</link><guid>https://blog.youkuaiyun.com/qq_52824207/article/details/124074719</guid><author>qq_52824207</author><pubDate>Sun, 10 Apr 2022 12:34:51 +0800</pubDate><description><![CDATA[基本或运算：


true || false = true
true || true = true
false || false = false

布尔值（逻辑真和逻辑假）：

有值为真，不具有真实的值为假

数字0，未定义Undefined，非数字NaN，空值Null为假


Boolean(0);//数字0返回假
Boolean("0");//字符串不为空返回真
Boolean("");//字符串为空返回假

Boolean(Undefined);//未定义返回假
var a;//变量a未定义
Bool]]></description><category></category></item><item><title><![CDATA[css：左中右布局占满屏幕，左右两块固定宽度200px ，中间自适应，先加载中间块]]></title><link>https://blog.youkuaiyun.com/qq_52824207/article/details/124068657</link><guid>https://blog.youkuaiyun.com/qq_52824207/article/details/124068657</guid><author>qq_52824207</author><pubDate>Sat, 09 Apr 2022 21:43:24 +0800</pubDate><description><![CDATA[分析：

1.中间自适应

弹性布局display:flex

flex-grow增长系数，左右默认为0，中间设置为1即可分配所有剩余空间（分配给左右固定宽度之后的空间）

2：先加载中间

css选择器优先级问题

（1）越精确优先级越高

id选择器&gt;类选择器&gt;元素选择器(伪类、伪元素等暂不讨论)

（2）css文件里越后面优先级越高（相同类型）



代码：

html


&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
      ]]></description><category></category></item><item><title><![CDATA[css：建立一个200px*200px的div实现完美居中]]></title><link>https://blog.youkuaiyun.com/qq_52824207/article/details/124064000</link><guid>https://blog.youkuaiyun.com/qq_52824207/article/details/124064000</guid><author>qq_52824207</author><pubDate>Sat, 09 Apr 2022 17:31:18 +0800</pubDate><description><![CDATA[分析：

（1）实现屏幕居中

使用绝对定位（position: absolute）

（2）实现文本居中

使用弹性盒子（display：flex）

不使用弹性盒子，使用文本居中对齐和行高设置

代码：

使用弹性盒子


.center{
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: absolute;
    left: 50%;
    top: 50%;
    /* 使用绝对位置实现屏]]></description><category></category></item></channel></rss>