Basic Notes on Modern Web Development·Opening: Starting from the HTML web page skeleton

Modern web pages are no longer a collection of pure text. The three Musketeers each perform their own duties: 🦴 HTML: Define the content structure (skeleton) of the page 🎨 CSS: Control the visual presentation (skin) of the page 🎮 JavaScript: Implement the interactive logic (muscle) of the page

1. First understand: What is HTML?

HTML (HyperText Markup Language) is the only standard markup language for building Web pages - note that it is not a programming language and does not have logical functions such as variables and loops. It is only responsible for using "tags" to "mark" the identity of the content.

For example, use<h1>Tell the browser "This is a first-level title, it needs to be bolded and enlarged", use<p>Mark "This is a normal text".

The latest version is currently HTML5, which is fully supported by all modern browsers (Chrome, Firefox, Safari, Edge latest versions). HTML5 brings practical features such as semantic tags, built-in multimedia support, and form enhancements, completely bidding farewell to the HTML4 era.<div>A confusing situation where structures are stacked and distinguished solely by class names.

2. Your first HTML5 web page: basic document structure

Without further ado, let’s take a look at a complete and directly executable code👇

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 页面元信息区（告诉浏览器怎么处理这个页面） -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个HTML5网页</title>
</head>
<body>
    <!-- 页面可见内容区（用户能看到的所有内容都放这里） -->
    <h1>🎉欢迎来到我的Web开发世界！</h1>
    <p>这是一段普通的段落文本～</p>
</body>
</html>

Copy the above code and save it asindex.html(By default, the browser will open the file namedindexHome page file), double-click to open it, and you will have your first web page!

Let’s explain the core points of this code line by line:

<!DOCTYPE html>: Document type declaration, telling the browser "This is an HTML5 document, please use HTML5 rules to parse it." Must be placed on the first line, otherwise the browser may enter "Quirks Mode", causing the page to display abnormally.
<html lang="zh-CN">: The root tag of the HTML document, all content must be placed in it;lang="zh-CN"Indicates that the document language is Simplified Chinese, which is convenient for search engine identification and screen reader reading.
<head>: The meta information area of the page, which users cannot see in the browser, but is crucial for page display, SEO, and device adaptation. Common contents include encoding settings, viewport settings, page titles, external resource references, etc.
<meta charset="UTF-8">: Character encoding statement, ** must be added! ** Otherwise, Chinese characters and special symbols can easily become garbled characters.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Responsive viewport setting is the first step in mobile terminal adaptation. It tells the browser that "the page width is equal to the device screen width, and the initial scaling ratio is 1.0."
<title>: The page title will be displayed on the browser tab and is also very important for SEO (search engine optimization).
<body>: The visible content area of the page. All text, pictures, videos, navigation, buttons, etc. that users can see must be placed here.

3. Core features of HTML5 (must learn for beginners)

Compared with the old version, the biggest improvement of HTML5 is semantic and enhanced native capabilities. Below are some of the most commonly used points at the entry level.

3.1 Semantic tags: Use tags to describe content identity

In the era of HTML4, everyone uses common<div>label, and then match it with something likeheader、footerClass name to distinguish. Although the browser can parse the content written in this way, search engines and screen readers cannot understand the structure of the content at all, which results in poor SEO effect and is not conducive to barrier-free access.

HTML5 adds a new set of semantic tags, which can express content directly using tag names:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语义化标签示例</title>
</head>
<body>
    <!-- 页面顶部的页眉：通常放logo、标题、登录入口 -->
    <header>
        <h1>我的技术博客</h1>
    </header>

    <!-- 导航栏：放网站的导航链接 -->
    <nav>
        <a href="#">首页</a> | <a href="#">文章</a> | <a href="#">关于我</a>
    </nav>

    <!-- 页面的主要内容：一个页面只能有一个<main>标签 -->
    <main>
        <!-- 独立的、可完整阅读的内容块：比如一篇文章、一条新闻 -->
        <article>
            <h2>HTML5语义化标签的好处</h2>
            <p>好处太多啦：SEO好、无障碍、代码可读性高...</p>
            
            <!-- 内容的分区：比如文章的引言、正文、总结 -->
            <section>
                <h3>总结</h3>
                <p>入门就尽量用语义化标签，少用通用div！</p>
            </section>
        </article>
    </main>

    <!-- 页面的侧边栏：放相关链接、广告、搜索框 -->
    <aside>
        <h3>相关文章</h3>
        <a href="#">HTML基本标签</a>
    </aside>

    <!-- 页面底部的页脚：放版权信息、联系方式 -->
    <footer>
        <p>© 202X 我的技术博客</p>
    </footer>
</body>
</html>

3.2 Native multimedia support: no more Flash plug-ins

Before HTML5, if you wanted to embed video or audio in a web page, you had to rely on third-party plug-ins such as Flash and Silverlight. These plug-ins have many security vulnerabilities, slow loading, and poor mobile support. They have now been completely eliminated by mainstream browsers.

HTML5 added<video>and<audio>Tag, one line of code can embed multimedia, and also comes with controls for playback, pause, volume adjustment, etc.:

<!-- 嵌入视频 -->
<video controls width="600">
    <!-- 支持多个格式，浏览器会自动选择能播放的第一个 -->
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    <!-- 备用文字：如果浏览器完全不支持HTML5视频 -->
    您的浏览器不支持HTML5视频，请升级浏览器～
</video>

<!-- 嵌入音频 -->
<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type="audio/ogg">
    您的浏览器不支持HTML5音频，请升级浏览器～
</audio>

3.3 Form enhancement: Easily reduce JavaScript’s simple validation

HTML5 adds a wealth of native form controls and attributes, which can easily implement functions such as email verification, required verification, and date selection. In the past, you might have to write dozens of lines of JavaScript, but now you can do it in one line of code:

<form>
    <!-- 邮箱输入框：自动验证格式，必填 -->
    <label for="email">邮箱：</label>
    <input type="email" id="email" required placeholder="请输入您的邮箱">
    <br><br>

    <!-- 日期选择器：自带日历控件 -->
    <label for="birthday">生日：</label>
    <input type="date" id="birthday">
    <br><br>

    <!-- 滑块输入框：用于选择数值范围 -->
    <label for="age">年龄（0-100）：</label>
    <input type="range" id="age" min="0" max="100" value="18">
    <span id="ageValue">18</span>
    <br><br>

    <button type="submit">提交</button>
</form>

4. Quick understanding: division of labor and collaboration of the Three Musketeers

Although the focus of this article is HTML, modern Web pages cannot be completed with HTML alone. Here is a quick overview of the Separation of Concerns Principle of the Three Musketeers (the core cognition that must be established to get started!):

🦴 HTML: only responsible for structure - such as "Here are the first-level headings", "Here are the paragraphs", "Here are the navigation". Don't write styles (style attributes) or behaviors (onclick attributes) directly in HTML.
🎨 CSS: only responsible for performance - for example, "The first-level title should be displayed in red, font size 28px, and centered." There are three ways to introduce CSS. It is recommended to use external style sheet (written separately in.cssfile).
🎮 JavaScript: only responsible for actions - such as "click the button to display the pop-up window", "slide the slider to update the value synchronously". It is also recommended to use external scripts (written separately in.jsfile).

5. Recommended HTML introductory learning resources

At the entry level, it is most taboo to read too complicated information. Here are some of the most authoritative and practical ones recommended:

📚 MDN Web Docs: The "official bible" of Web technology. The content is jointly maintained by browser manufacturers and Web standards organizations, and the Chinese documentation is also very complete. Address: https://developer.mozilla.org/zh-CN/docs/Web/HTML
🎮 freeCodeCamp: A free interactive learning platform, practice while learning, and get a certificate after completing a module. Address: https://www.freecodecamp.org/learn/2022/responsive-web-design/
📖 HTML5 Semantic Tag Cheat Sheet: If you encounter a tag that you can’t remember, it’s very convenient to look it up. You can find it by just searching online.

6. Getting Started Summary and Preview

Today we talked about:

Definition of HTML: Hypertext Markup Language, the skeleton of a Web page.
Basic document structure of HTML5:DOCTYPE + html + head + body。
The three core features of HTML5: semantic tags, native multimedia, and form enhancement.
The separation of concerns principle of the Three Musketeers.
Recommended introductory learning resources.

In the next article, we will explain in detail the basic syntax and common selectors of CSS, and give your HTML skeleton a beautiful "skin" ~

#Basic Notes on Modern Web Development·Opening: Starting from the HTML web page skeleton

#1. First understand: What is HTML?

#2. Your first HTML5 web page: basic document structure

#3. Core features of HTML5 (must learn for beginners)

#3.1 Semantic tags: Use tags to describe content identity

#3.2 Native multimedia support: no more Flash plug-ins

#3.3 Form enhancement: Easily reduce JavaScript’s simple validation

#4. Quick understanding: division of labor and collaboration of the Three Musketeers

#5. Recommended HTML introductory learning resources

#6. Getting Started Summary and Preview