iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 6
0

打開文字編輯器

*還不會用VS code的話請看第3天文章有提到的教學

這裡示範的文字編輯器是VS code,新增一個檔案,先將它存成Html檔,這樣編輯器才會自動偵測它的檔案類型,給予相對應的編輯功能。只要將副檔名(test是檔名,.html是副檔名),副檔名key“html”就可以存成html檔了。

接著在空空的文檔打入第一行字"html",文字編輯器會自動跳出版本選擇列,選擇Html5。

然後就會跳出Html文檔基礎架構,並自動寫入一些基本數據:

Html的文檔基礎架構

那就來說明那一串東西到底是幹嘛用的吧~

版本宣告

這是HTML5版本宣告。

文檔的一開始,必須宣告我們文檔所寫的Html是哪個版本,目前最新版本是HTML5,該版本的普遍度也很高了。其他版本的宣告方式就不會是這樣寫了。

根元素<html>

根元素是整個文檔的第一個元素,所有的文檔內容都包在根元素裡面。<html>元素是最基礎的層,它對應的是瀏覽器的viewport(視口)。

  • <html>元素內的lang屬性

    我們會在根元素裡指定lang屬性,來表明這個網頁的主要語言。引號內的值"en"指的是英文,通常後面也會接相對應的區域代號、書寫方式。也可以在特定的元素指定lang,比方整個文檔的內容是中文,可是有些地方用到日文,就可以幫那串日文字包元素來指定日文的參數。

    <html lang="en">
    </html>
    

    台灣地區使用的中文繁體就會是:

    <html lang="zh-Hant-TW">
    </html>
    
    • zh是中文
    • Hant是繁體字的書寫方式
    • TW是台灣地區(會關乎到區域搜尋引擎,如果希望搜尋範圍可以分佈在華語地區,那最好不要有TW區碼。)
    <html lang="zh-Hant">
    

<head>元素

<head>裡包的是這個文檔的原數據,這邊輸入的內容不會直接展示在頁面上,但會影響頁面的內容。像是對應顯示器的螢幕數據、為網頁取名字、引入外部資源(如Css檔、字體包)。從字面header上理解,可以把它當作是載入頭腦的訊息。

  • mete元數據元素


    • 這行是指定文檔的字元編碼,charset屬性拆成語意清楚的話是character set(字符設定),要讓瀏覽器知道它該怎麼去讀你的文字,目前最通用的是UTF-8,它幾乎可以讀所有的語言。


    • 這告訴瀏覽器指定viewport視口的顯示設定,viewport是瀏覽器展示網頁的視窗,它指示瀏覽器網頁的寬高顯示在viewport時的預設值是1.0,也就是100%。

      • name屬性像是指定meta的類型
      • content則是描述這個類型的內容

    • 這行是專門為IE瀏覽器的相容性寫的。http-equiv屬性是用來設定網路編譯行為,HTTP叫超文本傳輸協定,是英文HyperText Transfer Protocol的縮寫,它規範了瀏覽器如何讀懂URL(網址)。
      而它的value(參數)X-UA-Compatible是專門針對IE瀏覽器,要知道,雖然W3組織有擬訂網路規範,但是不一定每家瀏覽器都會完全照規範走,而IE很常出現不相容或不支援規範的情況,這行就是為了解決這個問題。
      而參數ie=edge則表示照IE最新版本的模式去瀏覽網頁,也可以特別寫入特定版本,但通常是寫入ie=edge這個參數值。

  • <title>網頁標題元素

    該元素的內容,就是幫你的網頁取名字,預設會是Document,它會顯示在瀏覽器分頁標籤處,也就是這一頁HTML的名稱,它關乎到搜尋引擎,所以命名是重要的,隨便亂取辨識性就會很差。

  • <head>內還可以放更多東西嗎?

    可以唷,像是引入寫好的CSS檔,或是引入Javascript檔(但Javascript的功能寫好之後不一定會放在head,要看它對應的文檔節點在哪。)

    想看更多的<head>裡的元數據用法請點 這裏

<body>元素

整個網頁展示的內容都放在這裡。顧名思義,<body>是這個網頁的身體,按照腦袋<head>所想的來展示自己的內容。

今天的筆記到這裡。/images/emoticon/emoticon41.gif那麼下一篇我們就要在<body>元素內放入內容囉,期待!

*有任何錯誤或描述不夠精準之處,歡迎指教,非常感謝


上一篇
Day5 動手寫HTML之前(下)
下一篇
Day7 動手寫HTML(2)
系列文
從門外漢到前端新手30

1 則留言

0
Chris
iT邦新手 5 級 ‧ 2019-09-21 12:53:35

你的圖也太用心了!花很多時間厚

真的好厲害,推推

JinWen iT邦新手 5 級‧ 2019-09-21 22:47:06 檢舉

/images/emoticon/emoticon25.gif我用的snipaste,作圖蠻快的唷!

截圖神器!

/images/emoticon/emoticon07.gif

我要留言

立即登入留言