231 lines
3.5 KiB
Markdown
231 lines
3.5 KiB
Markdown
# HTML5 Cheat Sheet
|
|
|
|
## Table of Contents
|
|
|
|
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)
|
|
|
|
## Document Structure
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document Title</title>
|
|
</head>
|
|
<body>
|
|
<!-- Content goes here -->
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
## HTML Basic Elements
|
|
|
|
### Heading Tags
|
|
|
|
```html
|
|
<h1>This is the main Heading 1</h1>
|
|
|
|
<h2>This is the second largest Heading 2</h2>
|
|
|
|
<h6>This is a much smaller 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
|
|
<form action="/submit" method="post">
|
|
<label for="name">Name:</label>
|
|
<input type="text" id="name" name="name" required>
|
|
<input type="submit" value="Submit">
|
|
</form>
|
|
```
|
|
|
|
## Semantic Elements
|
|
|
|
### Article
|
|
|
|
```html
|
|
<article>
|
|
<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>
|
|
function getLocation() {
|
|
if (navigator.geolocation) {
|
|
navigator.geolocation.getCurrentPosition(showPosition);
|
|
} else {
|
|
alert("Geolocation is not supported by this browser.");
|
|
}
|
|
}
|
|
|
|
function showPosition(position) {
|
|
alert("Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude);
|
|
}
|
|
</script>
|
|
```
|
|
|
|
### Local Storage
|
|
|
|
```html
|
|
<script>
|
|
// Store data
|
|
localStorage.setItem("username", "John Doe");
|
|
|
|
// Retrieve data
|
|
var username = localStorage.getItem("username");
|
|
console.log("Username: " + username);
|
|
</script>
|
|
```
|
|
|