HTML简介:想成为前端开发者?先从掌握HTML开始!
zhezhongyun 2025-01-05 21:31 32 浏览
“这里是云端源想IT，帮你轻松学IT”
嗨~ 今天的你过得还好吗？
谁见过风呢
勿论你和我
但当树木俯首
风正经过
- 2024.03.05 -
在这个数字化的时代，我们每天都在与网页打交道。你是否曾经好奇过，这些充满魔力的网页是如何诞生的呢？今天，我们就来揭开构成这些网页的神秘面纱——HTML（超文本标记语言）。
一、什么是HTML
网页的基本组成
网页是构成网站的基本元素，通常由图片、链接、文字、声音、视频等元素组成，通常我们看见的网页都是.htm和.html后缀结尾的文件，因为都称为HTML文件。
什么是HTML
HTML 英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”，专门用来设计和编辑网页。
使用 HTML 编写的文件称为“HTML 文档”，一般后缀为.html（也可以使用.htm，不过比较少见）。HTML 文档是一种纯文本文件，您可以使用 Windows 记事本、Linux Vim、Notepad++、Sublime Text、VS Code 等文本编辑来打开或者创建。
每个网页都是一个 HTML 文档，使用浏览器访问一个链接（URL），实际上就是下载、解析和显示 HTML 文档的过程。将众多 HTML 文档放在一个文件夹中，然后提供对外访问权限，就构成了一个网站。
二、HTML的历史
HTML的故事始于1989年，当时蒂姆·伯纳斯-李在欧洲核子研究中心（CERN）提出了一个名为“万维网”的概念。
为了实现这一概念，他发明了HTML，并随后与罗伯特·卡里奥一起发明了HTTP协议。从那时起，HTML就成为了互联网不可或缺的一部分。
上图简单罗列了HTML的发展历史，大家可以简单了解一下。
三、HTML相关概念
什么是标签
HTML 标记通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词，比如<html/>。
- 封闭类型标记（也叫双标记），必须成对出现,如<p></p> 。
- 标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签 。
- 非封闭类型标记，也叫作空标记，或者单标记，如<br/>
<标签>内容<标签/>什么是元素
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思。但是严格来讲，一个HTML 元素包含了开始标签与结束标签，如下实例。
HTML 元素：
<p>这是一个段落</p>web浏览器
Web 浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取 HTML 文件，并将其作为网页显示。 浏览器并不是直接显示的 HTML 标签，但可以使用标签来决定如何展现 HTML页面的内容给用户：
HTML 属性
属性是用来修饰元素的，属性必须位于开始标签里，一个元素的属性可能不止一个，多个属性之间用空格隔开，多个属性之间不区分先后顺序。
每个属性都有值，属性和属性的值之间用等号链接，属性的值包含在引号当中，属性总是以名称/值对的形式出现。
四、HTML的基本结构
一个典型的HTML文档由以下几个基本元素构成：
- <!DOCTYPE html>
这是文档类型声明，告诉浏览器这个文档使用的是HTML5标准。
- <html>
这是整个HTML文档的根元素，其他所有元素都包含在这个标签内。
- <head>
这个部分包含了所有关于网页的元信息，如标题、字符集声明、引入的CSS样式表和JavaScript文件等。
- <title>
这个标签定义了网页的标题，它显示在浏览器的标题栏或标签页上。
- <body>
这个部分包含了网页的所有内容，如文本、图片、链接、表格、列表等。
HTML的结构示例
让我们通过一个简单的例子来具体了解HTML的结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个HTML页面</title>
</head>
<body>
<h1>欢迎来到我的网页！</h1>
<p>这是一个简单的段落。</p>
<a href="https://www.example.com">点击这里访问示例网站</a>
</body>
</html>在这个例子中，我们可以看到一个完整的HTML文档结构，从<!DOCTYPE html>开始，到最后一个</html>结束。
想象一下，如果HTML是一棵树，那么<html>就是树干，<head>和<body>就像是树的两个主要分支。<head>中的标签好比是树叶，它们虽然不起眼，但却至关重要，为树木提供营养。而<body>中的标签则像是树枝和果实，它们构成了树的主体，吸引人们的目光。
想要快速入门HTML吗？推荐一个前端开发基础课程，这个老师讲的特别好，零基础学习无压力，知识点结合代码，边学边练，可以免费试看试学，还有各种辅助工具和资料，非常适合新手！搜索【云端源想】前往学习哦！
五、HTML的特点
HTML的特点主要包括简易性、可扩展性、平台无关性和通用性等。具体如下：
1、简易性：
HTML是一种相对容易学习和使用的语言，它的版本升级通常采用超集方式，使得新版本能够兼容旧版本的标签和功能，这样既保持了向后兼容性，又能够灵活方便地引入新的功能。
2、可扩展性：
随着互联网的发展，HTML也在不断增加新的元素和属性来满足新的需求，如支持多媒体内容的嵌入、更丰富的表单控件等。这种设计使得HTML能够适应不断变化的网络环境。
3、平台无关性：
HTML编写的网页可以在不同的操作系统和浏览器上显示，这是因为HTML是一种与平台无关的语言。这意味着无论用户使用什么设备或浏览器，都能够访问和浏览HTML页面。
4、通用性：
HTML是网络的通用语言，它是一种简单的标记语言，用于创建和结构化网页内容。由于其广泛的支持和普及，几乎所有的设备和浏览器都能够解析和显示HTML内容。
5、支持多种媒体格式：
HTML不仅支持文本内容，还能够嵌入图片、音频、视频等多种媒体格式，这使得网页可以提供丰富的用户体验。
6、标准化：
HTML遵循万维网联盟（W3C）制定的国际标准，这意味着网页开发者可以根据这些标准来创建网页，确保网页的互操作性和可访问性。
7、标签丰富：
HTML提供了一系列的标签，如标题、列表、链接、表格等，这些标签使得开发者能够创建出结构清晰、功能丰富的网页。
综上所述，HTML作为一种基础的网页开发语言，因其易学易用、跨平台、多功能和高度标准化的特点，成为了构建现代网络内容的核心工具。
HTML作为连接世界的纽带，其重要性不言而喻。它是数字世界的基石，也是每个想要进入互联网领域的人必须掌握的技能。无论你是梦想成为前端开发者，还是仅仅想要更好地理解这个由代码构成的世界，学习HTML都是一个不错的开始。
今天就先讲到这里了，
更多前端开发基础知识点击文末阅读原文查看哦！
记得关注【云端源想IT】一起学编程！
我们下期再见！
END
文案编辑|云端学长
文案配图|云端学长
内容由：云端源想分享
相关推荐
- 字体缩放(方式一)（字体缩放150%怎么做）
-
通过元素宽度和字数计算得到缩放简单实现如下：/***字体最大为视觉要求大小(maxFontSize)；超出缩小字体显示，最小为minFontSize；最小字体时超出部分使用圆点(...);*p...
- 网页世界隐藏的神秘代码语言，竟能这样改变布局
-
CSS基础：选择器与属性CSS（CascadingStyleSheets）是用于控制网页外观的一门样式表语言。它通过定义HTML元素的显示方式来增强网页的表现力。CSS的选择器允许开发者精确地定位...
- CSS属性值计算过程详解（css属性用来定义元素计算）
-
在CSS中，即使某些属性没有显式声明，浏览器也会通过**属性值计算过程**为每个元素的所有属性赋予最终值。这一过程分为四个关键步骤，以下将逐一解析。1.确定声明值浏览器首先检查所有**直接应用**到...
- 软网推荐:找回调整Windows 10字号功能
-
之前的系统，从WindowsXP到早期版本的Windows10，均有字体大小调整功能，但从创意者版Windows10以来，取消了之前的设置选项，取而代之的是自定义缩放比例设置。使用这个功能调整过...
- Excel中如何设置文本框属性，实例代码讲解
-
Excel不仅可以对数据进行处理，而且也可以图形化数据，直观显示数据表达的内容。本节介绍一个很重要的对象，Characters，字符对象，使用Characters对象可修改包含在全文本字符串中的任...
- CSS 字体样式（css中字体）
-
本节我们来讲字体样式，之前我们学习HTML的时候学过一些用于字体加粗、倾斜的标签，但是使用标签来实现的效果肯定没有我们通过CSS中的样式来的方便。接下来我们会给大家介绍下面这几个属性的使用：通...
- PC网站建设必备代码知识:HTML基础与应用技巧
-
在PC网站建设的相关课程里，代码扮演着至关重要的角色。只有熟练运用正确的代码，我们才能打造出功能完善、用户体验出色的PC网站。接下来，我会详细讲解在PC网站建设环节中必须了解的代码知识。HTML基础代...
- 让你大跌眼镜的疯狂 HTML 和 CSS 技巧
-
今天，分享一个让你大开眼界的技巧。通过使用这个技巧，你可以将整个网页变成一个CSS编辑器。没错，你从未见过这种方法。当我第一次尝试时，我完全被震惊到了。现在，让我们开始吧！步骤1首先，创建一个基础的...
- jQuery EasyUI使用教程:创建一个链接按钮
-
jQueryEasyUI最新版下载>本教程主要为大家展示如何使用jQueryEasyUI创建一个链接按钮。通常情况下，使用“button/”元素来创建一个按钮；使用“a/”元素来创建链接按钮...
- React 19 有哪些新特性?（react100）
-
如果你对React18还不熟悉，欢迎阅读之前的文章《React18全览[1]》最近React发布了V19RC版本，按照惯例，我们对React19的新特性进行一次深度的体验学习...
- Java注解探秘:为什么@PostConstruct能解决你的初始化难题?
-
你是否在Spring项目中遇到过这样的困扰：明明依赖注入已经完成，但某些配置就是无法正常加载？手动调用初始化方法又容易引发空指针异常？这就是@PostConstruct注解大显身手的时候了！@Post...
- AI驱动的表单自动填写（ai置入表格）
-
我们都同意，填写表格是一项枯燥且耗时的任务。如果我们可以创建一个可以为我们填写表格的AI助手，让我们将时间投入到更有建设性的任务中，那会怎样？AI助手将能够通过调用以表单字段为参数的函数来填写表...
- 从零到一:小程序设计新手如何快速上手?
-
开发环境搭建对于小程序设计新手而言，搭建合适的开发环境是首要任务。以小程序为例，其官方提供了功能强大的开发工具——开发者工具。首先，新手需前往官方开发者平台，在页面中找到“工具下载”板块，根据...
- JavaSwingGUI从小白到大神-6(续)（java从小白到大牛怎么样）
-
接上一篇《JavaSwingGUI从小白到大神-6》，因本篇文章3万多字，头条一篇发不完，只能分开发。同事查询面板：CompanyFind.javapublicclassCompanyFind{...
- C# winform界面假死（c#程序假死）
-
针对C#WinForm界面假死问题，以下是分步解决方案：1.使用异步编程（async/await）将耗时操作移至后台线程，保持UI线程响应。步骤：将事件处理函数标记为async。使用Task....
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- HTML 参考手册 (28)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML中如何键入空格 (27)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)