【前端 01】HTML快速入门：构建你的第一个网页

终末圆

已于 2024-07-21 17:53:51 修改

阅读量947

点赞数 32

分类专栏：前端文章标签：前端 html css 网络

于 2024-07-21 17:53:03 首次发布

本文链接：https://blog.csdn.net/delepaste/article/details/140591226

版权

26 篇文章 0 订阅

订阅专栏

在Web开发的广阔世界中，HTML（HyperText Markup Language）是构建网页的基石。无论是简单的个人博客还是复杂的电子商务网站，HTML都是不可或缺的一部分。本文将带你快速入门HTML，通过编写你的第一个HTML文件，了解HTML的基本结构和一些重要概念。

首先，你需要一个文本编辑器来编写HTML代码。虽然有许多专业的IDE（集成开发环境）和代码编辑器可供选择，但为了简单起见，我们可以使用Windows的“记事本”或Mac的“文本编辑”来开始。

HTML文件的后缀是.html。你可以通过创建一个新文本文件并将其保存为.html扩展名来创建一个HTML文件。例如，我们可以将其命名为index.html。

打开你的文本编辑器，并输入以下代码来创建你的第一个HTML文件：

<html>  
	<head>  
		<title>Web学习第一天所写的网页</title>  
	</head>  
	<body>  
		<h1>Hello HTML</h1>  
		<img src="帕姆.png" alt="描述图片">  
	</body>  
</html>

这里有几个关键点需要注意：

<html> 标签包裹了整个HTML文档的内容。
<head> 部分包含了文档的元数据，如<title>标签定义了网页的标题，这个标题会显示在浏览器的标签页上。
<body> 部分包含了网页的可见内容，如<h1>标签定义了一个大标题，而<img>标签用于在网页中嵌入图片。注意，我在<img>标签中添加了alt属性，这是一个好习惯，它提供了图片的替代文本，以便在图片无法显示时（如网络问题或视障用户使用屏幕阅读器时）提供信息。

HTML文档的基本结构由几个重要的标签组成：

<html>  
	<head>  
		<!-- 这里放置文档的元数据，如标题、样式链接等 -->  
		<title>标题</title>  
	</head>  
	<body>  
		<!-- 这里放置网页的可见内容 -->  
	</body>  
</html>

不区分大小写：HTML标签在编写时不区分大小写。例如，<HTML>, <Head>, 和 <Body> 与 <html>, <head>, 和 <body> 是等效的。然而，为了保持一致性和可读性，推荐使用小写。
属性值单双引号都可以：在HTML中，为标签属性赋值时，既可以使用单引号也可以使用双引号。例如，<img src='图片.jpg'> 和 <img src="图片.jpg"> 都是有效的。同样地，为了保持代码的一致性，建议在整个文档中统一使用单引号或双引号。
HTML语法松散：与一些编程语言相比，HTML的语法相对松散。例如，你可以省略某些结束标签（尽管在现代HTML5中，推荐总是包含它们以提高可维护性和兼容性），并且HTML对空格和换行符的敏感度较低。然而，这并不意味着你可以随意编写HTML代码；清晰、结构化的代码对于维护和调试至关重要。