Frontend Study Notes: HTML
1. Document Structure and Browser Parsing
Document Type Declaration (DOCTYPE)
Purpose: <!DOCTYPE html> belongs on the first line of an HTML document. It isn't an HTML tag, but an instruction telling the browser to parse the page using the latest HTML5 standard in strict/standards mode.
Modes: omitting it or using an incorrect format puts the browser into quirks mode, a more permissive backward-compatible mode that can produce inconsistent rendering across browsers.
Head and Metadata
The <head> element: the document's head container holds information primarily for browsers and search engines, rather than displaying it on the page. <title> is the only required element and must be unique.
The <meta> element: describes page properties. Common attributes include:
charset: defines encoding, such as UTF-8. Incorrect settings cause garbled text in the browser.
viewport: essential for mobile layouts, controlling viewport scaling with settings such as width=device-width, initial-scale=1.0.
keywords / description: provide page keywords and a description for SEO.
robots: controls search-engine indexing behavior, with values such as all, index, and nofollow.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="前端, HTML5, 学习笔记">
<meta name="description" content="这是一份包含代码示例的前端 HTML 学习笔记">
<title>我的前端学习笔记</title>
</head>
<body>
</body>
</html>2. Semantics and Element Categories
Semantic HTML means using the right tag for the right purpose, a core principle of high-quality HTML.
Understanding Semantic HTML
Benefits: machine-friendly for search crawlers and screen readers, and developer-friendly through clear structure, readability, and easier maintenance.
Semantic elements added in HTML5: <header>, <nav>, <footer>, <article>, <section>, and <aside>.
<body>
<header>
<h1>我的博客网站</h1>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>HTML5 新特性总结</h2>
<p>这里是文章的具体内容...</p>
</article>
<aside>
<h3>推荐阅读</h3>
</aside>
</main>
<footer>
<p>版权所有 © 2026</p>
</footer>
</body>Common Element Categories
Block elements, which occupy their own line: div, ul, ol, li, h1~h6, p, dl, and others.
Inline elements, which don't occupy their own line: a, b, span, img, input, strong, and others.
Void elements, which have no closing tag: <br>, <hr>, <img>, <input>, <link>, and <meta>.
Frequently Confused Elements
title vs h1: title supplies the page's metadata title; h1 is the main content heading and strongly affects structure and SEO.
b vs strong: b provides visual bolding without semantic emphasis; strong marks content as important.
i vs em: i displays italics; em represents spoken stress or emphasis.
Associating Form Controls with <label>
A label connects to a form control. Clicking its text moves focus to the corresponding <input>, improving usability. Use for="id" or nest the control inside the label.
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<label>
密码：<input type="password" name="pwd">
</label>3. Resource Loading and Performance
The Difference Between src and href
src (Source): used to replace the current element, emphasizing the loading of an external resource. When parsing src, as on script or img, the browser pauses other processing until the resource is downloaded, compiled, and executed.
href (Hypertext Reference): used to establish a relationship, emphasizing a reference or navigation target. When parsing href, such as a CSS link, the browser downloads the resource in parallel without blocking document processing.
Script Loading: defer and async
By default, <script> blocks HTML parsing.
async (asynchronous execution): downloads alongside HTML parsing and executes immediately once downloaded, blocking HTML parsing during execution. Multiple async scripts have no guaranteed execution order.
defer (deferred execution): downloads alongside HTML parsing but executes in order only after parsing finishes.
<script src="normal.js"></script>
<script async src="analytics.js"></script>
<script defer src="app.js"></script>Responsive Images (srcset)
Lets <img> choose the most suitable image resolution based on pixel density, such as 1x or 2x, or viewport size, preserving clarity while saving bandwidth.
<img src="default-128.png"
srcset="image-128.png 128w,
image-256.png 256w,
image-512.png 512w"
sizes="(max-width: 360px) 340px, 128px"
alt="响应式图片示例">Pros and Cons of iframe
Advantages: parallel script downloads, cross-subdomain communication, and isolation of slow content such as ads.
Disadvantages: delays the main page's onload event, is unfriendly to SEO, and adds management complexity.
4. Features Added in HTML5
Multimedia and Graphics
Audio and video: <audio> and <video>, supporting attributes such as controls, autoplay, and poster. Use <source> to support multiple formats.
Canvas and SVG:
Canvas: bitmap-based, rendered pixel by pixel, and resolution-dependent. Suitable for intensive redrawing such as browser games. Doesn't support event handlers.
SVG: XML-based vector graphics, independent of resolution and scalable without losing quality. Each shape is a DOM node and supports event handling. Suitable for large rendering areas such as maps.
<video width="640" height="360" controls autoplay muted poster="cover.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
您的浏览器不支持 HTML5 视频标签。
</video>Client-Side Storage and Performance
Web Storage: an alternative to cookies, including persistent localStorage and session-level sessionStorage.
Offline storage (AppCache): a .appcache manifest specifies resources to cache while online and reuse offline. Modern frontend development has gradually replaced it with Service Workers, but the underlying idea is similar.
Web Workers: run heavy JavaScript tasks in independent background threads and communicate with the main thread through postMessage, preventing complex computation from blocking UI rendering.
// 存储数据（持久化，关闭浏览器不丢失）
localStorage.setItem('theme', 'dark');
// 读取数据
const currentTheme = localStorage.getItem('theme'); // 返回 'dark'
// 删除数据
localStorage.removeItem('theme');
// 清空所有本地存储
localStorage.clear();HTML5 Drag-and-Drop API
Provides a native drag-event lifecycle: dragstart → drag → dragenter → dragover → dragleave → drop → dragend.
Other Additions
Form enhancements: input types such as email, url, number, date, and color, plus attributes such as placeholder, required, and pattern for input guidance and validation.
Progress indicators (<progress>, <meter>), new DOM query methods (querySelector), and geolocation (Geolocation).
<form action="/submit">
邮箱：<input type="email" required placeholder="请输入邮箱">
年龄：<input type="number" min="1" max="100" value="18">
生日：<input type="date">
手机：<input type="tel" pattern="^(+86)?\d{10}$">
<button type="submit">提交</button>
</form>5. Thinking About Architecture
Progressive Enhancement vs Graceful Degradation
Progressive enhancement: build upward from basic functionality that works on older devices, then add effects and interactions for advanced browsers. It is a forward-looking development approach.
Graceful degradation: build the richest experience first, then patch compatibility for older browsers. It is a backward-looking compromise. Modern development generally favors content-centered progressive enhancement.