CTF入門學習4->前端HTML基礎

這部分主要介紹前端語言HTML，了解基本的文法與内容。

浏覽器對于上網者來說是一種直覺、可視化的呈現。伺服器發送資料到用戶端，用戶端需要處理這些資料，網際網路就造就了這種資料語言——HTML。

有一個問題，我們浏覽網頁時，各種絢麗的頁面是如何構成的？要了解的HTML在網頁中占多少份額呢？

JS----為網頁添加各式各樣的動态功能，為使用者提供更流暢美觀的頁面效果。是魔術師

CSS----對HTML的補充，是裝修隊。

HTML----網頁的基本内容與基本資訊。是建築師。

為了直覺感受呢，我們可以打開一個目标網址https://dun.163.com

我們在左上角點選小鎖->此網站的權限->關閉JavaScript->重新整理-----動态效果已經消失，變為純靜态頁面。

關閉CSS後（這裡使用了一個插件，沒有查到），隻會顯示頁面的主要文字内容，沒有其他美化的效果。

HTML是Hyper Text Markup Language，超文本标記語言，可以加載JS、CSS、圖檔等非文字的内容，是以叫做超文本。是Web頁面的基礎。

下面看HTML的結構和文法。

我們來實地看一下網頁代碼。

還是打開https://www.cnblogs.com/Roboduster/

打開開發者工具，選中“元素”，可以看見主要就是html-head-body三大要素，head和body裡有各自的代碼内容。

HTML的尖括号代表什麼意思呢？

HTML裡有很多資源需要加載，這些資源稱為元素。這些元素，以<p>為開始标簽，</p>為閉合标簽，兩者之間的就是Content，整個一句是一個元素Element；

元素裡面會有屬性：即元素的額外資訊。比如：

标簽屬性：name\id\class...

事件屬性：相當于滑鼠點選的一個動作。如：onload,onerror,onclick...

如下：

html不區分大小寫。

src屬性用于添加網絡圖檔的URL。

連結寫在一個叫做href的屬性裡面，用來進入其他的頁面。

常用于浏覽器的表單送出，比如登入框。

為了更友善管理HTML源碼，出現了HTML DOM。

這裡了解DOM的樹形結構。

 作用是：

可以更直覺的了解頁面元素

更重要的是可以使用 JavaScript通過DOM對HTML進行任意操作