【前端入门必看】HTML零基础速通

最新推荐文章于 2026-07-01 08:29:19 发布

原创最新推荐文章于 2026-07-01 08:29:19 发布 · 737 阅读

20 ·

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

GEO检测

文章目录

前言
一、HTML是什么？
二、HTML 的基本结构
三、HTML 核心标签详解
四、语义化标签
五、实操：创建一个简单的网页
六、下一步学习方向
七、总结

前言

HTML（HyperText Markup Language）是构建网页的核心语言，它定义了网页的结构和内容。无论是制作简单的个人主页，还是开发复杂的前端项目，HTML 都是基础。让我们从零开始，一步步掌握 HTML 的核心知识！

一、HTML是什么？

HTML 是什么？ HTML 是一种标记语言，使用标签（Tag）来定义网页的结构。每个标签通常成对出现，分为开始标签和结束标签，中间包裹内容。

示例：

<p>这是一个段落。</p>

HTML 的作用

定义网页内容：标题、段落、图片、视频等。
组织网页结构：布局页面的不同部分，例如头部、内容区、底部。
支持超链接：使页面间能够跳转。
语义化增强：提升页面的可读性和搜索引擎优化（SEO）。

二、HTML 的基本结构

一个完整的 HTML 文档由以下几部分组成：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的第一个网页</title>
</head>
<body>
  <h1>欢迎来到我的网页</h1>
  <p>这是一个用 HTML 制作的简单网页。</p>
</body>
</html>
//解析：
//<!DOCTYPE html>：声明 HTML5 文档类型。
//<html>：HTML 的根元素。
//<head>：包含网页的元信息（如标题、编码）。
//<meta charset="UTF-8">：声明网页使用的字符集。
//<title>：定义网页标题，显示在浏览器标签上。
//<body>：页面的主要内容部分。

三、HTML 核心标签详解

1.标题标签（h1-h6）

用于定义页面的标题，< h1> 表示最高级标题，< h6> 表示最低级标题。

示例：

<h1>主标题</h1>
<h2>副标题</h2>

2.段落标签（< p>）

用于定义文本段落。
示例：

<p>这是一个段落。</p>

3.链接标签（< a>）

用于创建超链接。
属性：
href：链接地址。
target：控制链接打开方式，如 _blank 表示新窗口打开。
示例：

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

4.图片标签（< img>）

用于在页面中插入图片。
属性：
src：图片路径。
alt：图片的替代文本，用于无障碍支持或图片加载失败时显示。
示例：

<img src="example.jpg" alt="示例图片">

5.列表标签（< li>）

无序列表（< ul>）：使用圆点符号。

<ul>
  <li>苹果</li>
  <li>香蕉</li>
</ul>

有序列表（< ol>）：使用数字编号。

<ol>
  <li>第一步</li>
  <li>第二步</li>
</ol>

5.表格标签（< table>）

用于创建表格。
常用子标签：
< tr>：定义表格行。
< td>：定义单元格。
< th>：定义表头。
示例：

<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

四、语义化标签

HTML5 引入了一些语义化标签，让页面结构更加清晰。

在这里插入图片描述

五、实操：创建一个简单的网页

1. 创建 HTML 文件

在你的电脑上新建一个文件 index.html，复制以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>个人简介</title>
</head>
<body>
  <header>
    <h1>欢迎来到我的主页</h1>
  </header>
  <section>
    <h2>个人信息</h2>
    <p>你好，我是小黄编程快乐屋，您们好呀！</p>
  </section>
  <nav>
    <a href="about.html">关于我</a>
    <a href="contact.html">联系我</a>
  </nav>
  <footer>
    <p>版权所有 © 2024</p>
  </footer>
</body>
</html>

2. 用浏览器打开

双击 index.html 文件，查看效果。

3. 修改并完善

试着修改标题、添加图片，或者为每个导航链接创建对应页面。

六、下一步学习方向

CSS：学习如何为 HTML 添加样式，让网页更美观。
JavaScript：学习如何为网页添加交互效果。
实践项目：通过动手制作个人博客或作品展示页巩固所学。

七、总结

相信通过本教程，你已经学会了 HTML 的基本知识，并掌握了核心标签的使用方法。现在动手创建你的第一个网页吧！

各位小伙伴还在BOSS直聘hr已读不回？！试试这个宝藏小程序！大家快看这里。

创作不易，各位帅气漂亮的小伙伴点个关注再走呗！！

标签

#前端 #html #javascript #css #css3