Web標準是什麼

【HTML指南】Day02 – Web 標準是什麼? 會影響全世界?

Web 這個字是英文,中文是 ” 網頁 ” 那有沒有想過是誰先制定標準的,學任何東西如果不先弄清楚為什麼要這要做的初衷,會導致你在學習任何技能或是技術陷入迷思,在這篇文章中主要是講述 Web 標準的概述,讓你在學習 HTML、CSS 或是 JavaScript 心裡至少有一個底在。

最多人心中的疑問是以下最常有的問題

  • 誰提出全球資訊網這概念的?
  • Web 有哪些守則需要遵守呢?
  • 不遵守Web 標準會怎樣?
點我瞭解 小青如何每月多賺5位數台幣

Web 標準重要嗎?

非常的重要! Web 標準是由 W3C 組織和其他標準化組織一起坐下來好好談談要怎麼好好來制定一系列標準的集合

其中最先由提姆·柏內茲-李所創辦的組織 W3C 也就是 World Wide Web ( 全球資訊網 ),他是在1989年差不多30多年前提出的概念,當時並沒有全球網路所以也沒有上網查資料打線上遊戲通通都沒有。

那時候只有區域網路,所以每個組織內部都有自己的資料庫,如果你要查找資料就必須申請那邊的許可,他們審核同意才會寄郵件給你,你才能到當地去使用電腦查內部資料,也就是說今天我要查的東西要去當地!!! 所以他們都會出遠門在當地短期住下來等研究好的資料才回家去,是不是超不方便!!!

這時候提姆·柏內茲-李就發現了這問題於是就把他給解決了,30年前的網際網路非常的陽春 HTML 也是最簡單的版本,超文本就此誕生,並讓當地圖書館或是各機構組織的內部系統可以大家透過超文本轉跳到你家去,從此解決我不需要申請審核還要跑去當地住的錢,大大的提高學術界和科技的進步。

題外話,隨著網路越來越普及人們需求也愈來越高才觸史網站、網頁越來越漂亮和功能越來越多,一切都先解決最大的需求其他才是其次。

當時提姆·柏內茲-李提出了關鍵技術是可行的,但沒有任何人接受他的建議,他只好自己動手完成。

  • URI (Uniform Resource Identifier) 統一資源識別碼
  • HTML (HyperText Markup Language) 超文本標記語言
  • HTTP (HyperText Transfer Protocol) 超文本傳輸協定

提姆·柏內茲-李 在1994年向全世界宣布 WWW 不會去申請專利也不會增收公司的專利費用,當然也不會向民眾收取任何費用,所以促使全球網路發展越來越快速,在這可以想想幾個問題。

  • 如果 WWW 收費會使全球科技進步落後嗎?
  • WWW 收費後提姆·柏內茲-李有可能成為全世界最富有的人嗎?
  • 當時是否有哪些人在研究類似全球網路的技術嗎?

這些問題往後小青會專門寫一篇文章來好好介紹,千萬不要錯過唷!

點我瞭解 小青如何每月多賺5位數台幣

為什麼需要 Web 標準?

看完了 Web 標準重不重要,再來我要對如果要寫網頁、網站不管你要寫 HTML、CSS 還是 JavaScript 可就重要了 W3C 和其他組織所制定的標準你一定要遵守,換句話說就是你玩遊戲錢一定會先看規則比較快上手,如果你不遵守規則那就不要玩其他人也不會理你,同理 Web 標準也是一樣的。

寫網站、網頁前,我們要在哪裡展示呢?你有想過嗎? PC、手機? 如果你這樣想也對也不太對,不管事在PC端還是手機端還是需要有一個瀏覽器,瀏覽器的功能就是渲染你寫的3大語言的工具。

因為你是寫網站,而不是開發瀏覽器,瀏覽器都已經由很多家大廠開發出來了,我們先用就好往後如果你對瀏覽器原理技術和開發有興趣再去研究就好。

各大廠瀏覽器必定遵守 W3C 的所制定的標準,如果瀏覽器不遵守會發生什麼事?

  • 前端人員不會去使用他們家瀏覽器做開發,因為開發語言會不同
  • 不遵守的瀏覽器很快就消失
  • 不遵守的瀏覽器使用人數很低

這邊可以好好想想,如果有一個瀏覽器就是不遵守標準,公司會願意在沒什麼人的瀏覽器的網站,多花錢聘用一個人員來開發? 我想應該不會吧! 所以現在的主流瀏覽器都是遵守規則的,前後端人員就不用再多學一大堆有的沒有的語言了。

如果符合 Web 標準會有以下優點:

  • 降低網站流量費用
  • 讓網站更容易維護
  • 更容易被搜索引擎索引
  • 提高頁面瀏覽速度
  • 網站內容容易被不同設備瀏覽
點我瞭解 小青如何每月多賺5位數台幣

Web標準有哪些所構成?

主要有三個方面需要特別注意 

  • Structure ( 結構 )
  • Presentation ( 表現 )
  • Behavior ( 行為 )

Structure ( 結構 ) 

結構是對於網頁元素進行整理和分類,意思是整個頁面需要有整體的骨架骨幹

對應語言: HTML

Presentation ( 表現 )

表現是用在設置網頁元素的版式、顏色、字體大小…等外觀的樣式,有了骨架骨幹再來是需要考慮到我們要呈現的形式內容

對應語言: CSS

Behavior ( 行為 )

行為是指網頁模型也就是有了結構和表現一起出現,才會有交互或是交換的編寫,講幾單一點就是和使用者能夠產生互動

對應語言: JavaScript

小總結:

所以我們可以知道了Structure ( 結構 )、Presentation ( 表現 )、Behavior ( 行為 ) 三者都是分離的

你寫 HTML 就是在寫結構,寫 CSS 就是再寫表現,他們都是互不相干的分得很清楚也就是分工分得很細

總結:

我們知道了 Web 標準的重要性,不過知道就好因為不是做瀏覽器開發的,只要知道瀏覽器如果不遵守 W3C 的準則就會讓網站開發人員很頭痛,要多學很多語言! 我想你不想吧,如果大家都統一,HTMLCSSJavaScript都是通用的,也不需要為特定瀏覽器特別去寫一個特別的樣式。

小青我建議學習順序是以下先後順序

房子有整個 Structure( 結構 HTML ) 骨架,最基本的遮風避雨更能是不是我們才來要求顏色這塊,有多的預算才會先考慮是吧! 最基本遮風避雨能滿足你後才會考慮 Presentation ( 表現 CSS )

牆壁顏色、窗戶顏色門窗大小對吧!

當結構和表現都已經滿足到我們一個頂點後,是不是才會開始追求另一個層次的房子也就是智慧型家電功能…等你能跟它互動,也就是 Behavior ( 行為 JS ) 就出現拉! 如果你先學 JS 因為你可能不了解他們本質,那它要控制什麼?

所以前端技術學習順序都是先 HTML -> CSS -> JS ,好啦!本篇文章就到這先結束拉!希望本篇文章對你有所幫助和啟發那我們在下一篇文章見吧!

點我瞭解 小青如何每月多賺5位數台幣

其他相關文章推薦:

能看到這裡通常只有 1% 的人,很感謝您可以閱讀到這裡(鞠躬)
本篇文章歡迎社群分享,可按分享按鈕,讓更多的人知道此篇文章
如果是引用本篇文章任何段落請附上本篇文章連結即可唷!
嚴禁搬運整篇文章到你個人部落格、寫成新聞稿
這麼做你會被任何搜尋引擎懲罰 Ban 掉
如需合作請右上角服務項目 -> 聯繫我們
by 小青

發表迴響