整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
常，您會看到特定鏈接具有關聯的rel屬性。rel="nofollow"是最常見的用法，您告訴百度和其他搜索引擎不要“關注”特定鏈接，并且不得通過該鏈接傳遞權重。
但是，您還應該了解其他一些rel屬性，尤其是當您作為SEO工作或想了解有關鏈接的不同rel屬性的更多信息時。
在列出所有rel屬性之前，讓我們首先嘗試了解什么是rel屬性以及它的實際含義。
rel屬性的一般語法是：<a rel="nofollow" href="https://www.domain.com">這是一個鏈接</a>。
rel屬性定義了鏈接資源和當前文檔之間的關系。因此，在上面的示例中，rel屬性定義了包含鏈接的頁面和鏈接到的頁面之間的關系。在這種情況下，該關系為nofollow。
在特定鏈接中，關系可能不同。它不必始終為nofollow。在某些鏈接中，可能根本沒有定義任何關系。您不必總是指定關系，并且每個鏈接都必須包含rel屬性，這不是強制性的。rel屬性是可選的，而不是強制性的。
總之，rel屬性定義了源文檔和目標文檔之間的關系。rel屬性可以是其他HTML元素的一部分，而不僅僅是鏈接。因此，rel屬性不僅限于鏈接，還可以應用于其他HTML元素（例如<form>或<nav>），在這些HTML元素中，必須將“關系”信息傳遞給搜索機器人，爬蟲和蜘蛛，以便他們了解正在發生的事情以及不同文檔之間的相互關系。
下面，我定義了一些您應該知道的最重要和最常見的rel屬性，并且我還解釋了每個屬性的含義。
這意味著將不通過給定的鏈接對目標文檔進行爬網，并且您不希望從現有文檔中傳遞權重。這也是告訴Google和其他搜索引擎的一種方式：我不認可此鏈接，但是我在文檔中使用它作為參考。它不是為了背書或引用，只是供他人參考。
用在哪里？–超鏈接。
表示目標文檔是頁面的主副本。rel規范元素中給出的任何值，即主副本，都可以等于源文檔，也可以與源文檔不同。這用于防止重復內容問題。
用在哪里？–在給定頁面的頭部。
UGC代表用戶生成的內容。在內容不是由頁面作者創建而是由其他閱讀文檔的用戶創建的情況下使用此rel屬性。這可能意味著博客和論壇的評論部分，或其他用戶使用該網站創建的單個內容。由用戶生成但不是該文檔作者制作的任何內容都可以標記為UGC。
用在哪里？–在內容是用戶生成的內容而非作者生成的超鏈接中使用。
為什么這很重要？–重要的是指出用戶生成的指向百度和其他搜索引擎的鏈接和內容，因為有時網站所有者不能完全控制網站上顯示的內容，因為其中一部分內容可以由用戶生成（例如論壇，目錄網站）以及其他任何人都可以注冊和創建內容的公共平臺。）因此，當百度和其他搜索引擎從本質上理解頁面的哪個部分是用戶生成的內容以及本質上是編輯的哪個部分時，他們可以更好地了解正在發生的事情，從而幫助他們在搜索結果中對頁面進行排名。它還可以幫助網站所有者避免任何形式的算法懲罰，因為百度和其他搜索引擎知道該內容是用戶自然生成的（因此，如果該內容看上去是垃圾內容并違反百度網站質量準則，則有時它們可能具有較高的容忍度）。
如果有人付錢給您手動鏈接到他們，或者您的頁面上有付費廣告，則應始終將其標記為“贊助”。
用在哪里？–超鏈接。
為什么這很重要？ –重要的是要向百度和其他搜索引擎表明您明確告訴他們這是一個贊助鏈接，而不是自然的認可。明確說明后，搜索引擎將了解發生了什么事情，并且您沒有做任何黑帽SEO或接受任何費用以換取鏈接。但是，如果您沒有明確提及這一點，并且搜索引擎發現您一直在銷售鏈接，那么您將遇到很大的麻煩，因為搜索引擎會手動標記您的網站，您的網站將失去自然排名。
鏈接在現代網頁設計中發揮著不可或缺的作用。HTML中，href屬性在anchor標簽中扮演著關鍵角色，使得用戶可以輕松地跳轉到其他頁面或特定部分。在本文中，我們將探討href屬性的基本使用方法以及一些高級技巧，幫助您提升網站用戶體驗。
HTML中，anchor標簽用于創建超鏈接，其基本結構如下：
<a href="鏈接地址">鏈接文本</a>
其中，href屬性指定了跳轉的目標地址，而鏈接文本則是用戶在頁面上看到的可點擊的文本。
絕對路徑和相對路徑是href屬性中常見的兩種取值類型。
外部鏈接指向不同域名的頁面，而內部鏈接則是指向同一域名內的頁面或部分。在創建鏈接時，確保使用正確的協議（如http://或https://）以避免鏈接無法正常跳轉。
通過使用target屬性，您可以控制超鏈接的打開方式。常見的取值有：
rel屬性用于在超鏈接中添加關聯信息，如：
為了提升網站的訪問性和 SEO 排名，請確保鏈接文本清晰、描述性，避免使用過于短的單詞（如 "點擊這里"）。此外，使用有意義的 URL 以便搜索引擎更好地理解您的網頁內容。
通過CSS，您可以對超鏈接進行樣式定義，使其與網站設計相一致。例如，更改鏈接的顏色、字體、下劃線等。
掌握href屬性的使用方法和技巧，您可以創建更加易于導航且訪問性較好的網站。在提升用戶體驗的同時，還能夠為搜索引擎提供更多關于網頁內容的信息，從而提高網站的 SEO 排名。
.說明：
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的關系和布局等基本知識，熟練掌握基本操作。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
