什么期末还要考html,我还没上车啊。期末慌了！HTML 速成攻略来袭

前言

期末考近在眼前，没想到还要考 HTML，可自己还没学，简直急死人！别担心，这篇 HTML 速成攻略将带你快速掌握关键知识点。

1. 什么是 HTML

HTML 即超文本标记语言（HyperText Markup Language），它是用于创建网页的标准标记语言。通过一系列标签，我们能告诉浏览器如何显示网页内容。

2. HTML 基本结构

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>helloworld</title>
</head>
<body>
    <!-- 网页内容写在这里 -->
</body>
</html>

<!DOCTYPE html>：声明文档类型为 HTML5。
<html>：根标签，包裹整个 HTML 文档。
<head>：包含文档元数据，如字符编码、页面标题等，不会在页面中直接显示。
<body>：包含页面中要显示的内容，如文本、图片、链接等。

二、常用标签

1. 文本标签

html 复制代码

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<p>这是一个段落。</p>
<strong>这是加粗文本</strong>
<em>这是倾斜文本</em>

<h1> - <h6>：标题标签，数字越小，标题级别越高，字体越大。
<p>：段落标签，用于创建段落。
<strong>：表示重要内容，通常显示为加粗。
<em>：表示强调内容，通常显示为倾斜。

2. 列表标签

html 复制代码

<!-- 无序列表 -->
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

<ul>：无序列表，列表项前显示为圆点。
<ol>：有序列表，列表项前显示为数字或字母。
<li>：列表项标签，用于定义列表中的每一项。

3. 链接与图片标签

html 复制代码

<!-- 链接标签 -->
<a href="https://www.baidu.com">百度一下</a>

<!-- 图片标签 -->
<img src="example.jpg" alt="示例图片">

<a>：链接标签，href 属性指定链接的目标地址。
<img>：图片标签，src 属性指定图片的路径，alt 属性用于在图片无法显示时提供替代文本。

4. 表格标签

html 复制代码

<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>22</td>
        </tr>
    </tbody>
</table>

<table>：表格标签。
<thead>：表格头部，通常包含表头信息。
<tbody>：表格主体，包含表格的主要数据。
<tr>：表格行标签。
<th>：表头单元格标签。
<td>：表格数据单元格标签。

5. 表单标签

html 复制代码

<form action="#" method="post">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username"><br>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password"><br>
    <input type="submit" value="提交">
</form>

三、HTML 注释

在 HTML 中，使用  进行注释，注释内容不会在浏览器中显示

四、语义化标签

HTML5 引入了许多语义化标签

html 复制代码

<header>
    <h1>网页头部</h1>
</header>
<nav>
    <a href="#">首页</a>
    <a href="#">关于我们</a>
</nav>
<main>
    <article>
        <h2>文章标题</h2>
        <p>文章内容...</p>
    </article>
</main>
<footer>
    <p>版权所有 &copy; 2025</p>
</footer>

<header>：表示页面或区域的头部。
<nav>：表示导航链接区域。
<main>：表示页面的主要内容。
<article>：表示独立的、完整的内容块。
<footer>：表示页面或区域的底部。

总结

通过以上内容，我们快速浏览了 HTML 的基础结构、常用标签、注释以及语义化标签等关键知识点。虽然这只是 HTML 的冰山一角，但应付期末考试应该足够啦。要求不高过了就行。