HTML Cheatsheet
Author: Yuexi Tan
Created on 2015-09-15
Last modified on 2015-09-15
Basic form
<!DOCTYPE html>
<html>
<head> Will NOT be shown </head>
<body> Will be shown </body>
</html>
Tags
Inside <head> </head>
- title: <title> webpage title </title>
- link: <link href="link-to-css" rel="stylesheet">
- style: to include CSS directly in HTML file
<style>
.aClass {
key: value;
}
anElement {
key: value;
}
anElement [type="attribute"] {
key: value;
}
</style>
- styles:
- background: #000 url("link-to-img")|black|rgba(0,255,255,0.5);
- background-size: N%|Npx|cover|contain;
- border-radius: 10px; # rounded corners
- display: inline|block;
- float: left|right;
- font-family: "Helvetica Neue", helvetica, sans-serif;
- margin: TOPpx RIGHTpx BOTTOMpx LEFTpx; # or 0 auto, to center everything except text
- max-width: 500px;
- position: absolute;
- opacity: .6; # change transparency of an element and things inside
- media queries:
@media (max-width: 500px) {
body {
background: red;
}
}
- toggleclass (provided by jQuery):
$('img').on('click', function() {
(this).toggleClass('caption');
})
Inside <body> </body>
- h1-h6: headings
- email input: <input type="email" placeholder="Some text (e.g. Your email)">
- submit input: <input type="submit">
- paragraph: <p> some text </p>
- image: <img src="link-to-img" />
- article: <article></article>
- script: <script> javascript </script>
- class: <anElement class="classA"> to select elements </anElement>
- line break: <br />
- span: <span> inline container </span>
Resource
Dash | Learn HTML, CSS, JavaScript with our free online tutorial | General Assembly