1.3 HTML5文档结构

关键词: HTML5文档结构, DOCTYPE声明, HTML根元素, head标签, body标签, 字符编码, 语言属性, 网页结构

学习目标

理解HTML5文档类型声明的作用
掌握HTML根元素的使用方法
学会设置HTML文档的head部分
理解body部分的结构组织
掌握字符编码和语言属性的设置

1.3.1 文档类型声明（DOCTYPE）

什么是DOCTYPE？

DOCTYPE（Document Type Declaration）是文档类型声明，它告诉浏览器使用哪种HTML版本来解析文档。DOCTYPE必须是HTML文档的第一行，位于<html>标签之前。

HTML5的DOCTYPE声明

HTML5大大简化了DOCTYPE的写法：

html

<!DOCTYPE html>

与早期版本的对比

让我们看看HTML5与之前版本的区别：

html

<!-- HTML5的DOCTYPE声明 -->
<!DOCTYPE html>

<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DOCTYPE的作用

1. 触发标准模式

html

<!DOCTYPE html>
<html>
<head>
    <title>标准模式示例</title>
    <style>
        /* 在标准模式下，CSS盒模型按照W3C标准执行 */
        .box {
            width: 200px;
            height: 100px;
            padding: 10px;
            border: 5px solid #333;
            margin: 20px;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>这个盒子在标准模式下的总宽度是：200px + 10px*2 + 5px*2 = 230px</p>
    </div>
</body>
</html>

2. 避免怪异模式

html

<!-- 没有DOCTYPE声明会触发怪异模式 -->
<html>
<head>
    <title>怪异模式示例</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            padding: 10px;
            border: 5px solid #333;
            /* 在怪异模式下，width包含padding和border */
        }
    </style>
</head>
<body>
    <div class="box">怪异模式下的盒模型</div>
</body>
</html>

检测文档模式

html

<!DOCTYPE html>
<html>
<head>
    <title>检测文档模式</title>
</head>
<body>
    <p id="mode"></p>
    
    <script>
        // 检测当前文档模式
        function checkDocumentMode() {
            const mode = document.compatMode;
            const modeText = mode === 'CSS1Compat' ? '标准模式' : '怪异模式';
            document.getElementById('mode').textContent = 
                `当前文档处于：${modeText} (${mode})`;
        }
        
        checkDocumentMode();
    </script>
</body>
</html>

1.3.2 HTML根元素

HTML根元素的作用

<html>元素是HTML文档的根元素，包含了整个页面的内容。它是所有其他元素的父元素。

基本结构

html

<!DOCTYPE html>
<html>
    <!-- 文档的头部信息 -->
    <head>
        <!-- 元数据、标题、样式、脚本等 -->
    </head>
    
    <!-- 文档的主体内容 -->
    <body>
        <!-- 页面可见内容 -->
    </body>
</html>

HTML元素的属性

1. lang属性（语言属性）

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>中文页面</title>
</head>
<body>
    <h1>这是一个中文页面</h1>
    <p>搜索引擎和屏幕阅读器会根据lang属性来处理页面内容</p>
</body>
</html>

2. 不同语言的示例

html

<!-- 英文页面 -->
<html lang="en">
<head>
    <title>English Page</title>
</head>
<body>
    <h1>This is an English page</h1>
</body>
</html>

<!-- 日文页面 -->
<html lang="ja">
<head>
    <title>日本語のページ</title>
</head>
<body>
    <h1>これは日本語のページです</h1>
</body>
</html>

<!-- 法文页面 -->
<html lang="fr">
<head>
    <title>Page française</title>
</head>
<body>
    <h1>Ceci est une page française</h1>
</body>
</html>

3. 多语言页面

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>多语言页面示例</title>
</head>
<body>
    <h1>多语言内容示例</h1>
    
    <section>
        <h2>中文内容</h2>
        <p>这是中文段落</p>
    </section>
    
    <section lang="en">
        <h2>English Content</h2>
        <p>This is an English paragraph</p>
    </section>
    
    <section lang="ja">
        <h2>日本語コンテンツ</h2>
        <p>これは日本語の段落です</p>
    </section>
</body>
</html>

4. dir属性（文本方向）

html

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>阿拉伯语页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .ltr-text {
            direction: ltr;
        }
    </style>
</head>
<body>
    <h1>مرحبا بكم</h1>
    <p>هذا نص باللغة العربية يُقرأ من اليمين إلى اليسار</p>
    
    <p class="ltr-text">This is left-to-right text</p>
</body>
</html>

1.3.3 head部分详解

head元素的作用

<head>元素包含了页面的元数据，这些信息不会在页面中显示，但对浏览器、搜索引擎和其他工具非常重要。

完整的head示例

html

<!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>
    
    <!-- 页面描述 -->
    <meta name="description" content="这是一个完整的HTML5页面示例，展示了head部分的各种元素">
    
    <!-- 关键词 -->
    <meta name="keywords" content="HTML5,网页开发,前端,教程">
    
    <!-- 作者信息 -->
    <meta name="author" content="张三">
    
    <!-- 网站图标 -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    
    <!-- 苹果设备图标 -->
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    
    <!-- 样式表 -->
    <link rel="stylesheet" href="css/main.css">
    
    <!-- 字体 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700&display=swap" rel="stylesheet">
    
    <!-- 预加载重要资源 -->
    <link rel="preload" href="css/main.css" as="style">
    <link rel="preload" href="js/main.js" as="script">
    
    <!-- 社交媒体元数据 -->
    <meta property="og:title" content="完整的HTML5页面示例">
    <meta property="og:description" content="这是一个完整的HTML5页面示例">
    <meta property="og:image" content="https://example.com/image.jpg">
    <meta property="og:url" content="https://example.com">
    <meta property="og:type" content="website">
    
    <!-- Twitter卡片 -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="完整的HTML5页面示例">
    <meta name="twitter:description" content="这是一个完整的HTML5页面示例">
    <meta name="twitter:image" content="https://example.com/image.jpg">
    
    <!-- 内联样式 -->
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <h1>页面内容</h1>
    <p>这是页面的主要内容区域</p>
</body>
</html>

head中的主要元素

1. meta元素详解

html

<head>
    <!-- 字符编码设置 -->
    <meta charset="UTF-8">
    
    <!-- 视口设置（响应式设计必需） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 页面描述（SEO重要） -->
    <meta name="description" content="页面描述，会显示在搜索结果中">
    
    <!-- 关键词（SEO辅助） -->
    <meta name="keywords" content="关键词1,关键词2,关键词3">
    
    <!-- 作者信息 -->
    <meta name="author" content="作者姓名">
    
    <!-- 机器人指令 -->
    <meta name="robots" content="index,follow">
    
    <!-- 页面刷新 -->
    <meta http-equiv="refresh" content="30">
    
    <!-- 缓存控制 -->
    <meta http-equiv="Cache-Control" content="no-cache">
    
    <!-- 兼容性设置 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

2. link元素详解

html

<head>
    <!-- 样式表链接 -->
    <link rel="stylesheet" href="css/main.css">
    
    <!-- 网站图标 -->
    <link rel="icon" href="favicon.ico">
    <link rel="shortcut icon" href="favicon.ico">
    
    <!-- 不同尺寸的图标 -->
    <link rel="icon" sizes="16x16" href="icon-16.png">
    <link rel="icon" sizes="32x32" href="icon-32.png">
    <link rel="icon" sizes="192x192" href="icon-192.png">
    
    <!-- 苹果设备图标 -->
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152.png">
    
    <!-- 预加载资源 -->
    <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
    
    <!-- 预连接 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    
    <!-- 预取资源 -->
    <link rel="prefetch" href="next-page.html">
    
    <!-- 规范链接 -->
    <link rel="canonical" href="https://example.com/page">
    
    <!-- 替代版本 -->
    <link rel="alternate" href="https://example.com/rss" type="application/rss+xml">
</head>

3. script元素在head中的使用

html

<head>
    <!-- 外部脚本 -->
    <script src="js/config.js"></script>
    
    <!-- 异步加载脚本 -->
    <script src="js/analytics.js" async></script>
    
    <!-- 延迟加载脚本 -->
    <script src="js/main.js" defer></script>
    
    <!-- 内联脚本 -->
    <script>
        // 全局配置
        window.config = {
            apiUrl: 'https://api.example.com',
            version: '1.0.0'
        };
        
        // 性能监控
        window.performance.mark('head-script-start');
    </script>
    
    <!-- 条件加载脚本 -->
    <script>
        if (!window.Promise) {
            document.write('<script src="js/polyfills.js"><\/script>');
        }
    </script>
</head>

1.3.4 body部分详解

body元素的作用

<body>元素包含了页面的所有可见内容，包括文本、图像、链接、表格、列表等。

基本body结构

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Body结构示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f9f9f9;
        }
        
        header, nav, main, aside, footer {
            margin-bottom: 20px;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        nav ul {
            list-style: none;
            padding: 0;
            display: flex;
            gap: 20px;
        }
        
        nav a {
            text-decoration: none;
            color: #333;
            padding: 10px 15px;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        
        nav a:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <!-- 页面头部 -->
    <header>
        <h1>我的网站</h1>
        <p>欢迎访问我的网站</p>
    </header>
    
    <!-- 导航菜单 -->
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于我们</a></li>
            <li><a href="#services">服务</a></li>
            <li><a href="#contact">联系我们</a></li>
        </ul>
    </nav>
    
    <!-- 主要内容 -->
    <main>
        <article>
            <h2>文章标题</h2>
            <p>这里是文章的主要内容...</p>
        </article>
        
        <section>
            <h2>相关信息</h2>
            <p>这里是相关的信息内容...</p>
        </section>
    </main>
    
    <!-- 侧边栏 -->
    <aside>
        <h3>侧边栏</h3>
        <ul>
            <li><a href="#">链接1</a></li>
            <li><a href="#">链接2</a></li>
            <li><a href="#">链接3</a></li>
        </ul>
    </aside>
    
    <!-- 页面底部 -->
    <footer>
        <p>&copy; 2024 我的网站. 保留所有权利.</p>
    </footer>
</body>
</html>

body元素的属性

1. 事件属性

html

<body 
    onload="handlePageLoad()"
    onunload="handlePageUnload()"
    onresize="handleResize()"
    onscroll="handleScroll()">
    
    <h1>页面内容</h1>
    <p>这个页面演示了body元素的事件属性</p>
    
    <script>
        function handlePageLoad() {
            console.log('页面加载完成');
            document.body.style.backgroundColor = '#f0f8ff';
        }
        
        function handlePageUnload() {
            console.log('页面即将卸载');
        }
        
        function handleResize() {
            console.log('窗口大小改变:', window.innerWidth, window.innerHeight);
        }
        
        function handleScroll() {
            console.log('页面滚动:', window.scrollY);
        }
    </script>
</body>

2. 现代事件处理方式

html

<body>
    <h1>现代事件处理示例</h1>
    <p>使用addEventListener方法处理事件</p>
    
    <script>
        // 页面加载完成事件
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM加载完成');
            
            // 添加样式
            document.body.style.fontFamily = 'Arial, sans-serif';
            document.body.style.margin = '20px';
        });
        
        // 窗口加载完成事件
        window.addEventListener('load', function() {
            console.log('所有资源加载完成');
        });
        
        // 窗口大小改变事件
        window.addEventListener('resize', function() {
            console.log('窗口大小:', window.innerWidth, 'x', window.innerHeight);
        });
        
        // 滚动事件
        window.addEventListener('scroll', function() {
            const scrollPercent = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
            console.log('滚动进度:', scrollPercent.toFixed(1) + '%');
        });
    </script>
</body>

1.3.5 字符编码设置

为什么需要字符编码？

字符编码告诉浏览器如何解释和显示文本字符。如果没有正确设置字符编码，可能会出现乱码问题。

UTF-8编码

UTF-8是最常用的字符编码，支持全世界的字符：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>UTF-8编码示例</title>
</head>
<body>
    <h1>多语言文本示例</h1>
    
    <section>
        <h2>中文</h2>
        <p>你好，世界！这是中文文本。</p>
    </section>
    
    <section>
        <h2>English</h2>
        <p>Hello, World! This is English text.</p>
    </section>
    
    <section>
        <h2>日本語</h2>
        <p>こんにちは、世界！これは日本語のテキストです。</p>
    </section>
    
    <section>
        <h2>한국어</h2>
        <p>안녕하세요, 세계! 이것은 한국어 텍스트입니다.</p>
    </section>
    
    <section>
        <h2>العربية</h2>
        <p>مرحبا بالعالم! هذا نص عربي.</p>
    </section>
    
    <section>
        <h2>Русский</h2>
        <p>Привет, мир! Это русский текст.</p>
    </section>
    
    <section>
        <h2>Emoji</h2>
        <p>😀 😁 😂 🤣 😃 😄 😅 😆 😉 😊 😋 😎 😍 😘 🥰</p>
    </section>
</body>
</html>

编码问题的解决

1. 常见乱码问题

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 错误：没有设置字符编码 -->
    <title>可能出现乱码的页面</title>
</head>
<body>
    <h1>中文标题</h1>
    <p>这里可能会显示乱码：���文���</p>
</body>
</html>

2. 正确的编码设置

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 正确：设置UTF-8编码 -->
    <meta charset="UTF-8">
    <title>正确显示中文的页面</title>
</head>
<body>
    <h1>中文标题</h1>
    <p>这里会正确显示中文内容</p>
</body>
</html>

3. 检测和处理编码问题

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>编码检测示例</title>
</head>
<body>
    <h1>字符编码检测</h1>
    <p id="encoding-info"></p>
    
    <script>
        // 检测文档编码
        function checkEncoding() {
            const encoding = document.characterSet || document.charset;
            const info = document.getElementById('encoding-info');
            
            info.innerHTML = `
                <strong>当前页面编码：</strong> ${encoding}<br>
                <strong>浏览器支持：</strong> ${navigator.userAgent}<br>
                <strong>语言设置：</strong> ${navigator.language}
            `;
        }
        
        // 页面加载完成后检测
        document.addEventListener('DOMContentLoaded', checkEncoding);
    </script>
</body>
</html>

1.3.6 语言属性设置

语言属性的重要性

语言属性帮助浏览器、搜索引擎和辅助技术正确处理页面内容。

设置页面主语言

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>中文页面</title>
</head>
<body>
    <h1>这是中文页面</h1>
    <p>页面的主要语言是中文</p>
</body>
</html>

常用语言代码

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>语言代码示例</title>
    <style>
        .language-example {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .language-code {
            font-family: monospace;
            background-color: #f0f0f0;
            padding: 2px 6px;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <h1>常用语言代码示例</h1>
    
    <div class="language-example">
        <h2>中文（简体）</h2>
        <p>语言代码：<span class="language-code">zh-CN</span></p>
        <p lang="zh-CN">这是简体中文内容</p>
    </div>
    
    <div class="language-example">
        <h2>中文（繁体）</h2>
        <p>语言代码：<span class="language-code">zh-TW</span></p>
        <p lang="zh-TW">這是繁體中文內容</p>
    </div>
    
    <div class="language-example">
        <h2>英语</h2>
        <p>语言代码：<span class="language-code">en</span></p>
        <p lang="en">This is English content</p>
    </div>
    
    <div class="language-example">
        <h2>日语</h2>
        <p>语言代码：<span class="language-code">ja</span></p>
        <p lang="ja">これは日本語の内容です</p>
    </div>
    
    <div class="language-example">
        <h2>法语</h2>
        <p>语言代码：<span class="language-code">fr</span></p>
        <p lang="fr">Ceci est du contenu français</p>
    </div>
    
    <div class="language-example">
        <h2>德语</h2>
        <p>语言代码：<span class="language-code">de</span></p>
        <p lang="de">Dies ist deutscher Inhalt</p>
    </div>
</body>
</html>

局部语言设置

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>多语言内容页面</title>
    <style>
        .quote {
            font-style: italic;
            margin: 20px 0;
            padding: 15px;
            border-left: 4px solid #007acc;
            background-color: #f8f9fa;
        }
        .author {
            text-align: right;
            margin-top: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>多语言引用示例</h1>
    
    <article>
        <h2>关于编程的名言</h2>
        
        <blockquote class="quote" lang="en">
            <p>"The best way to get a project done faster is to start sooner."</p>
            <p class="author">- Jim Highsmith</p>
        </blockquote>
        
        <p>这句英文名言的意思是：完成项目最快的方法是尽早开始。</p>
        
        <blockquote class="quote" lang="zh-CN">
            <p>"程序是写给人读的，只是偶尔让计算机执行一下。"</p>
            <p class="author">- Harold Abelson</p>
        </blockquote>
        
        <blockquote class="quote" lang="ja">
            <p>"プログラムは人間が読むためのものであり、たまたま機械が実行できるものである。"</p>
            <p class="author">- Harold Abelson（日本語版）</p>
        </blockquote>
    </article>
    
    <script>
        // 检测页面中的语言设置
        function detectLanguages() {
            const elements = document.querySelectorAll('[lang]');
            const languages = new Set();
            
            elements.forEach(element => {
                languages.add(element.lang);
            });
            
            console.log('页面中使用的语言:', Array.from(languages));
        }
        
        detectLanguages();
    </script>
</body>
</html>

💡 文档结构最佳实践

1. 完整的文档模板

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 基础元数据 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <!-- 页面信息 -->
    <title>页面标题 - 网站名称</title>
    <meta name="description" content="页面描述，不超过160个字符">
    <meta name="keywords" content="关键词1,关键词2,关键词3">
    <meta name="author" content="作者姓名">
    
    <!-- 图标 -->
    <link rel="icon" href="favicon.ico">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    
    <!-- 样式 -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    
    <!-- 预加载 -->
    <link rel="preload" href="fonts/main.woff2" as="font" type="font/woff2" crossorigin>
</head>
<body>
    <!-- 页面内容 -->
    <header>
        <nav>
            <!-- 导航内容 -->
        </nav>
    </header>
    
    <main>
        <!-- 主要内容 -->
    </main>
    
    <footer>
        <!-- 页脚内容 -->
    </footer>
    
    <!-- 脚本 -->
    <script src="js/main.js"></script>
</body>
</html>

2. 常见错误避免

html

<!-- 错误示例 -->
<html>
<head>
    <title>没有DOCTYPE的页面</title>
</head>
<body>
    <h1>这可能导致怪异模式</h1>
</body>
</html>

<!-- 正确示例 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>正确的HTML5页面</title>
</head>
<body>
    <h1>这会触发标准模式</h1>
</body>
</html>

3. 性能优化技巧

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>性能优化示例</title>
    
    <!-- 关键CSS内联 -->
    <style>
        /* 关键渲染路径的CSS */
        body { font-family: Arial, sans-serif; }
        .hero { background: #f0f0f0; }
    </style>
    
    <!-- 非关键CSS延迟加载 -->
    <link rel="preload" href="css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="css/main.css"></noscript>
    
    <!-- 预连接第三方资源 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="https://analytics.google.com">
</head>
<body>
    <header>
        <h1>网站标题</h1>
    </header>
    
    <main>
        <section class="hero">
            <h2>欢迎内容</h2>
        </section>
    </main>
    
    <!-- 脚本放在底部 -->
    <script src="js/main.js" defer></script>
</body>
</html>

本节要点回顾

DOCTYPE声明：HTML5使用简单的<!DOCTYPE html>声明，触发标准模式
HTML根元素：包含lang属性设置页面语言，可以设置dir属性控制文本方向
head部分：包含元数据、标题、样式、脚本等信息，不在页面中显示
body部分：包含所有可见内容，是页面的主体
字符编码：使用UTF-8编码支持全球字符，避免乱码问题
语言属性：帮助浏览器和辅助技术正确处理内容

常见问题FAQ

Q: 为什么HTML5的DOCTYPE这么简单？

A: HTML5简化了DOCTYPE声明，因为现代浏览器已经标准化，不需要复杂的DTD引用。

Q: viewport meta标签有什么作用？

A: viewport标签告诉浏览器如何控制页面的尺寸和缩放，是响应式设计的关键。

Q: 如何选择合适的字符编码？

A: 推荐使用UTF-8编码，它支持世界上几乎所有的字符和符号。

Q: head部分的标签顺序有要求吗？

A: 建议将charset放在最前面，title紧随其后，然后是meta标签，最后是样式和脚本。

下一节预览：第1章第4节 - 基本语法规则 - 学习HTML5的基本语法规则

1.3 HTML5文档结构 ​

学习目标 ​

1.3.1 文档类型声明（DOCTYPE） ​

什么是DOCTYPE？ ​

HTML5的DOCTYPE声明 ​

与早期版本的对比 ​

DOCTYPE的作用 ​

1. 触发标准模式 ​

2. 避免怪异模式 ​

检测文档模式 ​

1.3.2 HTML根元素 ​

HTML根元素的作用 ​

基本结构 ​

HTML元素的属性 ​

1. lang属性（语言属性） ​

2. 不同语言的示例 ​

3. 多语言页面 ​

4. dir属性（文本方向） ​

1.3.3 head部分详解 ​

head元素的作用 ​

完整的head示例 ​

1.3 HTML5文档结构

学习目标

1.3.1 文档类型声明（DOCTYPE）

什么是DOCTYPE？

HTML5的DOCTYPE声明

与早期版本的对比

DOCTYPE的作用

1. 触发标准模式

2. 避免怪异模式

检测文档模式

1.3.2 HTML根元素

HTML根元素的作用

基本结构

HTML元素的属性

1. lang属性（语言属性）

2. 不同语言的示例

3. 多语言页面

4. dir属性（文本方向）

1.3.3 head部分详解

head元素的作用

完整的head示例