什么是HTML?HTML语言的基础知识解读

什么是HTML?HTML语言的基础知识解读

什么是HTML?HTML语言的基础知识解读

HTML是超文本标记语言( Hyper Text Markup Language)的缩写。它允许用户为网页和应用程序创建和构建章节、段落、标题、链接和分块引语。

HTML不是一种编程语言,这意味着它不具备创建动态功能的能力。相反,它使组织和格式化文件成为可能,与Microsoft Word类似。

在使用HTML时,我们使用简单的代码结构(标签和属性)来标记一个网站页面。例如,我们可以通过在开始的<p>和结束的</p>标签中放置所包围的文本来创建一个段落。

<p>这就是你如何在HTML中添加一个段落。

<p>你可以有一个以上的段落!</p>。

总的来说,HTML是一种标记语言,即使对网站建设的完全初学者来说,也是非常直接和容易学习的。下面是你通过阅读这篇文章将学到的东西。

HTML的历史

HTML是由瑞士CERN研究所的物理学家蒂姆·伯纳斯·李发明的。他提出了一个基于互联网的超文本系统的想法。

超文本是指包含对其他文本的引用(链接)的文本,浏览者可以立即访问。他在1991年发表了HTML的第一个版本,由18个HTML标签组成。从那时起,每一个新版本的HTML语言都为标记带来了新的标记和属性(标记修饰语)。

根据Mozilla开发者网络的《HTML元素参考》,目前,有140个HTML标签,尽管其中一些已经过时(不被现代浏览器支持)。

由于迅速流行起来,HTML现在被认为是一个官方的网络标准。HTML规范是由万维网联盟(W3C)维护和开发的。你可以随时在W3C的网站上查看该语言的最新状态。

该语言最大的升级是在2014年推出的HTML5。它为标记添加了几个新的语义标签,这些标签揭示了其自身内容的含义,如<文章>、<标题>和<页脚>。

HTML是如何工作的?

HTML文件是以.html或.htm为扩展名的文件。你可以使用任何网络浏览器(如谷歌浏览器、Safari或Mozilla Firefox)查看。浏览器读取HTML文件并渲染其内容,以便互联网用户可以查看。

通常情况下,一般的网站包括几个不同的HTML页面。例如:主页、关于页面、联系页面都会有独立的HTML文件。

每个HTML页面由一组标签(也称为元素)组成,你可以把它们称为网页的组成部分。它们创建了一个层次结构,将内容分为章节、段落、标题和其他内容块。

大多数HTML元素有一个开头和一个结尾,使用<tag></tag>语法。

下面,你可以看到一个关于HTML元素结构的代码例子。

<div>

<h1>主标题</h1>。

<h2>朗朗上口的副标题</h2>。

<p>第一段</p>

<img src=”/” alt=”图片”>

<p>第二段用<a href=”https://example.com”>超级链接</a></p>

</div>

  • 最上面的元素是一个简单的分割(<div></div>),你可以用它来标记更大的内容部分。
  • 它包含一个标题(<h1></h1>),一个副标题(<h2></h2>),两个段落(<p></p>),和一个图像(<img>)。
  • 第二段包括一个链接(<a></a>),它的href属性包含目标URL。
  • 图片标签也有两个属性:图片路径的src和图片描述的alt。

最常用的HTML标签概述

HTML标签有两种主要类型:块级和内联标签。

  • 块级元素占据了全部可用空间,并且总是在文档中开始一个新行。标题和段落是块状标签的一个很好的例子。
  • 内联元素只占用它们需要的空间,不在页面上开始新的一行。它们通常用于格式化块级元素的内部内容。链接和强调字符串是内联标签的好例子。

块级标签

每个HTML文档需要包含的三个块级标签是<html>、<head>和<body>。

  • <html></html>标签是最高级别的元素,它包含了每个HTML页面。
  • <head></head>标签保存元信息,如页面的标题和字符集。
  • 最后,<body></body>标签包含了页面上出现的所有内容。

<html>

<head>

<!–元信息–>

</head>

<body>

<!–页面内容 –>

</body>

</html>

  • 在HTML中,标题有6个级别。它们的范围从<h1></h1>到<h6></h6>,其中h1是最高级别的标题,h6是最低级别的。段落由<p></p>括起来,而区块引号使用<blockquote></blockquote>标签。
  • 分区是较大的内容部分,通常包含几个段落、图片、有时是区块引号,以及其他较小的元素。我们可以用<div></div>标签来标记它们。一个div元素内部也可以包含另一个div标签。
  • 你也可以用<ol></ol>标签来表示有序的列表,用<ul></ul>来表示无序的列表。单个的列表项目必须由<li></li>标签括起来。例如,一个基本的无序列表在HTML中是这样的。

<ul>

<li>列表项1</li>。

<li>列表项2</li>

<li>列表第3项</li></li></li>。

</ul>

内联标签

许多内联标签被用来格式化文本。例如,<strong></strong>标签将以粗体显示一个元素,而<em></em>标签将以斜体显示。

超链接也是内联元素,需要<a></a>标签和href属性来表示链接的目的地。

<a href=”https://example.com/”>点击我!</a>。

图片也是内联元素。你可以使用<img>添加一个,不需要任何结束标签。但你也需要使用src属性来指定图像路径,例如。

<img src=”/images/example.jpg” alt=”示例图片”>。

如果你想学习更多的HTML标签,可以考虑查看我们完整的HTML小抄(也可下载)。

HTML的演变,HTML和HTML5之间有什么区别?

从一开始,HTML就经历了一个令人难以置信的演变。W3C不断发布新的版本和更新,而历史上的里程碑也有专门的名称。

HTML4(现在通常被称为 “HTML”)发布于1999年,而最新的主要版本则在2014年问世。命名为HTML5,这一更新为该语言引入了许多新功能。

HTML5最令人期待的功能之一是对音频和视频嵌入的本地支持。我们可以使用新的<audio></audio>和<video></video>标签将视频和音频文件嵌入到我们的网页中,而不是使用Flash播放器。它还包括对可扩展矢量图(SVG)和数学和科学公式的MathML的内置支持。

HTML5还引入了一些语义方面的改进。新的语义标签让浏览器了解内容的含义,这对读者和搜索引擎都有好处。

最受欢迎的语义标签是<article></article>、<section></section>、<aside></aside>、<header></header>和<footer></footer>。要找到更多独特的差异,可以考虑查看我们深入的HTML和HTML5比较。

HTML的优点和缺点

像大多数东西一样,HTML也有一些优点和限制。

优点

  • 一种广泛使用的语言,有大量的资源和庞大的社区支持。
  • 在每个网络浏览器中都能原生运行。
  • 具有平坦的学习曲线。
  • 开源,完全免费。
  • 清洁和一致的标记。
  • 官方网络标准由万维网联盟(W3C)维护。
  • 很容易与后端语言如PHP和Node.js整合。

缺点

  • 主要用于静态网页。对于动态功能,你可能需要使用JavaScript或后端语言,如PHP。
  • 它不允许用户实现逻辑。因此,所有的网页都需要单独创建,即使它们使用相同的元素,如页眉和页脚。
  • 有些浏览器采用新功能的速度很慢。
  • 浏览器的行为有时很难预测(例如,旧的浏览器并不总是呈现较新的标签)。

HTML、CSS和JavaScript是怎样的关系?

虽然HTML是一种强大的语言,但它还不足以建立一个专业和完全响应的网站。我们只能用它来添加文本元素和创建内容的结构。

然而,HTML与其他两种前端语言配合得非常好。CSS(层叠样式表),和JavaScript。它们一起可以实现丰富的用户体验并实现高级功能。

  • CSS负责样式设计,如背景、颜色、布局、间距和动画。
  • JavaScript让你添加动态功能,如滑块、弹出窗口和照片库。

把HTML想象成一个裸体的人,CSS是衣服,而JavaScript是动作和方式。

那么……什么是HTML?

HTML是网络的主要标记语言。它在每个浏览器中都能原生运行,并由万维网联盟维护。

你可以用它来创建网站和网络应用的内容结构。它是最底层的前端技术,是你可以用CSS添加的样式和可以用JavaScript实现的功能的基础。

未经允许不得转载:桂林SEO网站 » 什么是HTML?HTML语言的基础知识解读