# HTML架構
//WWW = World Wide Web
//HTTP = HyperText Transfer Protocal
→HTML,CSS,JavaScript 三大傳送要素
//按下F12即可在網頁右側檢視原始碼
### 1.HTML5基本認識-標籤即物件
//HyperText Markup Language
**打！按enter即產生html文件語法**
```
<!DOCTYPE html>
--網頁瀏覽器識別文件類型
<html lang="en">
--語言
<head>--網頁背後設定與編碼
<meta charset="UTF-8">
--字元識別碼
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
--視窗瀏覽設定
<title>Ru's Portfolio</title>
--網頁標題
<link rel="icon" href="./ru_icon.ico" type="image/x-icon">
--加入icon
<link rel="stylesheet" href="style.css">
--加入CSS 也可使用<style></style>寫法
</head>
<body>--網頁內容
<h1>標題</h1>--字體一數字變大而漸小到h6
<hr>--分隔線
<div>--區塊容器,佔一整行
<span>行內容器</span>--多少字元佔多少
<p>顯示段落<abbr title="縮寫">用途</abbr></p>
</div>
<br>--強制換行
<iframe src="https://www.google.com"></iframe>
--内嵌網頁
<pre>
 
--空白字元
</body>
</html>
```
### 2.HTML Skeleton(Boilerplate)骨架--body進階內容
//head,body,(footer)
```
<a href="網址">網址顯示標題</a>
--anchor tagal6
<img width="寬" height="高" src="./圖片來源" alt="圖片替代文字">
--absolute file path網址/relatitive file path本機
```
### 3.表格寫法
* ul無序列表,ol有序列表,li清單內容
```
<ul>關於作品
<ul>
<li><a href="https://www.insiangallery.com/artist/artworks/3206">太極系列</a></li>
<li><a href="https://www.insiangallery.com/artist/artworks/3204">25 Cents Connecticut</a></li>
</ul>
</ul>
<ul>關於作者
<ul>
<li><a href="https://www.insiangallery.com/artist/3206">朱銘</a></li>
<li><a href="https://www.insiangallery.com/artist/3204">朱德群</a></li>
</ul>
</ul>
</ul>
```
<ul>關於作品
<ul>
<li><a href="https://www.insiangallery.com/artist/artworks/3206">太極系列</a></li>
<li><a href="https://www.insiangallery.com/artist/artworks/3204">25 Cents Connecticut</a></li>
</ul>
</ul>
<ul>關於作者
<ul>
<li><a href="https://www.insiangallery.com/artist/3206">朱銘</a></li>
<li><a href="https://www.insiangallery.com/artist/3204">朱德群</a></li>
</ul>
</ul>
</ul>
---
```
<ol>關於作品
<ol>
<li><a href="https://www.insiangallery.com/artist/artworks/3206">太極系列</a></li>
<li><a href="https://www.insiangallery.com/artist/artworks/3204">25 Cents Connecticut</a></li>
</ol>
</ol>
<ol>關於作者
<ol>
<li><a href="https://www.insiangallery.com/artist/3206">朱銘</a></li>
<li><a href="https://www.insiangallery.com/artist/3204">朱德群</a></li>
</ol>
</ol>
</ol>
```
<ol>關於作品
<ol>
<li><a href="https://www.insiangallery.com/artist/artworks/3206">太極系列</a></li>
<li><a href="https://www.insiangallery.com/artist/artworks/3204">25 Cents Connecticut</a></li>
</ol>
</ol>
<ol>關於作者
<ol>
<li><a href="https://www.insiangallery.com/artist/3206">朱銘</a></li>
<li><a href="https://www.insiangallery.com/artist/3204">朱德群</a></li>
</ol>
</ol>
</ol>
---
* dl定義列表,dt定義標題,dd定義內容
```
<dl>
<dt>爺爺</dt>
<dd>爸爸的爸爸</dd>
<dt>奶奶</dt>
<dd>爸爸的媽媽</dd>
</dl>
```
<dl>
<dt>爺爺</dt>
<dd>爸爸的爸爸</dd>
<dt>奶奶</dt>
<dd>爸爸的媽媽</dd>
</dl>
---
* table表格,tr表格橫列,th表格類別,td表格內容
//thead,tbody,tfoot是標註表格用
```
<table>
<tr>
<th>ID</th>
<th>Arts</th>
<th>Author</th>
<th>About</th>
</tr>
<tr>
<td>1</td>
<td><img src="https://picsum.photos/id/684/600/400" alt="" width="100%"></td>
<td rowspan="3">Renee</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti placeat nihil, repudiandae tempora, temporibus, quasi minus non dolor magnam autem porro voluptates? Aperiam provident nemo similique reiciendis sit, iste temporibus?</td>
</tr>
<tr>
<td>2</td>
<td><img src="https://picsum.photos/id/743/600/400" alt="" width="100%"></td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti placeat nihil, repudiandae tempora, temporibus, quasi minus non dolor magnam autem porro voluptates? Aperiam provident nemo similique reiciendis sit, iste temporibus?</td>
</tr>
<tr>
<td>3</td>
<td><img src="https://picsum.photos/id/1038/600/400" alt="" width="100%"></td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti placeat nihil, repudiandae tempora, temporibus, quasi minus non dolor magnam autem porro voluptates? Aperiam provident nemo similique reiciendis sit, iste temporibus?</td>
</tr>
</table>
```
<table>
<tr>
<th>ID</th>
<th>Arts</th>
<th>Author</th>
<th>About</th>
</tr>
<tr>
<td>1</td>
<td><img src="https://picsum.photos/id/684/600/400" alt="" width="100%"></td>
<td rowspan="3">Renee</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti placeat nihil, repudiandae tempora, temporibus, quasi minus non dolor magnam autem porro voluptates? Aperiam provident nemo similique reiciendis sit, iste temporibus?</td>
</tr>
<tr>
<td>2</td>
<td><img src="https://picsum.photos/id/743/600/400" alt="" width="100%"></td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti placeat nihil, repudiandae tempora, temporibus, quasi minus non dolor magnam autem porro voluptates? Aperiam provident nemo similique reiciendis sit, iste temporibus?</td>
</tr>
<tr>
<td>3</td>
<td><img src="https://picsum.photos/id/1038/600/400" alt="" width="100%"></td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti placeat nihil, repudiandae tempora, temporibus, quasi minus non dolor magnam autem porro voluptates? Aperiam provident nemo similique reiciendis sit, iste temporibus?</td>
</tr>
</table>
### 4.Form表單
//label,input,select,button
```
<form action="" method="get">
--get會顯示網址post不會
<label for="name">姓名：</label>
<input id="name" type="text" placeholder="請輸入姓名" required>
<label for="phone">電話：</label>
<input id="phone" type="text" placeholder="請輸入電話" required>
<div><label for="rcd">告訴我們您的寶貴建議：</label></div>
<textarea name="rcd" id="" cols="30" rows="10"></textarea>
<div>
<input type="submit" value="送出">
<input type="reset" value="取消">
</form>
```
### 5.input types<input type="">
//checkbox, email, file, number, password, radio, range
//Attributes: checked, max, min, maxlength, minlength, placeholder, required, value
* checked:checkbox, password
* max, min, placeholder:number, range
* maxlength, minlength:text, password
### 6.select, option, datalist
* 選項表單
```
<label>性別</label>
<select name="gender" id="gender">
<option value="male">男生</option>
<option value="female">女生</option>
<option value="other">其他</option>
</select>
```
* 輸入提示表單
```
<label for="area">地區:</label>
<input list="areaList" type="text" name="area" id="area">
<datalist id="areaList">
<option value="台北">台北</option>
<option value="台中">台中</option>
<option value="高雄">高雄</option>
</datalist>
```
### 7.block & inline elements
* block
`<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video> `
* inline
`<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var> `
### 8.HTML5 Semantic Elements
//無CSS default styling
* article
* aside
* details
* figcaption
* figure
* header
* main
* footer
* mark
* nav
* section
* summary
* time
Sign in with Wallet
Connect another wallet