---
# System prepended metadata

title: HTML
tags: [Web Learning]

---

---
title: HTML
tags: Web Learning
description: HTML use, notes
---
{%hackmd U6g0skbVTIyVdJhvWCgo2Q %}

# <span class="big-title">Introduction and Reference</span>
- Learn HTML
    - describe data on web
    - [**Semantic**](https://www.zhihu.com/question/20455165)
## <span class="intext-title">HTML, XHTML, HTML5</span>
- HTML -> XHTML -> HTML5
- HTML5 Difference
    1. Simplify DOCTYPE
    2. Discard Some tags
    3. ...
## <span class="intext-title">Reference</span>
- W3C
    - [referece for attr](https://www.w3schools.com/tags/ref_attributes.asp)
    - [reference for events](https://www.w3schools.com/tags/ref_eventattributes.asp)
    - [reference for tags](https://www.w3schools.com/tags/)
- MDN
    - [MIME format](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Basics_of_HTTP/MIME_types)

# <span class="big-title">Structure Sementics</span>
<audio controls>
    <source src="https://drive.google.com/uc?export=download&id=110QMlO0VKD5W07rAumDhh3xsT-p8JpWn" />
</audio>

- [Talk about it](https://drive.google.com/file/d/19jiw9jWARfzkPz-YcQMd6EnEkZdTpVe7/view?usp=sharing)
- Structure Sementics are used for describing meaning of eles
    - Semantics body of the page
## <span class="intext-title">Example</span>
```htmlmixed=
<body>
    <header>
      <h1>Training</h1>
      <nav>
        <ul>
          <li><a href="#stealth">Stealth &amp; Agility</a></li>
          <li><a href="#combat">Combat</a></li>
          <li><a href="#weapons">Weapons</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section id="stealth">
        <h2>Stealth &amp; Agility Training</h2>
        <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
        <article><h3>No training is NP-complete without parkour</h3></article>
      </section>
      <section id="combat">
        <h2>Combat Training</h2>
        <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
        <article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
      </section>
      <section id="weapons">
        <h2>Weapons Training</h2>
        <article><h3>Swords: the best tool to literally divide and conquer</h3></article>
        <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
      </section>
    </main>


    <footer>&copy; 2016 Camper Cat</footer>
</body>


<!--https://blog.csdn.net/weixin_43386439/article/details/90208824-->
```

## <span class="intext-title">Component</span>
- `main`
    - emphasize **most important part or idea**
    - should only have one in the page
- `header`
    - brief introduction or nav link
    - repeatly show in multiple pages
    - **different with `<head>`**
- `footer`
    - related dic, copy right, some links
- `nav`
    - link to topics in page
- `article`
    - complete and individual idea or content
- `section`
    - grouping for things in same topic
    - can nbe **embedded** with others
        - article in section
        - article sections
    - including **title** and **content**
- `aside`
    1. atteched information for main content
    2. atteched information for page or website
    - use CSS can define the view of it


# <span class="big-title">Basic Tag</span>
- most HTML tag has attr value to transform data with backend

## <span class="intext-title">\<html></html></span>
```htmlembedded=
<!--Should always put language attr in <html> -->
<html lang="en">
    <head>    
    </head>    
</html>
```
- root tag
- web start from `<html>`, end with `</html>`
- `lang` attribute can also write **"zh-TW"**

## <span class="intext-title">\<head></head></span>
```
usually invisible on web
```
- `title`
    - define title of the web
- `meta`
    - define keyword, description of web
        - work for search engine
    - ==Attrs==
        1. `name`
            ```htmlembedded=
            <meta name="keywords" content="Learning HTML" />
            ```
            > `name` can be keywords, description, author, copyright
        2. `http-equiv`
            - define encoding of the web
            ```htmlembedded=
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

            <!--HTML5-->
            <meta charset="utf-8" />
            ```
            > need to put in front of all tags in head
            - automatically refresh or jump
            ```htmlembedded=
            <meta http-equiv="refresh" content="6;url=https://www.google.com" />
            ```
- `style`
    - define CSS Style
- `link`
    ```htmlembedded=
    <link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()">
    ```
    - usually import external CSS Style File with `href` -> linked resource
    - specifies relationship with external resource (`rel`)
    - can set **shortcut icon**
        ```htmlmexed=
        <link rel="shortcut icon" href="images/icon.ico">
        ```
        - with favicon (favorite icon)
        - `rel="shortcut icon"` or `rel="icon"`
        - recommanded icon, but shortcut icon will have a large range -> add both
- `script`
    - define JS code
    - import outer JS file
- `base`

## <span class="intext-title">\<body></body></span>
```
visible contents in web
```
- body of the web
- Special symbolize
    - &nbsp (no-break space)

# <span class="big-title">Text and Paragraph</span>
## <span class="intext-title">Title Tag -- \<h1>~\<h6></h6></h1></span>
- h = head
```htmlembedded=
<h1>Head 1</h1>
<h2>Head 2</h2>
<h3>Head 3</h3>
<h4>Head 4</h4>
<h5>Head 5</h5>
<h6>Head 6</h6>
```

### <span class="intext-point">Sementic</span>
- Header plays an important part about `Sementics`
    - Significantly affect **SEO**
- Rule
    1. Only one h1 in a page
    2. No jump about h1~h6
    3. Dont define CSS in head


## <span class="intext-title">Paragraph tag</span>
- `<p>`
    - define text paragraph in Web
    ```htmlembedded=
    <p>
        Today, I go to school before I eat some apple.
        <br />
        It's a nice day.
    </p>
    <p>
        Tomorrow, I would eat the apple before I went to school.
    </p>
    ```
- is a Block-level tag, `<br />` should be used in it to represent break
    - dont use it on it own
    - use to wrap sth -> block-level tag
- `<br />` should only be used in paragraph
    
## <span class="intext-title">Text Tag</span>
- Bold
    - <span class="important">`<strong>`</strong></span>, `<b>`
- Italic
    - <span class="important">`<em>`</em></span>, `<i>`, `<cite>`
- Superscript
    - `<sup>`
- Subscript
    - `<sub>`
- Usually do following things in CSS
    - Delete, Under line
        - `<s>`, `<u>`
    - Big, Small
        - `<big>`, `<small>`
- <span class="intext-point">strong, em</span>
    - use for emphasize sementics
    - usually covoered by new CSS style, but the sementics wont change


## <span class="intext-title">Self-closing</span>
- normal tag
    - start tag and end tag
    - can write content between tags
- self-closing tag
    - have no end tag
    - `<meta />`, `<link />`, `<img />`, `<br />`, `<hr />`, `<input />`


## <span class="intext-title">Block-Level elements and Inline elements</span>
- Block element
    1. single a line
    2. include other block and inline ele
- Inline Element
    1. can be same line with other inline eles

# <span class="big-title">List</span>
- <span class="intext-important">[unordered list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul)</span>
    - attr `type` can change symbol of the list
        1. type="disc" -> default, ●
        2. type="circle" -> ○
        3. type="square" -> <small>■</small>
    - ususally use unordered list for self-defining format of numbers
- [ordered list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol)
    - attr `type` can change symbol of the list
        1. type="i" -> i, ii, iii...
        2. type="I" -> I, II, III...
        3. can also be `"1"`, `"a"`, `"A"`
- [description list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl)
    - including term and description
## <span class="intext-title">List Items</span>
- `<li>`
    - for ol, ul
- `<dt>`,`<dd>` 
    - dt: term
    - dd: descriptoin
    - descriptions are used for decripting terms

## <span class="intext-title">Example</span>
```htmlembedded=
<ol type="a">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ol>
```

# <span class="big-title">Table</span>
- `<table>`
    - `<caption>`
        - caption for a table
        - only one in a table
    - `<th>`
        - head data cell for table
    - `<tr>`
        - table row
        - representing one row in talbe
    - `<td>`
        - table data cell
        - data in table
- we can use CSS to append border for table

## <span class="intext-title">Example</span>
![](https://i.imgur.com/DybVsEb.png)

```htmlembedded=
<table border=2px>
    <caption>HaHa Fruit</caption>
    <thead>
        <tr>
            <th colspan="2">Fruit</th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td rowspan="2">Apple</td>
            <td>Grape</td>
        </tr>
        
        <tr>
            <td>Banana</td>
        </tr>
    </tbody>
</table>
```


## ==Semantics==
- Add some sementic tag
    - more structureful
    - more readable
    - convenient for CSS contorl
- the Tags are invisible, it's for Structureful
    - May **not** use all of them
1. `<thead>`
    - represent head of a table -> `<th>`
2. `<tbody>`
    - representing body of a table
    - `<td>`
3. `<tfoot>`
    - for some conclusion data
    - also use `<tb>` in it

## ==Span==
- For spaning row and colum
    1. `rowspan`
    2. `colspan`

# <span class="big-title">Media</span>
## <a class="intext-title" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio">`<audio>`</a></a>
```htmlembedded=
<audio id="minami" 
  loop
  controls>
  <source src="./media/auauadio.flac" type="audio/flac">
  <p>Content between tags will be shown <br /> 
      when the browser doesnt support the tag</p>
</audio>
```
- for audio media play
- Attrs
    - `controls`: show control pannel
    - `loop`: looply play media
- `<source>`
    - use to decide playing media
    - can write multiple media for different situation
    - `type` for specify [MIME format](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Basics_of_HTTP/MIME_types)
- Embeded audio from Google Drive
    - [StackOverflow](https://stackoverflow.com/questions/32392072/how-to-play-google-drive-mp3-file-using-html-audio-tag)
    - example
```htmlmixed=
<audio
  controls>
  <source src="https://drive.google.com/uc?export=download&id=110QMlO0VKD5W07rAumDhh3xsT-p8JpWn" />
</audio>
```

## <a class="intext-title" href="https://www.w3schools.com/tags/tag_picture.asp">`<video>`</a></a>
```htmlembedded=
<video width="320" height="240" 
  autoplay muted contorls>
  <source src="./media/show.mp4" type="video/mp4">
</video>
```
- in chrome, didnt support autoplay sound before user interact with the page
    - use mute, then the autoplay attrinute can work




## <a class="intext-title" href="https://www.w3schools.com/tags/tag_picture.asp">`<picture>`</a></a>
```htmlembedded=
<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
```
- flexible use about showing picture
- last audio media is shown when nothing can be detect by browser


## <span class="intext-title">Image</span>
```htmlembedded=
<img src="images/Hello.png" alt="Cat" title="Cat">
```
- `<img />`
- Attribute
    1. `src`
        - source of image
    2. `title`
        - prompt message show when mouse hover
    4. `alt`
        - allternate description for img, show when load failed
        - usually same with `title`

### ==Format==
- normal image format
    - Pixel Map
        1. `.jpg`
            - hugh qualtiy
            - larger
            - not supporting transparent
        2. `.png`
        3. `.gif`
            - animation
    - Vector Graph
        - `.swf`, `.ai`, `.cdf`, `.fh`

### ==Semantics==
- `alt` and `title`
    - alt is the description for search engine
        - Necessary
    - title is the descriptiont for user
        - Optional
- `<figure>` and `<figurecaption>`
    ```htmlembedded=
    <figure>
        <img src="src/hello.png" alt="show hello message" />
        <figcaption></figcaption>
    </figure>
    ```
    - tag figure is used to include description and img itself
- the `img` tag sould be used to include images which wanted to be searched, like list data
    - other image file like <em>background-image</em> should use CSS to describe

# <span class="big-title">Hyperlink</span>
- `<a>`
    - `href`: Hyper Reference
        - **Outside link** -> url
        - **Inside link** -> relative location
            - usually for different page in same directory
        - **Anchor link**
            - use `#` to represent an anchor link
            - connect to part of this page
            - can use attr as anchor
                - `id` is unique in one document
    - `target`: Where will the connection open on?
        - default: `_self` open in this window
        - `_blank`: open on new window
        - others
            - `_parent`, `_top`
## <span class="intext-title">Example</span>
```htmlembedded=
<a href="https://www.google.com" target="_blanl">Go Google</a>

<a href="#Format">Go Format</a>
    <!--<h2 id="Format"></h2>-->

<a href="index/page2.html">Go Page 2</a>
```

# <span class="big-title">Form</span>
- `<form>`
    - like `<table>`, put form eles in it
    - It's not necessary to put all form eles in `<form>`
        - Put in if need interaction with backend

- **Form can include**
    1. text box
        - single line
        - multi line: `textarea`
        - password
    2. radio box
    3. check box
    4. button
    5. file upload
    6. list box

- **Attributes of `<form>`**
    1. name
    2. method
        - HTTP request method
        - get, ==post==
    4. action
        - decide which location to deal with data
    5. target
        - like same attr in `<a>`
        - usually use "\_b;ank"
    6. enctype
        - enconding type
        - use for data submitted to server

## <span class="important">Semantics</span>
- Should use `<label>` to include form eles
    ```htmlembedded=
    <input type="radio" name="gender" value="Boy" id="boy"/><label for="boy">Boy</label>
    <label><input type="radio" name="gender" value="Girl" />Girl</label>
    ```
- <span class="intext-point">fieldset, legend</span>
    - `fieldset` for including eles in form
    - `legend` can be the title of a form component


## <span class="intext-title">tag: \<input></span>
- use `type` attribute of **input tag** to complete most of form eles
- self-closing tag

## <span class="intext-title">Text Box</span>
```htmlembedded=
<form>
    <input type="text" value="Hello" size="10" maxlength="10" /><br />
    <textarea cols="3" rows="3">Introduce Yuorself</textarea>
</form>
```
1. Single Line: `type="text"`
    - **attrs**
        1. `value`
            - default value in text box
        3. `size` (usually use CSS)
        4. `maxlength`
2. Password: `type=password`
    - **attrs** (same with single line)
        1. `value`
            - default value in text box
        3. `size` (usually use CSS)
        4. `maxlength`
3. Multiple Line: `<textarea>`
    - **attrs**
        1. rows
        2. cols
        3. value
            - default value

## <span class="intext-title">Radio Box and Check Box</span>
```htmlembedded=
<input type="radio" name="Greet" value="Hello" />Hello
<input type="radio" name="Greet" value="Goodbye" checked/>Goodbye
```
- Radio Box: `type="radio"`
    - can only choose one
    - need to write content to show selection
    - **attrs**
        1. `value`
            - usual same with content
            - convenient for manipulating data
        2. `name`
            - specify **group** name
        3. `checked`
            - representing selected
- Check Box: `type="checkbox"`
    - Similar with radio
    - can multiple choose

## <span class="intext-title">Button</span>
- three types
    1. normal -> `type="button"`
    2. submit -> `type="submit"`
    3. reset -> `type="reset"`

- attribute: `value`
    - `value` is for information shown on the button

- Range
    - for reset, submit, they only work on the current range, ie their current form

## <span class="intext-title">File</span>
- `type="file"` work with file uploading

## <span class="intext-title">List Box</span>
```htmlembedded=
<select>
    <option selected disabled>Choose Application</option>
    <option value="Chrome">Chrome</option>
    <option value="Edge">Edge</option>
    <option value="FireFox">FireFox</option>
    <option value="Git">Git</option>
</select>
```
- `<select>`
    1. normal tag, have start tag and end tag
    2. **attrs**
        - `size`
        - `multiple`
            - with `ctrl` + `left_click`
- `<option>`
    1. for options in `<select>`
    2. normal tag, have start tag and end tag
    3. **attrs**
        - selected
        - value

# <span class="big-title">Other Tags</span>
## <span class="intext-title">`<div>` and `<span>`</span></div></span>
- division and span
    - work with CSS to colormize the web
- they have no sementics
    1. **\<div>** for large block structure
        - with CSS use
    2. **\<span>** is inline
        - use when no other inline eles are fixable
## <span class="intext-title">`<iframe>`</iframe></span>
```htmlembedded=
<iframe src="https://www.google.com" width="200" height="500"></iframe>
```
- embed another window in current window
- **Attrs**
    1. src
    2. width
    3. height
    4. scrolling
        - `auto`: default
        - `yes`: always show scrolling
        - `no`: dont show scrolling

## <span class="intext-title">Formating</span>
- Break -- `<br />`
    - break to make '\n' on web
    - self-closing tag
    ```htmlembedded=
    <font>Hello my boy</font>
    <br/>
    <font>Goodbye my boy</font>
    ```
- Horizontal Rule -- `<hr />`

# <span class="big-title">Attributes</span>
## <span class="intext-title">id and class</span>
- `id`
    1. unique
    2. **critical part of web**
- `class`
    1. like 'class' in other language
        - for same CSS style definition
    2. can define multiple class in one ele
        - one for public style
        - one for local style
        - etc.
    3. multiple class
    ```htmlembedded=
    <div class="important intext-title">
        simply use "space" to seperate class assignment
    </div>
    ```