---
# System prepended metadata

title: H1

---

.imgur.com/dUYS0xw.jpg" alt="Hi" />`


## HTML Basic construction

![](https://www.bluekatanasoft.com/wp-content/uploads/document-structure.png)

## Tag Lists

#### Comment:
`<!-- This is a comment -->`

#### Document Type:
`<!DOCTYPE html>`


#### Title:
`<title> This is title </title>`

#### Link: link css file
`<link rel="stylesheet" href="/css/master.css">`

#### Script: where js be imported
```
<script type="text/javascript" src="/js/myJs.js />"
<script type="text/javascript">
    console.log("this is javascript")
</script>
```

#### meta: will not display, for some description
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="網頁簡短描述">
<meta name="keywords" content="網頁關鍵字1, 關鍵字2">	
<meta name="author" content="作者姓名">
<meta name="generator" content="編輯器名稱">
<meta name="copyright" content="網頁版權">
<meta name="distribution" content="網頁發佈地區">
<meta charset="UTF-8">
```

#### Body Part:
```
<body>
    hi
</body>
```


#### Header:
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

#### Hyperlink:
<a href="http://ntuee.org/">This is a link</a>

#### Strong:
<b>Strong</b>



#### Defines a section in a document:
<div>
    <div>
        This is div 1
    </div>
    <div>
        This is div 2
    </div>
</div>


#### Draw a line:
<hr>

#### Change a line:
<br>

#### Image:
<img src="https://i.imgur.com/dUYS0xw.jpg" alt="This is a picture" />

#### Form: <!-- hackmd 無法顯示 -->
```
<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>
```

#### List and Ordered List:
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

#### Options:
```
<label for="cars">Choose a car:</label>

<select id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
```

#### Defines a paragraph:
<p>This is some text in a paragraph.</p>

#### Putting Code in the web:
<pre>console.log("jizz")</pre>

#### Span, use to color a part of a text:
Not Red but <span style="color: red">red</span>

#### Table:
<table>
    <thead>
        <tr>
            <td>h1</td>
            <td>h2</td>
            <td>h3</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>b1</td>
            <td>b2</td>
            <td>b3</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>b4</td>
            <td>b5</td>
            <td>b6</td>
        </tr>
    </tbody>
</table>

#### Special Character (Entities):
`< &lt;`
`> &gt;`
` &nbsp;`
`& 	&amp;`
`" 	&quot;`
`' &apos;`
...
More: https://www.w3schools.com/html/html_entities.asp

#### There is still a lot, see below


## CheatSheet
![](https://websitesetup.org/wp-content/uploads/2019/08/HTML-CHEAT-SHEET.png)


## Reference
https://www.w3schools.com/tags/default.asp
https://websitesetup.org/html5-cheat-sheet/
https://www.w3schools.com/tags/tag_meta.asp


