CSnap/cheetsheetz
CSnap
/
cheetsheetz
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated HTML sheet.

This commit is contained in:
CSnap 2023-11-19 07:48:28 +00:00
parent 60a1563731
commit ce528248b3
2 changed files with 191 additions and 293 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

482
HTML.md
View File

@ -1,95 +1,18 @@
# HTML and CSS3 Cheat Sheet # Comprehensive HTML5 Cheat Sheet
## Table of Contents ## Table of Contents
1. [HTML Basics](#html-basics)
1.1 [Document Structure](#document-structure) 1. [Document Structure](#document-structure)
2. [HTML Basic Elements](#html-basic-elements)
3. [Text Formatting](#text-formatting)
4. [Links and Navigation](#links-and-navigation)
5. [Multimedia Elements](#multimedia-elements)
6. [Embedded Content](#embedded-content)
7. [Forms](#forms)
8. [Semantic Elements](#semantic-elements)
9. [APIs](#apis)
1.2 [HTML Elements](#html-elements) ## Document Structure
1.3 [Headings](#headings)
1.4 [Paragraphs](#paragraphs)
1.5 [Lists](#lists)
1.6 [Links](#links)
1.7 [Images](#images)
2. [HTML Advanced](#html-advanced)
2.1 [Forms](#forms)
2.2 [Tables](#tables)
2.3 [Semantics](#semantics)
2.4 [Media Elements](#media-elements)
2.5 [IFrames](#iframes)
3. [CSS3 Basics](#css3-basics)
3.1 [Selectors](#selectors)
3.2 [Box Model](#box-model)
3.3 [Colors and Backgrounds](#colors-and-backgrounds)
3.4 [Text Styling](#text-styling)
3.5 [Fonts](#fonts)
4. [CSS3 Advanced](#css3-advanced)
4.1 [Flexbox](#flexbox)
4.2 [Grid](#grid)
4.3 [Transitions](#transitions)
4.4 [Transforms](#transforms)
4.5 [Animations](#animations)
5. [Responsive Web Design](#responsive-web-design)
5.1 [Media Queries](#media-queries)
5.2 [Viewport](#viewport)
6. [CSS Layout](#css-layout)
6.1 [Floats](#floats)
6.2 [Positioning](#positioning)
6.3 [Display Property](#display-property)
6.4 [Box Sizing](#box-sizing)
7. [Advanced HTML Techniques](#advanced-html-techniques)
7.1 [Canvas](#canvas)
7.2 [SVG](#svg)
7.3 [Web Components](#web-components)
7.4 [Drag and Drop](#drag-and-drop)
8. [Advanced CSS Techniques](#advanced-css-techniques)
8.1 [Custom Properties (CSS Variables)](#custom-properties-css-variables)
8.2 [CSS Grid Layout](#css-grid-layout)
8.3 [Filter Effects](#filter-effects)
8.4 [Clipping and Masking](#clipping-and-masking)
## HTML Basics
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
@ -97,235 +20,210 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title> <title>Document Title</title>
<link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>
<header> <!-- Content goes here -->
<h1>Welcome to My Website</h1>
</header>
<section>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
</section>
<h2>Section 1</h2>
<p>This is a paragraph.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<a href="https://www.example.com">Visit Example</a>
<img src="image.jpg" alt="Description of the image">
</body> </body>
</html> </html>
``` ```
## HTML Advanced ## HTML Basic Elements
### Heading Tags
```html
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<!-- ... -->
<h6>This is a Heading 6</h6>
```
### Paragraph
```html
<p>This is a paragraph.</p>
```
### Lists
#### Unordered List
```html
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
```
#### Ordered List
```html
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
```
### Links
```html
<a href="https://www.example.com">Visit Example</a>
```
## Text Formatting
### Bold
```html
<strong>This is bold text</strong>
```
### Italic
```html
<em>This is italicized text</em>
```
### Underline
```html
<u>This text is underlined</u>
```
## Links and Navigation
### Anchor Tag
```html
<a href="https://www.example.com">Visit Example</a>
```
### Navigation
```html
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
```
## Multimedia Elements
### Image
```html
<img src="image.jpg" alt="Description of the image">
```
### Audio
```html
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
```
### Video
```html
<video controls width="300">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
```
## Embedded Content
### Iframe
```html
<iframe src="https://www.example.com" width="600" height="400" frameborder="0"></iframe>
```
### Embedded Audio
```html
<embed src="audio.mp3" type="audio/mp3" width="300" height="50">
```
## Forms
```html ```html
<!-- Forms -->
<form action="/submit" method="post"> <form action="/submit" method="post">
<label for="name">Name:</label> <label for="name">Name:</label>
<input type="text" id="name" name="name" required> <input type="text" id="name" name="name" required>
<input type="submit" value="Submit"> <input type="submit" value="Submit">
</form> </form>
<!-- Tables -->
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John Doe</td>
<td>25</td>
</tr>
</table>
<!-- Semantics -->
<aside>
<h3>Side Content</h3>
<p>Additional information.</p>
</aside>
<!-- Media Elements -->
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
<!-- IFrames -->
<iframe src="https://www.example.com" width="600" height="400" frameborder="0"></iframe>
``` ```
## CSS3 Basics ## Semantic Elements
```css ### Article
/* Selectors */
h1 {
color: #3498db;
}
/* Box Model */
div {
width: 200px;
height: 100px;
padding: 10px;
margin: 20px;
border: 2px solid #2ecc71;
}
/* Colors and Backgrounds */
body {
background-color: #ecf0f1;
}
/* Text Styling */
p {
font-size: 16px;
font-weight: bold;
}
/* Fonts */
body {
font-family: 'Arial', sans-serif;
}
```
## CSS3 Advanced
```css
/* Flexbox */
.container {
display: flex;
justify-content: space-between;
}
/* Grid */
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
}
/* Transitions */
button {
transition: background-color 0.3s ease;
}
button:hover {
background-color: #e74c3c;
}
/* Transforms */
.box {
transform: rotate(45deg);
}
/* Animations */
@keyframes slide {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.slider {
animation: slide 1s ease-in-out;
}
```
## Responsive Web Design
```css
/* Media Queries */
@media only screen and (max-width: 600px) {
body {
font-size: 14px;
}
}
/* Viewport */
meta {
width: device-width;
initial-scale: 1.0;
}
```
## CSS Layout
```css
/* Floats */
.float-left {
float: left;
}
/* Positioning */
.absolute-position {
position: absolute;
top: 10px;
left: 20px;
}
/* Display Property */
.inline-block {
display: inline-block;
}
/* Box Sizing */
box-sizing: border-box;
```
## Advanced HTML Techniques
```html ```html
<!-- Canvas --> <article>
<canvas id="myCanvas" width="200" height="100"></canvas> <h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
```
### Section
```html
<section>
<h2>Section Title</h2>
<p>Section content goes here.</p>
</section>
```
### Header and Footer
```html
<header>
<h1>Page Header</h1>
</header>
<footer>
<p>Copyright © 2023</p>
</footer>
```
## APIs
### Geolocation
```html
<button onclick="getLocation()">Get Location</button>
<script> <script>
var canvas = document.getElementById('myCanvas'); function getLocation() {
var ctx = canvas.getContext('2d'); if (navigator.geolocation) {
ctx.fillStyle = '#3498db'; navigator.geolocation.getCurrentPosition(showPosition);
ctx.fillRect(0, 0, 200, 100); } else {
</script> alert("Geolocation is not supported by this browser.");
<!-- SVG --> }
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
<!-- Web Components -->
<my-custom-element></my-custom-element>
<!-- Drag and Drop -->
<div id="drag" draggable="true">Drag me!</div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
function allowDrop(event) {
event.preventDefault();
} }
function drop(event) { function showPosition(position) {
event.preventDefault(); alert("Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude);
var data = event.dataTransfer.getData('text');
var draggedElement = document.getElementById(data);
event.target.appendChild(draggedElement);
} }
</script> </script>
``` ```
## Advanced CSS Techniques ### Local Storage
```css ```html
/* Custom Properties (CSS Variables) */ <script>
:root { // Store data
--main-color: #3498db; localStorage.setItem("username", "John Doe");
--secondary-color: #e74c3c;
} // Retrieve data
body { var username = localStorage.getItem("username");
background-color: var(--main-color); console.log("Username: " + username);
} </script>
button {
background-color: var(--secondary-color);
}
/* CSS Grid Layout */
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
}
.grid-item {
padding: 20px;
text-align: center;
border: 1px solid #ccc;
}
/* Filter Effects */
.image-container {
filter: grayscale(50%);
}
/* Clipping and Masking */
.clipped-element {
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}
``` ```

2
README.md
View File

@ -2,7 +2,7 @@
### A compendium of various technical "cheat sheets". ### A compendium of various technical "cheat sheets".
- [HTML and CSS](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/HTML.md) - [HTML](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/HTML.md)
- [JavaScript](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/javascript.md) - [JavaScript](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/javascript.md)
- [JavaScript Object Notation](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/JSON.md) - [JavaScript Object Notation](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/JSON.md)
- [Markdown](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/markdown.md) - [Markdown](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/markdown.md)