集客多功能小編
2023年10月13日 09:13

1.2.1-HTML的誕生與重要性

HTML的誕生

HTML(HyperText Markup Language,超文字標記語言)是所有網頁的骨架。它出現在1990年,由歐洲核子研究組織(CERN)的英國科學家蒂姆·伯納斯-李(Tim Berners-Lee)發明。他當初只是想讓科學家更方便地分享研究資料,所以設計了一種簡單的標記語言,可以在網頁裡放入超連結,讀者點一下就能從一份文件跳到另一份文件。

HTML的誕生可以追溯到1990年,由CERN的英國科學家Tim Berners-Lee所發明。其初衷是為了方便科學家之間共享研究資料。
HTML的誕生可以追溯到1990年,由CERN的英國科學家Tim Berners-Lee所發明。其初衷是為了方便科學家之間共享研究資料。

HTML的基本結構

HTML的基本結構由一系列標籤(tags)組成,每個標籤都用尖括號包起來,例如 <html> 和 </html>。標籤大多成對出現,一個標示開始,一個標示結束。一份HTML文件的基本結構長這樣:

<!DOCTYPE html>
<html>
<head>
    <title>網頁標題</title>
</head>
<body>
    <h1>這是一個標題</h1>
    <p>這是一段文字。</p>
</body>
</html>

在這個範例中,<!DOCTYPE html> 宣告文件類型,<html> 標籤包住整份HTML文件,<head> 放的是中繼資料(像是標題),<body> 則放網頁真正要呈現的內容。

早期版本的功能和限制

HTML的早期版本(如HTML 1.0和HTML 2.0)功能很陽春,主要用來定義文件的結構和基本格式。當時的標籤大致分成以下幾類:

  1. 文字格式標籤:<h1> 到 <h6> 標籤用來做標題,<p> 用來分段,<b> 和 <i> 則是粗體和斜體。
  2. 超連結標籤:<a> 標籤用來建立超連結,這是HTML最核心的功能之一。
  3. 清單標籤:<ul> 和 <ol> 分別是無序和有序清單,<li> 是清單裡的每個項目。
  4. 圖片標籤:<img> 標籤用來嵌入圖片,不過早期版本還不能調整圖片的高度和寬度。
  5. 表格標籤:<table>、<tr> 和 <td> 可以做出表格,但功能有限,做不了複雜的表格設計。

這些標籤應付早期的網頁需求還算夠用,限制卻也不少。早期的HTML幾乎沒辦法控制樣式和版面,設計師很難做出好看又一致的網頁。它也不支援音訊、影片這類多媒體內容,網頁能做的互動和呈現都很有限。

HTML的發展與進步

網際網路快速發展,HTML也一路跟著演進。HTML 3.2 和 HTML 4.01 加入更多標籤和屬性,網頁設計的彈性變大了。像是 HTML 3.2 加入了 <font> 標籤,可以控制文字的顏色、大小和字型;HTML 4.01 則加入 <div> 和 <span> 標籤,搭配CSS(階層式樣式表)就能做出更複雜的版面和樣式。

不過功能變多,問題也跟著來。各家瀏覽器對HTML標準的支援程度不一,同一個網頁換個瀏覽器可能就跑版,這就是跨瀏覽器相容性問題。另外,HTML 4.01 裡有些標籤和屬性(如 <font> 和 <center>)屬於表現層的標籤,跟HTML重視結構的設計理念互相衝突。

HTML5的誕生與重要性

為了解決這些問題,HTML5在2014年正式發布。它簡化了HTML的語法,也加入不少新特性,讓網頁開發更現代、更有效率。以下是HTML5幾個重要的特性:

  1. 語意化標籤:HTML5 新增了 <header>、<footer>、<article> 和 <section> 等語意化標籤,讓網頁原始碼更好讀,也更好維護。
  2. 多媒體支援:HTML5 原生支援音訊和影片標籤(<audio> 和 <video>),不必再依賴第三方外掛。
  3. 本機儲存:HTML5 提供本機儲存(localStorage 和 sessionStorage),網頁應用可以把資料存在使用者端,效能和用戶體驗都跟著提升。
  4. Canvas 和 SVG:HTML5 支援 Canvas 和 SVG(可縮放向量圖形),網頁可以動態產生和操作圖形,很適合用在遊戲和資料視覺化。
  5. 表單元件:HTML5 強化了表單元件,新增日期選擇器、顏色選擇器等功能,表單的設計和驗證都變得簡單許多。

HTML的重要性

HTML是網頁設計的基礎,也替網際網路的發展打下了根基。有了HTML,資訊可以很快傳到世界各地,知識的分享和交流也變得容易。HTML不斷進化,網頁設計跟著變得更靈活、更強大,網際網路上才能長出這麼多樣的應用。

回頭看,HTML從最初簡單的標記語言,經過多次改版,成了功能完整的網頁開發工具。它替網頁提供結構,也靠著一次次加入新特性,讓網頁的互動性和用戶體驗越來越好。只要網際網路還在發展,HTML應該都會是其中很關鍵的一環。

從HTML的演進可以看出,好網站的根基在於清楚的結構與合乎標準的寫法。企業規劃官網時,語意化標籤、跨瀏覽器相容與日後維護都值得一併考量;尋找網頁設計公司推薦時,不妨多看團隊是否紮實掌握這些基本功,再挑選合適的高雄網頁設計公司。

HTML的存在超越了編碼和技術。它是一種語言,一種溝通方式,一種將想法和資訊呈現給全世界的工具。隨著網頁設計領域的不斷發展,HTML仍然保持其核心地位,並繼續塑造我們所知道的網際網路。

集客多功能小編

充滿創意和熱情的小編。善於將複雜的技術概念轉化為簡單易懂的內容,讓大家更了解我們的專業。常在社群平台上與粉絲互動,分享最新的設計趨勢和成功案例,致力於打造公司的品牌形象與價值。

設計流程

集客多企業架站雖是針對中小企業網站所規劃的架站方案,但製作流程比照大型專案開發,決不馬虎。

STEP-1
視覺設計

全站視覺設計

透過影像編輯軟體中設計網站介面,並提供客戶預覽網址校稿。

STEP-2
網頁製作

網頁製作切版

以最精準的 HTML標籤結構將視覺設計稿轉換成網頁的格式。

STEP-3
程式製作

程式化與後台製作

我們開發後台力求精簡好用,讓客戶第一次使用就上手。

STEP-4
上架與維護

上架與維護

提供後台測試點,校對後正式上架,主動遞交網站sitemap提供搜尋引擎蒐錄。