# 【學習】HTML
## elements種類
- ### Block element
不需要換行，或是特別寫換行，就會自動有，產生block的element。
ex:
```
<p> </p> paragrapg 段落
```
- ### Inline elements
不會有換行，適合用在一個句子中針對單字想要有不同的功能。
ex:
```
<a> Anchor => hyperLink 超連結
<em> 斜體字
<strong> 粗體字
> ### Block vs Inline element
```
<em>first</em><em>second</em><em>third</em>
<p>fourth</p><p>fifth</p><p>sixth</p>
```
> result:
> ><em>first</em><em>second</em><em>third</em>
> ><p>fourth</p><p>fifth</p><p>sixth</p>
- ### Empty element
又稱void element，意思是這類型的element語法是不需要有closing tag。
ex:
```
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
```
## Attributes(屬性)
屬性必須遵守下面規則
- 一個element可以有多個attribute，但是要用空個區分開來。
- 屬性名稱要接在等於符號的後面。
- 要用雙引號mark起來。
> ### 實際例子
> ```
> <a href="https://www.google.com/" title="Google Browser" target="_blank">
- > href => 這個屬性的值為你想要連到的網址，當連結被點擊時，瀏覽器就會導向到該網站。
- > title => title 屬性用來附加有關連結的其他資訊，像是連結到的網站名稱。當游標移動到連結上時，就會以提示的方式顯示。
- > target => target 屬性用來指定要在哪裡打開網頁。例如: target="_blank" 會開啟新分頁。如果你想要在目前的分頁開啟網站，只要忽略這個屬性即可。
## 小細節
- 有些情況可以不用引號 => 但保險起見，還是不要省略，避免不必要的錯誤。
- 該用單引號還是雙引號 => 其實都可以，但不能夠單引號跟雙引號混用。
- 若想要在attribute名稱中使用單引號可以這麼做
> 錯誤範例:
> ``` html=
> <a href='https://www.example.com' title='Isn't this fun?'>A link to my example.>
> 正確範例:
> ```html=
> <a href='https://www.example.com' title='Isn't this fun?'>A link to my example.>
- 連續的空白，在HTML Parser會解析成一個空白。所以用多個連續的空白只是為了可讀性。
## 特殊字元
| Literal Character | Character reference equivalent |
| ----------------- | ------------------------------ |
| < | ```<``` |
| > | ```>``` |
| " | ```"``` |
| ' | ```'``` |
| & | ```&``` |
## HTML 註解
- 用```<!--```跟```-->```就可以把內容註解
```html=
<!-- <p>I am!</p> -->
```
## <head>裡面放甚麼？
head裡面寫的內容，是不會顯示在瀏覽器上的。
- ```<title>```是文件的標題，顯示在瀏覽器分頁的位置，用來表示這是甚麼網頁，與```<h1>```不同的是，```<h1>```代表的是文章的標題，而且是放在```<body>```裡面，不是```<head>```。
- ```<meta>```元素，可以用來指定網頁的編碼，像
> ```<meta charset="utf-8">```
代表這個網頁以utf-8這個編碼去編碼所有的字元。
除了**charset**的屬性外，還會常用到**author**跟**description**。範例：
```html=
<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Learning Area aims to providecomplete beginners to the Web with all they need to know to get started with developing web sites and applications.">
```
雖然不能直接在瀏覽器上顯示這兩個屬性的內容，但可以在開發時，抓取這兩個屬性內容，更方便地顯示在瀏覽器上。
- #### 在HTML中加入CSS跟JavaScript
需要用到```<link>```跟```<script>```，範例：
```html=
<link rel="stylesheet" href="my-css-file.css">
<script src="my-js-file.js"></script>
```
- #### 預設網頁語言
```<html lang="en-US">```這個的目的是，給搜尋引擎處理，讓使用者查詢的到他想要的語言的網站。
## List
- ### Unorder
```html=
<ul>
<li>milk</li>
<li>eggs</li>
<li>bread</li>
<li>hummus</li>
</ul>
```
> result:
> <ul>
> <li>milk</li>
> <li>eggs</li>
> <li>bread</li>
> <li>hummus</li>
> </ul>
- ### Order
```html=
<ol>
<li>Drive to the end of the road</li>
<li>Turn right</li>
<li>Go straight across the first two roundabouts</li>
<li>Turn left at the third roundabout</li>
<li>The school is on your right, 300 meters up the road</li>
</ol>
```
> result:
> <ol>
> <li>Drive to the end of the road</li>
> <li>Turn right</li>
> <li>Go straight across the first two roundabouts</li>
> <li>Turn left at the third roundabout</li>
> <li>The school is on your right, 300 meters up the road</li>
> </ol>
## HyperLinks 超連結
- ### block level element
可以使block級別的元素變成HyperLink，範例將圖片變為超連結
> ```html=
> <a href="https://www.mozilla.org/en-US/">
> <img src="mozilla-image.png" alt="mozilla logo that links to the Mozilla homepage"> </a>
> ```
只需要把圖片元素放在`<a>`跟`</a>`裡面
- ### 連結到不同的網站
假如你的網頁有好多個頁面，可以把每個網頁`.html`檔的資料放在圖一個根目錄底下，利用`<a href="example.html">`連結其他網頁，使網頁活起來。
>- Tips
**盡量用相對URL而不要用絕對URL**，理由是因為相對URL的程式碼較短，且效率較快，頁可以避免在不同網路運作時，路徑跑掉的問題產生，所以可以的話就盡量用相對URL。
- ### URL簡單介紹
URL的全名Uniform Resource Locator，意思是**網址**。
每個URL都是獨特的，因為URL會定應到一個IP位址，一個完整的URL必須要有下面這樣的組合，
>圖片版權為[3csilo](https://3csilo.com/what-is-url/#tab-con-9/)所有，如果親權請告知下架
- Domain Name又是甚麼？
Domain Name中文翻譯是**網域名稱**，以上圖為例，Domain Name就是`3csilo.com`。
- Domain Name的存在是為了甚麼？
是為了讓使用者可以對於IP位址有更好的可讀性跟記憶性，這樣就不需要把Google的IP位址記錄下來，每次要連到Google網站時，還要輸入他的IP位址，直接打上Google.com就可以進入了。
## Text Formatting
- ### Description lists
用來給文章解釋的一種list，像是我要做出多個名詞解釋，見範例：
```html=
<dl>
<dt>Bacon</dt>
<dd>The glue that binds the world together.</dd>
<dt>Eggs</dt>
<dd>The glue that binds the cake together.</dd>
<dt>Coffee</dt>
<dd>The drink that gets the world running in the morning.</dd>
<dd>A light brown color.</dd>
</dl>
```
> result:
> <dl>
> <dt>Bacon</dt>
> <dd>The glue that binds the world together.</dd>
> <dt>Eggs</dt>
> <dd>The glue that binds the cake together.</dd>
> <dt>Coffee</dt>
> <dd>The drink that gets the world running in the morning.</dd>
> <dd>A light brown color.</dd>
> </dl>
## W3School content
### Attributes
- `<html></html`>`
- `lang="en-US"`
- `<p></p>`
- `title="I'm a title attribute"` 當游標移動到該元素上，會顯示title的內容
- `style="color:red;"`
- `style="font-family:courier;"` 設定字體為courier
- `style="font-size:300%;"`
- `style="text-align:center;"` align是對齊的意思
- `style="background-color:powderblue;"` 設定背景顏色
- `<h1></h1>`
- `style="font-size:60px;"`
- `<img>`
- `src="PATH"`
- `alt="About this img"` 當圖片無法顯示時，會用文字敘述圖片內容
- `width="500"`
- `height="500"`
- `style="width:500px;height:600px;"` 建議使用這個屬性
- `style=float:right;width:42px;height:42px;` 讓圖片在文字的右邊，把right改成left，就會讓圖片靠在文字的左邊
- `<a></a>`
- `href="https://www.google.com"`
- `style="text-decoration:none;"` 使超連結文字下方的底線隱藏
- `<br>` 換行
- `<hr>` 水平線
- `<pre></pre>` 可以保留空白跟換行，在不使用換行的element情況底下
<hr></hr>
### Text Formatting
- `<b>` - Bold text
- `<strong>` - Important text
- `<i>` - Italic text
- `<em>` - Emphasized text
- `<mark>` - Marked text
- `<small>` - Smaller text
- `<del>` - Deleted text
- `<ins>` - Inserted text
- `<sub>` - Subscript text
- `<sup>` - Superscript text
<hr></hr>
### Quotation and Citation Elements
- `<blockquote></blockquote>` 定義一個section是引用自某個文章
- `cite="http://www.worldwildlife.org/who/index.html"` cite意思是引用
- `<q></q>` for short quotations，被tag包起來的部分，會顯示雙引號表示引用
- `<abbr></abbr>` Abbreviations意思是縮寫
- `title="full contents"`
- `<address></address>` for contact information，被tag包起來的部分，會輸出成italic的字體
- `<cite></cite`>` defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.) 表示創作的名稱，顯示為italic字體
- `<bdo></bdo`>` 用來覆寫文字方向
- `dir="rtl"` 使整串文字反過來顯示
<hr></hr>
### Links
- `<a></a>`
- `target="value"`
1. `_self` - Default. Opens the document in the same window/tab as it was clicked
2. `_blank` - Opens the document in a new window or tab
3. `_parent` - Opens the document in the parent frame
4. `_top` - Opens the document in the full body of the window
- 使img變成link，把`<img>`放在`<a></a>`裡面
```html=
<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"></a>
```
- 連結至電子郵件，使用`mailto:`+`someoneemail@example.com`
```html=
<a href="mailto:someone@example.com">Send email</a>
```
- 把button設定成連結
```html=
<button onclick="document.location='default.asp'">HTML Tutorial</button>
```
<hr></hr>
### Tables
- `<table></table>` Defines a table
- `<td></td>` `td`stands for **table data**
- `<tr></tr>` `tr`stands for **table row**
- `<th></th>` `th`stands for **table head**
- `<caption></caption>` Defines a table caption
- `<colgroup></colgroup>` Specifies a group of one or more columns in a table for formatting
- `<col></col>` Specifies column properties for each column within a `<colgroup>` element
- `<thead></thead>` Groups the header content in a table
- `<tbody></tbody>` Groups the body content in a table
- `<tfoot>></tfoot>` Groups the footer content in a table
#### Attributes
- `colspan="num"` 要橫跨的行數，數字勿超出表格的行數目
- `rowspan="num"` 要橫跨的列數，數字勿超出表格的列數目
```html=
<table>
<tr>
<th colspan="2">Month and Saving</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
```
<table>
<tr>
<th colspan="2">Month and Saving</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<hr></hr>
### Lists
#### Unordered and Ordered Lists
- `<ul></ul>` Unordered Lists
- `style="list-style-type:TYPE_NAME"` 可以透過CSS的style屬性調整Unorderd List的圖標符號，TYPE_NAME有`disc`,`circle`,`square`,`decimal`,`georgian`,`trad-chinese-informal`,`kannada`
- `<ol></ol>` Ordered Lists
- `type="A"` 會使用uppercase的A. B. C.來代替1. 2. 3.，也可以使用a變成a. b. c.的有序串列，還可以用I變成I. II. III.
- `<li></li>` Defines a list item
#### Description Lists
- `<dl></dl>` defines the description list
- `<dt></dt>` defines the term (name)
- `<dd></dd>` describes each term
<hr></hr>
### Class Attribute
> **Tip:** The `class` attribute can be used on **any** HTML element.
> **Note:** The class name is case sensitive!
#### Multiple Classes
ex. `<h2 class="city main">London</h2>` London這個字會被兩個class，city跟main所渲染
#### Use of The class Attribute in JavaScript
在JavaScript中要用`getElementsByClassName()`取得該element
<hr></hr>
### **Id Attribute**
- `id`這個屬性的名稱是獨一無二的，也就是每個element的`id`必須是不一樣的
- 使用css給`id`需要在`id`名稱前面加上(#)
> **Note:** The id name is case sensitive!
> **Note:** The id name must contain at least one character, cannot start with a number, and must not contain whitespaces (spaces, tabs, etc.).
#### 利用`id`建立書籤
```html=
<a href="#C4">Jump to Chapter 4</a>
```
利用`<a href="#C4">`建立對`id`名稱為C4的element的連結
```html=
<a href="html_demo.html#C4">Jump to Chapter 4</a>
```
也可以增加連結到不同頁面的C4 elemen
#### Using The id Attribute in JavaScript
在JavaScript中要用`getElementsById在()`取得該element
<hr>
### Iframes
是用來在網頁當中顯示別的網頁
#### Syntax
```html=
<iframe src="url" title="description"></iframe>
```
#### Attributes
- `style="..."` such that, `widht`,`height`,`border`
- 使用`name`和`target`連結link跟Iframe
```html=
<iframe src="demo_iframe.htm" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
```
<hr>
### JavaScript
#### ``<script></script>`` Tag
```html=
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">This is a demonstration.</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
```
當按鈕被按下時，會呼叫`myFunction()`函式，在`<script></script>`中寫到，使`id`為`demo`的element的內容指定為`"Hello JavaScript!"`
```html=
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
```
更改`style`的值
```html=
document.getElementById("image").src = "picture.gif";
```
更改`src`
#### `<nonscript></nonscript>` Tag
當客戶端的瀏覽器無法支援script時，就會顯示`<nonscript></nonscript>`的內容
<hr>
### Computer Code Elements
HTML定義一些tag element用來表示特定情況
- `<code></code>` defining user input and computer code，常搭配`<pre></pre>`來確保顯示時能夠把換行也顯示出來
- `<kbd></kbd>` define keyboard input
- `<samp></samp>` define sample output from a computer program
- `<var></var>` define a variable in programming or in a mathematical expression
<hr>
### Forms
Form is used to collect user input
- `<form></form>` is used to create an HTML form for user input, is a container for different types of input elements
- `action="PATH"` 可以配合`submit`類型的`<input>`，使按下`submit`時，可以跳轉到`action`所設定的畫面，使按下`submit`時，可以跳轉到`action`所設定的畫面
- `target="TYPE"` `target`的TYPE有以下幾種
- `_blank`
- `_self`
- `_parent`
- `_top`
- `method="TYPE"` `method`的TYPE有以下幾種
- `get` 會把從`input`得到的資料顯示在網址列中
- `post` 會把從`input`得到的資料**隱藏**起來，不會顯示在網址列中
- `<input></input>`
- `type="TYPE_NAME"` TYPE_NAME such that, `text`, `radio`, `checkbox`, `submit`, `button`, `range`, `number`
- `<input type="number" min="minNUM" max="maxNUM"></input>`
*補充
`<button>`也可以有`alert`的效果，當我點擊按鈕，會跳出`Hello World`的提示視窗
```html=
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
```
- `value="content"` 放入預設顯示的content
- `name="NAME"` NAME必須要是`id`的內容，且不可以省略；如果省略`name`，則使用者輸入的值，並不會真的改變input中的`value`
- `<label></label>` defines a label for many form elements.
- `for` 屬性跟`<input>`中的`id`是同樣的功能，且這兩個名稱必須一樣，因為每一個`<label>`會分別綁定一個`<input>`
- `<select></select>` a drop-down list 下拉選單，通常會搭配`<option>`一起使用
- `size="NUM"` 設定NUM，直接調整下拉選單的可見度，預設為1
- `multiple` 可以按住Crtl不放，點選其他的選項
- `<option></option>` 若要調整預設選擇的選項，可以增加`selected`屬性
```html=
<option value="fiat" selected>Fiat</option>
```
- `<textarea></textarea>` 建立一個文字方框，輸入文字
- `name`
- `rows="NUM"` 設定長
- `cols="NUM"` 設定寬
- `style="width:NUMpx;height:NUMpx;"`
- `<fieldset></fieldset>` 把有相關的元素包在一起，常與`<legend>`一起使用
- `<legend></legend>`
```html=
<fieldset>
<legend>something:</legend>
...
</fieldset>
```
- `<datalist></datalist>` 是一個有Pre-defined選項列表的text，用法如下
```html=
<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
```
- `<output></output>` 用來表示計算結果，範例如下
```html=
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
```
- `<optgroup></optgroup>`
#### Input Attributes
- `value="TEXT"`
- `readonly` input field cannot be modified, however, user can tab to it, highlight it, and copy the text from it. **The value of a read-only input field will be sent when submitting the form!**
- `disabled` input field is unusable and un-clickable. **The value of a disabled input field will not be sent when submitting the form!**
- `size="NUM"` setting **visible width**
- `maxlength` **maximum number of characters** allowed in an input field
- `min`, `max` work with the following input types: number, range, date, datetime-local, month, time and week
- `multiple` the user is allowed to enter more than one value in an input field
- `pattern` works with the following input types: text, date, search, url, tel, email, and password，用法如下
```html=
pattern="[A-Za-z]{3}" title="Three letter country code">
```
只能接受A-Z或a-z的字，且只能剛好3個字母
- `placehoder` 可以在input上顯示短短的訊息，搭配`pattern`提示使用者照格式輸入
- `required` 必填的功用，填完所有必填的項目，才可以提交
- `step="NUM"` works with the following input types: number, range, date, datetime-local, month, time and week
- `autofocus` 在網頁載入時，就先把鍵盤輸入的焦點先焦在有此屬性的`input`
- `list` 此屬性是要搭配`<datalist>`這個element來完成pre-defined options
- `autocomplete` 讓瀏覽器自動去偵測可不可以自動填入，像是帳號、密碼、電子郵件
###### tags: `學習` `程式`
Sign in with Wallet
Connect another wallet