记录一下JavaScript学习,第一篇。
一门客户端脚本语言,可在本地执行
内部js
<script>js代码</script>
标签,可以定义在HTML的任何位置,但是房子位置会影响js代码执行顺序,并且是阻塞式的,如果没有执行完毕不会运行接下来的html代码外部js
<script>src = "外部js路径"</script>
1 |
|
数据类型
变量
1 | <script> |
运算符 | 描述 |
---|---|
+ | 加法 |
- | 减法 |
* | 乘法 |
/ | 除法 |
% | 取模 |
++ | 自加 |
– | 自减 |
运算符 | 例子 | 等同于 |
---|---|---|
= | x = y | x = y |
+= | x += y | x = x + y |
-= | x -= y | x = x - y |
*= | x *= y | x = x * y |
/= | x /= y | x = x / y |
%= | x %= y | x = x % y |
1 | + 运算符也可用于对字符串进行相加(concatenate,级联)。 |
===
先进行类型判断,如果不同直接false,否则接着比较运算符 | 描述 |
---|---|
== | 等于 |
=== | 等值等型 |
!= | 不相等 |
!== | 不等值或不等型 |
> | 大于 |
< | 小于 |
>= | 大于或等于 |
<= | 小于或等于 |
? | 三元运算符 |
运算符 | 描述 |
---|---|
&& | 逻辑与(有短路的效果) |
|| | 逻辑或(有短路的效果) |
! | 逻辑非 |
运算符 | 描述 |
---|---|
typeof | 返回变量的类型。 |
instanceof | 返回 true,如果对象是对象类型的实例。 |
运算符 | 描述 | 例子 | 等同于 | 结果 | 十进制 |
---|---|---|---|---|---|
& | 与 | 5 & 1 | 0101 & 0001 | 0001 | 1 |
| | 或 | 5 | 1 | 0101 | 0001 | 0101 | 5 |
~ | 非 | ~ 5 | ~0101 | 1010 | 10 |
^ | 异或 | 5 ^ 1 | 0101 ^ 0001 | 0100 | 4 |
<< | 零填充左位移 | 5 << 1 | 0101 << 1 | 1010 | 10 |
>> | 有符号右位移 | 5 >> 1 | 0101 >> 1 | 0010 | 2 |
>>> | 零填充右位移 | 5 >>> 1 | 0101 >>> 1 | 0010 | 2 |
注意事项
与Java保持一致
;
结尾,如果一行只有一条语句则;
可以省略;var
关键字,也可以不使用;如果使用定义的变量是局部变量,不用就是全局变量;即变量的作用域不同;1 |
|
记录一下CSS学习笔记。
层叠样式表:cascading Style Sheets,
层叠:多个样式可以作用在一个HTML元素上,同时生效
内联样式
在标签内使用style属性指定CSS代码;由键值对构成,中间用分号隔开;没有实现样式分离,不建议使用
内部样式
在head中定义style标签,style标签中的内容就是CSS代码,只能在当前页面生效
1 | <style> |
外联样式
将CSS代码抽取到外部文件中去
1、定义CSS文件
2、在head标签内定义link标签,引入外部CSS资源文件
1 | <link rel="stylesheet" href="./CSS/a.css" /> |
1 | div{ |
或者也可以通过以下方式引入
1 | <style> |
注意事项:三种方式作用范围越来越大
格式
1 | 选择器1{ |
选择器:筛选具有相似特征的元素;每一对的属性需要使用分号隔开,最后一对属性可以不加分号
基本选择器
id选择器:选择具体的ID属性值#id
元素选择器:选择具有相同标签名称的元素,低于id要选择器
类选择器:选择具有相同Class属性值的元素,语法.class属性值()
,比元素选择器优先级高
选择器优先级:id>类>元素
拓展选择器
*
选择所有元素;*{}
并集选择器:选择多个只选择器选择器1,选择器2{}
子选择器:选择器1 选择器2{}
筛选选择器1下的选择器2
父选择器:选择器1>选择器2{}
筛选选择器2的父选择器1
属性选择器:选择元素名称,属性名= 属性值的元素元素名称[属性名="属性值"]{}
伪类选择器:选择一类元素具有的状态元素:状态{}
以超链接为例
1 | <!DOCTYPE html> |
常用属性
字体文本
背景
边框
尺寸
盒子模型
一个元素一个盒子
box-sizing:border-box
例子
1 |
|
记录一下CSS学习笔记。
语法
1、html文档.html
或者htm
1 | <html> |
2 标签分类
3 标签可以嵌套
4 可以在开始标签中定义属性,属性由键值对构成,值需要用引号包括起来(单引号和双引号都可以)
5 HTML标签不区分大小写,但是建议小写
1、文件标签
2、文本标签
1 | 注释<!--注释--> |
3、图片标签
<img src="路径">
与Markdown语法一致4、列表标签
有序列表 order list <ol>
<ol> <li>第一项</li> <li>第二项</li> <li>第三项</li> <li>第四项</li></ol>1
2
3
4
5
6
7
8
9
10
11
12
- 无序列表unorder list ``<ul>``
```html
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul>
5、链接标签
<a href="https://www.baidu.com">点我</a> 1
2
3
4
- <a herf="https://www.baidu.com">点我</a> <!--与Markdown一致-->
-
<a href="https://www.baidu.com" target="_self">点我</a> <!-- 默认 --> <a href="https://www.baidu.com" target="_blank">点我</a> 1
2
-
<a href="mailto:1679190840@qq.com">测试邮件</a>1
2
-
<!--a标签嵌套图片--><a href="https://www.baidu.com"><img src="D:\图片\爱壁纸UWP\视觉\视觉 - 1.jpg" height="100" width="100"/></a>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
- **6、表格标签**
- table:定义表格
- tr:定义行
- td:定义单元格
- th:定义表头单元格
- ```html
<table border="1" width="50%" cellpadding="0" cellspacing="0">
<tr>
<td>编号</td>
<td>姓名</td>
<td>成绩</td>
</tr>
<tr>
<td>1</td>
<td>test1</td>
<td>99</td>
</tr>
<tr>
<td>2</td>
<td>test2</td>
<td>88</td>
</tr>
<tr>
<td>3</td>
<td>test3</td>
<td>77</td>
</tr>
</table>
width :宽度
boder:边框
cellpadding :内容与单元格空隙
cellspacing:单元格间的空隙
bgcolor:背景颜色
align:对齐方式
caption:表格信息
thead:表示表头
tbody:表示表体
tfoot:表示表尾
rospan:占两行
cospan:占两列
7、语义标签
<header></header><footer></footer>1
2
3
4
5
6
7
8
9
-
- **8、div和span标签**
- ```html
<span>测试Span</span><!-- 起包裹作用,没有任何效果,和CSS结合,默认一行 ,行级标签-->
<div>测试div</div><!-- 同样没有任何样式,占满一行,块级标签 -->
9、表单标签
form
1 | <html> |
属性:action:指定提交数据的URL
属性: method:指定提交的方式
GET 会在地址栏中显示
GET 从指定的资源请求数据
GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制
GET 请求只应当用于取回数据
POST 不会再地址栏中显示,会分装在请求体中
POST 向指定的资源提交要被处理的数据
POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不能被收藏为书签
POST 请求对数据长度没有要求
表单数据要被提交必须指定name属性
input标签
type
属性改变样式name
值必须一致,需要给每个单选框设置value设置值checked="checked"
默认选中<lable>
标签for属性和id属性绑定,有点击效果select标签:下拉标签 注意必须设置name属性才能被提交
<option></option>
testarea标签:文本域
实例
1 |
|
在更换了电脑之后自然想用新电脑作为主力开发工具,博客之类的环境也自然要更换到新电脑上面来,旧电脑只装了Ubuntu,新电脑用Windows+WSL作为开发工具。
修改/etc/default/locale文件
,将其修改为如下内容
1 | LANG='zh_CN' |
1 | sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 150 |
和普通安装的ubuntu一样,你可以向往常使用ubuntu一样只用WLS比如使用WLS写博客,发布博客等等,唯一的区别是说到底WLS还是一个精简的Linux,你不能指望在WLS上跑TensorFlow
之类的大型程序。
nnodejs
和npm
和在普通的Linux上一样,但是微软官方文档不建议直接使用apt-get install nodejs
这个命令直接安装nodejs
,原因是这个太老了,在接下来使用npm
的时候会遇到很多问题,比如权限不够之类的。这里使用官方推荐的安装方式nvm
来安装
1 | curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.4/install.sh | bash |
1 | source ~/.profile |
列出所有nodejs
版本:nvm ls-remote
列出所有的nodejs
版本
安装最新的nodejs
版本
1 | nvm install 版本号 |
安装最新的nodejs
安装好后你会发现npm
同样也安装好了,剩下的操作就和以前一样了。
安装过程中会有一些警告,不必理会,这是提示你安装的模块不属于你的系统版本,这不会影响的。
]]>顾名思义就是准确的搜索名字中包含相关内容的项目:
in:name
搜索在在deacription
中出现的内容:
in:deacription
过滤掉一些Starts少的项目:
stras:>||<||=
搜索出现在Readme文档中的项目
in:readme
暂时想到这些,以后如果有再加吧!!
]]>这篇文章相当于是一个笔记,记录一下我每次安装完Linux(Gnome桌面环境下)必定会做的几件事情,防止自己遗忘,当然这篇文章并不是很全面,以后如果还有还会再修改的。
1 | gsettings set org.gnome.shell.extensions.dash-to-dock click-action 'minimize' |
https://github.com/xbblog95/v2sub.githttps://v2sub.betac1ouds.top/modules/servers/V2raySocks/osubscribe.php?sid=2679&token=acECX4eA8xgg
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 150
手机无线投屏工具,也可以USB链接
GIF录制工具
nautilus linux文件管理工具
无效,需要禁用Windowsefi启动项否则会重置启动项
sudo hwclock --localtime --systohc
去这里 主题下载下载自己喜欢的grub主题,下载下来后是一个压缩包。解压下载下来的压缩包,假设解压出来的目录名字叫A,A中包含了所有的文件。
在/boot/grub
目录中新建一个目录,名字叫themes
将目录A拷贝到新建的目录。
打开目录A,里边有一个文件,文件名叫theme.txt
,记下这个文件的路径,后边有用。
修改文件/etc/grub.d/00_header
,在# along with GRUB. If not, see <http://www.gnu.org/licenses/>
.这行注释下边加上一句话,这句话是:GRUB_THEME=theme文件的路径注意这句话不能加在最后边,否则就不管用了,执行命令:update-grub
完成
1 | sudo add-apt-repository ppa:numix/ppa |
1 | sudo add-apt-repository ppa:papirus/papirus |
去文件-首选项-设置里修改terminal.integrated.fontFamily
1 | sudo apt-get install rar unrar |
在搭建GIthub图床的过程中,我遇到了图片的问题,其实在使用Hexo的过程中我还遇到了大大小小的不同的问题,这篇文章统统的记录一下方便以后再遇到类似的问题的时候能够更方便的解决。
使用<!--more-->
标签即可设置摘要,将该标签放置在摘要和正文之间,在Hexo预览的时候就能够显示摘要内容
前一篇文章中提到了使用图床来事文章显示图片的方法,但其实这种方法是过于麻烦的,首先你需要获得 图片的链接,然后将该图片插入等你写的MarkDown文章中,好处在于你全部的图片都是存放在GIthub一个项目中的,坏处就是所有文章图片都在一起,没办法管理。Hexo提供了MarkDown文章插入图片的方法。
执行
1 | npm install hexo-asset-image --save |
然后在_config.yml
文件中把post_asset_folder: true
设置为True此时如果执行
1 | hexo n 新文章名称 |
就会看到除了创建了一片新文章之外,还有一个和新文章名称一致的文件夹,这个文件夹就能够放置一些和该篇文章相关的图片。
插入图片的语句就是MarkDown标准的插入图片的语句
1 | ![图片描述](文章文件夹/要插入的图片名称.png) |
标签和分类在博客中显示的效果大概如图所示
开启标签和分类功能也很简单,bash中执行
1 | hexo new page tags |
即可以看见在source文件夹下生成了/tags、/categories文件夹
然后修改scaffolds/post.md
文件,设置每次创建的博客模板
1 | --- |
多标签tags: [标签1,标签2,标签3......]
1 | $ hexo new draft 文章名字 |
执行完命令之后你会在source/_drafts
找到你的草稿文章,Hexo 另外提供draft
机制,它的原理是新文章将建立在source/_drafts
目录下,因此 hexo generate
并不会将其编译到 public
目录下,所以hexo deploy
也不会将其部署到 GitHub。
1 | hexo S --draft |
和hexo s
一样访问http://localhost:4000/预览
1 | $ hexo P <filename> |
其中filename
为不包含 md
后缀的文章名称。它的原理只是将文章从 source/_drafts
移动到 source/_posts
而已。之后的hexo generate
与 hexo deploy
的用法就完全一样了。若日后想将正式文章转为为草稿,只需手动将文章从 source/_posts
目录移动到source/_drafts
目录即可。
如果发现在网站上访问不了你的博客,比如我把仓库改成了私有的后发现怎么也访问不了了,改回公开仓库也不行,这里的解决方法就是删除文件夹下面的.deploy_git
文件夹,再次上传部署就能够访问了,其实如果出现了404多半事Hexo本身的问题,在github方面出错不太可能,所以如果博客整个都崩了,那就把整个文件夹干掉重新来一遍就好了。
使用Github+PicGo方便快捷地搭建属于自己的图床。搭建好博客后总是想写些什么,但是一看自己以前写的东西,总觉得缺点什么,没错就是图片,在我的第一篇博客中,自己虽然每个过程都有截图,但是由于种种原因,自己并没有在MarkDown中添加任何图片这样文章就显得很枯燥。
搭建好博客后总是想写些什么,但是一看自己以前写的东西,总觉得缺点什么,没错就是图片,在我的第一篇博客中,自己虽然每个过程都有截图,但是由于种种原因,自己并没有在MarkDown中添加任何图片,这样文章就显得很枯燥,博客文章显得干干巴巴,因此在MarkDown中添加图片就成了一件不得不做的事
随便建立一个空的Git仓库
在Github的Developer setting界面生一个token,注意该Token只会显示一次,下次一旦刷新就会不见,所以务必保存好这个Token。
在PicGo中的Github图床中设置好相应的参数。
上传几张图片测试是否上传成功。
]]>使用Hexo+Github快速搭建个人博客
1 | sudo apt-get install nodejs |
1 | sudo apt-get install npm |
npm -v
&&nodejs -v
;sudo npm -g npm
;npm -v
&&nodejs -v
,此时你可能会遇到显示升级了,但是查询版本信息的时候还是原来的版本的情况,不要慌,重新注销登入下就行了。可选步骤
由于npm源在国内访问比较比较忙,这样下载的时候就会很忙甚至出错,所以最好将npm的源换成国内的
方式一:安装cnpm
cnpm是阿里定制的npm 命令行工具,安装命令
1 | sudo npm install -g cnpm --registry=https://registry.npm.taobao.org |
方式二:设置npm镜像源
如果你不想使用cnpm则使用
1 | npm config set registry https://registry.npm.taobao.org |
再输入:把npm源换成国内的。
1 | npm config list |
设置系统代理
username.github.io
的项目,注意username一定要是你github账户的名称,否则不行,这点很重要。1 | sudo cnpm install -g hexo |
使用命令Hexo init
注意必须是空文件夹(不能有文件或者隐藏文件),期间会有警告,不用理会
使用命令hexo s
启动Hexo
访问http://localhost:4000/
可以看见里面有一篇文章,并且有相关的教程
安装Github快速部署插件可以很方便的将你的Hexo博客部署到你的Github上面。
1 | npm install hexo-deployer-git --save |
注意有多个_config.yml文件,Hexo有_config.yml,有一些主题还有_config.yml文件实在不同的文件夹下面的,首先修改Hexo目录下的_config.yml,把它里面的信息全部改成你自己的信息
title: 标题subtitle: 副标题description: 描写keywords: '关键字'author: 作者language: zh-CN语言timezone: 时区(可不设置)# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy:type: gitrepo:改成你的git项目链接branch:master ,也可以不指定
shell中分别执行这些命令
1 | hexo c |
此时如果正确无误的话可以再访问http://localhost:4000/查看修改过后的信息有没有错误。
我这里用的是indigo这个主题,主题更换起来十分的方便,你可以在Hexo文件夹下的/Theme文件夹下使用多个主题,这样一旦你觉得那个主题看腻了,就能够很方便的更换(在config.yml配置文件下修改主题_)。更换主题后有一些主题设置需要修改,查看主题的配置文档就行了,很详细。
Hexo的文章全部采用MarkDown格式,如何使用markdown写博客参考MarkDown语法教程,比较简单,不懂的话就在这个网站看一看,相当于是一本字典,不懂就翻一翻。写好的文章放在source/_posts
文件夹下面就可以了
当你觉得差不多的时候后,进行确认,shell中分别执行这些命令访问http://localhost:4000/查看
1 | hexo c |
执行
1
2
3hexo c
hexo g
hexo d
按照要求输入github账号密码就能够部署成功了!!