HTML - HackMD

# HTML tags: `web` `html` `frontend` ### 關於HTML 一個網頁最基本由HTML開始，而HTML並非一成不變，他會隨著時間持續更新規格，目前最新的版本為HTML 5，於2014年10月28日，W3C正式發布，它並不是全新的規格，而是基於HTML 4上面來新增功能，也刪除了一些過時的元素，例如：applet、center等等。 ![](https://i.imgur.com/GulRGLk.png) ### 將內容與樣式分開 HTML、CSS與Javascript都是有不同目的的語言，HTML用來提供內容與資訊，CSS用來決定網頁上一切事物的外觀，如：字體、字型、顏色、尺寸等等，而Javascript用來讓網頁有功能、邏輯與動作效果，如：顯示時間、判斷使用者輸入直是否正確、數學計算與根據使用者動作決定畫面的隱藏與顯示等等。雖然在HTML裡面可以直接嵌入CSS與Javascript程式碼，但這將會造成HTML原始碼本身變得複雜且難以閱讀，甚至在找問題時更加困難，將這三種語言分開來會是比較好的做法，盡量保持網頁結構的單純。 ### Web標準 W3C（World Wide Web Consortium）是網頁技術標準的組織，它雖然是網頁標準的一個官方組織，但是其納入的網頁標準卻不是強制性的，瀏覽器可以自行決定要如何解譯網頁文件，但大致上來說，瀏覽器都會遵循W3C的標準規格，因為如果該瀏覽器顯示出來的網頁跟大家都不一樣，那就沒人會願意使用，但即使瀏覽器大部份都依照W3C的規格來開發，但仍然不盡相同，因此最令前端設計師頭痛的，莫過於瀏覽器的相容性；例如：某些標籤可能A瀏覽器可以辨識，但B瀏覽器卻無法辨識，使用者使用的瀏覽器因為版本不同，而無法支援最新的CSS效果等等。 > W3C官方網頁： > > - HTML和CSS標準規格：https://www.w3.org/standards/webdesign/htmlcss > - Javascript API：https://www.w3.org/standards/webdesign/script.html > - w3school：https://www.w3schools.com/default.asp > > W3School有HTML、CSS與Javascript學習的一切資源，請多加善用。 ### HTML語法規則 - 規則１：所有的HTML元素都有「開始」標籤和「結束」標籤，而該元素的內容放在兩個標籤內，例如： ``` <開始標籤>元素內容</結束標籤> ``` > 雖然瀏覽器有時很聰明，當你沒有加上結束標籤時仍然可以正常顯示，但仍請保持正確的標籤規則。 - 規則二：如果該標籤內不需要元素內容，則稱為空標籤，可以將「開始」標籤與「結束」標籤簡寫為： ``` <空標籤 /> ``` - 規則三：巢狀標籤，HTML元素內可以標含其它元素，但必須將其完整包圍，也就是不可以將被包圍的元素的「結束」標籤放到包圍該元素的「結束」標籤下面，例如： #### 正確： ``` <article> <h1>文章</h1> </article> ``` #### 錯誤： ``` <article> <h1>文章 </article> </h1> ``` - 規則四：屬性，有些標籤需要透過屬性來設定其特殊功能，例如: `<a>`標籤為超連結標籤，需要透過`href`屬性來設定要前往的目的地，範例： ``` <a href="https://www.google.com">前往Google首頁</a> ``` - 規則五：標籤名稱使用小寫英文，雖然這個規則不是強制的，也就是說HTML元素名稱並不會區分大小寫，<P>和<p>都是一樣的意義，但W3C仍建議HTML內全部使用英文小寫來作為標籤名稱，因為小寫英文字母會比大寫來的容易閱讀。 ## HTML結構 #### 文件類型宣告（DOCTYPE） HTML檔案第一個元素就是「文件類型宣告（doctype）」，doctype告訴瀏覽器這個頁面使用哪一版的HTML，對HTML 5來說，doctype為： ``` <!DOCTYPE html> ``` 這個元素較為特別，不需要結束標籤，也是唯一一個不需要的。 #### HTML結構接著doctype後面則為HTML的全部內容，劃分為兩個部分：<head>與<body>，這兩個部分被<html>元素包圍： ``` <!DOCYPTE html> <html> <head> ...這裡是head元素內的內容，用來放置該HTML文件的資訊或設定，不會顯示在瀏覽器上... </head> <body> ...這裡是body元素內的內容，所有顯示在網頁上的資料都放在body裡面... </body> </html> ``` #### 網頁編碼我們必須在<head>元素內使用<meta>元素的`charset`屬性來設定該HTML文件的文字編碼，如果設定了錯誤的文字編碼，使用者在瀏覽器上可能會見到亂碼，網頁建議使用支援多國語言且節省網路流量的UTF-8編碼，例如一個一般的HTML 5網頁編碼通常會這樣設定： ``` <meta charset="utf-8" /> ``` #### 網頁標題在<head>元素內，我們還必須設定該HTML文件的標題，標題不會顯示在網頁上，而是用來在瀏覽器本身的視窗列或是標籤列顯示，或是當使用者將網頁加入書籤或我的最愛時，預設的網頁名稱。 ``` <title>Aaron Ho部落格</title> ``` #### 視埠（viewport） viewport也是<meta>的元素，是RWD網頁可以運作的其中一個關鍵，在非RWD網頁的時代，並不需要設定這個屬性。 viewport屬性用來指示瀏覽器應該用裝置解析度來顯示網頁，而非使用螢幕的真實解析度，在沒有設定viewport的桌上型電腦，用的就是全尺寸的顯示方式，這是大家很習慣的方式，而在行動裝置上，如果使用這個方式來顯示網頁，網頁的字體將會被縮放的方長的小而難以閱讀。與viewport屬性相關的設定有： - `width`：寬度，告訴瀏覽器如何縮放網頁，`width=device-width`表示使用瀏覽器的全尺寸來顯示，如果沒有設定，將會以設備的原始尺寸來顯示，例如：iPhone4的原始解析度寬為980像素，而瀏覽器顯示寬度為320像素。 - `initial-scale`：初始縮放，告訴瀏覽器載入網頁後一開始要如何縮放，即縮放倍數，1為原始大小，2為兩倍，以此類推。 - `user-scalable`：設定使用者是否可以自行縮放網頁，預設為`yes`，要禁止使用者縮放可以設為`no`。 - `maximum-scale`：最大允許縮放倍數，如果是`maximum-scale=2`，表示使用者只能放大兩倍，如果為`maximum-scale=1`則表示完全無法縮放，意思等同於`user-scalable=no`。 > 雖然viewport也是<meta>元素的一個屬性，但是它必須單獨使用一個<meta>標籤來設定，而不可以與其它屬性（如：charset等）同時設定，有些瀏覽器或許可以支援，但並不保證。一個常見的viewport設定： ``` <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/> ``` #### 特殊字元網頁上有一些特殊字元，如：`<`或是`&`等等，因為它們是HTML語法的一部分，當你想顯示在網頁上時，必須使用特殊的方式來表示，否則瀏覽器會將它當成是HTML語法的一部分，而造成顯示問題。 | 特殊字 | 描述 | 文字表示方式 | 數字表示方式 | | :----- | :----------- | :----------- | :----------- | | | 空字元 |   |   | | < | 小於符號 | < | < | | > | 大於符號 | > | > | | & | 海錨符號 | & | & | | " | 雙引號 | " | " | | ' | 單引號 | ' | ' | | ¢ | 美元分 | ¢ | ¢ | | £ | 英鎊 | £ | £ | | ¥ | 日圓 | ¥ | ¥ | | € | 歐元 | € | € | | © | 版權符號 | © | © | | ® | 註冊商標符號 | ® | ® | ### 組合字（變音符號） | 標記 | 字元 | HTML組合標記 | 結果 | | :--- | :--- | :----------- | :--- | | ̀ | a | à | à | | ́ | a | á | á | | ̂ | a | â | â | | ̃ | a | ã | ã | | ̀ | O | Ò | Ò | | ́ | O | Ó | Ó | | ̂ | O | Ô | Ô | | ̃ | O | Õ | Õ | ## HTML5元素 ### HTML5新增的元素 HTML5新增了許多特定的語意標籤以支援網頁版面設計，用來取代了不具意義的div、span標籤，網頁設計師利用這些與義標籤建立具有明確架構定義的網頁，讓整個HTML的結構更有意義並且更容易被理解。 ![img](http://www.aaronlife.com/v1/teaching/images/img_sem_elements.gif)使用語意標籤來建立網頁版面(圖片來源：W3School) #### header 網頁頁面的頂部，通常用來放置網站的主要標題、圖片與LOGO等主要的資訊。 #### hgroup 定義著一個區段或一份文件的標題，該元素是用來對 h1 到 h6 的標題群組化。其中最大的標題為區段的主要標題，其它則屬於次要標題。當標題擁有多個層級時，這個元素會被用來對 h1-h6 元素的集合做群組化。 #### nav 通常為網站的主要功能選單。 #### article 網頁中的一個內容區塊，是獨立且完整的內容，在一個網頁中可以有很多個。 #### aside 主要內容之外的其他內容，可以為網站的側邊欄。 #### section 用於內容等等段落的區分，在一個內容中可以有許多個。 #### figure & figcaption figure用來作為一段獨立的引用區域，用來在網頁內容旁說明或展示獨立的內容，而figcaption用來作為設定該區域的標題。 #### footer 網頁下方，用來顯示網站相關資訊、著作權等等。 #### mark 文字高亮。 > - 完整的新增元素，可以參考W3C網站：https://www.w3schools.com/html/html5_new_elements.asp > - 讓IE8以前（包含）IE8的瀏覽器支援新元素：https://www.w3schools.com/html/html5_browsers.asp > - W3C建議的將舊網頁改為使用語意標籤：https://www.w3schools.com/html/html5_migration.asp ### HTML5保留的元素 | 標籤 | 說明 | | :----------- | :------------------------------------------------- | | \ | HTML文件註解 | | \<!DCOTYPE> | 定義HTML文件類型 | | \<head> | 定義與網頁文件有關之資訊，其內容不會顯示在瀏覽器上 | | \<body> | HTML主要內容最外層的元素 | | \<abbr> | 定義縮寫文字 | | \<address> | 定義內容為地址 | | \<area> | 定義帶有可點擊影像地圖區域 | | \<base> | 定義網頁中所URL的連接基準 | | \<bdo> | 定義文字顯示方向 | | \<blockquote> | 定義額外註解或較長的引文 | | \<br> | 換行符號 | | \<button> | 定義一個按鈕 | | \<caption> | 定義一個表格標題 | | \<cite> | 定義著作的標題 | | \<dd> | 在列表中定義條目的定義 | | \<div> | 定義網頁內的一個區塊（自動換行） | | \<span> | 定義網頁內的一個區塊（不換行） | | \<dl> | 用於一個列表的定義 | | \<dt> | 用於一個項目的定義 | | \<em> | 用於強調文字 | | \<form> | 建立表單 | | \<h1>~\<h6> | 定義標題文字，有１～６個等級 | | \<input> | 定義一個可輸入的區域 | | \<ins> | 定義為插入的文字 | | \<del> | 定義為刪除的文字 | | \<map> | 定義一個影像地圖的範圍 | | \<object> | 定義一個嵌入物件 | | \<ol> | 定義一個有數字順序的清單 | | \<ul> | 定義一個無順序的清單 | | \<li> | 定義一個表單的項目 | | \<p> | 定義一個段落 | | \<pre> | 定義一段非HTML格式的文字區塊 | | \<select> | 定義一個下拉式選單 | | \<textarea> | 定義一個文字輸入區域 | | \<var> | 定義一個變數 | > 完整HTML元素：https://www.w3schools.com/tags/ ### HTML5保留下來但改變用法的元素 | 標籤 | 說明 | HTML4的用法 | HTML5的用法 | | -------- | ---------------------------------------------- | ------------------------ | ------------------------------------------------------------ | | \<a> | 定義內容為一個超連結 | 須有href=”#”屬性才能連結 | 該標籤永遠表示超連結，只是當沒有href的情況下，就只是一個佔位符號 | | \<b> | 定義文章區塊以外的內容，通常用於內容相關的邊欄 | 表現粗體 | 除了表現粗體，其他特別但不太重要的內容，想要特別強調時 | | \<hr> | 定義為音效內容 | 做為水平分隔線 | 更換段落主題時使用的水平分隔線 | | \<i> | 定義網頁上的繪圖區塊 | 表現斜體 | 除了表現斜體，無重要資料的其他內容，但想要另外標示時使用 | | \<menu> | 定義一個指令按鈕 | - | 定義複雜的選單或表單結構 | | \<small> | 定義一個下拉式選單 | 表現較小字體 | 備註或是其他法律特殊字體需要小字時使用 | | \<strong> | 定義一個元件的細項 | 表現較大字體 | 除了表現較大字體，也可標示重要資訊 | ### HTML5移除的元素 | 移除的元素 | 替代元素 | | :--------- | :----------------- | | \<acronym> | \<abbr> | | \<applet> | \<object> | | \<basefont> | CSS | | \<big> | CSS | | \<center> | CSS | | \<dir> | \<ul> | | \<font> | CSS | | \<frame> | 無 | | \<frameset> | 無 | | \<noframes> | 無 | | \<strike> | CSS, \<s>, or \<del> | | \<tt> | CSS | > - 資料來源為W3C網站：https://www.w3schools.com/html/html5_intro.asp > - 雖然瀏覽器大都繼續支援這些被移除的標籤，但作一個為良好的HTML5網頁，請盡量不要再使用它們。 #### 一個使用HTML5語意標籤的範例： ```html= <!DOCTYPE html> <html> <head> <title>HTML5 網頁範例</title> </head> <body> <header> <hgroup> <h1><a href="#">網站主標題</a></h1> <h2><a href="#">網站次標題</a></h2> </hgroup> <p>其它說明文字</p> </header> <nav> <ul> <li><a href="index.html">首頁</li> <li><a href="life.html">生活心得</a></li> <li><a href="travel.html">旅遊新知</a></li> <li><a href="about.html">關於我</a></li> </ul> </nav> <section> <article> <header> <h3><a href="#">內容標題１</a></h3> </header> <section> <p>內容段落１</p> <p>內容段落２</p> </section> </article> <article> <header> <h3><a href="#">內容標題２</a></h3> </header> <section> <p>內容段落１</p> <p>內容段落２</p> <p>內容段落３</p> <p>內容段落４</p> </section> </article> </section> <aside> <h2><a href="#">aside</a></h2> <p>補充資料／子選單</p> </aside> <footer>版權宣告</footer> </body> </html> ```