HTML5 基础学习笔记详细版

HTML5 是超文本标记语言（HyperText Markup Language）的第五个主要版本，它不仅是一个标记语言，更是一个构建现代 Web 应用的基础平台。HTML5 引入了许多新特性，包括语义化标签、多媒体支持、本地存储、图形绘制等。

1. HTML5 基础结构

1.1 标准文档结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="HTML5基础学习笔记">
    <meta name="keywords" content="HTML5, 学习笔记, Web开发">
    <title>HTML5 基础学习笔记</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 页面内容 -->
    <script src="script.js"></script>
</body>
</html>

关键点说明：

  • <!DOCTYPE html>：声明文档类型为 HTML5
  • <html lang="zh-CN">：指定页面语言为简体中文
  • <meta charset="UTF-8">：设置字符编码为 UTF-8
  • <meta name="viewport">：响应式设计的关键，控制视口缩放

2. 语义化标签（Semantic Elements）

HTML5 引入了大量语义化标签，使代码更易读、更利于 SEO 和辅助技术。

2.1 页面结构标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>语义化标签示例</title>
</head>
<body>
    <!-- 页眉 -->
    <header>
        <h1>我的网站</h1>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </nav>
    </header>

    <!-- 主体内容 -->
    <main>
        <!-- 文章区域 -->
        <article>
            <h2>HTML5 新特性</h2>
            <p>HTML5 引入了许多新标签和 API...</p>
            
            <!-- 文章内的独立部分 -->
            <section>
                <h3>语义化标签</h3>
                <p>语义化标签让代码结构更清晰。</p>
            </section>
            
            <!-- 侧边栏 -->
            <aside>
                <h4>相关文章</h4>
                <ul>
                    <li><a href="#">CSS3 教程</a></li>
                    <li><a href="#">JavaScript 基础</a></li>
                </ul>
            </aside>
        </article>
        
        <!-- 另一个文章 -->
        <article>
            <h2>Web 开发趋势</h2>
            <p>现代 Web 开发越来越注重用户体验...</p>
        </article>
    </main>

    <!-- 页脚 -->
    <footer>
        <p>&copy; 2024 我的网站. 保留所有权利。</p>
        <address>
            联系邮箱：<a href="mailto:info@example.com">info@example.com</a>
        </address>
    </footer>
</body>
</html>

2.2 语义化标签对照表

标签 用途 替代方案（HTML4）
<header> 页面或区域的页眉 <div class="header">
<nav> 导航链接区域 <div class="nav">
<main> 页面主要内容 <div id="main">
<article> 独立的内容块（如博客文章） <div class="article">
<section> 文档中的主题区块 <div class="section">
<aside> 侧边栏或相关内容 <div class="sidebar">
<footer> 页面或区域的页脚 <div class="footer">
<figure> 图片、图表等媒体内容 <div class="figure">
<figcaption> <figure> 的标题 <div class="caption">
<time> 时间或日期 <span class="time">
<mark> 高亮文本 <span class="highlight">

3. 表单增强（Forms）

HTML5 大幅增强了表单功能，提供了更多输入类型和验证属性。

3.1 新输入类型

<form action="/submit" method="post">
    <!-- 邮箱输入 -->
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" required>
    
    <!-- URL输入 -->
    <label for="website">网站：</label>
    <input type="url" id="website" name="website">
    
    <!-- 数字输入 -->
    <label for="age">年龄：</label>
    <input type="number" id="age" name="age" min="1" max="120" step="1">
    
    <!-- 日期选择 -->
    <label for="birthday">生日：</label>
    <input type="date" id="birthday" name="birthday">
    
    <!-- 时间选择 -->
    <label for="meeting">会议时间：</label>
    <input type="time" id="meeting" name="meeting">
    
    <!-- 日期时间选择 -->
    <label for="event">活动时间：</label>
    <input type="datetime-local" id="event" name="event">
    
    <!-- 范围滑块 -->
    <label for="volume">音量：</label>
    <input type="range" id="volume" name="volume" min="0" max="100" value="50">
    
    <!-- 搜索框 -->
    <label for="search">搜索：</label>
    <input type="search" id="search" name="search">
    
    <!-- 颜色选择器 -->
    <label for="color">选择颜色：</label>
    <input type="color" id="color" name="color" value="#ff0000">
    
    <!-- 电话输入 -->
    <label for="phone">电话：</label>
    <input type="tel" id="phone" name="phone" pattern="[0-9]{11}">
    
    <button type="submit">提交</button>
</form>

3.2 表单验证属性

<form>
    <!-- 必填字段 -->
    <input type="text" required placeholder="必填项">
    
    <!-- 最小/最大值 -->
    <input type="number" min="0" max="100" value="50">
    
    <!-- 正则表达式验证 -->
    <input type="text" pattern="[A-Za-z]{3}" title="请输入3个字母">
    
    <!-- 默认值 -->
    <input type="text" value="默认文本">
    
    <!-- 占位符 -->
    <input type="text" placeholder="请输入内容">
    
    <!-- 自动完成 -->
    <input type="text" autocomplete="on">
    
    <!-- 禁用自动完成 -->
    <input type="password" autocomplete="off">
    
    <!-- 只读字段 -->
    <input type="text" value="只读内容" readonly>
    
    <!-- 禁用字段 -->
    <input type="text" value="禁用内容" disabled>
    
    <!-- 自动聚焦 -->
    <input type="text" autofocus>
    
    <!-- 多文件上传 -->
    <input type="file" multiple>
    
    <!-- 自动建议 -->
    <input type="text" list="browsers">
    <datalist id="browsers">
        <option value="Chrome">
        <option value="Firefox">
        <option value="Safari">
        <option value="Edge">
    </datalist>
</form>

4. 多媒体支持

HTML5 原生支持音频和视频，无需插件。

4.1 音频播放

<!-- 基本音频 -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    您的浏览器不支持 audio 元素。
</audio>

<!-- 带预加载和自动播放 -->
<audio controls preload="auto" autoplay loop>
    <source src="music.mp3" type="audio/mpeg">
</audio>

<!-- 自定义控制（需要JavaScript） -->
<audio id="myAudio" controls>
    <source src="song.mp3" type="audio/mpeg">
</audio>
<button onclick="document.getElementById('myAudio').play()">播放</button>
<button onclick="document.getElementById('myAudio').pause()">暂停</button>

4.2 视频播放

<!-- 基本视频 -->
<video width="640" height="360" controls poster="thumbnail.jpg">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    <source src="movie.ogv" type="video/ogg">
    您的浏览器不支持 video 元素。
</video>

<!-- 视频属性 -->
<video 
    width="640" 
    height="360" 
    controls 
    preload="metadata"
    muted
    poster="preview.jpg">
    <source src="video.mp4" type="video/mp4">
</video>

<!-- 全屏视频 -->
<video width="100%" controls>
    <source src="fullvideo.mp4" type="video/mp4">
</video>

4.3 媒体事件（JavaScript控制）

const video = document.querySelector('video');

video.addEventListener('play', () => {
    console.log('视频开始播放');
});

video.addEventListener('pause', () => {
    console.log('视频暂停');
});

video.addEventListener('ended', () => {
    console.log('视频播放结束');
});

video.addEventListener('timeupdate', () => {
    console.log('当前时间:', video.currentTime);
});

// 控制方法
video.play();
video.pause();
video.currentTime = 30; // 跳转到30秒
video.volume = 0.5; // 设置音量

5. 图形绘制（Canvas & SVG）

5.1 Canvas 绘图

<canvas id="myCanvas" width="400" height="300" style="border:1px solid #ccc;"></canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 绘制矩形
ctx.fillStyle = '#FF6347';
ctx.fillRect(50, 50, 100, 80);

// 绘制边框矩形
ctx.strokeStyle = '#4682B4';
ctx.lineWidth = 3;
ctx.strokeRect(200, 50, 100, 80);

// 绘制圆形
ctx.beginPath();
ctx.arc(100, 200, 40, 0, Math.PI * 2);
ctx.fillStyle = '#32CD32';
ctx.fill();

// 绘制线条
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(300, 250);
ctx.lineTo(350, 150);
ctx.strokeStyle = '#FF1493';
ctx.lineWidth = 5;
ctx.stroke();

// 绘制文本
ctx.font = '24px Arial';
ctx.fillStyle = '#000080';
ctx.fillText('Hello Canvas', 150, 280);

// 绘制渐变
const gradient = ctx.createLinearGradient(0, 0, 400, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(50, 150, 300, 50);
</script>

5.2 SVG 矢量图形

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
    <!-- 矩形 -->
    <rect x="10" y="10" width="100" height="80" fill="tomato" stroke="black" stroke-width="2"/>
    
    <!-- 圆形 -->
    <circle cx="200" cy="50" r="40" fill="lightblue" stroke="navy" stroke-width="3"/>
    
    <!-- 椭圆 -->
    <ellipse cx="300" cy="50" rx="60" ry="30" fill="lightgreen" stroke="green" stroke-width="2"/>
    
    <!-- 线条 -->
    <line x1="10" y1="150" x2="150" y2="250" stroke="purple" stroke-width="4"/>
    
    <!-- 多边形 -->
    <polygon points="200,150 250,250 150,250" fill="orange" stroke="darkorange" stroke-width="2"/>
    
    <!-- 路径 -->
    <path d="M 300 150 Q 350 100 400 150 T 500 150" 
          fill="none" 
          stroke="red" 
          stroke-width="3"/>
    
    <!-- 文本 -->
    <text x="10" y="280" font-family="Arial" font-size="20" fill="black">
        SVG 文本示例
    </text>
    
    <!-- 渐变 -->
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        </linearGradient>
    </defs>
    <rect x="10" y="10" width="100" height="80" fill="url(#grad1)" />
</svg>

6. 本地存储（Local Storage & Session Storage）

6.1 Local Storage（持久化存储）

// 存储数据
localStorage.setItem('username', '张三');
localStorage.setItem('age', '25');

// 读取数据
const name = localStorage.getItem('username');
console.log(name); // 输出：张三

// 删除单个数据
localStorage.removeItem('age');

// 清空所有数据
localStorage.clear();

// 存储对象（需要序列化）
const user = {
    name: '李四',
    age: 30,
    email: 'lisi@example.com'
};
localStorage.setItem('user', JSON.stringify(user));

// 读取对象
const userData = JSON.parse(localStorage.getItem('user'));
console.log(userData.name); // 输出：李四

// 遍历所有存储
for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    const value = localStorage.getItem(key);
    console.log(`${key}: ${value}`);
}

6.2 Session Storage（会话存储）

// Session Storage 在浏览器会话期间有效，关闭标签页后清除
sessionStorage.setItem('sessionId', 'abc123');
const sessionId = sessionStorage.getItem('sessionId');

// 与 Local Storage 用法相同，但生命周期不同

6.3 存储事件监听

// 监听存储变化（在其他标签页修改时触发）
window.addEventListener('storage', (event) => {
    console.log('存储变化：', {
        key: event.key,
        oldValue: event.oldValue,
        newValue: event.newValue,
        url: event.url
    });
});

7. 拖放 API（Drag and Drop）

<div id="dragSource" draggable="true" style="width:100px; height:100px; background:lightblue; margin:10px;">
    拖我
</div>

<div id="dropZone" style="width:200px; height:100px; background:lightgray; margin:10px; border:2px dashed #999;">
    放置区域
</div>

<script>
const dragSource = document.getElementById('dragSource');
const dropZone = document.getElementById('dropZone');

// 拖拽开始
dragSource.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', '拖拽的数据');
    e.dataTransfer.effectAllowed = 'move';
    dragSource.style.opacity = '0.5';
});

// 拖拽结束
dragSource.addEventListener('dragend', () => {
    dragSource.style.opacity = '1';
});

// 允许放置
dropZone.addEventListener('dragover', (e) => {
    e.preventDefault(); // 必须阻止默认行为
    e.dataTransfer.dropEffect = 'move';
    dropZone.style.backgroundColor = 'lightgreen';
});

// 离开放置区域
dropZone.addEventListener('dragleave', () => {
    dropZone.style.backgroundColor = 'lightgray';
});

// 放置操作
dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    const data = e.dataTransfer.getData('text/plain');
    dropZone.textContent = `放置的数据：${data}`;
    dropZone.style.backgroundColor = 'lightgreen';
});
</script>

8. 地理定位（Geolocation API）

// 检查浏览器是否支持
if ('geolocation' in navigator) {
    // 获取当前位置
    navigator.geolocation.getCurrentPosition(
        (position) => {
            console.log('纬度:', position.coords.latitude);
            console.log('经度:', position.coords.longitude);
            console.log('精度:', position.coords.accuracy);
            
            // 显示在地图上（示例）
            const lat = position.coords.latitude;
            const lng = position.coords.longitude;
            const mapUrl = `https://www.google.com/maps?q=${lat},${lng}`;
            window.open(mapUrl, '_blank');
        },
        (error) => {
            console.error('获取位置失败:', error.message);
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    console.log('用户拒绝获取位置');
                    break;
                case error.POSITION_UNAVAILABLE:
                    console.log('位置信息不可用');
                    break;
                case error.TIMEOUT:
                    console.log('请求超时');
                    break;
            }
        },
        {
            enableHighAccuracy: true,
            timeout: 5000,
            maximumAge: 0
        }
    );
    
    // 持续监听位置变化
    const watchId = navigator.geolocation.watchPosition(
        (position) => {
            console.log('位置更新:', position.coords.latitude, position.coords.longitude);
        },
        (error) => {
            console.error('位置更新错误:', error.message);
        }
    );
    
    // 停止监听
    // navigator.geolocation.clearWatch(watchId);
} else {
    console.log('浏览器不支持地理定位');
}

9. Web Workers（后台线程）

<button id="startWorker">启动 Worker</button>
<button id="stopWorker">停止 Worker</button>
<div id="result"></div>

<script>
let worker;

document.getElementById('startWorker').addEventListener('click', () => {
    if (typeof(Worker) !== 'undefined') {
        worker = new Worker('worker.js');
        
        worker.onmessage = (e) => {
            document.getElementById('result').textContent = `计算结果：${e.data}`;
        };
        
        worker.postMessage('开始计算');
    } else {
        console.log('浏览器不支持 Web Workers');
    }
});

document.getElementById('stopWorker').addEventListener('click', () => {
    if (worker) {
        worker.terminate();
        document.getElementById('result').textContent = 'Worker 已停止';
    }
});
</script>

worker.js 文件内容：

self.onmessage = (e) => {
    if (e.data === '开始计算') {
        let sum = 0;
        for (let i = 0; i < 1000000000; i++) {
            sum += i;
        }
        self.postMessage(sum);
    }
};

10. 响应式设计基础

10.1 视口设置

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

10.2 媒体查询示例

<style>
/* 默认样式（移动端优先） */
.container {
    width: 100%;
    padding: 10px;
}

/* 平板设备 */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* 桌面设备 */
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

/* 大屏幕 */
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

/* 横屏模式 */
@media (orientation: landscape) {
    .sidebar {
        display: block;
    }
}

/* 打印样式 */
@media print {
    .no-print {
        display: none;
    }
}
</style>

11. 新特性总结表

特性 说明 浏览器支持
语义化标签 <header>, <nav>, <article> 等 所有现代浏览器
表单增强 新输入类型、验证属性 所有现代浏览器
多媒体 <audio>, <video> 所有现代浏览器
Canvas 2D/3D图形绘制 所有现代浏览器
SVG 矢量图形 所有现代浏览器
本地存储 localStorage, sessionStorage 所有现代浏览器
拖放API 原生拖放功能 所有现代浏览器
地理定位 获取用户位置 所有现代浏览器
Web Workers 后台线程 所有现代浏览器
离线应用 Application Cache（已废弃，推荐 Service Workers） 部分支持
Service Workers 离线缓存、推送通知 现代浏览器

12. 最佳实践

12.1 代码规范

<!-- 推荐 -->
<!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>
    <header>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h1>文章标题</h1>
            <p>文章内容...</p>
        </article>
    </main>
    <footer>
        <p>版权信息</p>
    </footer>
</body>
</html>

12.2 性能优化

  1. 压缩资源：压缩 CSS、JS、图片
  2. 懒加载：图片、视频延迟加载
  3. CDN：使用内容分发网络
  4. 缓存策略：合理使用本地存储和浏览器缓存
  5. 减少HTTP请求：合并文件、使用雪碧图

12.3 可访问性（Accessibility）

<!-- 为图片添加alt属性 -->
<img src="logo.png" alt="公司Logo">

<!-- 为表单添加label -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username">

<!-- 使用ARIA属性 -->
<div role="navigation" aria-label="主导航">
    <ul>
        <li><a href="#home">首页</a></li>
    </ul>
</div>

<!-- 键盘导航 -->
<button tabindex="0">可聚焦按钮</button>

13. 实战项目示例

13.1 响应式博客页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        header {
            background: #333;
            color: white;
            padding: 1rem 0;
        }
        
        nav ul {
            list-style: none;
            display: flex;
            gap: 20px;
        }
        
        nav a {
            color: white;
            text-decoration: none;
        }
        
        main {
            padding: 2rem 0;
        }
        
        article {
            margin-bottom: 2rem;
            padding: 1.5rem;
            background: #f9f9f9;
            border-radius: 5px;
        }
        
        footer {
            background: #333;
            color: white;
            text-align: center;
            padding: 1rem 0;
            margin-top: 2rem;
        }
        
        @media (max-width: 768px) {
            nav ul {
                flex-direction: column;
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <h1>我的博客</h1>
            <nav>
                <ul>
                    <li><a href="#home">首页</a></li>
                    <li><a href="#about">关于</a></li>
                    <li><a href="#contact">联系</a></li>
                </ul>
            </nav>
        </div>
    </header>
    
    <main class="container">
        <article>
            <h2>HTML5 新特性</h2>
            <time datetime="2024-01-15">2024年1月15日</time>
            <p>HTML5 引入了许多新特性，包括语义化标签、多媒体支持等...</p>
            <a href="#">阅读全文</a>
        </article>
        
        <article>
            <h2>CSS3 动画效果</h2>
            <time datetime="2024-01-10">2024年1月10日</time>
            <p>CSS3 提供了强大的动画和过渡效果...</p>
            <a href="#">阅读全文</a>
        </article>
    </main>
    
    <footer>
        <div class="container">
            <p>&copy; 2024 我的博客. 保留所有权利。</p>
        </div>
    </footer>
</body>
</html>

学习建议

  1. 循序渐进：从基础标签开始，逐步学习高级特性
  2. 动手实践：每个示例都要亲自编写和运行
  3. 跨浏览器测试：确保代码在不同浏览器中正常工作
  4. 响应式设计：始终考虑移动设备兼容性
  5. 可访问性：确保所有用户都能访问你的网站
  6. 性能优化：关注页面加载速度和用户体验
  7. 持续学习：关注 Web 技术的新发展

这份学习笔记涵盖了 HTML5 的核心知识点，建议结合实际项目进行练习，逐步掌握现代 Web 开发技术。

# html # 前端
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

2026年金融数据动画工具有哪些：AE、Power BI、Tableau与代码渲染方案的适用边界

财经视频的难点不是念数字，而是把趋势、比例、逻辑变成看得懂的动态画面。2026年工具链分两条：代码渲染路线，图表由程序绘制、逐帧输出，文字和数字天然不易出错；软件交互路线，拖拽模板、手动调参数，灵活但依赖操作者。若不准备自建代码链，花生AI可作为半自动出片的可选方案之一。下面按免费程度、上手难度、图表文字准确性、数据更新成本、动画自动化程度、长视频适配、学习曲线七个维度逐一过。

avatar 2048 AI社区

无论是否从事技术，都建议了解 FDE（前线部署工程师）

更重要的是，这套“先建通道、再谈运营”的解法被抽象成了可复用的方法论，随后复制到了同品牌的另外 6 家门店，以及另一家完全不同业态的烘焙连锁客户——这正是 FDE 跨行业复用能力的价值所在。FDE之所以具备高市场价值，核心在于它扎根业务一线，直面真实客户痛点，将用户碎片化、模糊化的需求，梳理转化为标准化、可落地、可迭代的解决方案，同时具备跨行业复用解决方案的通用能力，这也是当下市场极度稀缺的核心能

avatar 2048 AI社区
cover

南昌高新区科技公司注册全攻略：流程、资质、政策一次讲透

avatar 2048 AI社区