iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
0
自我挑戰組

我要努力成為軟體後端工程師!系列 第 3

Day 3-初步認識HTML的標籤語法

  • 分享至 

  • xImage
  •  

-前集提要-

提到了HTML和CSS,這兩者之間的超~簡易解說

一是網頁的骨架(架構組成),另一個是替網頁裝扮美化。

但因為目標是後端工程師,在前端的介紹就不會著墨太多

不過還是要了解跟熟悉網頁排版的語法指令。

HTML的一些主要標籤範例
標籤範例

  • <!DOCTYPE html>
    在一份標準的HTML文件中,在第一行都會有此語法;DOCTYPE其實是Document Type的簡寫,也就是文件類型的意思。作用是告訴瀏覽器這是一份以「HTML標記語言(markup language)」所撰寫的文件,所以請用HTML的定義來解讀。

  • <html></html> - 被視為根元素(root element),包含了顯示在這個頁面上的內容。

  • <head></head> -  顧名思義就是"頭",也可稱作"開頭" 、 "標頭",包圍著所有資訊。宣告各種網頁資訊,這些資訊不會顯示給使用者看,主要溝通對象是瀏覽器與其他的網路服務,如搜索引擎各種網站網頁 等。宣告的資訊包括網頁標題外部連結網頁樣式JS腳本meta tag blah~ blah~

  • <body></body> - 就是身體的主體,包含了要在所有瀏覽器所要呈現給使用者看到的樣貌。也就是網頁的核心架構,所有的架構語法都是寫在body內。

  • <meta charset="utf-8"> - 規定了你的文件使用utf-8這種字元編碼,避免你的文字換瀏覽器有無法呈現的煩惱。

  • <title></title> - 呈現於瀏覽器的網頁標題。如下圖所示

網頁名稱
顯示名稱

  • <!-- --> 註解(Comment)。在comment裡的東西會被機器直接跳過,通常是協作時交流的注意事項,或是自己的碎念?! 又或是避免偶爾金魚腦發生情況,需要提醒自己的時候。

未完待續.....


上一篇
Day 2-前置作業 - HTML 和 CSS 的相互合作
下一篇
Day 4-HTML中的列表標籤介紹
系列文
我要努力成為軟體後端工程師!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言