【Front-End】 HTML、CSS

【Front-End】 HTML、CSS === # Outline **- HTML網頁與瀏覽器** **- HTML 簡介、語法基礎教學** ## HTML網頁與瀏覽器所謂的「網頁」就是 HTML 文件，而瀏覽器是一種能夠解析 HTML 的工具，而**「HTML 是一種標記語言 (markup language)」**的意思，HTML 有它自己的語法格式，如**開頭/結尾標籤、屬性，與巢狀結構**。我們俗稱的「網頁」都是 HTML 文件。說的精確一點，我們看到的「網頁」是「瀏覽器解析了 .html 文件以後，呈現出來的樣子」。 **流程示意如下:** ![HTML流程](https://i.imgur.com/hL4dXt6.png) **HTML：超文本標記語言** HTML 的全稱是 **Hypertext Markup Language**，中譯**「超文字標記語言」**。注意，他是 markup language，而不是 programming language，在分類上 HTML 並不是「程式語言」。超文本就是今天俗稱的網頁，前網頁時代的人只看過紙上的「文字 (text)」，所以遇到網頁這種可以連來連去的文件，就稱為**「超文字 (hypertext)」**，這是一個很有時代感的用詞。而**「標記語言 (markup language)」**是一種專門把內容結構化、資訊化的語言，markup 這個字描述了類似螢光筆劃記的感覺，**把文字標記起來，賦予某種特性**。例如下圖左是我們期待呈現的排版結果，文件裡有不同層級的標題、有段落文字，還有一小段用粗體強調的文字。而下圖右的藍色標記就是 HTML 標籤，我們可以用**HTML 標籤**把文件的結構呈現出來。 ![HTML結構](https://i.imgur.com/u9NW3y6.png) 瀏覽器知道怎麼處理這些 HTML 標籤，只要你用了對的標籤，瀏覽器就能為你做適當的處理。 **HTML 標籤基本語法** 定義標籤 **一個有效的 HTML 標籤寫法如下：** ![HTML標籤](https://i.imgur.com/462GzME.png) 用**尖括號 < >** 來定義 HTML標籤，而一對標籤會有： **開始標籤 \<h1>** **結束標籤 \</h1>** 標籤名不變，但加上一個**斜線 (/)** 除了少數特殊情況，HTML 的標籤一定是成雙成對。被 **\<h1>...\</h1>** 包圍的內容，我們稱為**「一個網頁元素」**。 **屬性** 你可以在開頭標籤名稱後空一格，加上**屬性 (attribute)**。這裡先用**超連結 \<a>** 標籤舉例，請你先看個長相，之後我們在實作中會認真介紹這些屬性： ![attribute](https://i.imgur.com/6DRbwaJ.png) **先看語法格式就好：** 用空格隔開屬性屬性名稱後用 **= 加上一組字串，這組字串是該屬性的設定值** **巢狀關係** HTML 標籤可以形成**巢狀的關係**，一層包一層： ![巢狀關係](https://i.imgur.com/4OaoBvy.png) 當我們要指稱一組被標籤包圍的網頁內容，我們會叫它**網頁元素 (element)**。以上圖為例，有 h1 元素、p 元素、strong 元素，而且 p 元素是 strong 元素的父元素。當我們提到「巢狀」的時候，代表他的結構是**對稱的，開頭與結尾標籤不可以交錯：** ![巢狀結構](https://i.imgur.com/ssTtwu1.png) **階層關係** **網頁元素之間會有階層關係**，以上面的例子來說，p 是 strong 的父元素，而 strong 是 p 的子元素。 ## HTML 簡介、語法基礎教學 **HTML簡介** HTML為所有網頁技術最基礎的部份，學起來易學難精，HTML就是一個特殊格式的文件，它使用**標籤 Tag** 來表示功能單位，它就是由一堆標籤所組成的東西，這個標籤會以所謂的**巢狀結構**來組合標籤呈現，所謂的巢狀結構就是外層、內層、更內層一層包一層，它的層次感非常的清楚。 **標籤 Tag 簡介** 標籤就是使用**角括號<>**包裹住的文字開頭標籤 \<html>: html的開頭標籤 \<body>: body的開頭標籤結束標籤 \</html>: html的結束標籤 \</body>: body的結束標籤每一個開頭標籤都會對應一個結束標籤，前面加**斜線 (/)** 就是結束的標籤，一個開頭一個結束這樣子就是一對標籤。標籤的內文 \<body>內部的文字\</body> 整個html的標籤會有一個開頭一個結束，標籤的裡面可能包含其它的東西，我們稱為標籤的內文，標籤的內文可能是單純的文字或為巣狀結構包含其它的標籤。 **純文字的內文** \<h1>這裡只有文字\</h1> h1這個標籤開頭跟結束裡面就只有單純的文字包含其它標籤 \<head>\<title>標題\</title>\</head> head這個標籤開頭跟結束裡面包含另外一個標籤我們稱為title，title這個標籤裡面就只有單純的文字 **標籤的屬性** 標籤的屬性就是標籤的一些附加資訊，有一些標籤它需要一些附加資訊才能夠協助標籤正常運作，屬性的語法如下: 屬性的名稱=**"屬性的內容"** 屬性放在開頭標籤的角括號中 \<a **href="https://google.com/"**>Google\</a> 標籤可以包含一到多個屬性 \<div **id="title" class="head"**>Title\</div> **無內文的標籤簡寫** 標籤有開頭有結束，開頭標籤跟結束標籤裡面常常會有文字，但是有一些標籤它的開頭標籤跟結束標籤裡面沒有文字，我們也不會放文字，也就是有些功能性的標籤本身不需要內文有內文的標籤 \**裡面會變粗體字**\ 沒有內文的標籤通常在寫這類的標籤的時候，裡面不會放任何的內文，不會有任何的文字在開頭標籤跟結束標籤的中間 \<img>\</img>: **img是要放一個圖片** \<hr>\</hr>: **hr是要放一個水平線** 沒有內文的標籤可簡寫成，把**斜線 (/)**打在標籤的後面，它代表開頭標籤跟結束標籤整合在一起 \<img/> \<hr/> **註解** 我們在HTML裡面可以寫所謂的註解，執行時會忽略的內容寫給人看的，瀏覽器在看我們網頁的時候會把註解給忽略，它不會呈現出來，這是寫給程式設計師自己看的，我們有時候會在註解裡備註這行程式碼的用途。 HTML寫註解會使用**\<!- -**和**\- ->**這兩組符號將註解包裹起來 \<!- -這是註解- -> \<!- - 這也是註解 \- -> 基礎網頁結構每個網頁都共用的基礎結構 ```htmlembedded= <!DOCTYPE html> <html> <head> <meta charset ="utf-8"/> <title>網頁標題</title> </head> <body> 這是網頁主畫面中的內容 </body> </html> ``` <!DOCTYPE html> <html> <head> <meta charset ="utf-8"/> <title>網頁標題</title> </head> <body> 這是網頁主畫面中的內容 </body> </html>