html代碼隱藏的方法是什么

這篇文章主要講解了“html代碼隱藏的方法是什么”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“html代碼隱藏的方法是什么”吧！

一、使用CSS隱藏HTML代碼

CSS中有一個(gè)很有用的屬性display，它可以將HTML代碼隱藏。使用該屬性時(shí)，我們可以利用display:none、visibility:hidden、opacity:0、position:absolute + left:-9999px(左移9999像素)等方式來實(shí)現(xiàn)HTML代碼的隱藏。

1. display:none

display:none是最常用的隱藏HTML的一種方法，它可以將元素影藏，這樣就可以將HTML代碼隱藏起來不被用戶看到。設(shè)置元素的display屬性值為none，就可以將該元素隱藏。

.hide {
    display: none;
}

2. visibility:hidden

visibility:hidden可以將HTML元素隱藏，它與display:none的效果類似，不同的是，元素在原始位置仍保持留著（空間未被釋放），按照原來的大小進(jìn)行占位，只是不可見。

.hide {
    visibility: hidden;
}

3. opacity:0

opacity:0是濾鏡屬性，用于設(shè)置元素可見性的透明度。設(shè)置為0的元素被設(shè)置為完全透明呈現(xiàn)出來，不會(huì)被用戶看到。與visibility:hidden不同的是，在原位上會(huì)被保留空間。

.hide {
    opacity: 0;
}

4. position:absolute + left:-9999px

position:absolute定位屬性可以將元素的位置徹底左移，配合left:-9999px的屬性值，可以將元素隱藏得很徹底。

.hide {
    position: absolute;
    left: -9999px;
}

二、使用JavaScript隱藏HTML代碼

JS隱藏HTML代碼的方法相對(duì)于CSS，稍微復(fù)雜一些，需要通過JS API來實(shí)現(xiàn)。比如我們可以使用DOM來操作文檔中的元素，通過setAttribute和style屬性來實(shí)現(xiàn)代碼的隱藏。代碼如下：

<div id="hide">需要隱藏的內(nèi)容</div>
<script>
var hide = document.getElementById('hide');
hide.setAttribute('style', 'display:none'); 
</script>

以上代碼的作用是選中id為hide的元素，并將該元素的style屬性設(shè)置為display:none，即讓該元素在頁面上消失。

三、HTML代碼的加密與混淆

除了上述的方法外，還有一種更安全的方式，那就是將HTML代碼加密，從而達(dá)到更加安全的目的。

1. BASE64加密

將HTML代碼進(jìn)行Base64加密，可以達(dá)到較高的保密性。Base64加密后的字符串可以用于URL和HTTP POST參數(shù)等通信協(xié)議中傳輸，并不需要考慮長(zhǎng)度限制的問題。通過將加密后的字符串轉(zhuǎn)成字符編碼格式，就可以將其正確輸出到HTML中，從而使得HTML中的代碼隱藏。

var str = document.getElementById('demo').innerHTML;
//加密
var base64 = btoa(str);
//解密
var origin = atob(base64);
document.getElementById('demo').innerHTML = origin;

2. JS代碼混淆

JS代碼混淆是指通過一些手段，將JS代碼的易讀性變得更差，增加被人破解的難度。混淆一般包括函數(shù)名重命名、變量重命名、省略空格及注釋等?；煜梢苑乐购诳屯ㄟ^分析JS源碼來找到漏洞和攻擊代碼，從而增加頁面的安全性。

function hide() {
    var a = document.createElement('style');
    a.innerHTML = '.hide { display:none; }';
    document.head.appendChild(a);
}
hide();

感謝各位的閱讀，以上就是“html代碼隱藏的方法是什么”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)html代碼隱藏的方法是什么這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！