Web-HTML入门（保姆教程）

最新推荐文章于 2026-03-08 23:26:36 发布

原创最新推荐文章于 2026-03-08 23:26:36 发布 · 965 阅读

2 ·

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

标签

#前端 #html #javascript

前端基础专栏收录该内容

2 篇文章

订阅专栏

本文介绍了Web标准的三大组成部分——结构、表现和行为，并强调了它们的分离原则。HTML作为超文本标记语言，用于创建网页结构。文章提供了一个简单的HTML示例，展示了如何插入图片。还讲解了HTML的基本语法规范，包括标签的使用和关系，并列举了HTML的基本结构标签。此外，文章推荐了VSCode作为小白入门工具，并提到了相关插件的安装和使用，帮助初学者更便捷地编写和预览HTML代码。

1、简单介绍Web

这里说一下Web的标准（Web的标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C称为万维网联盟）。

只需记住Web标准的构成：主要包括结构（Structure）、表现（Presentation）、行为（Behavior）三个方面。

标准	说明
结构	结构用于对网页元素进行整理和分类、现阶段主要学习HTML
表现	表现用于设置网页元素的板式、颜色、大小等外观样式，主要指CSS
行为	行为是指网页模型的定义及交互的编写，主要是学习Javascript

Web标准提出的最佳体验方案：结构、表现、行为相分离。

结构写到HTML文件中，表现写到CSS中，行为写到JavaScript文件中。

2、HTML概述：

全称：Hyper Text Markup Language超文本标记语言

先来看一个简单的例子：

（1）打开电脑中的文本文件

在里面写上<img src="22.png">

（2）将文件格式保存为后缀是.html格式，再打开，就可以以网页形式看图片了（注意图片名字不能有中文）

这就解释了HTML为什么是超文本语言？因为可以放图片、音乐、动画等。

2.1HTML语法规范

（1）HTML 标签必须由尖括号包括，例如<html>

（2）HTML标签通常成对出现，比如<html>和</html>.我们称为双标签，第一个是开始标签，第二个是结束标签

（3）存在单个标签<br/>

2.2 标签关系

双标签关系可以分为两类：包含关系和并列关系

包含关系：

<html>

<title></title>

</html>

并列关系：

<head></head>

<body></body>

2.3 HTML基本结构标签

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签--根标签
<head></head>	文档头部	注意在head标签中我们必须设置的标签<title>
<title></title>	文档标题	设置网页标题
<body></body>	文档主题	内部元素包含文档所有内容，页面内容基本放在这里