如何像人类一样写HTML之第一个HTML、标签的关系与注释

news/2025/3/15 22:30:33/

文章目录

  • 前言
  • 一、创建第一个HTML文档
    • 创建方式1
    • 创建方式2
  • 二、标签的关系
  • 三、注释的使用
  • 总结


前言

在现代数字化社会中,网页是我们获取信息、与他人交流以及展示自己的重要工具之一。要了解如何创建网页,HTML(Hypertext Markup Language)是必不可少的基础知识。本文将向您介绍如何像人类一样写HTML,包括第一个HTML文档、标签的关系以及如何使用注释。我们将深入探讨这些概念,以便您能够开始编写自己的网页。


一、创建第一个HTML文档

HTML每一个都是以标签的形式组成的,这在我们后面会详细的讲解标签是什么。

创建方式1

第一个HTML文档是我们踏上HTML编程之旅的第一步。它是一个简单的示例,用于向浏览器传达您的网页内容。下面是一个基本的HTML文档示例:

<html><head><title>我的第一个html</title></head><body><p>p段落</p></body></html>

<html>:这是HTML文档的根元素。它包含了整个HTML文档的内容,是所有其他HTML元素的容器。

<head>:这是头部部分,用于包含与文档相关的元信息,如文档标题、字符集声明、链接到外部样式表和脚本等。在您提供的示例中,包含了一个标签,用于定义网页的标题。

<title>:标题标签用于定义网页的标题,通常显示在浏览器的标签页上,用于标识网页。在这个示例中,标题是"我的第一个html"。

<body>:主体部分包含了实际的网页内容,如文本、图像、链接等。在这个示例中,标签包含了一个简单的文本内容"HTML学习",这将在网页上显示出来。

<p>:一个小段落,可以写文字

总的来说,这个HTML文档非常基本,只包含了标题和一个简单的文本内容。这是一个HTML文档的最小结构,但您可以在其中添加更多的HTML元素和内容,以创建更复杂的网页。 HTML是构建网页的基础,通过组合不同的标签和元素,您可以创建出各种各样的网页。

创建方式2

在这里插入图片描述
在vscode中写<html,根据提示看到HTML sample,即可快速生成一个html框架。

二、标签的关系

  • 父子关系
    父子关系就像家庭中的关系一样。在HTML中,父标签是包围着其他标签的标签,就像父母包围着孩子一样。
    如果一个标签包含(围绕)另一个标签,那么被包含的标签就是父标签,而包含其他标签的标签就是子标签。
    例如,<head>标签可以包含<title>标签,那么<head>就是<title>的父标签,而<head>是<title>的子标签。
  • 兄弟关系
    兄弟关系就像同一个家庭中的兄弟姐妹之间的关系。在HTML中,兄弟标签是在同一级别(深度相同)的标签。
    如果两个标签具有相同的父标签,它们就是兄弟标签。
    例如,如果有两个<p>标签在同一个<body>列表中,它们就是兄弟标签,因为它们都有相同的父标签<body>

三、注释的使用

HTML中的注释是一种重要的工具,用于在代码中添加说明或注解,以便其他开发者能够理解您的意图。注释不会在网页上显示,只是对代码的解释。

<!-- 这是一个注释。注释可以帮助您更好地组织和理解代码。 -->

在上述示例中,我们使用注释来解释了代码的目的。

如果你不想这么难创建的话,你可以使用快捷键:Ctrl+/来达到注释的效果


总结

本文介绍了如何创建第一个HTML文档,包括文档的基本结构、标签之间的关系以及如何使用注释来解释代码。HTML是网页开发的基础,掌握这些基本概念是编写有效网页的关键。希望这篇文章能帮助您开始学习HTML,并为未来的网页开发项目打下坚实的基础。在不断学习和实践中,您将变得更加熟练,能够创建出令人印象深刻的网页。最后祝你学习到了如何像人类一样写最基础的HTML了!!!


http://www.ppmy.cn/news/1128971.html

相关文章

Docker容器部署初学01

Docker容器就是个虚拟机&#xff0c;轻便微小&#xff0c;方便&#xff0c;代替了VM虚拟机的位置 当然&#xff0c;我会尽力以简单的方式为您解释如何从GitHub下载一个项目并使用Docker进行部署&#xff01;&#x1f60a; 步骤1: 下载项目 1. 打开您的浏览器并前往GitHub网站…

【面试高高手】 —— Java集合篇(23题)

文章目录 1.Java中常见集合有哪些 &#xff1f;2. 说说你对Java集合是怎么理解的&#xff1f;3.请你说一下List&#xff0c;Set&#xff0c;Map三者的特点是 &#xff1f;4.在实际开发过程中如何更好的选择集合 &#xff1f;5. ArrayList和Vector区别 &#xff1f;6. ArrayList…

【IPC 通信】信号处理接口 Signal API(5)

收发信号思想是 Linux 程序设计特性之一&#xff0c;一个信号可以认为是一种软中断&#xff0c;通过用来向进程通知异步事件。 本文讲述的 信号处理内容源自 Linux man。本文主要对各 API 进行详细介绍&#xff0c;从而更好的理解信号编程。 kill(2) 遵循 POSIX.1 - 2008 1.库 …

如何通过axios拦截器,给除了登录请求以外,axios的所有异步请求添加JWT令牌!

在 Vue 项目中配置除了登录请求以外的所有请求的令牌&#xff0c;通常涉及到在请求头中添加令牌&#xff08;Token&#xff09;信息。这可以通过使用 Axios 或其他 HTTP 请求库来实现。以下是一般的步骤&#xff1a; 1. **安装 Axios**&#xff1a; 如果你还没有安装 Axios&a…

rk3568 weston 桌面相关

rk3568 weston 桌面相关 1、Weston 桌面参考链接 https://www.mankier.com/5/weston.ini#Output_Section 2、查看显示设备 输入 ls /sys/class/drm 命令&#xff0c;以MIPI 屏为例。 3、调整屏幕方向 修改 /etc/xdg/weston/weston.ini 文件 [output] nameDSI-1 //与上面列…

【时区】Flink JDBC 和CDC时间字段时区 测试及时间基准

关联文章: 各种时间类型和timezone关系浅析 一、测试目的和值 1. 测试一般的数据库不含time zone的类型的时区。 mysql timestamp(3) 类型postgres timestamp(3) 类型sqlserver datetime2(3) 类型oracle类型 TIMESTAMP(3) 类型 在以下测试之中均为ts字段 2.测试CDC中元数据…

自动驾驶:路径规划概述

自动驾驶&#xff1a;路径规划概述 全局路径规划Dijkstra算法A*算法RRT&#xff08;随机快速探索树&#xff09;算法PRM&#xff08;概率路线图&#xff09;算法 局部路径规划DWA&#xff08;动态窗口法&#xff09;算法TEB&#xff08;时间弹性带&#xff09;算法Lattice Plan…

基于Spring Boot的宠物咖啡馆平台的设计与实现

目录 前言 一、技术栈 二、系统功能介绍 用户信息管理 看护师信息管理 宠物寄养管理 健康状况管理 点单 宠物体验 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已…