HTML開發工具怎麼用?HTML最簡單的開發工具?

Tags: 瀏覽器,

HTML的開發依然是網際網路中必不可少的一部分,怎麼使用瀏覽器的開發工具呢?HTML的開發工具都有哪些呢?我們一起來看看吧!!!

HTML開發工具怎麼用?HTML最簡單的開發工具

工具/原料

電腦

瀏覽器

Google Chrome開發者工具的使用

我們先來介紹一下谷歌瀏覽器開發者工具的使用吧!

先用谷歌瀏覽器開啟一個網頁,這裡以“百度一下”為例。

然後按下F12鍵。

HTML開發工具怎麼用?HTML最簡單的開發工具

HTML開發工具怎麼用?HTML最簡單的開發工具

我們先來看第一欄。

Elements元素欄,在這一欄裡是整個HTML頁面,你去點選每行程式碼,其對應的元素就會被標出來,對於我們學習和檢查自己的網頁很有用處。我們一起看看效果吧!

HTML開發工具怎麼用?HTML最簡單的開發工具

來看第二欄。

Network,這一欄能夠檢測到你載入這個網頁時所用到的時間還有載入了一些什麼資訊,包括圖片,大小,載入時間,還有js程式碼等等。。。

HTML開發工具怎麼用?HTML最簡單的開發工具

HTML開發工具怎麼用?HTML最簡單的開發工具

來看第三欄。

Sources,這欄主要是整個頁面的html標籤還有js程式碼,對於我們查錯很有幫助。

HTML開發工具怎麼用?HTML最簡單的開發工具

好了,下面我們來看看一個簡單的開發工具吧!

HTML開發工具

我們下載安裝一個EditPlus 軟體,用它來開發是最好不過了。開啟它來看看他的介面吧!

HTML開發工具怎麼用?HTML最簡單的開發工具

我們是開發HTML,所以我們來新建一個檔案,建成HTML檔案。

HTML開發工具怎麼用?HTML最簡單的開發工具

HTML開發工具怎麼用?HTML最簡單的開發工具

我們會看到,他已經預設的為我們搭建了一個HTML的基本框架,我們只需要自己在裡面填寫程式碼就行了。下面我做個示範具體程式碼如下:

HTML開發工具怎麼用?HTML最簡單的開發工具

我們儲存一下這個檔案。

HTML開發工具怎麼用?HTML最簡單的開發工具

我們用瀏覽器開啟看看吧!

HTML開發工具怎麼用?HTML最簡單的開發工具

這個工具只有幾兆,很小,用起來很好,但願對於你自己有用。

相關問題答案