常用linux命令：curl

// 获取网页内容
// 不加任何选项使用 curl 时，默认会发送 GET 请求来获取内容到标准输出
$ curl http://www.baidu.com
// 输出
<!DOCTYPE html>
<!--STATUS OK--><html> <head><meta http-equiv=content-type content=text/html;charset=utf-8><meta http-equiv=X-UA-Compatible content=IE=Edge><meta content=always name=referrer><link rel=stylesheet type=text/css href=http://s1.bdstatic.com/r/www/cache/bdorz/baidu.min.css><title>百度一下，你就知道</title></head> <body link=#0000cc> <div id=wrapper> <div id=head> <div class=head_wrapper> <div class=s_form> <div class=s_form_wrapper> <div id=lg> <img hidefocus=true src=//www.baidu.com/img/bd_logo1.png width=270 height=129> </div> <form id=form name=f action=//www.baidu.com/s class=fm> <input type=hidden name=bdorz_come value=1> <input type=hidden name=ie value=utf-8> <input type=hidden name=f value=8> <input type=hidden name=rsv_bp value=1> <input type=hidden name=rsv_idx value=1> <input type=hidden name=tn value=baidu><span class="bg s_ipt_wr"><input id=kw name=wd class=s_ipt value maxlength=255 autocomplete=off autofocus></span><span class="bg s_btn_wr"><input type=submit id=su value=百度一下 class="bg s_btn"></span> </form> </div> </div> <div id=u1> <a href=http://news.baidu.com name=tj_trnews class=mnav>新闻</a> <a href=http://www.hao123.com name=tj_trhao123 class=mnav>hao123</a> <a href=http://map.baidu.com name=tj_trmap class=mnav>地图</a> <a href=http://v.baidu.com name=tj_trvideo class=mnav>视频</a> <a href=http://tieba.baidu.com name=tj_trtieba class=mnav>贴吧</a> <noscript> <a href=http://www.hmttv.cn/uploadfile/2024/1009/20241009094316386.gif?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2f%3fbdorz_come%3d1 name=tj_login class=lb>登录</a> </noscript> <script>document.write('<a href="http://www.hmttv.cn/uploadfile/2024/1009/20241009094316386.gif?login&tpl=mn&u='+ encodeURIComponent(window.location.href+ (window.location.search==="" ? "?" : "&")+ "bdorz_come=1")+ '" name="tj_login" class="lb">登录</a>');</script> <a href=//www.baidu.com/more/ name=tj_briicon class=bri style="display: block;">更多产品</a> </div> </div> </div> <div id=ftCon> <div id=ftConw> <p id=lh> <a href=http://home.baidu.com>关于百度</a> <a href=http://ir.baidu.com>About Baidu</a> </p> <p id=cp>?2017 Baidu <a href=http://www.baidu.com/duty/>使用百度前必读</a>  <a href=http://jianyi.baidu.com/ class=cp-feedback>意见反馈</a> 京ICP证030173号  <img src=//www.baidu.com/img/gs.gif> </p> </div> </div> </div> </body> </html>

// 显示 HTTP 头信息
// 使用 -i 选项，可以同时显示头和内容
$ curl -I http://www.baidu.com
// 输出
HTTP/1.1 200 OK
Accept-Ranges: bytes
Cache-Control: private, no-cache, no-store, proxy-revalidate, no-transform
Connection: keep-alive
Content-Length: 277
Content-Type: text/html
Date: Thu, 08 Apr 2021 15:54:57 GMT
Etag: "575e1f60-115"
Last-Modified: Mon, 13 Jun 2016 02:50:08 GMT
Pragma: no-cache
Server: bfe/1.0.8.18

// 将链接保存到本地文件
$ curl http://www.baidu.com > baidu.txt

// 下载多个文件
// 使用 -o 或 -O 选项同时指定多个链接
$ curl -O http://www.baidu.com/page/1 -O http://www.baidu.com/page/2

// 使用 -A 自定义 User-Agent
// 使用 -A 来自定义用户代理，下面的命令将伪装成安卓火狐浏览器对网页进行请求
$ curl -A "Mozilla/5.0 (Android; Mobile; rv:35.0) Gecko/35.0 Firefox/35.0" http://www.baidu.com

// 使用 -H 自定义 header
$ curl -H "Referer: www.google.com" -H "User-Agent: Custom-User-Agent" http://www.baidu.com

// 使用 -c 保存 Cookie
// -c 后面跟上要保存的文件名
$ curl -c "baidu.txt" http://www.baidu.com

// 发送 POST 请求
// -d 用于指定发送的数据，-X 用于指定发送数据的方式
// 在使用 -d 的情况下，如果省略 -X，则默认为 POST 方式
$ curl -X POST http://www.baidu.com/login -d "userName=share&passwd=123456"

// 强制使用 GET 方式
$ curl -X GET http://www.baidu.com/login -d "xxx"

// 从文件中读取 data
$ curl -d "@data.txt" http://www.baidu.com/login

// 伪造referer(盗链)
// -e可以设定referer
$ curl -e "www.google.com" http://www.baidu.com/login

// 循环执行curl
$ while true; do curl -H 'User-Agent: Android10 HONOR CPU_ABI armeabi-v7a CPU_ABI2 armeabi HARDWARE kirin710 MODEL JSN-AL00a xinxin/2.0.20 sc(1f37600b9c07ceb5,kaluli)' -H 'v: 2.0.20' --compressed 'http://www.baidu.com/getImages?from=1&version=101'; done

// 常用参数汇总
-v, --verbose                          输出信息
-K, --config FILE                      指定配置文件
-L, --location                         跟踪重定向
-s, --silent                           Silent模式。不输出任务内容
-S, --show-error                       显示错误. 在选项 -s 中，当 curl 出现错误时将显示
-f, --fail                             不显示 连接失败时HTTP错误信息
-i, --include                          显示 response的header
-I, --head                             仅显示 响应文档头
-l, --list-only                        只列出FTP目录的名称
-#, --progress-bar                     以进度条 显示传输进度
-X, --request [GET|POST|PUT|DELETE|…]  使用指定的 http method 例如 -X POST
-H, --header <header>                  设定 request里的header 例如 -H "Content-Type: application/json"
-e, --referer                          设定 referer
-d, --data <data>                      设定 http body 默认使用 content-type application/x-www-form-urlencoded
    --data-raw <data>                  ASCII 编码 HTTP POST 数据
    --data-binary <data>               binary 编码 HTTP POST 数据
    --data-urlencode <data>            url 编码 HTTP POST 数据
-G, --get                              使用 HTTP GET 方法发送 -d 数据
-F, --form <name=string>               模拟 HTTP 表单数据提交 multipart POST
    --form-string <name=string>        模拟 HTTP 表单数据提交
-u, --user <user:password>             使用帐户，密码 例如 admin:password
-b, --cookie <data>                    cookie 文件
-j, --junk-session-cookies             读取文件中但忽略会话cookie
-A, --user-agent                       user-agent设置
-C, --continue-at OFFSET               断点续转
-x, --proxy [PROTOCOL://]HOST[:PORT]   在指定的端口上使用代理
-U, --proxy-user USER[:PASSWORD]       代理用户名及密码
-T, --upload-file <file>               上传文件
-a, --append                           添加要上传的文件 (F/SFTP)
-o, --output <file>                    将输出写入文件
-O, --remote-name                      将输出写入远程文件
-D, --dump-header <file>               将头信息写入指定的文件
-c, --cookie-jar <file>                操作结束后，要写入 Cookies 的文件位置

.说明：

1.1 推荐指数：★★★★

1.2 环境：谷歌浏览器、微软vscode编辑器

1.3 熟悉sin和cos的函数与圆（画圆弧的关系）深入理解

比较真实的雷达界面扫描图

2.本次的模拟效果图：

3.css和js文件的引入：

3.1 同一个文件夹或者目录下引入：./xxx.js或者./xxx.css

3.2 大型的html文件或者一般在html文件的同一个目录下，建css文件夹和js文件夹，放入相应文件夹下，那么导入就是：css/xxx.css和js/xxxx.js

3.3 外部引入法：找到网址：比如：网址在代码注释里query-3.4.1.min.js，引入即可。

但是如果没有网络，那么html文件就不可用了，怎么办呢？有办法。

用浏览器打开，复制：网址在代码注释里jquery-3.4.1.min.js，打开。

全选复制（ctrl+a），在本地文件夹新建一个js文件：jquery-3.4.1.min.js，将复制的内容，黏贴进入，保存即可。向上面的js文件和css文件一样，作为本地js文件引入。

4.本次html文件代码：index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas带坐标雷达扫描特效</title>
<!--在线引入地址：https://code.jquery.com/jquery-3.4.1.min.js-->
<!--script-- src="./jquery.min.js"></!--script-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!--将style作为单独css文件，引入，否认就是style和/style的标签内-->
<!--采用下面格式：link法-->
<link type="text/css" href="./style.css" rel="stylesheet" />
</head>
<body>

<canvas id="myCanvas"></canvas>
<div class="info">
  <!--显示文字段落-->
  <h1>Warning！！Enemy is coming！！</h1>
  <!--初始化cs-xo，之后就是message弹出动态数据-->
  <p class="message">cs-xo</p>
</div>
<!--将radar.js作为单独js文件，引入，否认就是script和/script的标签内-->
<script src="./radar.js"></script>
</body>
</html>

注意：外部引入和本地引入基本没什么区别，如果css和js=JavaScript写在html内，可能有不同，上面注释里有提到。

5.jquery-3.4.1.min.js代码不写了，可以自己去下载，免费的，或者上面的有讲解如何操作，此处略。

6.新建一个radar.js文件，代码如下：

var c=$("#myCanvas")[0];
var ctx=c.getContext("2d");
/*雷达界面颜色=草地绿色*/
var color_gold="124,252,0"
var ww,wh;
var center={x: 0,y: 0};
// 定义函数
function getWindowSize(){
  ww=$(window).outerWidth();
  wh=$(window).outerHeight();
  c.width=ww;
  c.height=wh;
  // 中心坐标是窗口的一半
  center={x: ww/2,y: wh/2};
  ctx.restore();
  ctx.translate(center.x,center.y);
}
// 启动函数
getWindowSize();
$(window).resize(getWindowSize);
// 10=敌机数量，随机出现
var enemies=Array(10).fill({}).map(
  function(obj){
    return {
      r: Math.random()*200,
      deg: Math.random()*360,
      opacity: 0
    } 
  }
);
setInterval(draw,10);
var time=0;
var deg_to_pi=Math.PI/180;
// 画圆的函数，三角函数sin和cos画圆法
function Point(r,deg){
  return {
    x: r*Math.cos(deg_to_pi*deg),
    y: r*Math.sin(deg_to_pi*deg),
  };
}
/*定义颜色函数*/
function Color(op){
  return "rgba("+color_gold+","+op+")";
}
function draw(){
  time+=1;
  /*画长方形的背景颜色填充 "#111"=黑色;*/
  ctx.fillStyle="#111";
  ctx.beginPath();
  /*画长方形*/
  ctx.rect(-2000,-2000,4000,4000);
  ctx.fill();
  /*十字垂直水平坐标线，0.1~1代表粗细*/ 
  ctx.strokeStyle="rgba(255,125,64,0.5)";
  // ctx.strokeStyle="255,125,64";// 默认粗细值为1
  ctx.moveTo(-ww/2,0);
  ctx.lineTo(ww/2,0);
  ctx.moveTo(0,-wh/2);
  ctx.lineTo(0,wh/2);
  ctx.stroke();
  // 雷达扫面绿色和半径大小
  ctx.strokeStyle=Color(1);
  var r=300;
  var deg=time;
  var newpoint=Point(r,deg);
  var line_deg=(time/2) % 360;
  // 雷达动态转动的扫描扇形的弧度为100，最大360
  var line_deg_len=100;
  for(var i=0;i<line_deg_len;i++){
    var deg1=(line_deg-i-1) ;
    var deg2=(line_deg-i) ;
    var point1=Point(r,deg1);
    var point2=Point(r,deg2);
    // 代表随着雷达扫描扇形的移动，颜色逐渐变淡
    var opacity=1-(i/line_deg_len)-0.3;
    if (i==0) opacity=1;
    ctx.beginPath();
    // 雷达扇形绿色动态渐变淡色
    ctx.fillStyle=Color(opacity);
    ctx.moveTo(0,0);
    ctx.lineTo(point1.x,point1.y);
    ctx.lineTo(point2.x,point2.y);
    ctx.fill();
  }
  enemies.forEach(function(obj){
    // 敌机出现的原点
    ctx.fillStyle=Color(obj.opacity);
    var obj_point=Point(obj.r,obj.deg);
    ctx.beginPath();
    ctx.arc(
      obj_point.x,obj_point.y,
      // 绿色敌机出现的小圆点4是半径
      4,0,2*Math.PI
    );
    ctx.fill();
    ctx.strokeStyle=Color(obj.opacity);
    /*如果这样直接设置，ctx.strokeStyle='#FF4500，那么敌机就是一直出现在屏幕';*/
    var x_size=6;
    /* 雷达显示敌机目标大小设置*/
    ctx.lineWidth=4;
    ctx.beginPath();
    ctx.moveTo(obj_point.x-x_size,obj_point.y+x_size);
    ctx.lineTo(obj_point.x+x_size,obj_point.y-x_size);
    ctx.moveTo(obj_point.x+x_size,obj_point.y+x_size);
    ctx.lineTo(obj_point.x-x_size,obj_point.y-x_size);
    ctx.stroke();
    if (Math.abs(obj.deg - line_deg)<=1){
      obj.opacity=1;
      // 显示左上角侦查到的地理坐标
      $(".message").text("Detected: "+ obj.r.toFixed(3) + " at " +obj.deg.toFixed(3));
    }
    obj.opacity*=0.99;
    // 显示敌机出现的涟漪圈的颜色
    ctx.strokeStyle=Color(obj.opacity);
    /*目标敌机显示后的圆圈涟漪粗细设置*/
    ctx.lineWidth=1;
    ctx.beginPath();
    ctx.arc(
      obj_point.x,obj_point.y,
      10*(1/(obj.opacity+0.0001)),0,2*Math.PI
    );
    ctx.stroke();
  });
  // 雷达虚点固定圆盘的颜色，半径等设置
  ctx.strokeStyle='yellow';
  var split=120;
  var feature=15;   // 15个小格
  var start_r=230; // 半径
  var len=5;
  for(var i=0;i<split;i++){
    ctx.beginPath();
    var deg=(i/120) * 360;
    if (i%feature==0){
      len=10;
      ctx.lineWidth=5;
    }else{
      len=5; 
      ctx.lineWidth=1;
    }
    var point1=Point(start_r,deg);
    var point2=Point(start_r+len,deg);
    ctx.moveTo(point1.x,point1.y);
    ctx.lineTo(point2.x,point2.y);
    ctx.stroke();
  }
  /*画圈函数定义,下面三个画圆函数的定义*/
  function CondCircle(r,lineWidth,func_cond){
    ctx.lineWidth=lineWidth;
    /* 颜色定义*/
    /*注意颜色定义：有引号的和没有引号的区别，就是前面有没有颜色图标*/
    ctx.strokeStyle='#00C78C';
    ctx.beginPath();
    for(var i=0;i<=360;i++){
      var point=Point(r,i);
      if (func_cond(i)){
        ctx.lineTo(point.x,point.y);
      }else{
        ctx.moveTo(point.x,point.y);
      }
    }
    ctx.stroke();
  }
  // 雷达外围的移动半弧形，300为半径，2代表粗细
  CondCircle(300,2,function(deg){
    return ((deg+time/10)%180)<90;
  });
  // 雷达中间绿色的移动半弧形，160为半径，2代表粗细
  CondCircle(160,2,function(deg){
    return ((deg+time/5)%180)<90;
  });
  // 雷达内的小圆圈，绿色虚线圈，1代表粗细
  CondCircle(100,1,function(deg){
    // 如果这里没有，那么颜色就是三条线函数里统一的颜色，也可以单独设立
    ctx.strokeStyle='pink';
    return (deg%3)<1;
  });
  
}

7.新建一个style.css文件，代码如下：

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  /*隐藏浏览器的条形伸缩*/
  overflow: hidden;
}
/*定义画布*/
canvas {
  -webkit-transform: scaleY(-1);
          transform: scaleY(-1);
}
/*显示警告信息位置设置*/
.info {
  position: absolute;
  left: 10px;
  top: 10px;
}
h1 {
  /*显示警告信息文字颜色设置*/
  color:red;
  letter-spacing: 0.5px;
  margin: 0;
  font-size:smaller;
}
.message {
  /*显示雷达预警敌机的动态位置的文字颜色设置*/
  margin: 0;
  color:#00FFFF;
  font-size: x-large;
}

8.通过简单的例子，熟悉html、css和js的关系和布局等基本知识，熟练掌握基本操作。

端在使用DIV+CSS布局时，通常需要通过为div命名的方式，来区分网页中不同的模块。在HTML5中布局方式有了新的变化，HTML5中增加了新的结构标签，如header标签、nav标签、article标签等，具体介绍如下。

1. header标签

HTML5中的header标签是一种具有引导和导航作用的结构标签，该标签可以包含所有通常放在页面头部的内容。header标签通常用来放置整个页面或页面内的一个内容区块的标题，也可以包含网站Logo图片、搜索表单或者其他相关内容。其基本语法格式如下：

<header>

  <h1>网页主题</h1>

    ...</header>

在上面的语法格式中，<header></header>的使用方法和<div class="header"></div>类似。

注意：

在HTML网页中，并不限制header标签的个数，一个网页中可以使用多个header标签，也可以为每一个内容块添加header标签。

2. nav标签

nav标签用于定义导航链接，是HTML5新增的标签，该标签可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。nav标签的使用方法和普通标签类似，例如下面这段示例代码：

<nav>

  <ul>

        <li><a href="#">首页</li>

        <li><a href="#">公司概况</li>

        <li><a href="#">产品展示</li>

        <li><a href="#">联系我们</li>

  </ul></nav>

在上面这段代码中，通过在nav标签内部嵌套无序列表ul来搭建导航结构。通常一个HTML页面中可以包含多个nav标签，作为页面整体或不同部分的导航。具体来说，nav标签可以用于以下几种场合。

● 传统导航条：目前主流网站上都有不同层级的导航条，其作用是跳转到网站的其他主页面。

● 侧边栏导航：目前主流博客网站及电商网站都有侧边栏导航，目的是将当前文章或当前商品页面跳转到其他文章或其他商品页面。

● 页内导航：它的作用是在本页面几个主要的组成部分之间进行跳转。

● 翻页操作：翻页操作切换的是网页的内容部分，可以通过点击“上一页”或“下一页”切换，也可以通过点击实际的页数跳转到某一页。

除了以上几点以外，nav标签也可以用于其他导航链接组中。需要注意的是，并不是所有的链接组都要被放进nav标签，只需要将主要的和基本的链接放进nav标签即可。

3. footer标签

footer标签用于定义一个页面或者区域的底部，它可以包含所有放在页面底部的内容。在HTML5出现之前，一般使用<div class="footer"></div>标签来定义页面底部，而现在通过HTML5的footer标签可以轻松实现。与header标签相同，一个页面中可以包含多个footer标签。

4. article标签

article标签代表文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或用户评论等。一个article标签通常有它自己的标题（可以放在header标签中）和脚注（可以放在footer标签中），例如下面的示例代码。

<article>

    <header>

    <h1>秋天的味道</h1>        
    
    <p>你想不想知道秋天的味道？它是甜、是苦、是涩...</p>

  </header>

    <footer>           
    
    <p>著作权归XXXXXX公司所有...</p>

  </footer></article>

需要注意的，在上面的示例代码中还缺少主体内容。主体内容通常会写在header和footer之间，通过多个section标签进行划分。一个页面中可以出现多个article标签，并且article标签可以嵌套使用。

5. section标签

section标签表示一段专题性的内容，一般会带有标题，主要应用在文章的章节中。例如，新闻的详情页有一篇文章，该文章有自己的标题和内容，因此可以使用article标签标注，如果该新闻内容太长，分好多段落，每段都有自己的小标题，这时候就可以使用section标签把段落标注起来。在使用section标签时，需要注意以下几点：

● section不仅仅是一个普通的容器标签。当一个标签只是为了样式化或者方便脚本使用时，应该使用div标签。

如果article标签、aside标签或nav标签更符合使用条件，那么不要使用section标签。

● 没有标题的内容模块不要使用section标签定义。

值得一提的是，在HTML5中，article标签可以看作是一种特殊的section标签，它比section标签更具有独立性，即section标签强调分段或分块，而article标签强调独立性。如果一块内容相对来说比较独立、完整时，应该使用article标签；但是如果想要将一块内容分成多段时，应该使用section标签。

6. aside标签

aside标签用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等有别于主要内容的部分。aside标签的用法主要分为两种：

● 被包含在article标签内作为主要内容的附属信息。

● 在article标签之外使用，作为页面或网站的附属信息部分。最常用的的使用形式是侧边栏。

在线咨询

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

常用linux命令：curl

您的项目需求