HTML基礎教學(一)

# HTML基礎教學(一) ###### tags: `HTML` ## 一.HTML簡介 HTML就是管理網頁的架構，一個好的網頁其HTML可以說是相當單純且具有易讀性，這種網頁不但方便前端工程師進行後續的維護外，也比較容易讓你的網頁增加曝光率讓搜尋引擎能把你的網頁擺在最前面，實際上行為稱為SEO，而現有HTML已經發佈到第五版同時也是目前最廣為使用的版本，因此大家常聽到的HTML5實際上就是指第五版的HTML喔！ ## 二.免費IDE HBuilder是DCloud（數字天堂）推出的一種支持HTML5的Web開發IDE。HBuilder的編寫用到了Java，C，Web和Ruby。HBuilder本身是由Java編寫的。它基於Eclipse，所以順其自然地兼容Eclipse的插件。HBuilder實際上只是一個編輯器，擁有多個豐富的語法庫，對Vue的支持比較友好，工具輕量且功能強大。官網：https : //www.dcloud.io/hbuilderx.html 基本教學：https : //www.runoob.com/w3cnote/hbuilder-intro.html ## 三.IDE WebStorm建立在開源IntelliJ平台之上，JetBrains已經開發和完善了超過15年。其提供了統一的UI，可與許多流行的版本控制系統配合使用，確保在git，GitHub，SVN，Mercurial和Perforce之間提供一致的用戶體驗。WebStorm提供可定制功能，調整它以完全適合您的編碼風格，從快捷方式，字體和視覺主題到工具窗口和編輯器佈局。官網：https : //www.jetbrains.com/webstorm/ ## 四.基礎語法 ### 1.基本架構 ``` <HTML> <head> <meta charset="utf-8"> <title>網頁名稱</title> </head> <body> 網頁內容 </body> </HTML> ``` | 語法 | 說明 | |------------|------------| | <HTML> <\HTML>|整個文件的開始和結束之處，以供瀏覽器識別此文件為合法的文件 | | <head></head>| 表示標頭資訊的開始與結束，在<head>與</head>之間可加入其它標籤<title></title>或<meta>等 | |<meta charset="utf-8">|指定了你的文件使用utf-8這種字元編碼| | <title></title>|此網頁的標題，也就是您瀏覽器最左上面的標題| | <body></body>| 文件本體，所寫的內容即會顯示於網頁裡面| ### 2.元素組成 ![](https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png) * 起始標籤（The opening tag）：先打角括弧，也就是大於、小於的符號「< >」，裡面再放入元素名稱，如上面的例子「<p>」。起始標籤代表這個元素從這裡開始。 * 結束標籤（The closing tag）：與起始標籤一樣，只是在元素名稱前面多了個前置斜線「/」。很容易理解地，內容的最後加上結束標籤，代表這個元素的尾端。在寫HTML時，很容易忘了最後的結束標籤，提醒大家要多注意唷！ * 內容（The content）：這個元素的內容，以上面的例子來說，內容就是這句文字。 * 元素（The element）：由起始標籤、結束標籤、內容所組成。元素還可以有「屬性（Attribute）」 ![](https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png) 屬性的組成包含： * 在元素名稱和屬性之間有一個空格（如果有多個屬性，屬性之間也需要有空格） * 屬性名稱後面接著等於符號「=」 * 屬性包在起始標籤裡面，如範例所示 ### 3.文字 #### 文字標題 (heading) HTML最多可以有六層的heading， `<h1>–<h6>` ``` <h1>My main title</h1> <h2>My top level heading</h2> <h3>My subheading</h3> <h4>My sub-subheading</h4> ``` #### 段落 (paragraph) `<p>`elements 包含文字段落，在呈現一般文字時，這是我們最常用到的。 ``` <p>This is a single paragraph</p> ``` #### 換行 `<br>`或是`<br/>`，即是換行。 ``` <body> 第1行<br> 第2行<br> 第3行<br> </body> ``` ####　分隔 `<hr>`或是`<hr/>`，即是會出現分割線，如下。 |用法|說明| |-----|----| |基本用法|<hr>| |Code|`<hr>`| |顏色設定|<hr color="#ff8000">| |Code|`<hr color="#ff8000">`| |寬度設定|<hr width="240">| |Code|`<hr width="240">`| |厚度設定|<hr size="5">| |Code|`<hr size="5">`| |位置設定|<hr align="right">| |Code|`<hr align="right">`| |陰影設定|<hr noshade>| |Code|`<hr noshade>`| #### 註解 ` `，包含在中文字為註解，不會顯示。 ```  ``` #### 清單 (list) 清單至少會包含兩個元素，以下是最常見的清單類，無順序性與有順序性的： * 無順序性清單（Unordered lists）代表這些項目的順序改變，不影響任何是，例如購物清單。項目會包含在`<ul>`裡面。 * 有順序性清單（Ordered lists）代表這些項目的順序是有意義的，例如食譜裡的製作步驟。項目會包含在`<ol>`裡面。例子： ``` <p>購物清單</p> <ul> <li>衛生紙</li> <li>牙膏</li> <li>沐浴乳</li> </ul> ``` #### 字型變化標籤 |原始碼|呈現結果| |-------|------| |`<b>粗體</b>`|<b>粗體</b>| |`<i>斜體</i>`|<i>斜體</i>| |`<u>底線</u>`|<u>底線</u>| |`<del>刪除線</del>`|<del>刪除線</del>| |'<big>放大</big>'|<big>放大</big>| |'<small>縮小</small>'|<small>縮小</small>| |`<sup>上標</sup>`|<sup>上標</sup>| |`<sub>下標</sub>`|<sub>下標</sub>| |`<tt>打字機</tt>`|<tt>打字機</tt>| |`<mark>標記</mark>`|<mark>標記</mark>| |`<blink>閃爍</blink>`|閃爍(ie 無效果)| |`<em>強調</em>`|<em>強調</em>| |`<strong>加強</strong>`|<strong>加強</strong>| |`<samp>範例</samp>`|範例| |`<code>原始碼</code>`|<code>原始碼</code>| |`<var>變數</var>`|變數| |`<dfn>定義</dfn>`|定義| |`<cite>引用</cite>`|<cite>引用</cite>| |`<address>所在地址</address>`|<address>所在地址</address>| ### 4.圖片(imgur) |用法|說明| |-----|----| |基本用法|`<img src="圖檔名稱、路徑">`| |Code|`<img src="images/01.jgp">`| |長寬設定|`<img src="圖檔" height="高度" width="寬度">`| |Code|`<img src="images/01.jpg" height=32 width=32>`| |加上說明|`<img src="圖檔" alt="說明文字">`| |Code|`<img src="images/01.jgp" alt="teat image">`| |位置設定|`<img src="圖檔" align="位置">`| |Code|`<img src="images/01.jgp" align=righ>`| |邊框設定|`<img src="圖檔" border="邊框粗細">`| |Code|`<img src="images/01.jgp" border="4">`| |左右間距|`<img src="圖檔" hspace="離左右物件的距離">`| |Code|`<img src="images/01.jgp" hspace="15">`| |上下間距|`<img src="圖檔" vspace="離上下物件的距離">`| ### 5.連結 (link) (1)選擇一些文字，例如「Email」。 (2)把他們包在這個`<a>`元素裡：`<a>Email</a>` (3)在`<a>`element 中加上href attribute這個屬性：`<a href="">Email</a>` (4)屬性質就是你要連結網址：`<a href="https://...">Email</a>`