HTML Basics

字数统计: 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:

1
2
3
4
5
6
7
8
9
10
11
<!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:

1
2
3
4
5
6
<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>
1
<a href="https://example.com">Link text</a>

Images

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

Lists

Unordered list:

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

Ordered list:

1
2
3
4
5
<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:

1
2
3
4
5
6
7
<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:

1
2
3
4
5
6
7
8
9
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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

  1. Use semantic elements whenever possible
  2. Validate your HTML using the W3C validator
  3. Keep markup clean and properly indented
  4. Provide alt text for all images
  5. Use descriptive link text instead of “click here”
  6. Keep accessibility in mind at all times
  7. 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.

show all >>

Frontend Development Learning Path

字数统计: 206字   |   阅读时长: 1min

Frontend Development Learning Path

This learning path provides a structured approach to becoming proficient in frontend development. Follow these modules in sequence for a comprehensive understanding of frontend technologies and best practices.

Module 1: HTML & CSS Fundamentals

Module 2: JavaScript Core

Module 3: Frontend Frameworks

Module 4: Frontend Engineering

Module 5: Advanced Topics

Learning Approach

  1. Theory First: Understand the concepts before writing code
  2. Practice Projects: Build real projects to reinforce learning
  3. Code Review: Get feedback on your code from peers or mentors
  4. Stay Updated: Frontend technologies evolve rapidly - follow blogs, podcasts, and GitHub trends
  • Official documentation (MDN, React docs, etc.)
  • Online platforms: freeCodeCamp, Frontend Masters, Codecademy
  • YouTube channels: Traversy Media, Web Dev Simplified, Academind
  • Books: “Eloquent JavaScript”, “You Don’t Know JS”

Start with Module 1 and progress sequentially. Each topic builds on previous knowledge, creating a solid foundation for frontend development expertise.

show all >>

1004.Maximum continuity1Number III Maximum continuity1Number III

字数统计: 297字   |   阅读时长: 1min

Today’s daily question is too difficult，So find the problem by yourself。Today’s question is a hash table+Sliding window algorithm，虽然感觉只用了Sliding window algorithm。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

class Solution:
    def longestOnes(self, nums: List[int], k: int) -> int:
        k_mean = k
        # Used to record how many arrays there are now
        flag = 0
        # Used to record the maximum land number
        max_flag = 0
        for start in range(len(nums)):
            tail = start
            while k >= 0 and tail <= len(nums) - 1:
                if nums[tail] == 1:
                    tail += 1
                    flag += 1
                elif nums[tail] == 0 and k > 0:
                    tail += 1
                    k -= 1
                    flag += 1
                elif nums[tail] == 0 and k == 0:
                    k = k_mean
                    max_flag = max(max_flag, flag)
                    flag = 0
                    break
                if tail == len(nums):
                    max_flag = max(max_flag, flag)
                    flag = 0
                    break
        return max_flag

This is my approach at the beginning，Although the double pointer is used，But there is no flexibility，Very empty feeling，Very dry slide。
the following@Lincoln@Lincoln Big practice，Just as one record of yourself，不作为我的answer发表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Solution:
    def longestOnes(self, nums: List[int], k: int) -> int:
        """
        Thinking：1. k=0It can be understood as the problem of the maximum duplication sub -string
             2. If the current window value-In the window1Number <= k: Then expand the window(right+1)
                If the current window value-In the window1Number > k: Swipe the window to the right(left+1)
        method：Hash table + Sliding window
        """
        n = len(nums)
        o_res = 0
        left = right = 0
        while right < n:
            if nums[right]== 1: o_res += 1
            if right-left+1- o_res > k:
                if nums[left]== 1: o_res -= 1 
                left += 1
            right += 1
        return right - left

Look atLincolnBigThinking，very clearly，remember

show all >>