位小伙伴好,黑客技術離不開代碼,做為一個滲透測試工程師,也一定要有一些代碼基礎。網絡安全行業,現在人才缺口大,再加上就業形勢又很嚴峻,介于這些,我們想培養一批優秀的網絡安全人才,將對網絡安全行業、黑客技術,以及滲透測試技術感興趣的小白培養成精英。
跟隨我們,不管你有多白,都可以逐步進入網絡安全行業,并最終在這個行業找到高薪職業。
然后呢,我要說一句,關于“黑客”可能并不是大多數人所了解的那樣。關于這些,可以參考:什么是黑客?什么是滲透測試?2分鐘看完這800多字你就懂了
那么,我們就先從代碼基礎——HTML的基本語方開始。
首先給大家描述三個概念:語言、程序、代碼之前的關系。
首先我們就要搞清楚什么是語言?可能說HTML語言不太好理解,那么我們想一想日常生活當中比較常見的我們中國人彼此之間都會交流,是不是叫做漢語呢?所以說漢語就是一門語言。
那么這時候大家腦子里面就可以構思一下啊什么樣的東西大致就是語言了。它應該是一種溝通交流的一種方法的一個集合,包括我們如何發音,如何寫字,這些字如何拼在一起,能夠產生具體的意義,有一定的含義,這些所有所有的集合在一起,形成了一套規則,然后大家都去遵循這套規則,就能夠彼此交流,那么這就叫做語言。
我們再舉一個例子,比如說英國人或者美國人,他們也有自己的語言,叫做英語,那么我在這里就是換了另一種語言,
了解了語言之后,我們就再來看一看,什么是代碼,那代碼跟我們日常生活中的這種能夠聯系起來的又是什么東西呢?
我們還是拿漢語來做比喻哈,我們說漢語就是一種交流溝通的一種規則,它是一門語言。在大家小的時候肯定就會去學這門語言。這門學科在小學的時候就叫語文,對吧。那么我們上語文課的時候,就要學一些最基礎的有關語言的東西,比如說漢語拼音生字詞,當時要記很多的這種生字生詞,那么他是不是可以理解成是我們漢語的一種最基本的那種組成結構?
那么英語呢?我們在學習英語的時候也會去記一些東西啊,就比如英文字母,緊接著就是背各種各樣的單詞,是不是當我們單詞量有了一定的積累之后,我們對這個語言呢就掌握得更深刻了。
那么漢語要背生字詞,英語呢要背單詞,這些最基本的組成結構。那么在程序語言里面,代碼就可以理解成是生字詞或者是單詞。
最后,我們再來看看什么是程序。它是由很多很多一行一行的代碼組成在一起,能夠完成一個綜合性的或者一個比較大的一個目標的這樣的一個代碼的集合。
那么我們對照一下自然的這種語言,比如說漢語英語呢它是什么樣?好多的文字放在一起,是不是句子?或者說再多一點兒就是一篇文章。一篇文章甚至再大一點兒可能是一本書,
那么漢語能寫文章,用英語英文也能寫文章,這個文章可大可小,可能幾千字能大一點兒的一本書,也可以理解成是文章,那么用生字詞組成的這種集合就成了文章了。然后我們再談程序,它是什么呢?對照一下大家可能就理解了,它就是一個由代碼組成的文章。
那么回過頭來我們看我們要學的HTML語言,它也是一門語言,只不過呀它跟我們理解的漢語和英語有一定的區別。
漢語的主流是中國人之間交流的時候溝通的時候用的語言。那么英語呢應用的比較廣泛,是一些英語國家之間彼此交流溝通的時候用的語言。那么HTML語言它也是一種語言,只不過它不是人和人之間去交流的語言,那么它到底是做什么用的呢?我們來看一下HTML的概念。
HTML中文名稱叫做超文本標記語言,用HTML編寫的超文本文檔稱為HTML文檔。它能夠獨立于各種操作系統平臺,使用HTML語言將所需要表達的信息按某種規則寫成HTML文件,通過專用的瀏覽器來識別,并將這些HTML文件翻譯成可以識別的信息,即現在所見到的網頁。
那么從中我們能看到什么呢?首先我們知道它的中文名稱了。HTML叫做超文本標記語言。
那么再往下我們看他提到了。
在這里瀏覽器是吧?提到了瀏覽器,那么這時候我們就知道了HTML語言啊它是一種與瀏覽器之間進行交流的這么一種語言。就是我們去寫一些代碼,那么寫這些代碼的目的是什么呢?目的就是為了和瀏覽器去交流,只要我們寫的這個東西瀏覽器能看得懂,他就會根據我們寫的代碼呈現出最終的網頁。這就是HTML語言的一個基本概念。
(1)HTML中的各種元素都是通過標記(標簽)來表示。
(2)HTML當中的標簽分為單標簽和雙標簽。
(3)單標簽格式為<名稱/>,雙標簽格式為<名稱></名稱>。
(4)HTML對大小寫不敏感。
然后,我們可以對照一下HTML的基本結構
(1)<html></html>
(2)<body></body>
(3)<head></head>
(4)<title></title>
首先,我們打開一個記事本。
單擊窗口圖片,在列表中找到記事本
然后在記事本中輸入<html></html>,這表示告訴瀏覽器,這是一個標準的HTML網頁。
在記事本中輸入<html></html>
那么為什么是兩個呢?前面1個,后面1個,這就有點類似于我們標點符號里邊的括號,前面有一個開始,左半邊括號后面有一個結束。右半邊括號在這里也是前面的HTML表示網頁從這兒開始,那么后邊這個-html表示網頁呢至此結束。
那我們網頁這才剛開始就結束了呢,別著急,我們來看我在這里敲了幾次回車把它分開了。那么表示什么意思呀?表示中間呀是有很多內容的,就是在網頁開始到網頁結束的中間是會有其他的東西的。
分開html開始和結束標簽
我們接著往下看,第二個標簽呢叫做<body></body>,里面的單詞呢表示的是身體,那么它呢表示的就是網頁的主體,這個網頁的主體也屬于基本結構,那么它在哪兒呢?注意啊網頁的主體也屬于網頁,那么它呀要放在<html></html>的中間。
將<body></body>標簽插入到<body></body>中
下面,我們開始將第3個標簽<head></head>寫入記事本,它代表頭部。他表示頭是吧?我們可以想象一下,這個腦袋注意它和身體之間到底應該是個什么樣的關系呢?就我們想象有一個人站在那兒,腦袋應該是在上面,身子應該是在下邊哈。所以注意我們這個<head>標簽呀要放在<body></body>標簽的上方。注意!它們之間沒有包含關系!是一上一下的。
在<body></body>標簽的上方插入<head></head>
最后一個叫做<title></title>這個單詞的意思呢叫做標題。那么這個標題你應該放在哪?告訴大家,它屬于網頁的頭部,在頭部的里邊。
好了,整理一下格式
插入<title></title>標簽
我們來看4個基本結構的組成標簽,我們都已經寫到了這個文檔里面了。
大家需要注意的是,我寫的這種結構啊這個包含的關系非常重要。最外邊是html表示網頁開始,到網頁結束,中間呢有頭、身子,還有標題,那么頭和身子是一上一下的關系,那么標題呢屬于頭部里邊兒。要記住這個格式!
那么到現在為止呀我們這個網頁的基本結構就算是真正寫完了,我們把它保存一下。現在這個文檔里邊啊我們寫的是網頁的程序,雖然很簡單,但它也是一個完整的網頁了。
那么既然是一個網頁,那我們如何能打開它看這個網頁呢?注意這個HTML寫出來的這個程序啊需要放在HTML文件里邊,
那么我們怎么做呢?直接把這個記事本改后綴,他現在是個.txt文檔,我們把這個文件的后面的txt擴展名改成html。
將.txt格式改成.html格式
雙擊“網頁.html”,就會打開一個網頁。
用代碼創建的第1個初始網頁
果然是用瀏覽器打開的一個網頁,但是里邊呢還沒有東西是吧?空白的。
那么我們就來看一下,重新用記事本的方式把它打開。
我現在要想在里邊簡單的寫點文字,哎我看看我這個網頁是否能夠正常顯示。
那么在哪兒能夠寫文字呢?跟大家說一下,
在我們這個基本結構里啊有兩個地方是可以寫內容的,一個就是<body></body>主體,另外一個呢就是<title></title>標題,這兩個地方中是可以寫文字內容的。
右鍵單擊這個html文件,選擇打開方式→打開其他應用,然后找到記事本,用記事本打開。
用記事本打開html文件
然后在<title></title>中間寫上“我的第一個網頁”,<body></body>中間寫上“這里是主體文字”
標簽中間插入文字,讓網頁中有內容
好了,寫完之后我們再保存。關閉這個窗口,重新打開看一下效果。那么大家看這會兒在網頁里面顯示出來了。首先呢在網頁主體里邊顯示出了“這里是主體文字”,并且在頁面的上方的標簽呢顯示的是“我的一個網頁”。
用代碼創建的第1個網頁
那么我們今天的講解你看懂了么?
帶你學代碼、學編程、學語言、學網絡安全、學黑客技術、學滲透技術,逐步成為網絡高手,拿到年薪30W+的offer,在網絡江湖,從小刀客變成大俠。如果感興趣,請關注我,私信我,可獲得更多學習資料。
.注釋標記(<!--…-->)
語法: <!--注釋內容-->
2.文件標記(<html>…</html>)
語法: <html>…</html>
說明:<html>這對標記是HTML文件的標記。<html>處于文件的最前面,表示HTML文件的開始。即瀏覽器從<html>標記開始解釋,直到遇到</html>標記為止。
3.文件頭標記(<head>…</head>)
語法: <head>…</head>
說明:
①由head這組標記定義的元素中,并不放置網頁的任何內容,是放置關于這份HTML文件的信息。就是說,它并不屬于HTML文件的主體,它包含文件的標題、編碼方式和URL等。這些信息大部分用于提供索引、辨認或其他應用。
②這對標記在HTML文件中并不是必需的。如果某個HTML文件并不需要提供相關信息,則可省略<head>標記。
4.文件標題標記(<title>…</title>)
語法: <title>文件標題文字</title>
說明:此標記用于設定HTML文件的標題名稱,它將顯示在瀏覽器的標題欄中。
注意:<title>標記用于<head>標記中。但如果HTML文件中沒有使用<head>標記,則<title>標記仍然起作用。
5.文件主體標記(<body>…</body>)
語法: <body>…</body>
說明:
①由<body>標記所建立的元素是HTML文件的內容主體,也是HTML文件的重點所在。HTML文件中要顯示在網頁上的所有內容,也都放置在這個元素中。
②<body>具有一些特殊的屬性,可以設定背景及字符顏色等。
TML 或超文本標記語言 允許 Web 用戶使用元素、標簽和屬性創建和構造部分、段落和鏈接。然而,值得注意的是,HTML 不能被視為一種編程語言,因為它不能創建動態功能。
HTML有很多用例,即:
本文將介紹 HTML 的基礎知識,包括它的工作原理、優缺點以及它與 CSS 和 JavaScript 的關系。
HTML(代表超文本標記語言)是構成大多數網頁和在線應用程序的計算機語言。超文本是用于引用其他文本片段的文本,而標記語言是告訴 Web 服務器文檔的樣式和結構的一系列標記。
在國內的網站上找了一圈,這應該是介紹歷史最細致的,長按保存手機里翻譯
平均每個網站包含幾個不同的信息 HTML 頁面。例如,主頁、關于頁面和聯系頁面都將具有單獨的 HTML 文件。
HTML 文檔是以 .html 或 .htm 擴展名結尾的文件。Web 瀏覽器讀取 HTML 文件并呈現其內容,以便互聯網用戶可以查看它。
所有 HTML 頁面都有一系列 HTML 元素,由一組標簽和屬性組成。HTML 元素是網頁的構建塊。標簽告訴 Web 瀏覽器元素在哪里開始和結束,而屬性描述元素的特征。
元素的三個主要部分是:
這三個部分的組合將創建一個 HTML 元素:
<p>這是在HTML中添加段落的方法。</p>
HTML 元素的另一個關鍵部分是它的屬性,它有兩個部分——名稱和屬性值。名稱標識用戶想要添加的附加信息,并且屬性值給出進一步的說明。
例如,添加紫色和 font-family verdana 的樣式元素將如下所示:
< p style= "color:purple;font-family:verdana" >這是在HTML中添加段落的方法。< /p >
另一個屬性,HTML 類,對于開發和編程來說是最重要的。class 屬性添加了可以作用于具有相同類值的不同元素的樣式信息。 例如,我們將對標題 <h1> 和段落 <p> 使用相同的樣式。樣式包括背景顏色、文本顏色、邊框、邊距和填充,在 .important 類下。要在 <h1> 和 <p> 之間實現相同的樣式,請在每個開始標記后添加 class=”important”:
<html>
<head>
<style>
.important {
background-color: blue;
color: white;
border: 2px solid black;
margin: 2px;
padding: 2px;
}
</style>
</head>
<body>
<h1 class="important">This is a heading</h1>
<p class="important">This is a paragraph.</p>
</body>
</html>
大多數元素都有一個開始標簽和一個結束標簽,但有些元素不需要結束標簽即可工作,例如空元素。這些元素不使用結束標簽,因為它們沒有內容:
< img src= "/" alt= "圖像" >
這個圖像標簽有兩個屬性——一個src屬性,圖像路徑,和一個alt屬性,描述性文本。但是,它沒有內容,也沒有結束標簽。
最后,每個 HTML 文檔都必須以 <!DOCTYPE> 聲明開頭,以告知 Web 瀏覽器文檔類型。使用 HTML5,doctype HTML public 聲明將是:
< !DOCTYPE html >
目前,有 142 個 HTML 標簽可以用于創建各種元素。盡管現代瀏覽器不再支持其中一些標簽,但學習所有可用的不同元素仍然是有益的。
第二節將討論最常用的 HTML 標簽和兩個主要元素——塊級元素和內聯元素。
塊級元素占據頁面的整個寬度。它總是在文檔中開始一個新行。例如,標題元素將位于與段落元素不同的行中。
每個 HTML 頁面都使用這三個標簽:
<html>
<head>
<!-- META INFORMATION -->
</head>
<body>
<!-- PAGE CONTENT -->
</body>
</html>
其他流行的塊級標簽包括:
內聯元素格式化塊級元素的內部內容,例如添加鏈接和強調的字符串。內聯元素最常用于在不破壞內容流的情況下格式化文本。
例如,一個 <strong> 標簽會以粗體呈現一個元素,而 <em> 標簽會以斜體顯示它。超鏈接也是使用 <a> 標記和 href 屬性來指示鏈接目標的內聯元素:
<a href="https://www.icodingdeu.com/" >點我!</a>
HTML 的第一個版本由 18 個標簽組成。從那時起,每個新版本都帶有添加到標記中的新標簽和屬性。迄今為止,該語言最重大的升級是 2014 年引入的 HTML5。
HTML 和 HTML5的主要區別在于HTML5 支持新類型的表單控件。HTML5 還引入了幾個語義標簽,可以清楚地描述內容,例如 <article>、<header> 和 <footer>。
就像任何其他計算機語言一樣,HTML 有其優點和局限性。以下是 HTML 的優缺點:
優點:
就像任何其他計算機語言一樣,HTML 有其優點和局限性。以下是 HTML 的優缺點:
缺點:
HTML 用于添加文本元素并創建內容結構。然而,僅僅建立一個專業的和完全響應的網站是不夠的。因此,HTML 需要借助層級樣式表 (CSS)和JavaScript來創建絕大多數網站內容。
HTML 是 Internet 上的主要標記語言。每個 HTML 頁面都有一系列創建網頁或應用程序內容結構的元素。
HTML 是一種對初學者友好的語言,有很多支持,主要用于靜態網站頁面。HTML 與用于樣式的 CSS 和用于功能的 JavaScript 一起使用效果最好。
我們還向您展示了一些在線教學課程,它們將有助于提高您的 HTML 知識或提供對 HTML 的基本理解。
如果您有任何其他喜歡的資源來學習 HTML,請在評論部分告訴我們。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。