HTML#
#
hello.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>HTML5 Boilerplate</title>
</head>
<body>
<h1>Hello world, hello CheatSheets.zip!</h1>
</body>
</html>
Or try it out in the jsfiddle
Comment#
<!-- this is a comment -->
<!--
Or you can comment out a
large number of lines.
-->
Paragraph#
<p>I'm from CheatSheets.zip</p>
<p>Share quick reference cheat sheet.</p>
HTML link#
<a href="https://cheatsheets.zip">CheatSheets</a>
<a href="mailto:jack@abc.com">Email</a>
<a href="tel:+12345678">Call</a>
<a href="sms:+12345678&body=ha%20ha">Msg</a>
|
The URL that the hyperlink points to |
|
|
Relationship of the linked URL |
|
|
Link target location: |
See: The <a> Attributes
Image Tag#
<img
loading="lazy"
src="https://xxx.png"
alt="Describe image here"
width="400"
height="400"
/>
|
Required, Image location (URL | Path) |
|
|
Describe of the image |
|
|
Width of the image |
|
|
Height of the image |
|
|
How the browser should load |
Headings#
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
You should only have one h1 on your page
Section Divisions#
|
Division or Section of Page Content |
|
Section of text within other content |
|
Paragraph of Text |
|
Line Break |
|
Basic Horizontal Line |
These are the tags used to divide your page up into sections
Inline Frame#
<iframe
title="New York"
width="342"
height="306"
id="gmap_canvas"
src="https://maps.google.com/maps?q=2880%20Broadway,%20New%20York&t=&z=13&ie=UTF8&iwloc=&output=embed"
scrolling="no"
>
</iframe>
↓ Preview#
JavaScript in HTML#
<script type="text/javascript">
let text = 'Hello CheatSheets.zip';
alert(text);
</script>
External JavaScript#
<body>
...
<script src="app.js"></script>
</body>
CSS in HTML#
<style type="text/css">
h1 {
color: purple;
}
</style>
External stylesheet#
<head>
...
<link rel="stylesheet" href="style.css" />
</head>
HTML Tables#
Table Example#
<table>
<thead>
<tr>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr>
<td>Roberta</td>
<td>39</td>
</tr>
<tr>
<td>Oliver</td>
<td>25</td>
</tr>
</tbody>
</table>
<td> Attributes#
Attribute |
Description |
|---|---|
|
Number of columns a cell should span |
|
One or more header cells a cell is related to |
|
Number of rows a cell should span |
See: td#Attributes
<th> Attributes#
Attribute |
Description |
|---|---|
|
Number of columns a cell should span |
|
One or more header cells a cell is related to |
|
Number of rows a cell should span |
|
Description of the cell’s content |
The header element relates to |
See: th#Attributes
HTML Lists#
Unordered list#
<ul>
<li>I'm an item</li>
<li>I'm another item</li>
<li>I'm another item</li>
</ul>
Ordered list#
<ol>
<li>I'm the first item</li>
<li>I'm the second item</li>
<li>I'm the third item</li>
</ol>
Definition list#
<dl>
<dt>A Term</dt>
<dd>Definition of a term</dd>
<dt>Another Term</dt>
<dd>Definition of another term</dd>
</dl>
HTML Forms#
Form Attribute#
Attribute |
Description |
|---|---|
|
Name of form for scripting |
|
URL of form script |
|
HTTP method, |
|
Media type, See enctype |
|
Runs when the form was submit |
|
Runs when the form was reset |
Checkboxes#
<input type="checkbox" name="s" id="soc" />
<label for="soc">Soccer</label>
<input type="checkbox" name="s" id="bas" />
<label for="bas">Baseball</label>
↓ Preview#
Checkboxes allows the user to select one or more
Also see#
HTML 4.01 Specification (w3.org)