// 獲取網頁內容
// 不加任何選項使用 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://m.jungjaehyung.com/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://m.jungjaehyung.com/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小時內與您取得聯系。