15 Aug 2024

Web learning in practice

This post records the basic web development knowledge I have learned in practice.

1. Basic html structure

<!DOCTYPE html>
<html lang="en">

    <!-- A head -->
    <head>
        <meta charset="UTF-8">
        <!-- to accommodate different screen size -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- A tab name -->
        <title>A website</title>
        <link rel="stylesheet" href="styles.css">
    </head>


    <!-- A body -->
    <<body>
    <!-- A page header  -->
    <header>
        <h1>Welcome</h1>
    </header>

    <!-- A navigation panel -->
    <nav>
        <ul>
        <<li><a href="index.html">Home</a></li>
        </ul>
    </nav>

    <!-- The main content -->
    <main>
        <section id="home">
        <h2>Home</h2>
        <p>Welcome!</p>
        </section>
    </main>

    <!-- A footer -->
    <footer>
        <p>&copy; All rights reserved.</p>
    </footer>
    </body>

</html>

2. Tags

<a>: contain links; have following attributes:
- target="_blank": open the link in a new tab.
- title="Go to the link": the tooltip message, i.e., the floating message when a user hovers over.
<span>: don’t add line breaks before or after it.
<hr>: horizontal rule.

3. Attributes

id="home":
- allow specific styling of the element, e.g., #home ul {...} only styles the ul in the block with the same id.

4. Javascript

4.1. Fetch from an HTML URL

await fetch(url): returns a Response object.
- await waits for the method to complete.
await response.text(): returns the html string.
DOMParser().parseFromString(postHtml, "text/html"): returns a Document object, which is a complete DOM tree from the HTML string; DOMParser is a built-in browser API.
postDoc.getElementById("content"): returns an Element with the content id name.
content.querySelector(".post-title a"): fetches the first Element with the post-title class name, and returns the first Element the first <a> (anchor) tag.
- . for classes, # for IDs (IDs should be unique within a page)

4.2. Modify a DOM

content.querySelector(".taglist").remove(): removes the element from the DOM, i.e., it modifies content.

4.3. Syntax

const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"): add a backslash to any special character in the query; $& is a special pattern used in Javascript’s replacement method.