Cheat Sheet of HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Cheat Sheet</title>
</head>
<body>
<!-- Headings, this is what comments look like -->
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<!-- body -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. <strong>Repellendus repellat ab adipisci consequuntur excepturi nisi</strong>, pariatur vel distinctio dolore voluptates quia facilis esse provident <em>itaque eum quaerat tempora quis aut.</em>
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. <a href="http://bilibili.com" target="_blank">Repellendus repellat ab adipisci consequuntur excepturi nisi</a>, pariatur vel distinctio dolore voluptates quia facilis esse provident itaque eum quaerat tempora quis aut.
</p>
<!-- list -->
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
<!-- list with numbers -->
<ol>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>
<!-- table -->
<table>
<tr>
<!-- th: heading -->
<th>name</th>
<th>age</th>
</tr>
<tr>
<!-- ta: data -->
<td>john</td>
<td>20</td>
</tr>
<tr>
<td>jane</td>
<td>21</td>
</tr>
</table>
<form action="process.php" method="POST">
<!-- div can break the elements to separate lines -->
<div>
<label>first name</label>
<input type="text" name="firstname" placeholder="enter first name">
</div>
<!-- br: break line -->
<br>
<div>
<label>last name</label>
<input type="text" name="lastname">
</div>
<br>
<div>
<label>email</label>
<input type="emial" name="email">
</div>
<br>
<div>
<label>message</label>
<textarea name="message" id=""></textarea>
</div>
<br>
<div>
<label>gender</label>
<select name="gender" id="">
<option value="male">male</option>
<option value="female">female</option>
</select>
</div>
<br>
<div>
<label>age</label>
<input type="number" name="age" value="18">
</div>
<br>
<div>
<label>birthday</label>
<input type="date" name="birthday" value="18">
</div>
<br>
<input type="submit" name="submit" value="submit"">
</form>
<button>click me</button>
<a href="html.png">
<img src="html.png" alt="Sample Image" width="200">
</a>
<blockquote cite="https://traversymedia.com">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse commodi provident illum quibusdam repellat rem tenetur totam voluptates vitae accusantium pariatur modi minima velit illo necessitatibus ad, distinctio quis odit.
</blockquote>
<p>
<abbr title="World Wide Web">WWW</abbr> is awesome!
</p>
<p>
<cite>HTML crash course</cite> by Brad Traversy
</p>
</body>
</html>
Blog type
<!DOCTYPE html>
<html>
<head>
<title>HTML blog</title>
<meta name="description" content="Awesome blog by Henry"></meta>
<meta name="keywords" content="blog, web, demo"></meta>
<style type="text/css">
#main-header{
text-align: center;
background-color: black;
color: white;
padding: 10px;
}
#main-footer{
text-align: center;
background-color: grey;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<header id="main-header">
<h1>Welcome to my blog</h1>
</header>
<a href="index.html">Go to index</a>
<section>
<article class="post">
<h3>Blog Post 1</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. <strong>Repellendus repellat ab adipisci consequuntur excepturi nisi</strong>, pariatur vel distinctio dolore voluptates quia facilis esse provident <em>itaque eum quaerat tempora quis aut.</em>
</p>
<small>Post my Henry on Aug 10</small>
<h3>Blog Post 2</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. <strong>Repellendus repellat ab adipisci consequuntur excepturi nisi</strong>, pariatur vel distinctio dolore voluptates quia facilis esse provident <em>itaque eum quaerat tempora quis aut.</em>
</p>
<small>Post my Henry on Aug 10</small>
</article>
</section>
<aside>
<h3>Catergories</h3>
<nav>
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
</ul>
</nav>
</aside>
<footer id="main-footer">
<p>Copyright © 2021</p>
</footer>
</body>
</html>
