正文

目录会跟随阅读位置移动。

阅读进度

HTML 基础篇：从网页骨架到常用标签全面入门

一、HTML 是什么？

HTML，全称 HyperText Markup Language，中文叫“超文本标记语言”。

它不是一门编程语言，而是一门标记语言。它的主要作用是描述网页的结构。

简单来说：

HTML 负责网页内容结构 CSS 负责网页样式美化 JavaScript 负责网页交互逻辑

比如一个网页中有标题、段落、图片、按钮、表单、列表、链接，这些最基础的内容结构，都是由 HTML 来定义的。

可以把网页理解成一栋房子：

HTML 是房子的骨架 CSS 是房子的装修 JavaScript 是房子的电路和智能设备

如果没有 HTML，浏览器就不知道页面上应该显示什么内容。

二、HTML 的基本结构

一个最基础的 HTML 页面通常长这样：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>你好，HTML！</h1>
    <p>这是我的第一个网页。</p>
</body>
</html>

我们逐行来看。

1. `<!DOCTYPE html>`

这行代码用来告诉浏览器：当前文档使用的是 HTML5 标准。

HTML5 是目前主流的 HTML 版本。写网页时，一般都建议在最顶部加上这一行。

<!DOCTYPE html>

2. `<html>`

html 标签是整个网页的根标签，所有网页内容都应该写在它里面。

<html lang="zh-CN">
</html>

其中 lang="zh-CN" 表示这个网页主要使用中文。

3. `<head>`

head 标签里放的是网页的配置信息，比如编码、标题、SEO 信息、CSS 引入等。

这些内容一般不会直接显示在网页主体中。

<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>

4. `<meta charset="UTF-8">`

这行代码表示网页使用 UTF-8 编码。

如果不写，有些中文页面可能会出现乱码。

<meta charset="UTF-8">

5. `<title>`

title 标签表示浏览器标签页上的标题。

<title>我的网页</title>

6. `<body>`

body 标签中放的是网页真正显示给用户看的内容。

比如标题、文字、图片、按钮、表单等，基本都写在 body 里面。

<body>
    <h1>这是网页主体内容</h1>
</body>

三、HTML 标签的基本语法

HTML 主要由标签组成。

大多数标签都有开始标签和结束标签：

<p>这是一段文字</p>

其中：

是开始标签

是结束标签中间的内容是标签包裹的文本

也有一些标签是单标签，不需要结束标签，例如：

<br>
<hr>
<img src="logo.png" alt="logo">
<input type="text">

不过在现代 HTML 中，这些单标签不强制写成 <br />，直接写 <br> 即可。

四、HTML 常用文本标签

1. 标题标签

HTML 提供了 6 级标题：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

h1 最大，h6 最小。

实际开发中，h1 通常用于页面主标题，一个页面最好只放一个主要的 h1，这样对 SEO 和页面结构更友好。

2. 段落标签

段落使用 p 标签：

<p>HTML 是网页的基础结构。</p>
<p>CSS 可以用来美化网页。</p>

浏览器会自动在段落之间添加一定的间距。

3. 换行标签

如果只想换行，不想新开一个段落，可以使用 br 标签：

<p>
    第一行内容<br>
    第二行内容
</p>

但是不要滥用 br 来控制布局。真正的布局应该交给 CSS。

4. 水平线标签

hr 标签可以生成一条水平分割线：

<hr>

常用于分隔内容区域。

5. 加粗和强调

常见的加粗标签有：

<strong>重要内容</strong>
<b>普通加粗</b>

strong 更强调语义，表示内容很重要。 b 只是视觉上加粗。

常见的斜体标签有：

<em>强调内容</em>
<i>普通斜体</i>

em 有语义强调。 i 更多只是视觉效果。

实际开发中，如果内容本身有重要含义，推荐使用 strong 和 em。

五、HTML 链接标签

链接使用 a 标签。

<a href="https://www.baidu.com">访问百度</a>

其中 href 属性表示链接地址。

1. 在当前页面打开

<a href="https://www.example.com">打开网站</a>

2. 在新窗口打开

<a href="https://www.example.com" target="_blank">新窗口打开</a>

如果使用 target="_blank"，建议加上：

rel="noopener noreferrer"

完整写法：

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
    新窗口打开
</a>

这样可以提高安全性。

3. 页面内跳转

可以用 id 实现锚点跳转：

<a href="#section1">跳转到第一章</a>

<h2 id="section1">第一章</h2>
<p>这里是第一章内容。</p>

点击链接后，页面会跳转到对应 id 的位置。

六、HTML 图片标签

图片使用 img 标签。

<img src="images/logo.png" alt="网站 Logo">

常用属性：

src：图片路径 alt：图片无法显示时的替代文本，也有利于 SEO 和无障碍访问 width：图片宽度 height：图片高度

例如：

<img src="cat.jpg" alt="一只猫" width="300">

注意：

图片标签是单标签，不需要写 </img>。

实际开发中，alt 不要省略。尤其是博客、官网、电商网站中，alt 对搜索引擎和读屏软件都有帮助。

七、HTML 列表标签

HTML 中常见列表有三种：

有序列表无序列表定义列表

1. 无序列表

无序列表使用 ul 和 li。

<ul>
    <li>Java</li>
    <li>Python</li>
    <li>JavaScript</li>
</ul>

显示效果一般是带小圆点的列表。

常用于导航栏、菜单、文章目录等。

2. 有序列表

有序列表使用 ol 和 li。

<ol>
    <li>打开浏览器</li>
    <li>输入网址</li>
    <li>访问页面</li>
</ol>

显示效果一般是带数字序号的列表。

适合表示步骤、排名、流程。

3. 定义列表

定义列表使用 dl、dt、dd。

<dl>
    <dt>HTML</dt>
    <dd>负责网页结构。</dd>

    <dt>CSS</dt>
    <dd>负责网页样式。</dd>

    <dt>JavaScript</dt>
    <dd>负责网页交互。</dd>
</dl>

dt 表示术语。 dd 表示解释说明。

八、HTML 表格标签

表格用于展示结构化数据。

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>专业</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>20</td>
        <td>计算机</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>21</td>
        <td>软件工程</td>
    </tr>
</table>

常用标签：

table：表格 tr：表格行 th：表头单元格 td：普通单元格

更规范的表格结构：

<table>
    <thead>
        <tr>
            <th>课程</th>
            <th>分数</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>HTML</td>
            <td>95</td>
        </tr>
        <tr>
            <td>CSS</td>
            <td>90</td>
        </tr>
    </tbody>
</table>

thead 表示表头区域。 tbody 表示表格主体。

注意：现在不推荐用 HTML 表格来做页面布局。表格主要用于展示数据，网页布局应该使用 CSS，比如 Flex、Grid 等。

九、HTML 表单标签

表单是 HTML 中非常重要的一部分。登录、注册、搜索、评论、提交信息，基本都离不开表单。

表单使用 form 标签。

<form action="/login" method="post">
    <label>用户名：</label>
    <input type="text" name="username">

    <label>密码：</label>
    <input type="password" name="password">

    <button type="submit">登录</button>
</form>

1. form 标签

<form action="/submit" method="post">
</form>

常用属性：

action`：表单提交的地址
 `method`：提交方式，常见有 `get` 和 `post

get 通常用于查询，比如搜索。 post 通常用于提交数据，比如登录、注册、发布文章。

2. input 输入框

input 是最常用的表单控件。

<input type="text">
<input type="password">
<input type="email">
<input type="number">
<input type="date">
<input type="file">
<input type="checkbox">
<input type="radio">

常见类型：

text：普通文本输入 password：密码输入 email：邮箱输入 number：数字输入 date：日期选择 file：文件上传 checkbox：复选框 radio：单选框

3. label 标签

label 用于给表单控件添加说明。

推荐写法：

<label for="username">用户名：</label>
<input id="username" type="text" name="username">

for 的值要和输入框的 id 一致。这样点击文字“用户名”时，也能自动聚焦到输入框。

4. textarea 多行文本

<textarea name="comment" rows="5" cols="30"></textarea>

常用于评论、简介、备注等多行文本输入。

5. select 下拉框

<select name="major">
    <option value="computer">计算机科学</option>
    <option value="software">软件工程</option>
    <option value="ai">人工智能</option>
</select>

select 表示下拉框。 option 表示下拉选项。

6. button 按钮

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>

常见类型：

submit：提交表单 reset：重置表单 button：普通按钮，需要配合 JavaScript 使用

十、HTML 语义化标签

HTML5 中新增了很多语义化标签。语义化标签的作用是让页面结构更清晰，也方便搜索引擎和读屏软件理解页面内容。

常见语义化标签：

<header>页面头部</header>
<nav>导航区域</nav>
<main>页面主要内容</main>
<section>页面中的一个区域</section>
<article>一篇独立文章</article>
<aside>侧边栏</aside>
<footer>页面底部</footer>

一个简单的语义化页面结构：

<header>
    <h1>我的博客</h1>
</header>

<nav>
    <a href="/">首页</a>
    <a href="/articles">文章</a>
    <a href="/about">关于我</a>
</nav>

<main>
    <article>
        <h2>HTML 基础入门</h2>
        <p>这是一篇关于 HTML 的文章。</p>
    </article>
</main>

<aside>
    <p>这里是侧边栏内容。</p>
</aside>

<footer>
    <p>Copyright © 2026</p>
</footer>

语义化的好处：

代码结构更清楚有利于 SEO 有利于无障碍访问方便团队协作和后期维护

十一、块级元素和行内元素

HTML 元素大致可以分为块级元素和行内元素。

1. 块级元素

块级元素通常会独占一行。

常见块级元素：

<div>
<p>
<h1> 到 <h6>
<ul>
<ol>
<li>
<table>
<form>
<header>
<footer>
<section>
<article>

例如：

<div>第一块内容</div>
<div>第二块内容</div>

两个 div 会分别显示在不同的行。

2. 行内元素

行内元素不会独占一行，只占据自身内容需要的宽度。

常见行内元素：

<span>
<a>
<strong>
<em>
<img>
<input>
<label>

例如：

<p>我正在学习 <span>HTML</span> 和 <span>CSS</span>。</p>

span 常用于给一小段文字加样式。

3. div 和 span 的区别

div 是块级容器。 span 是行内容器。

例如：

<div class="card">
    <h2>文章标题</h2>
    <p>文章摘要内容。</p>
</div>

div 常用于包裹一整块内容。

<p>这是一段 <span class="red">红色文字</span>。</p>

span 常用于包裹一小段文本。

十二、HTML 属性

HTML 标签可以拥有属性，属性用于给标签提供额外信息。

基本格式：

<标签名 属性名="属性值">内容</标签名>

例如：

<a href="https://example.com" target="_blank">访问网站</a>

这里的 href 和 target 都是属性。

常见属性包括：

id：元素唯一标识 class：元素类名，常用于 CSS 选择器 style：行内样式 title：鼠标悬停提示 src：资源路径 href：链接地址 alt：图片替代文本 name：表单字段名 value：表单字段值

示例：

<p id="intro" class="text" title="提示文字">
    这是一段介绍文字。
</p>

id 和 class 的区别

id 一般用于唯一元素：

<div id="app"></div>

一个页面中，同一个 id 最好只出现一次。

class 可以重复使用：

<p class="text-red">第一段文字</p>
<p class="text-red">第二段文字</p>

多个元素可以使用同一个 class，方便统一设置样式。

十三、HTML 与 CSS 的关系

HTML 负责结构，CSS 负责样式。

HTML 示例：

<p class="title">这是标题</p>

CSS 示例：

.title {
    color: red;
    font-size: 24px;
}

CSS 的三种引入方式

1. 行内样式

<p style="color: red;">红色文字</p>

不推荐大量使用，因为会导致结构和样式混在一起。

2. 内部样式

<style>
    p {
        color: blue;
    }
</style>

适合小页面测试。

3. 外部样式

<link rel="stylesheet" href="style.css">

实际开发中最推荐这种方式。

完整示例：

<head>
    <meta charset="UTF-8">
    <title>CSS 引入</title>
    <link rel="stylesheet" href="style.css">
</head>

十四、HTML 与 JavaScript 的关系

JavaScript 可以操作 HTML，让页面产生交互。

例如：

<button onclick="alert('你好！')">点击我</button>

点击按钮后，会弹出提示框。

更推荐的写法是把 JavaScript 单独写出来：

<button id="btn">点击我</button>

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

    btn.addEventListener('click', function () {
        alert('你好，HTML！');
    });
</script>

实际项目中，HTML、CSS、JavaScript 最好分离：

<link rel="stylesheet" href="style.css">
<script src="main.js"></script>

这样代码更加清晰，也更容易维护。

十五、HTML 路径问题

写网页时，经常会遇到图片、CSS、JS 文件路径问题。

常见路径分为：

相对路径绝对路径

1. 相对路径

相对当前 HTML 文件的位置查找资源。

<img src="images/logo.png">
<link rel="stylesheet" href="css/style.css">
<script src="js/main.js"></script>

假设目录结构如下：

project
├── index.html
├── images
│   └── logo.png
├── css
│   └── style.css
└── js
    └── main.js

那么在 index.html 中可以这样写：

<img src="images/logo.png">
<link rel="stylesheet" href="css/style.css">
<script src="js/main.js"></script>

2. 返回上一级目录

<img src="../images/logo.png">

../ 表示返回上一级目录。

3. 绝对路径

绝对路径一般从网站根目录开始：

<img src="/images/logo.png">

或者使用完整 URL：

<img src="https://example.com/logo.png">

十六、HTML 注释

HTML 注释不会显示在页面中，主要用于说明代码。

<!-- 这里是页面头部 -->
<header>
    <h1>我的网站</h1>
</header>

注意：

不要在注释里写敏感信息，比如密码、Token、数据库账号等。因为前端代码用户是可以查看的。

十七、HTML 实战：写一个简单个人主页

下面是一个完整的 HTML 示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
</head>
<body>

    <header>
        <h1>张三的个人主页</h1>
        <p>热爱编程，正在学习前端开发。</p>
    </header>

    <nav>
        <a href="#about">关于我</a>
        <a href="#skills">技能</a>
        <a href="#contact">联系我</a>
    </nav>

    <main>
        <section id="about">
            <h2>关于我</h2>
            <p>我是一名计算机专业学生，目前正在学习 HTML、CSS、JavaScript。</p>
        </section>

        <section id="skills">
            <h2>技能列表</h2>
            <ul>
                <li>HTML 基础</li>
                <li>CSS 页面美化</li>
                <li>JavaScript 交互开发</li>
                <li>Java 后端开发</li>
            </ul>
        </section>

        <section id="contact">
            <h2>联系我</h2>
            <form>
                <label for="name">姓名：</label>
                <input id="name" type="text" name="name">

                <br><br>

                <label for="email">邮箱：</label>
                <input id="email" type="email" name="email">

                <br><br>

                <label for="message">留言：</label>
                <textarea id="message" name="message"></textarea>

                <br><br>

                <button type="submit">提交</button>
            </form>
        </section>
    </main>

    <footer>
        <p>Copyright © 2026 张三</p>
    </footer>

</body>
</html>

这个例子包含了：

页面基本结构标题和段落导航链接列表表单语义化标签

对于新手来说，能独立写出这样的页面，就说明 HTML 基础已经入门了。

十八、HTML 学习中常见错误

1. 标签没有闭合

错误写法：

<p>这是一段文字

推荐写法：

<p>这是一段文字</p>

虽然浏览器有一定容错能力，但不建议依赖浏览器自动修复。

2. 标签嵌套错误

错误写法：

<p>
    <div>内容</div>
</p>

p 标签里面不应该放 div 这种块级元素。

推荐写法：

<div>
    <p>内容</p>
</div>

3. 图片忘记写 alt

不推荐：

<img src="logo.png">

推荐：

<img src="logo.png" alt="网站 Logo">

4. 把表格用于布局

不推荐用 table 做页面布局。

以前很多老网站会用表格布局，但现在更推荐使用 CSS Flex 或 Grid。

5. 过度使用 div

很多新手写页面时喜欢全部用 div：

<div>
    <div>标题</div>
    <div>内容</div>
</div>

更推荐使用语义化标签：

<article>
    <h2>标题</h2>
    <p>内容</p>
</article>

这样代码更清晰。

十九、HTML 编写规范建议

1. 标签名小写

推荐：

<p>内容</p>

不推荐：

<P>内容</P>

虽然 HTML 不区分大小写，但小写更规范。

2. 属性值加引号

推荐：

<input type="text">

不推荐：

<input type=text>

3. 合理缩进

推荐：

<ul>
    <li>HTML</li>
    <li>CSS</li>
</ul>

不要写成一大坨：

<ul><li>HTML</li><li>CSS</li></ul>

4. 结构和样式分离

不推荐大量使用：

<p style="color: red; font-size: 20px;">文字</p>

推荐：

<p class="text-red">文字</p>

然后在 CSS 中写：

.text-red {
    color: red;
    font-size: 20px;
}

5. 注意可读性

好的 HTML 代码应该让别人一眼能看出页面结构，而不是到处都是没有意义的标签。

二十、HTML 在实际项目中的作用

在真实项目中，HTML 不只是写几个标签这么简单，它通常会参与到整个前端页面结构设计中。

例如：

登录页面：

<form>
    <input type="text" placeholder="请输入用户名">
    <input type="password" placeholder="请输入密码">
    <button>登录</button>
</form>

后台管理系统：

<aside>侧边栏菜单</aside>
<main>主内容区域</main>

博客文章页：

<article>
    <h1>文章标题</h1>
    <p>文章内容</p>
</article>

电商商品页：

<section>
    <img src="product.jpg" alt="商品图片">
    <h2>商品名称</h2>
    <p>商品价格</p>
    <button>加入购物车</button>
</section>

无论是 Vue、React，还是普通网页，最终浏览器渲染出来的核心结构，本质上都离不开 HTML。

比如 Vue 组件中：

<template>
    <div class="user-card">
        <h2>{{ username }}</h2>
        <p>{{ description }}</p>
    </div>
</template>

React JSX 中：

function UserCard() {
    return (
        <div className="user-card">
            <h2>张三</h2>
            <p>前端开发学习者</p>
        </div>
    );
}

虽然写法变了，但本质还是在描述 HTML 结构。

所以，学好 HTML 是学习前端框架的基础。

二十一、HTML、CSS、JavaScript 的学习顺序

对于新手来说，推荐学习路线是：

第一步：HTML 掌握页面结构，知道常用标签怎么写。

第二步：CSS 学会美化页面，掌握盒子模型、布局、Flex、Grid、响应式。

第三步：JavaScript 学会页面交互，掌握变量、函数、事件、DOM、异步请求。

第四步：前端工程化学习 npm、Vite、Vue 或 React。

第五步：真实项目做登录注册、后台管理系统、博客系统、电商页面等。

不要一开始就直接上 Vue 或 React。如果 HTML 和 CSS 基础不牢，写框架时会很痛苦。

二十二、总结

HTML 是前端开发的基础，它主要负责网页的结构。虽然它不像 Java、C++、JavaScript 那样有复杂的逻辑控制能力，但它是所有网页的起点。

学习 HTML 时，不要只停留在“这个标签能显示什么效果”，更应该理解每个标签的语义和使用场景。

需要重点掌握的内容有：

HTML 基本结构常用文本标签链接和图片列表和表格表单控件语义化标签块级元素和行内元素常用属性 HTML 与 CSS、JavaScript 的配合基本代码规范

对于初学者来说，HTML 入门并不难，难点在于写出结构清晰、语义合理、方便维护的页面。只要多写几个页面，多模仿优秀网站的结构，就能逐渐形成自己的前端页面组织能力。

HTML 就像网页的骨架。骨架搭得清楚，后面的 CSS 美化和 JavaScript 交互才会更加顺畅。

HTML 基础篇：从网页骨架到常用标签全面入门

HTML 基础篇：从网页骨架到常用标签全面入门

一、HTML 是什么？

二、HTML 的基本结构

1. <!DOCTYPE html>

2. <html>

3. <head>

4. <meta charset="UTF-8">

5. <title>

6. <body>

三、HTML 标签的基本语法

四、HTML 常用文本标签

1. 标题标签

2. 段落标签

3. 换行标签

4. 水平线标签

5. 加粗和强调

五、HTML 链接标签

1. 在当前页面打开

2. 在新窗口打开

3. 页面内跳转

六、HTML 图片标签

七、HTML 列表标签

1. 无序列表

2. 有序列表

3. 定义列表

八、HTML 表格标签

九、HTML 表单标签

1. form 标签

2. input 输入框

3. label 标签

4. textarea 多行文本

5. select 下拉框

6. button 按钮

十、HTML 语义化标签

十一、块级元素和行内元素

1. 块级元素

2. 行内元素

3. div 和 span 的区别

十二、HTML 属性

id 和 class 的区别

十三、HTML 与 CSS 的关系

CSS 的三种引入方式

1. 行内样式

2. 内部样式

3. 外部样式

十四、HTML 与 JavaScript 的关系

十五、HTML 路径问题

1. 相对路径

2. 返回上一级目录

3. 绝对路径

十六、HTML 注释

十七、HTML 实战：写一个简单个人主页

十八、HTML 学习中常见错误

1. 标签没有闭合

2. 标签嵌套错误

3. 图片忘记写 alt

4. 把表格用于布局

5. 过度使用 div

十九、HTML 编写规范建议

1. 标签名小写

2. 属性值加引号

3. 合理缩进

4. 结构和样式分离

5. 注意可读性

二十、HTML 在实际项目中的作用

二十一、HTML、CSS、JavaScript 的学习顺序

二十二、总结

作者名片

1. `<!DOCTYPE html>`

2. `<html>`

3. `<head>`

4. `<meta charset="UTF-8">`

5. `<title>`

6. `<body>`