HTML Boilerplate
|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> |
HTML Lists
<ol></ol>
ordered list
<li></li> unordered
list
HTML Image
<img src=”” alt=””>
HTML Links and Anchor Tags
<a href=https://...>Hello</a>
HTML Tables
|
<table cellspacing=””
/// cells space between each other> <thead> ///
table head area <tr> ///
table row <th> ///
table head </th> </tr> </thead> <tbody> ///
table body <tr> ///
table row <td> ///
table data </td> </tr> </tbody> <tfoot> ///
table footer</tfoot> </table> |
Access
Emoji in Windows 10 Using Keyboard Shortcut: WIN + . (full stop) keyboard shortcut, or else
the WIN + ; (semicolon)
HTML Forms
|
<form class=””
action=”” method=”” enctype=”text/plain”> /// <lable> ///
</lable> <input type = “text” name=”” value=””>
///there are many other types, eg. File, color, date,
radio, email… </input> <input type = “submit” name=””> ///
</input> </form> |
HTML Spacing
<hr> /// horizontal row
HTML Divs
<div class="..."></div> /// divider of webpage, it doesn't do anything unless you apply some css
Favicons
|
<head> <link rel=”icon” href=”favicon.ico”>
<link rel=”icon” href=”favicon.ico?v=2”>
/// if it doesn’t refresh </head> |
HTML DOM
(Document Object Model)
|
document.firstElementChild // return the first element
on the webpage document.lastElementChild // return the last element
on the webpage document.firstElementChild.innerHTML // return the text inside
the first element on the webpage document.querySelector(“input”).click() // click on the first element
whose tag is input, same rule as CSS for selectors document.querySelectorAll(“input”).click() // click on all the elements
whose tag is input, same rule as CSS for selectors document.getElementsByTagName(“h1”) // return an array of all the
elements that have the tag “h1” document.getElementsByTagName(“h1”)[n] // return the n+1 element
that has the tag “h1” document.getElementsByClassName(“myClass”) // return an array of all the
elements that have the class name “myClass” document.getElementById(“myID”) // return the element that
has the id name “myID” |
