HTML - HackMD

--- 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 & 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 & 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>© 2016 Camper Cat</footer> </body>  ``` ## <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=  <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" />  <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>  <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> ```