HTML Basics

2023-06-02

字数统计: 802字 | 阅读时长: 5min

HTML Basics

HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser. It defines the structure and content of web pages.

Document Structure

A basic HTML document has this structure:

<!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>

<!DOCTYPE html>: Declares the document type and HTML version
<html>: The root element of an HTML page
<head>: Contains meta-information about the document
<meta charset="UTF-8">: Specifies character encoding
<meta name="viewport">: Controls viewport behavior on mobile devices
<title>: Specifies the title shown in the browser tab
<body>: Contains the visible page content

Essential HTML Elements

Headings

HTML offers six levels of headings:

<h1>Main Heading</h1>
<h2>Secondary Heading</h2>
<h3>Tertiary Heading</h3>
<h4>Fourth Level Heading</h4>
<h5>Fifth Level Heading</h5>
<h6>Sixth Level Heading</h6>

Paragraphs

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

Links

1	<a href="https://example.com">Link text</a>

Images

1	<img src="image.jpg" alt="Description of image">

Lists

Unordered list:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Ordered list:

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Divisions and Spans

1 2	<div>A block-level container for grouping elements</div> <span>An inline container for text</span>

Semantic HTML

Semantic elements clearly describe their meaning to both the browser and the developer:

<header>Document or section header</header>
<nav>Navigation links</nav>
<main>Main content area</main>
<article>Self-contained content</article>
<section>Thematic grouping of content</section>
<aside>Sidebar content</aside>
<footer>Document or section footer</footer>

Benefits of semantic HTML:

Improves accessibility
Enhances SEO
Makes code more maintainable

Forms

Forms allow user input:

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <input type="submit" value="Submit">
</form>

Common input types:

text: Single-line text input
email: Email address input
password: Password input
number: Numeric input
checkbox: Checkboxes for multiple selections
radio: Radio buttons for single selection
textarea: Multi-line text input
select: Dropdown selection

Tables

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
        </tr>
    </tbody>
</table>

HTML5 Features

Audio and Video: <audio> and <video> elements
Canvas: <canvas> for drawing graphics
SVG: Scalable Vector Graphics
Local Storage: Client-side data storage
Geolocation: Access to user’s location
Web Workers: Background processing
Drag and Drop: Native drag-and-drop functionality

Best Practices

Use semantic elements whenever possible
Validate your HTML using the W3C validator
Keep markup clean and properly indented
Provide alt text for all images
Use descriptive link text instead of “click here”
Keep accessibility in mind at all times
Separate structure (HTML) from presentation (CSS)

Learning Resources

HTML is the foundation of web development. Master these concepts before moving on to CSS and JavaScript.