瀏覽器的妙用
瀏覽器是網站建置的好幫手。你不光可以用它來瀏覽現有的網頁,還可以去查看其他網站的結構來作為建站參考,在網站實際上線測試的過程中更是需要不斷用瀏覽器去確認網頁狀況。
上一節我們知道了網站的基本原理,知道網頁有三種資料類型(HTML、CSS與JS)。那這次我們就用瀏覽器來實際看看「真實」的網頁。本節所使用的瀏覽器是Chrome,因為這是目前最多人使用的瀏覽器,如果你使用其他瀏覽器,請現在下載Chrome(台灣、中國大陸)。
然後,讓我們打開一個別人做的網頁來看看它的HTML與CSS原始碼。這裡我們選擇台灣的「史萊姆的第一個家」網站作為範例。這個網站並沒有使用複雜的前端框架,用最原始最好閱讀的HTML結構來建立網站,對於初學者而言非常友好。
那麼首先,讓我們打開「史萊姆的第一個家」:http://www.slime.com.tw/。
進入後讓我們先查看一下網頁的原始碼,鼠標右鍵點擊「檢視網頁原始碼」👇
你會看到許多以<>包裹的英文單詞、一些看不懂的代碼,還有一些中文詞句。感覺不懂這是怎麼回事,對不對?不要緊張,我們不需要看懂每個部分,只要知道怎麼用它就可以了。接下來我會介紹HTML的大概結構和修改HTML與CSS的小技巧。你可以開著原始碼頁面,然後一邊讀文章一邊用瀏覽器比對。
HTML基本結構
讓我們直接來看代碼:
1 |
|
HTML是一個層層包裹的結構。第一行的<!DOCTYPE html>只是聲明這個文件是HTML格式,不用多管。接下來,HTML檔以<html></html>來包裹,寫在裡面的才會以HTML格式被瀏覽器讀取。而HTML內部又被切分為<head></head>和<body></body>兩部分。
這是什麼意思呢?想像一下你去瀏覽美術館或博物館,每幅畫作或藏品的旁邊都會有一個介紹卡片,上面寫著作品名稱、作者姓名、創作年代、藏品編號等訊息。
這是什麼?這就是HTML裡的head。<head></head>中的內容不會顯示在瀏覽器中,但是規定了網頁標題、網頁介紹文字(會顯示在搜索引擎結果中)、關鍵字還有這個網頁引用的代碼(CSS、JS)。而body呢,就是網頁的內容本體,會全部顯示在瀏覽器中。史萊姆的第一個家也遵循這樣的結構(如下)。
往下滑動,你會看到這個網頁使用了許多<li>標籤。這是HTML中的列表語法。被<li>所框的文字會以列表方式顯示在網頁上。這邊我簡單說明常見的HTML標籤作為參考:
- <table>:表格,裡面會有<tr>和<td>代表行與單元格內容。
- <script>:腳本,或者說代碼,裡面是Javascript代碼。
- <ul><ol>:列表,分為有序列表(ol)和無序列表(ul),裡面有<li>代表每項內容。
- <form>:表單,收集用戶輸入的內容。這是很重要的功能,之後會專門講解。
- <h1><h2><h3>:標題。h1字體最大,h6最小。一般用h1-h3即可。
- <p>:段落,一般用於大段的文字內容。
以上這些標籤一般來說就夠用了,如果你想瞭解詳細的使用方法,可以點擊連結進入W3 school學習。這邊,我推薦兩個學習HTML的方式,一個是W3 school網站的HTML教程,上面有全中文的介紹,很好查詢個別標籤的用法,另一個是Codecademy的Learn HTML課程,很簡單的英文,個人推薦,因為它是全互動介面,可以敲敲鍵盤快樂學習。當然,沒空的話,這兩個都不要碰,等之後你有了自己的網站,想要修改一些網站內容的時候再來學習就好,不影響。
修改網頁內容
瀏覽器還有一個好用的地方是,修改網頁內容。當然,這個修改是無法影響伺服主機的,只是在你的瀏覽器頁面中進行臨時的修改,刷新或者關掉瀏覽器就不見了。一般用於測試,還可以用來取代網頁PS,看什麼不爽直接瀏覽器修改就好了,多方便~
現在就開始吧,例如,我想要假裝自己來自未來,把網站的更新日期修改掉。那我們就用鼠標劃中想要修改的日期「9月8日」反白,然後右鍵選擇「檢查」。
這個時候,你會發現瀏覽器右邊或下面彈出了一個看上去很厲害的充滿英文的控制台。上面是HTML內容,已經定位到了我們選擇的「9月8日」相關標籤,它是一個單元格(td)。而下面的Styles中是修飾這段單元格的CSS,可以看到其中寫著背景顏色是黃色、邊界是灰色、粗細程度為1px等等。
然後我們直接雙擊想要修改的部分,直接雙擊Elements中的「9月8日」。你會看到這時光標出現了,你可以修改內容了!來改一個未來的日期吧,我改成了2112年9月3日。然後,神奇的事情就發生了,頁面上的日期變成了…哆啦A夢的生日~
不光是標籤內容,標籤的類型也可以透過瀏覽器修改。此外,Styles中的css內容也可以透過這個方式修改,在前端的網頁內容測試與修飾過程中非常好用。如果你想要瞭解更多,我推薦你看一下這個12分鐘的教程影片。
好了,到這裡你已經知道HTML的結構,如何透過瀏覽器來修改網頁內容。先教給你這個的原因是,即使你沒有要繼續學習、建置網站,你至少也學到了用瀏覽器去修改網頁內容這個技巧(雖然不知道你會用在什麼地方XD)。此外,學習如何修改網頁內容對於我們來說比如何從頭建立網頁要重要得多。因為時間成本精力都有限,我們普遍都是去網路上尋找一個好看的主題和模板,然後來進行修改,把自己的內容套用上去。所做的工作都是在原有框架基礎上修飾。
(未完待續)