整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
是七修，這是我的代號(hào)！
我隸屬于一個(gè)專門替人處理各種麻煩的神秘組織！網(wǎng)絡(luò)噴子、鍵盤俠這些業(yè)務(wù)都與我無(wú)關(guān)；因?yàn)槲以诮M織負(fù)責(zé)一項(xiàng)非常特殊的任務(wù)；比如：回答問(wèn)題、游戲攻略、游戲解說(shuō)、賽事分析這才是我最擅長(zhǎng)的事情！
前幾天發(fā)了一篇關(guān)于去除水印的視頻，推薦量慘淡觀看人數(shù)不足個(gè)位數(shù)，所以也就沒(méi)有寫圖文教程，結(jié)果昨天晚上有位小伙伴建議我寫一篇關(guān)于去除水印的圖文教程，所以今天它就來(lái)了~
其實(shí)很多小伙伴不明白一個(gè)網(wǎng)頁(yè)的組成基本元素都是什么，這里咱們大致的科普一下，一個(gè)網(wǎng)頁(yè)的組成基本元素是由：圖片、鏈接、文字、聲音、視頻等多種元素進(jìn)行組建而成的，但他們?cè)诰W(wǎng)頁(yè)上僅僅是一個(gè)模塊構(gòu)而已（就像Photoshop中的psd源圖一樣都是一層一層搭建的）如果我把網(wǎng)頁(yè)中的某個(gè)模塊刪除掉，那么該模塊也就不會(huì)在顯示，那么怎么刪除這個(gè)模式呢？今天咱們就來(lái)一起聊一聊怎么才能刪除網(wǎng)頁(yè)中的某個(gè)模塊！
以王者榮耀官網(wǎng)為例、如果我想要獲取到某英雄的原皮膚海報(bào)幾乎是不可能的，但如果你能巧妙的使用“審查元素”這一功能，你就會(huì)發(fā)現(xiàn)“知識(shí)就是力量”這句話絕對(duì)不會(huì)是說(shuō)說(shuō)而已...
上圖是刪除模塊的全部教程（制作之后一幀未刪減），首先我們需要進(jìn)入到審查元素內(nèi)（瀏覽器不同，叫法也會(huì)有差別的）一般進(jìn)入審查元素的快捷鍵都是是F12，點(diǎn)擊之后即可看到元素列表 → 點(diǎn)擊審查元素最上面第一個(gè)按鈕（快捷鍵Ctrl+Shift+C）
看到該圖標(biāo)點(diǎn)亮之后即可移動(dòng)鼠標(biāo)到你要去掉某模塊的地方，點(diǎn)擊一下元素列表中數(shù)據(jù)會(huì)自動(dòng)定位到該位置，右擊選擇Delete element（刪除元素）或直接點(diǎn)擊鍵盤上的刪除鍵
執(zhí)行完畢之后，再次Ctrl+Shift+C點(diǎn)擊你需要的圖片尋找到該圖片所在位置，如圖所示：
復(fù)制地址，打開(kāi)網(wǎng)頁(yè)粘貼進(jìn)去就可以啦
你也可以直接點(diǎn)擊Ctrl+F（查找）輸入“位置信息”即可快速到達(dá)你需要尋找的地方，如圖所示：
搜索之后可能會(huì)出現(xiàn)多個(gè)位置信息，需要逐個(gè)查看是否是自己需要的，如果不是點(diǎn)擊下一個(gè)進(jìn)行查看
確定該圖片所在位置之后，雙擊該區(qū)域，進(jìn)行復(fù)制該地址鏈接，打開(kāi)新網(wǎng)頁(yè)進(jìn)行粘貼即可~
溫馨提示：僅需要括號(hào)內(nèi)的地址鏈接，不過(guò)全部復(fù)制，否則無(wú)法打開(kāi)！！
視頻去水印logo，基本和圖片刪除元素大致相同，也都是尋找到該水印所在位置之后刪除掉該模塊即可；如圖所示：
避免懷疑推廣 名稱已更改
去視頻水印相比較來(lái)說(shuō)還是非常簡(jiǎn)單的，唯一不一樣的地方就是視頻的上方會(huì)有一層“保護(hù)層”（我自己給它起的名稱） 原因就是想要更改任何東西必須要先刪除掉該“保護(hù)層”之后，才可以刪除掉視頻的水印；
進(jìn)入瀏覽器后尋找到需要的視頻素材，按F12進(jìn)入審查元素→點(diǎn)擊審查元素最上面第一個(gè)按鈕（快捷鍵Ctrl+Shift+C）看到該圖標(biāo)點(diǎn)亮后點(diǎn)擊視頻一下，如圖所示：
該元素即為“保護(hù)層”
代碼的意思是“陰影模式”，但奈何文化太低實(shí)在不明白到底是啥，總之想要?jiǎng)h除視頻的水印logo，必須刪除掉該元素模塊~
刪除掉該元素模塊之后再次按Ctrl+Shift+C，點(diǎn)擊需要?jiǎng)h除的logo，會(huì)自動(dòng)定位到該logo所在區(qū)域，如圖所示：
該logo刪除之后可以全屏觀看，錄屏之類的操作，但無(wú)法進(jìn)行下載，下載下來(lái)的視頻是仍然帶有水印的；檢查元素功能適用市面上各大瀏覽器、視頻網(wǎng)站！
可能很多小伙伴十分好奇，為什么上圖的電影名字會(huì)變成“七修解說(shuō)”；既然咱們都說(shuō)了審查元素去除水印、刪除模塊的一些操作了，咱們就來(lái)點(diǎn)實(shí)打?qū)嵉母韶洠蹅兘裉炀蛠?lái)說(shuō)一下更改網(wǎng)頁(yè)文字的“常規(guī)”操作，如圖所示：
后臺(tái)為例
本想找一個(gè)微商的后臺(tái)給小伙伴們作為演示，奈何找了一圈都沒(méi)有找到，想起剛玩頭條的時(shí)候被人稀里糊涂騙走了3999元，所以就使用的這個(gè)后臺(tái)作為例子：
這類純數(shù)字后臺(tái)是非常好更改的，只需要查找到對(duì)應(yīng)的審查元素就可以直接進(jìn)行修改，比去圖片水印和視頻水印都要簡(jiǎn)單很多，我們只需要在瀏覽器中進(jìn)入到審查元素列表中（快捷鍵F12）→點(diǎn)擊審查元素最上面第一個(gè)按鈕（快捷鍵Ctrl+Shift+C）→再次點(diǎn)擊該你需要修改的數(shù)字即可，如圖所示：
這類修改方法沒(méi)有什么好說(shuō)的，修改文字方法是一樣的，只需要在網(wǎng)頁(yè)上確定該模塊所在地方點(diǎn)擊一下，然后回到審查元素列表找到該數(shù)據(jù)具體位置，雙擊即可修改~
小伙伴們只需要知道一點(diǎn)，只要是網(wǎng)上的東西都是存在一定的漏洞的，不要過(guò)于相信自己的眼睛；說(shuō)點(diǎn)題外話更改網(wǎng)頁(yè)文字很有可能會(huì)觸犯到某些人的利益，曾經(jīng)我也被網(wǎng)頁(yè)數(shù)據(jù)騙過(guò)一次（年輕不懂事...）特別是準(zhǔn)備加入微商的玩家一定要注意，微商水是最深的一個(gè)地方，別看某些人發(fā)的數(shù)據(jù)很好看，其實(shí)都是精心安排的杰作~
如果有什么不明白的地方可以直接在下方留言，我會(huì)一一進(jìn)行回復(fù)~
HTML文本中移除所有HTML標(biāo)記并提取純文本是我們經(jīng)常需要使用的文本內(nèi)容處理方式，比如搜索引擎、網(wǎng)站爬蟲或者本地文檔檢索系統(tǒng)需要提取網(wǎng)頁(yè)或HTML文檔的實(shí)際內(nèi)容進(jìn)行索引。通過(guò)去除HTML標(biāo)簽，可以專注于實(shí)際的文字信息，提高搜索結(jié)果的相關(guān)性和準(zhǔn)確性。在新聞聚合應(yīng)用或社交媒體平臺(tái)上展示網(wǎng)頁(yè)鏈接的摘要時(shí)，通常會(huì)提取并顯示純文本內(nèi)容以提供簡(jiǎn)潔的預(yù)覽。對(duì)于視覺(jué)障礙人士使用的輔助技術(shù)如屏幕閱讀器，它們無(wú)法解析復(fù)雜的HTML結(jié)構(gòu)，因此需要提取純文本以便朗讀給用戶。所以今天給大家分享一個(gè)使用正則表達(dá)式移除所有的Html標(biāo)記的方法，供有需要的朋友們參考：
第一個(gè)核心代碼是：正則表達(dá)式"<.*?>"
// 示例用法：
string inputHtml="<html><body><h1>Hello, World!</h1>This is a <b>test</b>.</body></html>";
string plainText=RemoveHtmlTags(inputHtml);
Console.WriteLine(plainText); // 輸出: "Hello, World!This is a test."
public static string RemoveHtmlTags(string html)
{
// 正則表達(dá)式用于匹配HTML標(biāo)簽
Regex regex=new Regex("<.*?>", RegexOptions.Singleline | RegexOptions.Compiled);
// 使用正則表達(dá)式的Replace方法移除所有匹配的HTML標(biāo)簽
string result=regex.Replace(html, String.Empty);
return result;
}
這個(gè)正則表達(dá)式<.*?>是非貪婪匹配任何以 < 開(kāi)始、以 > 結(jié)束的字符串，它會(huì)盡可能少地匹配字符以找到每個(gè)HTML標(biāo)簽。
請(qǐng)注意，雖然此方法對(duì)于簡(jiǎn)單場(chǎng)景可能有效，但對(duì)復(fù)雜的HTML文檔（特別是含有嵌套標(biāo)簽、注釋、CDATA等內(nèi)容）可能不夠健壯，因?yàn)樗鼰o(wú)法處理所有可能的HTML結(jié)構(gòu)。
第二個(gè)核心代碼是：正則表達(dá)式"<[^>]*>"
public static string ExtractPlainTextFromHtml(string html)
{
// 使用正則表達(dá)式匹配所有的HTML標(biāo)簽
// 注意：這個(gè)簡(jiǎn)單的正則表達(dá)式適用于大多數(shù)基礎(chǔ)HTML結(jié)構(gòu)，但可能無(wú)法處理復(fù)雜嵌套或特殊格式的HTML
Regex regex=new Regex("<[^>]*>", RegexOptions.Singleline | RegexOptions.Compiled);
// 使用Replace方法去除所有匹配到的HTML標(biāo)簽，并返回純文本內(nèi)容
string plainText=regex.Replace(html, String.Empty);
return plainText.Trim(); // 為了得到更整潔的結(jié)果，可以對(duì)結(jié)果進(jìn)行trim操作以去除多余的空白字符
}
在這段代碼中，我們定義了一個(gè)名為ExtractPlainTextFromHtml的方法，該方法利用正則表達(dá)式 <[^>]*> 來(lái)查找并替換所有HTML標(biāo)簽。這里的正則表達(dá)式表示任何以 < 開(kāi)始、以 > 結(jié)束的非空字符串（即HTML標(biāo)簽），Singleline 選項(xiàng)使.能匹配換行符，以便跨多行搜索標(biāo)簽，而 Compiled 選項(xiàng)則是為了優(yōu)化正則表達(dá)式的性能。
第二個(gè)核心代碼是：正則表達(dá)式"<[^>]*>"
public static string RemoveHtmlTags(string html)
{
// 正則表達(dá)式，匹配所有HTML標(biāo)簽
string pattern="<[^>]+>";
// 使用Regex.Replace方法移除所有匹配的HTML標(biāo)簽
return Regex.Replace(html, pattern, String.Empty);
}
請(qǐng)注意，此方法僅移除HTML標(biāo)記，不會(huì)解析或處理嵌入在HTML中的JavaScript代碼或其他非標(biāo)記內(nèi)容。此外，此方法也無(wú)法處理不規(guī)范或不符合預(yù)期格式的HTML標(biāo)記。如果需要更復(fù)雜的HTML解析或清理，您可能需要使用專門的HTML解析庫(kù)，如AngleSharp或HtmlAgilityPack等。
盡管上述方法對(duì)于許多簡(jiǎn)單場(chǎng)景已經(jīng)足夠有效，但在面對(duì)復(fù)雜的HTML文檔時(shí)，由于HTML本身的嵌套和特殊結(jié)構(gòu)，簡(jiǎn)單的正則表達(dá)式可能無(wú)法完美地解析并移除所有標(biāo)簽。在這種情況下，推薦使用專門為處理HTML設(shè)計(jì)的庫(kù)，如HtmlAgilityPack，它可以準(zhǔn)確地解析HTML并提供豐富的API用于提取純文本內(nèi)容。
動(dòng)的目的：把多個(gè)盒子放在一行上
清除浮動(dòng)的目的：解決父盒子高度為0的問(wèn)題
清除浮動(dòng)，也稱閉合浮動(dòng)
注：本文不兼容IE6
未清除浮動(dòng)實(shí)現(xiàn)情況：
圖1
清除后：
圖2
原代碼：
復(fù)制代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動(dòng)</title>
<style type="text/css">
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
復(fù)制代碼
具體方法：
1.額外標(biāo)簽法
在含浮動(dòng)標(biāo)簽后加兄弟盒子清除浮動(dòng)
例：
復(fù)制代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動(dòng)</title>
<style type="text/css">
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
.clearbox{
clear:both;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
<div class="clearbox"></div>
</div>
</body>
</html>
復(fù)制代碼
缺點(diǎn)：添加了許多空div
2.給父盒子overflow:hidden
觸發(fā)bfc模式（該名詞不懂請(qǐng)谷歌/百度，初學(xué)者可暫時(shí)略過(guò))，直接清除浮動(dòng)
復(fù)制代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動(dòng)</title>
<style type="text/css">
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
overflow: hidden;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
.clearbox{
clear:both;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
復(fù)制代碼
缺點(diǎn)：不可與position屬性配合使用
3.偽元素法
給父元素定義偽類:after(此處使用的是公共類clearfix）
復(fù)制代碼
.clearfix:after{
content:"";/*內(nèi)容為空*/
visibility:hidden;/*將元素隱藏，但是在網(wǎng)頁(yè)中該占的位置還是占著*/
display:block;/*變成塊級(jí)元素*/
height:0;
clear:both;/*清除浮動(dòng)*/
}
復(fù)制代碼
具體代碼：
復(fù)制代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動(dòng)</title>
<style type="text/css">
.clearfix:after{
content:"";/*內(nèi)容為空*/
visibility:hidden;/*將元素隱藏，但是在網(wǎng)頁(yè)中該占的位置還是占著*/
display:block;/*變成塊級(jí)元素*/
height:0;
clear:both;/*清除浮動(dòng)*/
}
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
.clearbox{
clear:both;
}
</style>
</head>
<body>
<div class="content clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
復(fù)制代碼
缺點(diǎn)：IE8以上和非IE瀏覽器才支持
4.雙偽元素法
給父類加上偽類:before和:after
復(fù)制代碼
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
復(fù)制代碼
具體代碼：
復(fù)制代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動(dòng)</title>
<style type="text/css">
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
.clearbox{
clear:both;
}
</style>
</head>
<body>
<div class="content clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
復(fù)制代碼
附：
對(duì)于上述4種方法，優(yōu)先推薦方法3和4，當(dāng)然1和2也可，可根據(jù)具體情況使用。
還有幾種亂七八糟的清除浮動(dòng)方法，但是缺點(diǎn)多，故不提起.
最后你覺(jué)得我們的文章對(duì)你有幫助，歡迎關(guān)注我，可以私信我：久伴，領(lǐng)取學(xué)習(xí)資料，在評(píng)論下方可以關(guān)注我的學(xué)習(xí)群，你可以隨時(shí)在上面向我們提問(wèn)，把你在學(xué)習(xí)前端過(guò)程中所遇到的問(wèn)題發(fā)給我們。我們每天都會(huì)按時(shí)回復(fù)大家的每一個(gè)問(wèn)題，希望久伴可以伴隨你從入門到專家。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
