HTML介绍以及常用代码总结

当前位置：电视猫 > HTML/Xhtml>

电视猫时间： 2024-07-13 09:28:37

　　HTML介绍以及常用代码总结

HTML介绍

HTML stands for HyperText Markup Language. It is the standard markup language for creating web pages and is used to structure and describe the content of a web page. HTML consists of a series of elements and attributes that define the different components of a web page, such as headings, paragraphs, images, links, and forms.

Key characteristics of HTML:

Declarative: HTML is a declarative language, meaning it describes what the content of a web page should look like, not how it should be displayed. This allows web browsers to interpret and render the HTML code in a consistent manner across different devices and platforms.
Platform-independent: HTML is platform-independent, meaning it can be used to create web pages that can be viewed on any device with a web browser, regardless of the operating system or hardware.
Easy to learn: HTML is relatively easy to learn, with a simple syntax and a clear structure. This makes it a good starting point for beginners who want to learn how to create web pages.

Common HTML elements:

<!DOCTYPE html>: This declaration tells the web browser that the document is an HTML5 document.
<html>: This is the root element of an HTML document and contains all other elements.
<head>: This section contains metadata about the document, such as the title and character encoding.
<body>: This section contains the main content of the document, such as headings, paragraphs, images, links, and forms.
<h1> to <h6>: These elements define heading levels, with <h1> being the most important heading and <h6> being the least important.
<p>: This element defines a paragraph of text.
<img>: This element embeds an image into the web page.
<a>: This element creates a hyperlink to another web page or resource.
<form>: This element defines a form for collecting user input.

Common HTML attributes:

id: This attribute assigns a unique identifier to an element.
class: This attribute assigns a class name to an element, which can be used for styling purposes.
src: This attribute specifies the source of an image or other resource.
href: This attribute specifies the destination URL for a hyperlink.
action: This attribute specifies the action URL for a form.
method: This attribute specifies the HTTP method for submitting a form (GET or POST).

Example HTML code:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>My Web Page</title>
</head>
<body>
  <h1>Welcome to My Web Page</h1>

  <p>This is a paragraph of text.</p>

  <img src="image.jpg" alt="Image description">

  <a href="https://www.google.com">Link to Google</a>

  <form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="## HTML常用代码总结

Here's a summary of common HTML tags and their usage:

**Structural Tags:**

| Tag | Description | Example |
|---|---|---|
| `<!DOCTYPE html>` | Declares the document type as HTML5 | `<!DOCTYPE html>` |
| `<html>` | Defines the root element of an HTML document | `<html>` |
| `<head>` | Contains metadata about the document, such as title and character encoding | `<head><title>My Web Page</title></head>` |
| `<body>` | Contains the main content of the document, such as headings, paragraphs, images, and links | `<body><h1>Welcome to My Web Page</h1></body>` |

**Text Formatting Tags:**

| Tag | Description | Example |
|---|---|---|
| `<h1>` to `<h6>` | Define heading levels, with `<h1>` being the most important and `<h6>` being the least | `<h1>My Main Heading</h1><h2>Subheading</h2>` |
| `<p>` | Defines a paragraph of text | `<p>This is a paragraph of text.</p>` |
| `<br>` | Inserts a line break | `<p>This is a paragraph with a line break.<br>This is the next line.</p>` |
| `<hr>` | Inserts a horizontal line | `<hr>` |

**Media Embedding Tags:**

| Tag | Description | Example |
|---|---|---|
| `<img>` | Embeds an image into the web page | `<img src="image.jpg" alt="Image description">` |
| `<video>` | Embeds a video into the web page | `<video src="video.mp4" controls>Your browser does not support the video tag.</video>` |
| `<audio>` | Embeds an audio file into the web page | `<audio src="audio.mp3" controls>Your browser does not support the audio tag.</audio>` |

**Hyperlink Tags:**

| Tag | Description | Example |
|---|---|---|
| `<a>` | Creates a hyperlink to another web page or resource | `<a href="https://www.google.com">Link to Google</a>` |

**Form Tags:**

| Tag | Description | Example |
|---|---|---|
| `<form>` | Defines a form for collecting user input | `<form action="/submit" method="post">` |
| `<label>` | Associates a label with an input field | `<label for="name">Name:</label>` |
| `<input>` | Defines an input field | `<input typename">` |
| `<textarea>` | Defines a multi-line text input field | `<textarea id="message" name="message" rows="5" cols="30"></textarea>` |
| `<button>` | Defines a button to submit the form or trigger an action | `<button type="submit">Submit</button>` |

**Other Useful Tags:**

| Tag | Description | Example |
|---|---|---|
| `<ul>` | Defines an unordered list | `<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>` |
| `<ol>` | Defines an ordered list | `<ol><li>1. Item 1</li><li>2. Item 2</li><li>3. Item 3</li></ol>` |
| `<table>` | Defines a table | `<table><tr><th>Name</th><th>Age</th></tr><tr><td>John</td><td>30</td></tr><tr><td>Jane</td><td>25</td></tr></table>` |
| `<tr>` | Defines a table row | `<tr><th>Name</th><th>Age</th></tr>` |
| `<th>` | Defines a table header cell | `<th>Name</th><th>Age</th>` |
| `<td>` | Defines a table data cell | `<tr><td>John</td><td>30</td></tr>` |
| `<div>` | Defines a generic division element for grouping content | `<div class="container"><h1>My Content</h1></div>` |
| `<span>` | Defines an inline span element for styling or grouping text | `<span style="color: red;">This text is red</span>` |

Remember that HTML is a vast language with many more tags and attributes than can be listed here. It's essential to practice using HTML and explore various resources to gain a deeper understanding of its capabilities.