--- title: 什麼是 HTML、CSS？ tags: 網頁組 --- # 什麼是 HTML、CSS？- 前言 在學習網頁時，通常最先提到的就是 HTML 和 CSS，是最基礎的東西，那他們分別是什麼呢？HTML 就是一個網頁的結構，描述了這個網頁整體的架構會長怎樣，而 CSS 就像是形容詞一樣，會修飾這個網頁的長相，決定這個網頁該如何呈現，那下面我們就來看一下簡單的介紹。 # 本節目標 - 認識 HTML，CSS 是做什麼的 # HTML - Hypertext Markup Language 的縮寫，也就是「超文本標記語言」 - 標記語言不是程式語言（標記 Markup、沒有程式邏輯) - 有各式各樣的標籤去定義網頁的內容要如何呈現 所有的網頁內容，都必須透過 HTML 標記來定義，HTML 就是整個網頁的結構。 任何一個副檔名為 .html 的檔案，你都可以使用編輯器(VS Code)打開來編輯，或是透過瀏覽器開啟來查看網頁的實際樣貌。 ## 標記語言是什麼? #### 標籤（Tag） - 必須要有頭有尾(某些標籤例外，如：meta、link、img、br、hr) - 中間能夠有內容 - 可以有屬性 ``` html 標籤頭 標籤內容 標籤尾 👇 👇 👇 <div style="color:red"> HTML基本語法 </div> 👆 標籤屬性="屬性內容" ``` ![](https://i.imgur.com/kqr3h6Y.png) HTML 程式碼示意圖 接著我們來認識一下基礎的程式碼有哪些東西？ ### **宣告** 第一行是宣告這個檔案類型是 HTML，告訴瀏覽器這份文件是一個 HTML 的網頁。 ### **<html></html>** `<html>...</html>` 包住了整個網頁，表示這是一份 HTML 文件。被他包住的內容，稱為網頁「元素」(element)。一個 HTML 就有如人體一樣，有頭有身體，包含了 `<head></head>` 和 `<body> </body>`兩個網頁元素。 ### **<head></head>** 被`<head></head>` 包圍的資訊稱為「標頭」，宣告了許多的標籤，代表著這個網頁的資訊，而這些標籤並不會顯示給使用者看，例如 meta、link、script。 ### **<body></body>** `<body></body>` 中的內容會直接被使用者所看到，而這些東西會需要 CSS 來修飾他，body 內會包含的標籤，如 div、span、a、img 等等。 # CSS 那就像前言所提到的，我們有了 HTML 的結構後，我們還可以使用 CSS 來形容這個網頁的長相，每個結構該長成什麼樣子。 ![](https://i.imgur.com/74a5NWB.png) CSS 程式碼示意圖 **CSS 又被稱為階層樣式表**，在 HTML 中，我們可以替每個段落進行命名，來區分他們。接著在 CSS 可以透過選擇器（CSS selector）對我們指定的段落進行設定。 如下圖我們有：.header、.content，瀏覽器會透過這樣的關聯知道我們設定的是哪個段落，最終呈現出來的段落就是我們所設定的樣式。 ![](https://i.imgur.com/10XWezN.png) :::success - 線上位置：https://jsfiddle.net/Blajja0916/4wymqarp/1/ ::: --- ## 參考資料 :::info [網頁程式設計入門，一文讀懂 HTML、CSS](https://tw.alphacamp.co/blog/html-css-web-design) ::: --- HTML 和 CSS 基本的介紹就到這邊，[下一篇](/1WdRhi1NQ4WD9rT8ZkmOgw)我們將會進入到 HTML 的實際練習。