HTML 初学者速成课程

最新推荐文章于 2026-06-29 18:01:07 发布

原创最新推荐文章于 2026-06-29 18:01:07 发布 · 1.6k 阅读

27 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

HTML

HTML 初学者速成课程

概述

HTML（超文本标记语言）是用于创建网页的标准标记语言。它用于构建网页内容，使浏览器能够显示文本、图片和其他元素。本文档是一个基本的HTML模板，演示了各种HTML元素及其用法。

结构

HTML文档的基本结构包括以下元素：

<!DOCTYPE html>：声明文档类型和HTML版本。
<html>：包含所有其他HTML元素的根元素。
<head>：包含文档的元信息，如标题和样式链接。
<body>：包含网页的主要内容。

示例代码讲解

标题

<!--Headings-->
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>
<h6>Heading Six</h6>

HTML提供了六级标题标签，从<h1>到<h6>，分别表示不同级别的重要性，<h1>是最重要的标题，<h6>是最不重要的。

段落和文本格式

<!--Paragraphs-->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, quaerat!</p>
<p>Lorem ipsum <strong>dolor sit amet consectetur</strong> adipisicing elit. Magni beatae officiis fuga, odio placeat aspernatur optio dolor provident <em>et quod error</em>, ratione, delectus iusto modi aliquam eos rerum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat neque soluta tempore. Facere asa, cumque facilis neque ipsam, nollitia quam cumque: expedita accusamus dignissimos. Provident labore odio exercitationem, obcaecati error consequatur, quia iste ipsum, blanditiis corporis voluptate unde vel doloribus delectus ad assumenda voluptas esse molestias tempora possimus, <a href="https://www.bilibili.com/" target="_blank">Temporibus</a> perferendis consectetur dolore! Tempore consectetur explicabo id minima. Ex aut totam cupiditate maiores vel enim, ea minima eius assumenda! Impedit asperiores facilis aliquid magni. Illum consequatur perspiciatis blanditiis enim, dolorum quae assumenda magnam aperiam cum, incidunt maiores aliquid atque totam voluptatibus ducimus quos!</p>

<p>：段落标签，用于定义文本段落。
<strong>：加粗文本。
<em>：强调文本（斜体）。
<a>：超链接标签，href属性定义链接地址，target="_blank"属性表示在新标签页中打开链接。

列表

<!-- Lists -->
<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
    <li>List Item 5</li>
</ul>

<ol>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
    <li>List Item 5</li>
</ol>

<ul>：无序列表，使用圆点（或其他符号）作为项目符号。
<ol>：有序列表，使用数字或字母作为项目符号。
<li>：列表项，用于定义列表中的每个项目。

表格

<!-- Table -->
<table>
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Leonard</td>
            <td>Chan</td>
            <td>99</td>
            <td>abc@abc.com</td>
        </tr>
        <tr>
            <td>Leonard</td>
            <td>Chan</td>
            <td>99</td>
            <td>abc@abc.com</td>
        </tr>
        <tr>
            <td>Leonard</td>
            <td>Chan</td>
            <td>99</td>
            <td>abc@abc.com</td>
        </tr>
    </tbody>
</table>

<table>：表格标签。
<thead>：表头部分。
<tbody>：表体部分。
<tr>：表格行。
<th>：表格头单元格。
<td>：表格数据单元格。

表单

<!-- Forms -->
<form action="form.js" method="POST">
    <div>
        <label>First Name</label>
        <input type="text" name="firstname" placeholder="Enter First Name">
    </div>
    <div>
        <label>Last Name</label>
        <input type="text" name="lastname" placeholder="Enter Last Name">
    </div>
    <div>
        <label>Email</label>
        <input type="email" name="email" placeholder="Enter Email">
    </div>
    <input type="submit" name="submit" value="Submit">
</form>

<form>：表单标签，action属性定义表单提交的目标URL，method属性定义提交方法（GET或POST）。
<label>：标签，用于定义表单控件的说明。
<input>：输入控件，type属性定义输入类型（如text, email, submit等），name属性定义控件名称，placeholder属性定义占位符。

按钮

<!-- Button -->
<button>This is a Button</button>

<button>：按钮标签。

图片

<img style="width:50vw" src="image.png" alt="This is a png tag">

<img>：图片标签，src属性定义图片路径，alt属性定义图片的替代文本，style属性用于内联样式。

注意，这里的图片必须与HTML文件放于同一个目录下。

引用和缩略词

<!-- Quotations -->
<blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, possimus sapiente. Magnam, delectus! Quibusdam temporibus totam tenetur deleniti quidem quo, voluptatem aliquam consectetur odio cupiditate officia, recusandae illum doloremque suscipit?</blockquote>

<p><abbr title="Massachusetts Institute of Technology">MIT</abbr> is a prestigious college</p>

<p><cite>MIT is a prestigious college</cite> by DasAuto</p>

<blockquote>：块引用标签，用于长引用。
<abbr>：缩略词标签，title属性定义完整形式。
<cite>：引用标签，用于引用作品的来源。

通过学习上述HTML标签及其用法，您可以创建结构化的网页内容，并为进一步的CSS和JavaScript学习打下基础。

请使用Visual Studio Code运行下列代码，所需插件为Live Server，可直接将HTML文件拖至浏览器打开，若出现错误（如网页打不开），请点击VS Code右下角的Go Live。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Crash Course For Beginners</title>
    </head>
    <body>
        <!--Headings-->
        <h1>Heading One</h1>
        <h2>Heading Two</h2>
        <h3>Heading Three</h3>
        <h4>Heading Four</h4>
        <h5>Heading Five</h5>
        <h6>Heading Six</h6>
        
        <!--Headings-->
        <p>Loren ipsun dolor sit anet consectetur adipisicing elit. Magnan,
            quaerat!</p>
        <p>Loren ipsun <strong>dolor sit anet consectetur</strong> adipisicing
             elit. Magni beataeren officla fuga, odio placeat aspernatur optio
              dolor provident <em>et quod error</em>, ratione, delectus iusto 
              modi aliguan eos rerun!</p>
        <p>Loren ipsun dolor sit anet consectetur adipisicing clit. Fugiat 
            nemipsan soluta tenpore.Facere asa,cun gui facilis negue ipsuquiden 
            nollitia quam cunqu:expedita accusaus dignissinos. Providenti labarun 
            odio exercitationen,obcaecati error connodi fugeconsectetur quiaiste 
            ipsun, blanditiis corporis voluptate undecunque vel doloribus delectus 
            ad assunenda voluptas esse molestia tempora possimus, 
            <a href="https://www.bilibili.com/"
            target="_blank">Temporibus</a> perferendis consectetur 
            dolore! Tenpore consectetur explicabo id ninima. Ex aut totan cupiditate 
            malores veljebitss ea minina eius assune!inpedit asperiores facilis 
            aliquidmagni. Illum connodi perspiciatis blanditiis enim, dolorum quae 
            assumendnagnan aperian cun, incidunt maiores aliguid atque totan 
            voluptatibusducinus quos!</p>
        
        <!-- Lists -->
        <ul>
            <li>List Item 1</li>
            <li>List Item 2</li>
            <li>List Item 3</li>
            <li>List Item 4</li>
            <li>List Item 5</li>
        </ul>

        <ol>
            <li>List Item 1</li>
            <li>List Item 2</li>
            <li>List Item 3</li>
            <li>List Item 4</li>
            <li>List Item 5</li>
        </ol>

        <!-- Table -->
        <table>
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Age</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Leonard</td>
                    <td>Chan</td>
                    <td>99</td>
                    <td>abc@abc.com</td>
                </tr>
                <tr>
                    <td>Leonard</td>
                    <td>Chan</td>
                    <td>99</td>
                    <td>abc@abc.com</td>
                </tr>
                <tr>
                    <td>Leonard</td>
                    <td>Chan</td>
                    <td>99</td>
                    <td>abc@abc.com</td>
                </tr>
            </tbody>
        </table>

        <br>
        <br>
        <hr>
        <br>

        <!-- Forms -->
        <form action="form.js" method="POST">
            <div>
                <label>First Name</label>
                <input type="text" name="firstname" placeholder="Enter First Name">
            </div>
            <div>
                <label>Last Name</label>
                <input type="text" name="lastname" placeholder="Enter Last Name">
            </div>
            <div>
                <label>Email</label>
                <input type="email" name="email" placeholder="Enter Email">
            </div>
            <input type="submit" name="submit" value="Submit">
        </form>

        <br>

        <!-- Button -->
        <button>This is a Button</button>

        <img style="width:50vw" src="image.png" alt="This is a png tag">

        <!-- Quotations -->
        <blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Explicabo, possimus sapiente. Magnam, delectus! Quibusdam temporibus 
            totam tenetur deleniti quidem quo, voluptatem aliquam consectetur 
            odio cupiditatofficia, recusandae illum doloremquesuscipit?</blockquote>

        <p><abbr title="Massachusetts Institute of Technology">MIT</abbr> is a
            prestigious collage</p>

            <p><cite>MIT is a prestigious collage</cite> by DasAuto</p>

        <div style="margin-top:1000px"></div>
    </body>
</html>

标签

#html #前端