简单了解HTML | 青训营笔记

60 阅读3分钟

当学习 HTML 时,我感受到 Web 开发是一个非常复杂的系统,需要我们对不同的技术和工具都有一定的了解和掌握。虽然 HTML 的语法和标签不算太难,但是如果想要编写出优秀的网页,需要结合CSS和JS不断地练习和实践。

一、HTML发展历史

在 1991 年底,一位名叫 Tim Berners-Lee 的计算机科学家创造了一个名为 World Wide Web 的项目,目的是将文档和链接组合成一种全新的信息系统。而 HTML 作为这个系统的一部分,被用来定义文档的结构和内容。

随着时间的推移,HTML 的版本也在不断更新,其中 HTML5 成为了最新的版本。HTML5 的出现引入了一系列新特性和标签,使得网页的开发变得更加灵活和强大。它能够更好地支持多媒体元素,包括音频、视频、绘图和动画等。另外,HTML5 的出现还促进了移动设备的网页应用开发,并且通过其本身提供的语义化标签,使得搜索引擎更容易理解和识别网页的内容。

二、HTML用处

HTML(HyperText Markup Language) 用于描述网页的结构和内容,以便浏览器能够正确地显示网页。网页通常由 HTML、CSS 和 JavaScript 三种语言组成,其中 HTML 负责页面的结构,CSS 负责页面的样式,JavaScript 负责页面的行为。

三、HTML基础语法

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词,比如<html>
  • HTML 标签通常是成对出现的,比如 <b></b>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签闭合标签

下面是一个简单的示例:

<!DOCTYPE html>
<html>
<head>
    <title>这是网页的标题</title>
</head>
<body>
    <h1>这是一级标题</h1>
    <p>这是一个段落</p>
    <img src="abc.jpg" alt="测试图片">
    <a href="http://www.百度.com">这是一个链接</a>
</body>
</html>


在这个示例中,<!DOCTYPE html> 声明了使用的 HTML 版本为 HTML5,<html> 表示文档的根元素,<head> 用于定义文档的头部,<title> 表示网页的标题,<body> 表示文档的主体部分,<h1> 表示一级标题,<p> 表示段落,<img> 表示图像,<a> 表示链接。其中,<img><a> 都有一个 src 属性,用于指定图像和链接的地址,<img> 还有一个 alt 属性,用于指定图像无法显示时的替代文本。

当我们编写 HTML 代码时,我们需要注意几点。首先,应该保持代码的格式和缩进,这有助于代码的可读性和可维护性。其次,需要使用语义化的标签,这样可以使得网页更易于理解和维护。例如,使用 <nav> 标签来定义导航栏,使用 <article> 标签来定义文章内容,使用 <header><footer> 标签来定义网页的头部和尾部等。最后,注意使用闭合标签,以确保文档的结构正确。

学习 HTML 不仅是学习一门技术,更是一个思维方式和设计理念的转变。在学习 HTML 的过程中,需要理解 Web 页面的设计原则和用户体验的考虑,同时需要注重代码的可读性和可维护性。通过这种思维方式和设计理念的转变,可以更好地理解和应用 Web 技术,编写出更加优秀的网页和应用。