HTML
Some interesting tags
<a>
: link to another web page<label>
: link text to an input, so when clicked it was as if the input is clicked<iframe>
: another html page within the current html page<audio>
: plays music in your page<code>
: monospace for letters<pre>
: take tabs and spaces into accounts<header>
,<nav>
,<footer>
, etc.: semantic tags rather than functional tags. But search engines like Google or web scrapers would grab info from tags like this and understand the web better.<meta>
: describes the meta data of the web page. Like page description, image, favicon, etc.
-
<meta name="viewport" content="width=device-width">
sets viewport size to the actual size of the device, rather than auto zooming out. (especially for mobile devices) -
<meta name="viewport" content="initial-scale=1.0, ...">
tells how much we can zoom in/out.
<noscript>
: defines what shows up when JS is disabled for the web.<embed>
: embeds media (like a youtube video) into the web page. The main difference from an<iframe>
is that<iframe>
is used to embed an entire html page while this is for media components.
Images
Raster image vs. Vector image
A raster images stores a 2D array of colours, gets blurry when magnified; while a vector image stores the geometry of the image instead.
JPG (raster)
- 24 bits per colour (more bits means more colour options)
- Lossy compression (JPG encoded when storing and decoded when displaying, but can lose original info after decoding)
- Suitable for high resolution photos
PNG (raster)
- 16 - 24 bits per colour
- Lossless compression
- Suitable mostly for non-photo use cases (when subtles details matter)
Base64 encoding
A binary-to-text encoding scheme to convert binary data to an ASCII string.
A common application is to represent image directly in the <img src="..." />
tag, which stores the image's data as part of the html, reducing the request to further retrieve that image data from an URI. This is a common technique for loading small image files.
CSS
Combinators
.B .C
all .C that are inside .B
.B > .C
all .C that are direct child of .B
.B + .C
sibing .C that follows immediately after .C
.B ~ .C
all sibings .C that follows after .C
Pseudo classes
<selector>:<pseudo-class>
: select the elements with a special state.
e.g. button:hover
div:first-child
Pseudo elements
<selector>::<pseudo-element>
: create content for the selected elements or style part of the elements.
e.g. p::after { content: "."; color: red; }
appends a red "." after every <p>
element
Specificity
!important
> inline style > id > class > type
Inline vs. Block elements
Inline elements(like <span>
) takes only the width of its content, while block elements(like <div>
) takes up the whole line, resulting in a newline for every element.
Grid layout
{display: grid}
: Just another useful layout I don't use very often. Use it when necessary then!
Top comments (0)