前端三剑客学习指南

前言代码

<!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>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f0f2f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }
        .section {
            margin: 20px 0;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 5px;
        }
        h2 {
            color: #3498db;
            margin-top: 0;
        }
        ul {
            list-style-type: none;
            padding-left: 0;
        }
        li {
            margin: 10px 0;
        }
        a {
            color: #2980b9;
            text-decoration: none;
            padding: 5px 10px;
            border-radius: 3px;
            transition: background-color 0.3s;
        }
        a:hover {
            background-color: #e3f2fd;
        }
        .note {
            font-size: 0.9em;
            color: #666;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>前端三剑客学习指南</h1>

        <div class="section">
            <h2>1. HTML基础 (结构层)</h2>
            <ul>
                <li><a href="html/01_html_basic.html">1.1 HTML基本结构和标签</a></li>
                <li><a href="html/02_html_text.html">1.2 文本和段落标签</a></li>
                <li><a href="html/03_html_links.html">1.3 链接和图片</a></li>
                <li><a href="html/04_html_lists.html">1.4 列表和表格</a></li>
                <li><a href="html/05_html_forms.html">1.5 表单和输入</a></li>
            </ul>
        </div>

        <div class="section">
            <h2>2. CSS基础 (表现层)</h2>
            <ul>
                <li><a href="css/01_css_basic.html">2.1 CSS选择器和基本样式</a></li>
                <li><a href="css/02_css_box.html">2.2 盒模型和布局</a></li>
                <li><a href="css/03_css_position.html">2.3 定位和浮动</a></li>
                <li><a href="css/04_css_flex.html">2.4 弹性盒子布局</a></li>
                <li><a href="css/05_css_responsive.html">2.5 响应式设计</a></li>
            </ul>
        </div>

        <div class="section">
            <h2>3. JavaScript基础 (行为层)</h2>
            <ul>
                <li><a href="js/01_js_basic.html">3.1 JavaScript基础语法</a></li>
                <li><a href="js/02_js_dom.html">3.2 DOM操作</a></li>
                <li><a href="js/03_js_events.html">3.3 事件处理</a></li>
                <li><a href="js/04_js_functions.html">3.4 函数和作用域</a></li>
                <li><a href="js/05_js_async.html">3.5 异步编程</a></li>
            </ul>
        </div>

        <div class="section">
            <p class="note">学习建议：</p>
            <ul>
                <li>1. 按照顺序逐个学习，每个主题都包含理论讲解和实践示例</li>
                <li>2. 确保完全理解当前主题后再进入下一个主题</li>
                <li>3. 动手实践每个示例，并尝试修改代码观察效果</li>
                <li>4. 建议先掌握HTML基础，再学习CSS，最后学习JavaScript</li>
            </ul>
        </div>
    </div>
</body>
</html>
View Code

一. 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">
    <title>HTML基本结构和标签</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f0f2f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        h1, h2 {
            color: #2c3e50;
        }
        .example {
            background-color: #f8f9fa;
            border-left: 4px solid #3498db;
            padding: 15px;
            margin: 20px 0;
        }
        code {
            background-color: #f1f1f1;
            padding: 2px 5px;
            border-radius: 3px;
            font-family: Consolas, monospace;
        }
        .note {
            background-color: #fff3cd;
            border-left: 4px solid #4fc107;
            padding: 15px;
            margin: 20px 0;
        }
        .back-link {
            display: inline-block;
            margin-top: 20px;
            color: #3498db;
            text-decoration: none;
        }
        .back-link:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>HTML基本结构和标签</h1>

        <section>
            <h2>1. HTML文档基本结构</h2>
            <div class="example">
                <pre><code>
&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;页面标题&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    页面内容
&lt;/body&gt;
&lt;/html&gt;
                </code></pre>
            </div>
            <p>解释：</p>
            <ul>
                <li><code>&lt;!DOCTYPE html&gt;</code> - 声明文档类型为HTML5</li>
                <li><code>&lt;html&gt;</code> - HTML文档的根元素</li>
                <li><code>&lt;head&gt;</code> - 包含文档的元数据</li>
                <li><code>&lt;body&gt;</code> - 包含可见的页面内容</li>
            </ul>
        </section>

        <section>
            <h2>2. 基本标签介绍</h2>

            <h3>2.1 标题标签</h3>
            <div class="example">
                <h1>这是h1标题</h1>
                <h2>这是h2标题</h2>
                <h3>这是h3标题</h3>
                <h4>这是h4标题</h4>
                <h5>这是h5标题</h5>
                <h6>这是h6标题</h6>
            </div>
            <p>HTML提供六级标题，从 <code>&lt;h1&gt;</code> 到 <code>&lt;h6&gt;</code>，h1最大，h6最小。</p>

            <h3>2.2 段落和文本格式化</h3>
            <div class="example">
                <p>这是一个段落。段落使用 &lt;p&gt; 标签创建。</p>
                <p>文本格式化标签示例：</p>
                <strong>粗体文本</strong><br>
                <em>斜体文本</em><br>
                <u>下划线文本</u><br>
                <mark>高亮文本</mark>
            </div>

            <h3>2.3 换行和分隔线</h3>
            <div class="example">
                这是第一行<br>
                这是第二行
                <hr>
                分隔线上方的内容
            </div>
        </section>

        <section>
            <h2>3. 注释</h2>
            <div class="example">
                <code>&lt;!-- 这是HTML注释，不会显示在页面上 --&gt;</code>
            </div>
        </section>

        <div class="note">
            <strong>重要提示：</strong>
            <ul>
                <li>HTML标签通常成对出现，包含开始标签和结束标签</li>
                <li>某些标签是自闭合的，如 &lt;br&gt;、&lt;hr&gt;、&lt;img&gt;</li>
                <li>HTML标签不区分大小写，但推荐使用小写</li>
                <li>正确的文档结构对于网页的可访问性和SEO很重要</li>
            </ul>
        </div>

        <section>
            <h2>4. 实践练习</h2>
            <p>尝试创建一个包含以下元素的HTML文档：</p>
            <ul>
                <li>一个主标题</li>
                <li>两个次级标题</li>
                <li>几个段落</li>
                <li>使用文本格式化标签</li>
                <li>添加适当的注释</li>
            </ul>
        </section>

        <a href="../index.html" class="back-link">← 返回首页</a>
    </div>
</body>
</html>
View Code

1.1 HTML文档基本结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    页面内容
</body>
</html>

解释：

  • <!DOCTYPE html> - 声明文档类型为HTML5
  • <html> - HTML文档的根元素
  • <head> - 包含文档的元数据
  • <body> - 包含可见的页面内容

1.2. 基本标签介绍

1.2.1 标题标签

 HTML提供六级标题，从 <h1> 到 <h6>，h1最大，h6最小。

                <h1>这是h1标题</h1>
                <h2>这是h2标题</h2>
                <h3>这是h3标题</h3>
                <h4>这是h4标题</h4>
                <h5>这是h5标题</h5>
                <h6>这是h6标题</h6>

1.2.2 段落和文本格式化

                <p>这是一个段落。段落使用 &lt;p&gt; 标签创建。</p>
                <p>文本格式化标签示例：</p>
                <strong>粗体文本</strong><br>
                <em>斜体文本</em><br>
                <u>下划线文本</u><br>
                <mark>高亮文本</mark>

1.2.3 换行和分隔线

                这是第一行<br>
                这是第二行
                <hr>
                分隔线上方的内容

1.3. 注释

<!-- 这是HTML注释，不会显示在页面上 -->
重要提示：
  • HTML标签通常成对出现，包含开始标签和结束标签
  • 某些标签是自闭合的，如 <br>、<hr>、<img>
  • HTML标签不区分大小写，但推荐使用小写
  • 正确的文档结构对于网页的可访问性和SEO很重要

1.4. 实践练习

尝试创建一个包含以下元素的HTML文档：

一个主标题
两个次级标题
几个段落
使用文本格式化标签
添加适当的注释

2 文本和段落标签

2.1 文本格式化标签

基本文本格式化：

<p><strong>粗体文本</strong> - &lt;strong&gt; 标签</p>
<p><em>斜体文本</em> - &lt;em&gt; 标签</p>
<p><mark>高亮文本</mark> - &lt;mark&gt; 标签</p>
<p><small>小号文本</small> - &lt;small&gt; 标签</p>
<p><del>删除线文本</del> - &lt;del&gt; 标签</p>
<p><ins>下划线文本</ins> - &lt;ins&gt; 标签</p>
<p>上标文本：E = mc<sup>2</sup> - &lt;sup&gt; 标签</p>
<p>下标文本：H<sub>2</sub>O - &lt;sub&gt; 标签</p>

文本引用：

                    <blockquote>
                        这是一个长引用文本。使用 &lt;blockquote&gt; 标签来创建缩进的引用块。
                    </blockquote>
                    <p>这是一个短引用：<q>使用 &lt;q&gt; 标签的行内引用</q></p>

2.2 段落和文本对齐

                <p style="text-align: left;">这是左对齐的文本 (默认)</p>
                <p style="text-align: center;">这是居中对齐的文本</p>
                <p style="text-align: right;">这是右对齐的文本</p>
                <p style="text-align: justify;">这是两端对齐的文本。为了演示效果，这段文字需要足够长，这样才能看出两端对齐的效果。两端对齐会自动调整单词之间的间距，使得文本能够同时对齐左右边界。</p>

2.3 特殊字符

            <table>
                <tr>
                    <th>显示效果</th>
                    <th>描述</th>
                    <th>实体名称</th>
                </tr>
                <tr>
                    <td>&lt;</td>
                    <td>小于号</td>
                    <td>&amp;lt;</td>
                </tr>
                <tr>
                    <td>&gt;</td>
                    <td>大于号</td>
                    <td>&amp;gt;</td>
                </tr>
                <tr>
                    <td>&amp;</td>
                    <td>和号</td>
                    <td>&amp;amp;</td>
                </tr>
                <tr>
                    <td>&quot;</td>
                    <td>引号</td>
                    <td>&amp;quot;</td>
                </tr>
                <tr>
                    <td>&copy;</td>
                    <td>版权符号</td>
                    <td>&amp;copy;</td>
                </tr>
                <tr>
                    <td>&reg;</td>
                    <td>注册商标</td>
                    <td>&amp;reg;</td>
                </tr>
                <tr>
                    <td>&trade;</td>
                    <td>商标</td>
                    <td>&amp;trade;</td>
                </tr>
            </table>
View Code

2.4 预格式化文本

                <p>使用 &lt;pre&gt; 标签保留文本格式：</p>
                <pre>
这是预格式化的文本。
    它会保留空格
        和换行。
适合显示代码或诗歌。
                </pre>

2.5 实践示例

            <div class="example">
                <h3>一篇简单的文章：</h3>
                <article>
                    <h4>HTML简介</h4>
                    <p>HTML（<em>超文本标记语言</em>）是创建网页的标准标记语言。它描述了网页的结构，由一系列的元素组成。HTML元素告诉浏览器如何展示内容。</p>

                    <blockquote>
                        <p>HTML是<strong>万维网的核心语言</strong>，是构建网页的基石。</p>
                    </blockquote>

                    <p>HTML的最新版本是 HTML5，它引入了许多新的元素和特性，包括：</p>
                    <ul>
                        <li>语义化标签</li>
                        <li>多媒体支持</li>
                        <li>更好的移动设备支持</li>
                    </ul>
                </article>
            </div>

3 链接和图片

1. HTML链接

1.1 基本链接语法

            <div class="example">
                <h3>1.1 基本链接语法</h3>
                <p>基本语法：<code>&lt;a href="URL"&gt;链接文本&lt;/a&gt;</code></p>
                <p>示例：</p>
                <ul>
                    <li><a href="https://www.example.com" class="demo-link" target="_blank">外部链接</a></li>
                    <li><a href="../index.html" class="demo-link">相对路径链接</a></li>
                    <li><a href="#section-images" class="demo-link">页内锚点链接</a></li>
                    <li><a href="mailto:example@example.com" class="demo-link">邮件链接</a></li>
                    <li><a href="tel:+1234567890" class="demo-link">电话链接</a></li>
                </ul>
            </div>

1.2 链接属性

            <div class="example">
                <h3>1.2 链接属性</h3>
                <table>
                    <tr>
                        <th>属性</th>
                        <th>描述</th>
                        <th>示例</th>
                    </tr>
                    <tr>
                        <td>target</td>
                        <td>指定链接打开方式</td>
                        <td><code>target="_blank"</code> 新窗口打开</td>
                    </tr>
                    <tr>
                        <td>title</td>
                        <td>鼠标悬停提示文本</td>
                        <td><code>title="点击查看详情"</code></td>
                    </tr>
                    <tr>
                        <td>download</td>
                        <td>指定下载链接</td>
                        <td><code>download="文件名"</code></td>
                    </tr>
                </table>
            </div>

2. HTML图片

2.1 基本图片语法

            <div class="example">
                <h3>2.1 基本图片语法</h3>
                <p>基本语法：<code>&lt;img src="图片URL" alt="替代文本"&gt;</code></p>
                <p>示例：</p>
                <img src="https://via.placeholder.com/300x200" alt="示例图片" class="image-demo">
            </div>

2.2 图片属性

2.3 响应式图片

使用CSS使图片响应式：

img {
max-width: 100%;
height: auto;
}

3. 图片和链接结合

            <div class="example">
                <h3>可点击的图片</h3>
                <a href="https://www.example.com" target="_blank">
                    <img src="https://via.placeholder.com/200x100" alt="点击查看更多" class="image-demo">
                </a>
            </div>

4. 最佳实践

5. 实践练习

4 列表和表格

5 表单和输入

二. CSS基础 (表现层)

1 CSS选择器和基本样式

2 盒模型和布局

3 定位和浮动

4 弹性盒子布局

5 响应式设计

三. JavaScript基础 (行为层)

1 JavaScript基础语法

2 DOM操作

3 事件处理

4 函数和作用域

5 异步编程

posted @ 2025-04-27 13:24  三三得九86  阅读(37)  评论(0)    收藏  举报