# HTML and CSS learning process and details 剛好有時間來好好學習網程設，這篇主要紀錄HTML+CSS的一些學習心得還有細節 我是從MDN的文件來學的 https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML Getting Started with HTML --- Reference: https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Getting_started **HighLights** * HTML是一種Markup Language(用來告訴瀏覽器該如何呈現網頁)，不是一種程式語言 * 由elements組成，且elements不區分大小寫，ex: \<title> 標籤可以寫成 \<TitlE> ，任何大小寫排列組合都可以，不過為了readibility還是維持小寫比較好。 :::info **甚麼是element?** 以下三項加起來就是element 1. opening tag 2. closing tag 3. content ::: element又區分成幾種重要的類別，以下有兩個我認為重要的觀念 * 區塊級元素: 在頁面中獨佔一行，做為頁面的structural elements。不會nesting在行內元素中。 * 行內元素: 放在區塊級元素中的內容，不會成為一行 以下有個範例來介紹 將以下的code放入頁面中，看看有甚麼不同 ```html= //行內元素 <strong>Hello</strong><strong>Hey</strong> //區塊級元素 <p>Hello</p><p>Hey</p> ``` :::success 展示區塊 <strong>Hello</strong><strong>Hey</strong> <p>Hello</p><p>Hey</p> ::: 可以看到行內元素不會換行，而區塊級元素會自己換行，並且上下都有自己的空間，這些空間是由於瀏覽器套用的**CSS styling** 其實在HTML 5當中元素的類別已經被重新定義，遠較這兩種複雜，詳細可見: https://html.spec.whatwg.org/multipage/indices.html#element-content-categories * 空元素(empty elements): 通常用來嵌入物件在頁面中。並非所有元素都有opening tag和closing tag這樣的組合，例如 \<img> 例如將以下的code放入頁面會有這樣的效果 ```html= <img src = "https://s.yimg.com/ny/api/res/1.2/DrotxunOuC3lt2bpuaOIyA--/YXBwaWQ9aGlnaGxhbmRlcjt3PTY0MDtoPTM2MA--/https://s.yimg.com/uu/api/res/1.2/AiK5e8BSCt0itRpj796AFg--~B/aD01NDA7dz05NTk7YXBwaWQ9eXRhY2h5b24-/http://media.zenfs.com/en/homerun/feed_manager_auto_publish_494/ee117c4fe22149cd52eeae301eec1a17"> ``` <img src = "https://s.yimg.com/ny/api/res/1.2/DrotxunOuC3lt2bpuaOIyA--/YXBwaWQ9aGlnaGxhbmRlcjt3PTY0MDtoPTM2MA--/https://s.yimg.com/uu/api/res/1.2/AiK5e8BSCt0itRpj796AFg--~B/aD01NDA7dz05NTk7YXBwaWQ9eXRhY2h5b24-/http://media.zenfs.com/en/homerun/feed_manager_auto_publish_494/ee117c4fe22149cd52eeae301eec1a17"> <p> </p> * 屬性 Attributes: 關於元素的額外資訊，格式應該如下 ```html= <p class = "attribute">Content</p> ``` 例如以下在\<a> 元素底下加入屬性後，會發生甚麼不同呢 ```html= //only 1 attribute <p> This is my <a href="https://github.com/yi-shin-cheng">Github Page</a> </p> //add attributes <p> This is my <a href="https://github.com/yi-shin-cheng" title="YiShin Cheng's Github Page" target="_blank">Github Page</a> </p> ``` <p> This is my <a href="https://github.com/yi-shin-cheng">Github Page</a> </p> <p> This is my <a href="https://github.com/yi-shin-cheng" title="YiShin Cheng's Github Page" target="_blank">Github Page</a> </p> :::info **href**是用來提供想要連上的網址 **title**是用來附加有關連結的資訊 **target**用來表示是否在新分頁開啟此連結，"_blank"代表是，""代表否 ::: 如果忘記加上attributes的引號，會發生甚麼事情呢? 就以上的例子來說，如果我忘記加上title的引號 ```html= <p> This is my <a href="https://github.com/yi-shin-cheng" title=YiShin Cheng's Github Page>Github Page</a> </p> ``` 這時候title會認為自己有四個屬性，一個是title(內容只有YiShin)，另外三個則是boolean attributes，Cheng's、Github、Page。這會導致意想不到的錯誤，所以一定要記得加上引號 --- 再來我們看到一個基本的html檔案會具備的幾個元素 ```html= <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body> <p>This is my page</p> </body> </html> ``` 1. <!DOCTYPE html> : 用來標註文件類型。從前是個重要的東西，作為遵守一系列規範的連結，現在No one cares。只需要形式上的加入它就夠了。 2. \<html>\</html>: root element。用來包裹住頁面全部內容。 3. \<head>\</head>: 關於頁面的所有重要資訊。 4. \<meta charset="utf-8"> : 用來表示你的文件所使用的文字編碼，utf-8基本上包含所有你可能使用到的語言字元編碼，所以通常會加上它。 5. \<body>\</body> : 你想呈現的內容 Head in HTML --- *期末考終於結束了，有時間繼續* Reference: https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML **Highlights** * head裏頭的內容不會顯示在頁面上，主要是用來容納文件的metadata * \<title> 是用來表示HTML文件標題的metadata * Metadata is data that describes data * 幾種常見的metadata有\<meta charset="">、\<meta name="description" content="some descriptions">等等 * 有種很酷的metadata是由facebook發明的[Open Graph Data](https://ogp.me/) * 把以下的code加入head當中可以引入你想用css stylesheet ```html= <link rel="stylesheet" href="my-css-file.css"> ``` * 用以下的方法把javascript給加入網頁，此部分不一定要加在head裡面，通常會加在整個HTML文件的最下方(注意，script不是empty element，所以我們需要closing tag) ```html= <script src="my-js-file.js"></script> ``` HTML texts --- Reference: https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals **Highlights** * 架構化層級，\<h1>應該用來表示整個頁面的標題，\<h2>用來表示各章節標題，依此類推，共有六個層級可用 * 一個頁面最好只用一個\<h1> * 不要在\<h2>之前使用\<h3> * 頂多使用到三個層級，不然讀起來很亂 * \<em>斜體\</em> * \<strong>粗體\</strong> * \<i>italic\</i>、\<b>bold\</b>、\<u>underline\</u>，應該知道他們是甚麼意思，不過現在已經不常用 Hyperlinks --- Reference: https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks 作為許多網頁的必要元素，這篇文章讓我獲益良多 **Highlights** 例如以下基本的超連結 <p> This is my <a href="https://github.com/yi-shin-cheng" title="YiShin Cheng's Github Page" target="_blank">Github Page</a> </p> 裡面的元素在第一篇已經介紹過，title可以用來提醒使用者關於這個連結的一些資訊，target則是可以選擇要在原來的頁面跳轉連結還是開啟一個新頁面 * Block level links 點擊以下圖片 <p> <a href="https://www.youtube.com/watch?v=3wdHpm6wQME"> <img src="https://www.vscinemas.com.tw/vsweb/upload/film/film_20220419003.jpg" alt="a link to the movie: top gun"> </a> </p> ```html= <p> <a href="https://www.youtube.com/watch?v=3wdHpm6wQME"> <img src="https://www.vscinemas.com.tw/vsweb/upload/film/film_20220419003.jpg" alt="a link to the movie: top gun"> </a> </p> ``` * URL(Uniform Resource Locator)，通常一個網頁的網址是由它的 網域名稱+該網頁html檔的檔案位置 ，來組成的 * 通常一個專案的根目錄都會放置一個index.html來做為瀏覽該專案的入口，大多的web server也會在沒有特別指出的時候，自己尋找index.html * href裡面可以放很多種形式的url來連到相同的頁面，分別為絕對URL和相對URL * href裡面放相對url就是代表要連過去的網頁和當前網頁的關係 * 盡量使用相對url，增加可讀性也增加效率，絕對url會讓瀏覽器先查看該網域的DNS，然後再一步一步找到該網頁，相對url的話，瀏覽器就可以直接從那個server開始搜尋 * 要連結到非html文件時一定要先聲明