Linux基础+html和script一些基本语法

已于 2023-07-05 20:43:01 修改
阅读量930 收藏 4
点赞数 1
分类专栏： HTML + CSS + JS 文章标签： linux html 前端
于 2023-07-05 20:41:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cosmoshhhyyy/article/details/131563417
版权

文章目录

linux 基础

名字含义

在这里插入图片描述
root 表示用户名字
VM-16-10-centos 服务器名字
~ linux操作系统上的用户目录

指令

ls 列举当前文件夹下内容
ls -a 隐藏内容也列举
默认只有一个根目录
cd / 到 / 文件夹
白色的是文件，蓝色的是文件夹，浅蓝色是快捷方式（软连接）
在这里插入图片描述
ll 查看每一个的详细信息在这里插入图片描述
第一个字母表示类型
d 为文件夹
l 为软连接
后面每三个为一组，一共有三组，分别表示三种用户对其的权限
r 可读
w 可写
x 可执行
例如：
　　 - rwx rw- r–
　　普通文件 文件主 组用户 其他用户
etc 文件夹，相当于windows上安装程序的文件夹

html 语法

style 样式属性

style=“width:100px;height:30px;”

样式标签属性

在这里插入图片描述
border-radius 圆角
background-color 背景颜色
color 字体颜色

颜色

黄绿蓝
#后面三原色比例0~15
af(1015)

margin 边距

在这里插入图片描述
margin-left 左边距
margin-top 上边距
在这里插入图片描述

ransform 旋转角度

transform:rotate(30deg) 旋转30度
在这里插入图片描述

重复样式

后面的会把前面的覆盖掉

opacity 透明度

opacity:0~1
越靠近0越透明
在这里插入图片描述

div 方块元素

<div style = "width:200px;height:200px;background:200px;background-color:#2ac"></div>

<!DOCTYPE HTML>
<html>
    <head>
        	<meta charset="utf-8"> 
        	<title>青城博雅2306</title>
	<style>
		.sty1{width:100px;height:30px;transform:rotate(30deg)}
		.sty2{ border-radius:10px; background-color:#2d9; color:#fff}
		.sty3{margin-left:30px; margin-top:100px;background-color:#2ac;opacity:0.2;}
		.sty4{ transform:rotate(30deg) }
	</style>
    </head>
    <body>
        	<input type = "text"  class="sty1"/>
	<input type = "button" value="按钮1"  class="sty1 sty2"/>
	<select class="sty1 sty2 sty3" style="margin-left:-30px;transform:rotate(-30deg)">
		<option>选择1</option>
		<option>选择2</option>
		<option>选择3</option>
		<option>选择4</option>
		<option>选择5</option>
	</select>
	<div style = "width:200px;height:200px;background:200px;background-color:#2ac"></div>
    </body>

</html>

在这里插入图片描述

box-shadow 阴影属性

box-shadow:10px 10px 10px #000;
分别为：右，下，扩散，颜色
负号可以改变方向
给方块加上此效果为：
在这里插入图片描述

浮动

div默认向下
float:left; 为左浮动
在这里插入图片描述

script

不区分数据类型的语言

<!DOCTYPE HTML>
<html>
    <head>
        	<meta charset="utf-8"> 
        	<title>青城博雅2306</title>
	<style>
		.sty3{margin-left:30px; margin-top:100px;background-color:#2ac;opacity:0.2;}
		.sty4{ transform:rotate(30deg) }
		.aaa{width:200px;height:200px;background-color:#2ac;margin-left:100px;margin-top:100px;
			board-radius:10px;box-shadow:10px 10px 10px #000;float:left;}
	</style>
    </head>
    <body>
	<div id ="dd1"class="aaa"></div>
	<div id = "dd2"class="aaa"></div>
	<div id = "dd3"class="aaa"></div>
    </body>
    <script>

	function f(x1, x2){
	         return x1 + x2;
	}
	function f2(a, b, c){
	         return a + b - c;
	}
	var x1 = f(23, 99);
	var x2 = f2(x1, 44,  33 - x1);
	console.info(x1);
	console.info(x2);
    </script>
</html>

保存运行后按f12，进入控制台，可得到结果。
在这里插入图片描述

获取节点

<body>
	<div id ="dd1" class="aaa"></div>
	<div id = "dd2" class="aaa"></div>
	<div id = "dd3" class="aaa"></div>
	<input type="button"  value="按钮1" onclick="m1( )">
    </body>
    <script>
	function m1( ){
	       var x = document.getElementById("dd1");
	             x.style.width="300px"
	}
    </script>

其中 document 为整个文件
getElementById 通过名字获取节点

onclick 点击触发

<input type="button"  value="按钮1" onclick="m1( )">

点击前
在这里插入图片描述
点击后
在这里插入图片描述

setTimeout 定时器

	function mm (){
	      setTimeout("m1()", 3000);
	}
	setTimeout();
	function m1( ){
	       var x = document.getElementById("dd1");
	             x.style.width="300px"
	             x.style.backgroundColor ="#a00"
	}

setTimeout(“m1()”, 3000);
表示为3000毫秒后触发m1

利用定时器实现 动画效果

    <body>
	<div id ="dd1" class="aaa"></div>
	<div id = "dd2" class="aaa"></div>
	<div id = "dd3" class="aaa"></div>
	<input type="button"  value="按钮1" onclick="m1(0 )">
    </body>
    <script>

	function m1( a){
	       var x = document.getElementById("dd1");
	             x.style.width=(200 + a) + "px"
	             x.style.backgroundColor ="#a00"
	             x.style.transform = "rotate(" + (30 + a) + "deg)";
	       setTimeout("m1(" + (a + 1) + ")" , 20);
	}

在这里插入图片描述
也可以改变透明度，周期，边距等。

	function m1( a){
	       var x = document.getElementById("dd1");
	             x.style.width=(100 + a)%500 + "px" // 100px
	             x.style.backgroundColor ="#a00"
	             x.style.transform = "rotate(" + (30 + a) + "deg)"; 
	             x.style.opacity =a * 0.001 % 1;
	       setTimeout("m1(" + (a + 2) + ")" , 15);

在这里插入图片描述
注意script中写marginLeft，backgroundColor不要写成background-color，margin-left就行。

javascript

弱类型语言，不区分类型。

强弱语言区分

在这里插入图片描述

parseInt 转换为整数

<!DOCTYPE HTML>
<html>
        <head>
        	<meta charset="utf-8">
      
        </head>
        <body>
     
         </body>
         <script>
	var a1 = 10;
	var a2 = 20.98;
	var a3 = [1, 2, 3, 4];
	var a4 = "dafds";
	var a5 = 'dsgfgsg';
	var a6 = "234"
	var b1 = "333"
	var a7 = a6 + b1;	
	console.info(a7); // 234333

	a6 = parseInt(a6);
	b1 = parseInt(b1);
	a7 = a6 + b1;
	console.info(a7); // 567

         </script>

    </html>

在这里插入图片描述

可以这样用在script语法中

	var a6 = [1, 2, 3,"www","rrr",99.99, 22,33];
	var a7 = [2,2,3,[2, 4, 5],[2,3,[4,5,6,"fgfg"]], 9];
	var a8 = a6[3]; // "www"
	var a9 = a7[4][2][3]; // fgfg

json 数据类型

相当于自定义数据类型

	var b1 = {
	   "name": "张三",
	    "age" : 10,
	    "height":199
	}; // json
	console.info(b1.name); // 张三
	console.info(b1.age); // 10
	console.info(b1.height);  // 199
	console.info(b1.name); // 张三
	console.info(b1.age); // 10
	console.info(b1.height);  // 199

对象嵌套

	var b2 = {
	     "name":"王五",
	      "houses":["北二环","东二环","东城区"],
	      "friends" : [{"name":"黎明", "age":4},{"name":"小明","height":166}]
	};
	// b2.name	b2.houses[1]	b2.friends[1].name
	console.info(b2.name); // 王五
	console.info(b2.houses[1]); //东二环
	console.info(b2.friends[1].name);//小明

对象里加方法并且调用

	var b2 = {
	     "name":"王五",
	      "houses":["北二环","东二环","东城区"],
	      "friends" : [{"name":"黎明", "age":4},{"name":"小明","height":166}],
	      method1:function(a,b){
		return a + b;
	      }
	};
	function method2(a, b, c){
	       return a * b - c;
	}
	var x1 = method2(10, 8, 5); // 75
	var x2 = b2.method1(4, 7); // 11
	console.info(x1);  // 75
	console.info(x2);  // 11

函数的嵌套，函数的参数是函数

比较绕，好好理解理解


	function m3(a, b,c){
		a(10,20);
		b(c, 6);
	}
	m3(
	     function(p1,p2){ console.info(p1 + p2); } // a
	,    function(p1,p2){ console.info(p1 - p2); } // b
 	,   30 // c
	 ); 
	m3(function(p1,p2){ console.info(p1 * p2); }, // 200
	 function(p1,p2){ p1(p2 + 9) },
	function(k){console.info(2 * k);}
	);

运行结果：

在这里插入图片描述

Cosmoshhhyyy
关注
专栏目录
『CV学习笔记』Pyinstaller打包python程序遇到的问题(Win&Linux)+Cython编译动态库+PyArmor加密
AI新视界
08-03 2005
PyInstaller将Python应用程序及其所有依赖项捆绑到一个单独的包中。用户可以在不安装Python解释器或任何模块的情况下运行打包的应用程序。最新的PyInstaller 6.3.0支持Python 3.8及更高版本，并正确捆绑了许多主要的Python包，例如numpy、matplotlib、PyQt、wxPython等。
Linux.html
06-30
Linux 操作系统 1. Linux操作系统认知 1.1 操作系统（Operation System简称OS） 1.2 Linux系统介绍 1.3 文件系统 1.4 Ubuntu使用 2. Linux常用命令 2.1 终端与命令行 2.2 Linux常用命令 2.2.1 帮助命令 2.2.2 基础操作命令 2.2.3 文件操作 2.2.4 压缩解压 2.2.5 权限管理 2.2.6 显示展示命令 2.2.7 其他命令 3. Linux服务器环境 3.1 vi编译器 3.1.1 什么是vi 3.1.2 学习目的 3.1.3 操作使用 3.2 添加用户 3.2.1 基本概念 3.2.2 用户管理命令 3.3 软件安装 3.4 ssh服务 3.5 终端启动Python服务
linux-script
谢绝(无视)留言与私信
04-22 358
前言 今天做了个实验，看看script命令怎么用, 效果最好. 做完实验，实现script命令自动静默启动, 自动记录远程shell用户的屏幕操作到日志文件。 实验 做个程序，实现静默启动script命令，将屏幕操作记录到日志文件(日志文件名是ttyname, username, time的组合) 启动script的程序片段 int fn_test(int argc, char** argv) {...
探索Linux中的`script`命令：记录你的终端会话
最新发布
听风的鱼鱼儿
07-05 522
script命令启动一个新的shell会话，并将该会话中所有的输入（用户键入的命令）和输出（命令的执行结果）记录到指定的文件中。这对于需要重现会话、分析命令执行过程或创建教程文档等场景非常有帮助。在数据处理和分析中，它可以用来记录长时间运行的脚本或命令的执行过程，便于后续分析和调试。
linux script 教程,linux下神奇的script命令，linuxscript命令
weixin_30120049的博客
05-02 1037
linux下神奇的script命令，linuxscript命令script 是一个神奇命令，script 能够将终端的会话过程录制下来，然后使用 scriptreplay 就可以将其录制的结果播放给他人观看。script 的好处就在于你在终端中的所有操作、敲过的命令和打印出的结果它都可以原原本本地进行录制。可以应用于教学、演示、审计。一般来说，script 和 scriptreplay 在 Lin...
linux-html版
05-17
初学linux的经典书籍
linux 命令之 script
Gino的专栏
05-01 3047
Script这个命令用来将操作的过程保存在日志中 Script的命令形式：script [-a] [-q] [filename] # [-a] 追加，不覆盖以往的记录 # [-q] 安静模式，不显示script开始的信息 # [filename] 保存结果的日志名，如果不输制定文件名，默认存入当前目录的 **typescript** 文件中更多参数参考man手册实例说明$ script
Linux：shell编程（shell基本语法）
qq1226546902的博客
08-22 2016
shell是用户与内核进行交互操作的一种接口，目前最流行的shell成为bash shell；shell也是一门编程语言，他是一种解释性语言，即shell脚本；一个系统可以存在多个shell，可以通过cat /etc/shells命令查看系统中安装的shell，不同shell可能支持的命令语法是不同的，本篇技术博文的测试环境是CentOS7，以下是系统中支持的shell版本变量=值1、等号两边不能有空格2、变量名称一般习惯使用大写字母。
js基本语法
02-03
### JavaScript基本语法详解 #### 一、JavaScript简介与发展趋势 **JavaScript** 是一种高级的、解释型的编程语言，主要用于Web开发。它被设计用于创建交互式的网页，并且已经成为Web前端开发的核心技术之一。...
Linux中实现Nginx+Keepalived+Tomcat集群主从服务功能
zengjinchao1125的博客
06-30 736
一、网络拓扑Ip表格Nginx+Keeplive主从虚拟ip：192.168.43.110Host端口主从Ipsysteme预装软件Nginx-master80master192.168.43.134Centos7Nginx-1.16.1+keepalive-1.3.5Nginx-backup80backup192.168.43.139Centos7Nginx-1.16.1+keepalive-1.3.5Tomcat集群tomcatA8080192.168.43.137Centos7Tomcat8.5.79
Linux下搭建安防视频监控系统(NGINX+ffmpeg完成整体项目开发)
12-05 4084
在Linux（ubuntu18.04 64位）下利用NGINX搭建RTMP流媒体服务器，完成视频推流上传、拉流播放、视频缓存，回放功能，HLS-HTTP协议支持(浏览器可以直接播放).
Linux shell Script
10-12
Linux shell Script
linux有关的html文件资料
10-28
apache.html,case.html,dhcp 网络IP动态分配.html,dns 网络域名解析.html,firewall.html,ftp.html,ftp等多种网络获取方式.html,iSCSI （Internet Small Computer System Interfa.html,Linux文档_index.html,lvm逻辑卷.html,nfs网络文件系统.html,NIS网络账号集中管理.html,postfix邮件服务器.html,PS命令及生成文件.html,PXELinux.html,samba共享目录.html,安装图形化.html,磁盘管理.html,磁盘简易管理.html,磁盘配合与用户统计.html,打包及系统目录管理.html,端口及防火墙.html,多网卡bond.html,计划任务.html,使用基础.html,输入输出重定向及Shell.html,替换与正则.html,文字处理.html,系统概要查看.html,用户组.html
LINUX SHELL SCRIPT
11-21
LINUX 脚本编程的文档，本文件全英文的特别好用，请大家来这里下载吧。
Linux基础命令总结（html版）
08-27
对Linux基础命令的总结，HTML版，免费下载，仅供学习交流
linux命令之script
abby_db的博客
09-21 434
Linux终端录屏与播放 script 命令 本文由Suzzz原创，发布于 http://www.cnblogs.com/Suzzz/p/4107700.html ，转载请保留此声明。   有时候可能想要记录在终端的所有操作包括输出等，将来作为视频播放。系统管理员可能需要记录某些用户的操作。另外可能有时需要向人实时演示一些操作流程。 这些都可以通过script来实现。 script
shell中 执行后台命令后的打印保存到文件
QQ839787886的博客
10-30 4109
test_code -param >> log 2>&1 &
linux script $,linux的script命令
weixin_39999730的博客
05-26 230
script命令能够将终端的会话过程录制下来，下面由学习啦小编为大家整理了linux的script命令的相关知识，希望对大家有帮助!linux的script命令script 是一个神奇命令，script 能够将终端的会话过程录制下来，然后使用 scriptreplay 就可以将其录制的结果播放给他人观看。script 的好处就在于你在终端中的所有操作、敲过的命令和打印出的结果它都可以原原本本地进行...
linux打开.html文件
ruoshuihjjj01的博客
02-09 7802
输入命令： firefox 文件名 &
PHP基础试题解析：HTML嵌入、 Lamp组合与常见语法
"这篇资料是一份关于PHP的参考试题，主要涵盖了PHP的基础语法、环境组合、变量声明、字符串操作、循环控制结构、数组处理、文件操作以及MySQL的SQL编程相关知识。" 这篇PHP参考试题旨在测试考生对于PHP编程语言的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cosmoshhhyyy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值