整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
位小伙伴好，黑客技術(shù)離不開代碼，做為一個滲透測試工程師，也一定要有一些代碼基礎(chǔ)。網(wǎng)絡(luò)安全行業(yè)，現(xiàn)在人才缺口大，再加上就業(yè)形勢又很嚴(yán)峻，介于這些，我們想培養(yǎng)一批優(yōu)秀的網(wǎng)絡(luò)安全人才，將對網(wǎng)絡(luò)安全行業(yè)、黑客技術(shù)，以及滲透測試技術(shù)感興趣的小白培養(yǎng)成精英。
跟隨我們，不管你有多白，都可以逐步進(jìn)入網(wǎng)絡(luò)安全行業(yè)，并最終在這個行業(yè)找到高薪職業(yè)。
然后呢，我要說一句，關(guān)于“黑客”可能并不是大多數(shù)人所了解的那樣。關(guān)于這些，可以參考：什么是黑客？什么是滲透測試？2分鐘看完這800多字你就懂了
那么，我們就先從代碼基礎(chǔ)——HTML的基本語方開始。
首先給大家描述三個概念：語言、程序、代碼之前的關(guān)系。
首先我們就要搞清楚什么是語言？可能說HTML語言不太好理解，那么我們想一想日常生活當(dāng)中比較常見的我們中國人彼此之間都會交流，是不是叫做漢語呢？所以說漢語就是一門語言。
那么這時候大家腦子里面就可以構(gòu)思一下啊什么樣的東西大致就是語言了。它應(yīng)該是一種溝通交流的一種方法的一個集合，包括我們?nèi)绾伟l(fā)音，如何寫字，這些字如何拼在一起，能夠產(chǎn)生具體的意義，有一定的含義，這些所有所有的集合在一起，形成了一套規(guī)則，然后大家都去遵循這套規(guī)則，就能夠彼此交流，那么這就叫做語言。
我們再舉一個例子，比如說英國人或者美國人，他們也有自己的語言，叫做英語，那么我在這里就是換了另一種語言，
了解了語言之后，我們就再來看一看，什么是代碼，那代碼跟我們?nèi)粘Ｉ钪械倪@種能夠聯(lián)系起來的又是什么東西呢？
我們還是拿漢語來做比喻哈，我們說漢語就是一種交流溝通的一種規(guī)則，它是一門語言。在大家小的時候肯定就會去學(xué)這門語言。這門學(xué)科在小學(xué)的時候就叫語文，對吧。那么我們上語文課的時候，就要學(xué)一些最基礎(chǔ)的有關(guān)語言的東西，比如說漢語拼音生字詞，當(dāng)時要記很多的這種生字生詞，那么他是不是可以理解成是我們漢語的一種最基本的那種組成結(jié)構(gòu)？
那么英語呢？我們在學(xué)習(xí)英語的時候也會去記一些東西啊，就比如英文字母，緊接著就是背各種各樣的單詞，是不是當(dāng)我們單詞量有了一定的積累之后，我們對這個語言呢就掌握得更深刻了。
那么漢語要背生字詞，英語呢要背單詞，這些最基本的組成結(jié)構(gòu)。那么在程序語言里面，代碼就可以理解成是生字詞或者是單詞。
最后，我們再來看看什么是程序。它是由很多很多一行一行的代碼組成在一起，能夠完成一個綜合性的或者一個比較大的一個目標(biāo)的這樣的一個代碼的集合。
那么我們對照一下自然的這種語言，比如說漢語英語呢它是什么樣？好多的文字放在一起，是不是句子？或者說再多一點(diǎn)兒就是一篇文章。一篇文章甚至再大一點(diǎn)兒可能是一本書，
那么漢語能寫文章，用英語英文也能寫文章，這個文章可大可小，可能幾千字能大一點(diǎn)兒的一本書，也可以理解成是文章，那么用生字詞組成的這種集合就成了文章了。然后我們再談程序，它是什么呢？對照一下大家可能就理解了，它就是一個由代碼組成的文章。
那么回過頭來我們看我們要學(xué)的HTML語言，它也是一門語言，只不過呀它跟我們理解的漢語和英語有一定的區(qū)別。
漢語的主流是中國人之間交流的時候溝通的時候用的語言。那么英語呢應(yīng)用的比較廣泛，是一些英語國家之間彼此交流溝通的時候用的語言。那么HTML語言它也是一種語言，只不過它不是人和人之間去交流的語言，那么它到底是做什么用的呢？我們來看一下HTML的概念。
HTML中文名稱叫做超文本標(biāo)記語言，用HTML編寫的超文本文檔稱為HTML文檔。它能夠獨(dú)立于各種操作系統(tǒng)平臺，使用HTML語言將所需要表達(dá)的信息按某種規(guī)則寫成HTML文件，通過專用的瀏覽器來識別，并將這些HTML文件翻譯成可以識別的信息，即現(xiàn)在所見到的網(wǎng)頁。
那么從中我們能看到什么呢？首先我們知道它的中文名稱了。HTML叫做超文本標(biāo)記語言。
那么再往下我們看他提到了。
在這里瀏覽器是吧？提到了瀏覽器，那么這時候我們就知道了HTML語言啊它是一種與瀏覽器之間進(jìn)行交流的這么一種語言。就是我們?nèi)懸恍┐a，那么寫這些代碼的目的是什么呢？目的就是為了和瀏覽器去交流，只要我們寫的這個東西瀏覽器能看得懂，他就會根據(jù)我們寫的代碼呈現(xiàn)出最終的網(wǎng)頁。這就是HTML語言的一個基本概念。
（1）HTML中的各種元素都是通過標(biāo)記（標(biāo)簽）來表示。
（2）HTML當(dāng)中的標(biāo)簽分為單標(biāo)簽和雙標(biāo)簽。
（3）單標(biāo)簽格式為<名稱/>，雙標(biāo)簽格式為<名稱></名稱>。
（4）HTML對大小寫不敏感。
然后，我們可以對照一下HTML的基本結(jié)構(gòu)
（1）<html></html>
（2）<body></body>
（3）<head></head>
（4）<title></title>
首先，我們打開一個記事本。
單擊窗口圖片，在列表中找到記事本
然后在記事本中輸入<html></html>,這表示告訴瀏覽器，這是一個標(biāo)準(zhǔn)的HTML網(wǎng)頁。
在記事本中輸入<html></html>
那么為什么是兩個呢？前面1個，后面1個，這就有點(diǎn)類似于我們標(biāo)點(diǎn)符號里邊的括號，前面有一個開始，左半邊括號后面有一個結(jié)束。右半邊括號在這里也是前面的HTML表示網(wǎng)頁從這兒開始，那么后邊這個-html表示網(wǎng)頁呢至此結(jié)束。
那我們網(wǎng)頁這才剛開始就結(jié)束了呢，別著急，我們來看我在這里敲了幾次回車把它分開了。那么表示什么意思呀？表示中間呀是有很多內(nèi)容的，就是在網(wǎng)頁開始到網(wǎng)頁結(jié)束的中間是會有其他的東西的。
分開html開始和結(jié)束標(biāo)簽
我們接著往下看，第二個標(biāo)簽?zāi)亟凶?lt;body></body>,里面的單詞呢表示的是身體，那么它呢表示的就是網(wǎng)頁的主體，這個網(wǎng)頁的主體也屬于基本結(jié)構(gòu)，那么它在哪兒呢？注意啊網(wǎng)頁的主體也屬于網(wǎng)頁，那么它呀要放在<html></html>的中間。
將<body></body>標(biāo)簽插入到<body></body>中
下面，我們開始將第3個標(biāo)簽<head></head>寫入記事本，它代表頭部。他表示頭是吧？我們可以想象一下，這個腦袋注意它和身體之間到底應(yīng)該是個什么樣的關(guān)系呢？就我們想象有一個人站在那兒，腦袋應(yīng)該是在上面，身子應(yīng)該是在下邊哈。所以注意我們這個<head>標(biāo)簽呀要放在<body></body>標(biāo)簽的上方。注意！它們之間沒有包含關(guān)系！是一上一下的。
在<body></body>標(biāo)簽的上方插入<head></head>
最后一個叫做<title></title>這個單詞的意思呢叫做標(biāo)題。那么這個標(biāo)題你應(yīng)該放在哪？告訴大家，它屬于網(wǎng)頁的頭部，在頭部的里邊。
好了，整理一下格式
插入<title></title>標(biāo)簽
我們來看4個基本結(jié)構(gòu)的組成標(biāo)簽，我們都已經(jīng)寫到了這個文檔里面了。
大家需要注意的是，我寫的這種結(jié)構(gòu)啊這個包含的關(guān)系非常重要。最外邊是html表示網(wǎng)頁開始，到網(wǎng)頁結(jié)束，中間呢有頭、身子，還有標(biāo)題，那么頭和身子是一上一下的關(guān)系，那么標(biāo)題呢屬于頭部里邊兒。要記住這個格式！
那么到現(xiàn)在為止呀我們這個網(wǎng)頁的基本結(jié)構(gòu)就算是真正寫完了，我們把它保存一下。現(xiàn)在這個文檔里邊啊我們寫的是網(wǎng)頁的程序，雖然很簡單，但它也是一個完整的網(wǎng)頁了。
那么既然是一個網(wǎng)頁，那我們?nèi)绾文艽蜷_它看這個網(wǎng)頁呢？注意這個HTML寫出來的這個程序啊需要放在HTML文件里邊，
那么我們怎么做呢？直接把這個記事本改后綴，他現(xiàn)在是個.txt文檔，我們把這個文件的后面的txt擴(kuò)展名改成html。
將.txt格式改成.html格式
雙擊“網(wǎng)頁.html”，就會打開一個網(wǎng)頁。
用代碼創(chuàng)建的第1個初始網(wǎng)頁
果然是用瀏覽器打開的一個網(wǎng)頁，但是里邊呢還沒有東西是吧？空白的。
那么我們就來看一下，重新用記事本的方式把它打開。
我現(xiàn)在要想在里邊簡單的寫點(diǎn)文字，哎我看看我這個網(wǎng)頁是否能夠正常顯示。
那么在哪兒能夠?qū)懳淖帜兀扛蠹艺f一下，
在我們這個基本結(jié)構(gòu)里啊有兩個地方是可以寫內(nèi)容的，一個就是<body></body>主體，另外一個呢就是<title></title>標(biāo)題，這兩個地方中是可以寫文字內(nèi)容的。
右鍵單擊這個html文件，選擇打開方式→打開其他應(yīng)用，然后找到記事本，用記事本打開。
用記事本打開html文件
然后在<title></title>中間寫上“我的第一個網(wǎng)頁”，<body></body>中間寫上“這里是主體文字”
標(biāo)簽中間插入文字，讓網(wǎng)頁中有內(nèi)容
好了，寫完之后我們再保存。關(guān)閉這個窗口，重新打開看一下效果。那么大家看這會兒在網(wǎng)頁里面顯示出來了。首先呢在網(wǎng)頁主體里邊顯示出了“這里是主體文字”，并且在頁面的上方的標(biāo)簽?zāi)仫@示的是“我的一個網(wǎng)頁”。
用代碼創(chuàng)建的第1個網(wǎng)頁
那么我們今天的講解你看懂了么？
帶你學(xué)代碼、學(xué)編程、學(xué)語言、學(xué)網(wǎng)絡(luò)安全、學(xué)黑客技術(shù)、學(xué)滲透技術(shù)，逐步成為網(wǎng)絡(luò)高手，拿到年薪30W+的offer，在網(wǎng)絡(luò)江湖，從小刀客變成大俠。如果感興趣，請關(guān)注我，私信我，可獲得更多學(xué)習(xí)資料。
1.1頁面基礎(chǔ)元素：<html>
<html>是頁面的基礎(chǔ)元素，主要用來定義頁面的開始和結(jié)束部分。元素語法結(jié)構(gòu)如下<html>....</html>（開頭標(biāo)記為<>,結(jié)束標(biāo)記為</html>）先介紹一下完整的HTML文件的基本結(jié)構(gòu)
<html> 文件開始標(biāo)記
<head> 文件頭開始標(biāo)記
......... 文件頭部分的內(nèi)容
</head> 文件頭結(jié)束標(biāo)記
<body> 文件主體開始標(biāo)記
......... 文件主題部分的內(nèi)容
</head> 文件主題結(jié)束標(biāo)記
</html> 文件結(jié)束標(biāo)記
在<html>和</html>之間寫入想要編輯的頁面內(nèi)容就構(gòu)成了一個簡單的頁面
1.1.1 文本顯示方向?qū)傩裕篸ir
【作用與語法】dir屬性用來指定瀏覽器文本顯示的方向，同時也決定瀏覽器滾條的位置。dir屬性的語法結(jié)構(gòu)如下
<html dir="瀏覽器中文本的方向">......</html>(在元素名稱和屬性之間要加入空格)
dir屬性可以取兩個值，ltr（left title right）和rtl（right title left），分別表示從左向右顯示和從右向左顯示
1.1.2 指定語言屬性：lang
【作用與語法】lang屬性用來指定文檔中所使用的語言。lang屬性的語法結(jié)構(gòu)如下
<html lang="指定的語言">包含的內(nèi)容部分</html>
lang屬性的取值可以使用ISO標(biāo)準(zhǔn)中的語言代碼。在<html>元素中加入lang屬性，使瀏覽器更好的顯示界面，并不會更改頁面的文字編碼
ISO標(biāo)準(zhǔn)中語言代碼的取值及含義語言名稱寫法語言名稱寫法英語en法語fr漢語zh德語de日語ja意大利語it
1.2 頁面頭部元素：<head>
【作用與語法】HTML的頭部元素是以<head>為開始標(biāo)記，以</head>為結(jié)束標(biāo)記。它用于包含當(dāng)前文檔的相關(guān)信息，可包含<title>元素、<meta>元素等，分別用來定義頁面的標(biāo)題、編碼。使用<head>元素可以將基本信息部分和頁面主體內(nèi)容區(qū)分開來。<head>元素的語法結(jié)構(gòu)如下
<head>......</head>
1.3 頁面標(biāo)題元素：<title>
【作用與語法】HTML頁面的標(biāo)題一般是用來說明頁面用途的，它顯示在瀏覽器的標(biāo)題欄中。在HTML文檔中，標(biāo)題信息設(shè)置在頁面的頭部，也就是<head>和</head>之間。<title>元素的語法結(jié)構(gòu)如下。
<title>......</title> (說明：在標(biāo)記中間的“......”就是標(biāo)題的內(nèi)容，它位于HTML文檔的頭部，即<head>和</head>之間)
1.4 元信息元素：<meta>
【作用與語法】元信息元素<meta>用來定義頁面的附加信息，其中包括頁面的作者、版權(quán)、關(guān)鍵字等相關(guān)信息。<meta>元素的語法結(jié)構(gòu)如下。
<meta 屬性=“屬性值”/>
<meta>元素是一個自封閉的元素，通過其中的屬性來添加各種附加信息。<meta>元素在不適用任何屬性時，對頁面沒有影響。
1.4.1 元信息元素名稱屬性：name
【作用與語法】name屬性用來制定文檔中附加信息的名稱。例如，最常用的值“keywords”用來定義文檔中的關(guān)鍵字，方便搜索引擎的搜索。name屬性的語法結(jié)構(gòu)如下。
<meta name="信息名稱"/>
在<meta>元素中，名稱必須對應(yīng)有相關(guān)的值才能生效
1.4.2 元信息元素的值：content
【作用與語法】content屬性用來指定文檔中附加信息的值，它與name屬性成對出現(xiàn)。content屬性的語法結(jié)構(gòu)如下
<meta name="信息名稱" conten="附加信息的值"/>
<meta>元素中所定義的“keywords”信息是用來為搜索引擎定義關(guān)鍵字的，所以對頁面顯示效果并不產(chǎn)生影響，故頁面顯示效果并無太大變化
1.4.3 元信息元素的附加屬性：http-equiv
【作用與語法】http-equiv屬性和name屬性類似，用來指定附加信息的名稱。在瀏覽器加載頁面之前，服務(wù)器會把http-equiv屬性定義的相關(guān)信息發(fā)送給瀏覽器，便于在瀏覽器中正確顯示頁面。http-equiv屬性的語法結(jié)構(gòu)如下
【作用與語法】<meta http-equiv="信息名稱"，content="附加信息的值">
說明：和name屬性相似，http-equiv屬性一般要和conten屬性成對出現(xiàn)
1.4.4 定義頁面的跳轉(zhuǎn)
【作用與語法】在瀏覽器網(wǎng)頁的時候經(jīng)常會看到一些歡迎信息的頁面，并經(jīng)過一段時間后，這一頁面會自動轉(zhuǎn)到其他頁面，這就是網(wǎng)頁的跳轉(zhuǎn)。使用HTML中的HTTP代碼就可以很輕松的實(shí)現(xiàn)這一功能。頁面跳轉(zhuǎn)的語法結(jié)構(gòu)
<meta http-equiv="refresh" content="跳轉(zhuǎn)時間"；url="鏈接地址">
說明：在該語法中，refresh表示網(wǎng)頁的刷新，而在content中則設(shè)定刷新的時間和刷新后的地址，時間和鏈接地址之間用分號相隔。默認(rèn)情況下，跳轉(zhuǎn)時間是以秒為單位的
1.5 基本設(shè)置元素：<base>
在HTML中，基本設(shè)置元素<base>使用來定義相對路徑的根目錄。使用<base>元素，可以方便的定義頁面中的超級鏈接。語法結(jié)構(gòu)如下
<base 屬性="屬性值"/>
<base>元素在不使用任何屬性時，對頁面沒有影響。<base>元素中可以使用的屬性有鏈接路徑屬性href和鏈接窗口屬性target
1.5.1 鏈接路徑屬性：href
【作用與語法】href屬性用來指定文檔中相對鏈接的根目錄。文檔中的所有鏈接(包括圖片、音頻等內(nèi)容)都按照href屬性所指定的根目錄顯示。href屬性的語法結(jié)構(gòu)如下
<base href="指定路徑">包含的內(nèi)容部分</base>
href屬性的取值為url值。它可以使用絕對路徑，也可以指
向某個文件夾。
avaScript為unicode編碼轉(zhuǎn)換為中文
var str = "\u6211\u662Funicode\u7F16\u7801";關(guān)于這樣的數(shù)據(jù)轉(zhuǎn)換為中文問題，常用的以下方法。
1. eval解析或new Function("'+ str +'")()
var str = "\\u6211\\u662Funicode\\u7F16\\u7801";
str = eval("'" + str + "'"); // "我是unicode編碼"2. unescape 解析
方法一:
var str = "\\u6211\\u662Funicode\\u7F16\\u7801";
str = unescape(str.replace(/\u/g, "%u")); // "我是unicode編碼"方法二:
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
