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

news2024/10/6 4:02:12

文章目录

  • 前言
  • 一、创建第一个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.coloradmin.cn/o/1048911.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

给网站引入各大搜索引擎的关键字提示,白给的接口薅他羊毛

属于是导航网站必要的了 因为网站是个导航网站&#xff0c;有一个搜索框&#xff0c;用户搜索时需要像百度一样有个搜索提示关键词列表。 之前只是用百度&#xff0c;现在给增加了好几个&#xff0c;想换那个就换那个了&#xff0c;直接上图片 可以配置属于是想选哪个选哪个&…

树莓派4B使用Docker部署SpringBoot项目——(二)使用docker安装mysql

树莓派4B使用docker安装mysql 使用的树莓派4B为8GB版本&#xff0c;使用docker pull命令拉取MySQL镜像&#xff1a; docker pull --platformarm64 mysql/mysql-server等待拉取完成 使用docker images查看镜像 创建MySQL容器 docker run -di --namemysql -p 3306:3306 -e MY…

(vue3)create-vue 组合式API

优势&#xff1a; 更易维护&#xff1a;组合式api&#xff0c;更好的TS支持 之前是选项式api&#xff0c;现在是组合式&#xff0c;把同功能的api集合式管理 复用功能封装成一整个函数 更快的速度 更小的体积 更优的数据响应式&#xff1a;Proxy create-vue 新的脚手架工…

批量剪辑视频的秘密武器,添加SRT字幕并提升你的视频品质,高效剪辑的艺术

在如今的数字时代&#xff0c;视频内容的制作和分享变得越来越普遍。如果你是一个视频创作者&#xff0c;或者经常需要编辑和分享视频内容&#xff0c;那么我们为你带来了一款视频批量剪辑工具&#xff0c;让你轻松在固定位置添加字幕&#xff0c;打造专业级剪辑效果&#xff0…

五金零售批发商城小程序的作用是什么

五金产品在人们生活中不可或缺&#xff0c;无论需求高低&#xff0c;总归会购买&#xff0c;而每个城市的五金店也非常多&#xff0c;市场高应用度也促进了各个品牌商们增长&#xff0c;而在实际销售中&#xff0c;无论厂家还是门店商家都会面临一些痛点&#xff0c;如品牌宣传…

Spine Web Player教程

官方文档教程&#xff1a; Spine Web Player 报错&#xff1a; 1、Q:报Animation bounds are invalid XX错误&#xff1f; A:请校对cdn或者npm install的版本号是否与json资源内版本号一致。

SQL做流水号

SELECT REPLICATE(0, 3 - LEN(3)) 3 AS 流水号 SELECT REPLICATE(0, 5 - LEN(3)) 3 AS 流水号 SELECT REPLICATE(0, 8 - LEN(3)) 3 AS 流水号

公司新产品上线如何打出知名度?

任何一个新产品上线时都需要进行推广打出知名度&#xff0c;软文作为一种成本低效果留存时间长的营销方式能够让公司的新产品打出知名度&#xff0c;向潜在用户展示新产品的独特优势以及特性&#xff0c;下面就让媒介盒子告诉大家&#xff0c;新产品上线时&#xff0c;公司应该…

AIGC快速入门体验之虚拟对象

AIGC快速入门体验之虚拟对象 一、什么是AIGC二、AIGC应用场景2.1 代码生成2.2 图片生成2.3 对象生成 三、AIGC虚拟对象3.1 AIGC完全免费工具3.2 快速获取对象3.3 给对象取名3.4 为对象写首诗3.5 和对象聊聊天 一、什么是AIGC AIGC是生成式人工智能&#xff08;Artificial Intel…

每日一题——寻找右区间(排序 + 二分查找)

寻找右区间&#xff08;排序 二分查找&#xff09; 题目链接 理解题目 题目给定一个具有n行2列的二维数组intervals&#xff0c;对于intervals的每一行元素i&#xff0c;就表示一个区间数组&#xff0c;intervals[i][0]即这个区间数组的起始位置start&#xff0c;intervals[i…

JTS:09Touches 接触

这里写目录标题 版本JTS Touches边接触角点接触内部接触线段交叉顶点接触 版本 org.locationtech.jts:jts-core:1.19.0 链接: github JTS Touches 边接触 public void test00() {Coordinate[] coordinates1 new Coordinate[] {new Coordinate(1, 1), new Coordinate(1, 4),…

Gronwall‘s inequality

本文的主要了解下Gronwall不等式的两种形式&#xff0c;此不等式常常用来证明函数有界。 See 知乎&#xff1a; https://zhuanlan.zhihu.com/p/339358108

Vue底层术语解析以及存在关系

Vue底层术语解析以及存在关系 虚拟 DOM渲染函数Vue2Vue3 diff 算法抽象语法树&#xff08;Abstract Syntax Tree&#xff0c;AST&#xff09;关系 虚拟 DOM 可能都听说过虚拟dom &#xff0c;虚拟dom到底是Vue的啥&#xff0c;再此针对性讲解&#xff08;针对Vue官网简单化理解…

新手十分钟也能完成的Unity小游戏打砖块

由Siki学院打砖块游戏启发完成一个非常非常简单&#xff0c;纯新手也能十分钟做出来的小游戏——打砖块。 一.搭建场景 首先我们先在一个空白的3D项目中创建一个Plane平面&#xff0c;将其放置于世界中央位置&#xff0c;长宽设置为2&#xff0c;并为其添加一个材质Material&am…

掌握Go的运行时:从编译到执行

目录 一、Go运行编译简介Go语言的目标和设计哲学运行时环境编译过程小结 二、执行环境操作系统与硬件层系统调用&#xff08;Syscalls&#xff09;虚拟内存 Go运行时&#xff08;Runtime&#xff09;Goroutine调度器内存管理和垃圾收集网络I/O代码示例&#xff1a;Go运行时调度…

SQL:增、删、改、查 基本语句 Navicat建库(用法 + 例子)

文章目录 新建数据库新建表 增、删、改、查select 查找insert 添加delete 删除update 修改where 扩展 < > < > ! <> 比较运算符and or 逻辑运算符between...and... 介于..和..之间in 包含like 模糊查询is null 为空的 查询扩展order by 排序limit start coun…

7.网络原理之TCP_IP(下)

文章目录 4.传输层重点协议4.1TCP协议4.1.1TCP协议段格式4.1.2TCP原理4.1.2.1确认应答机制 ACK&#xff08;安全机制&#xff09;4.1.2.2超时重传机制&#xff08;安全机制&#xff09;4.1.2.3连接管理机制&#xff08;安全机制&#xff09;4.1.2.4滑动窗口&#xff08;效率机制…

朴素贝叶斯深度解码:从原理到深度学习应用

目录 一、简介贝叶斯定理的历史和重要性定义例子 朴素贝叶斯分类器的应用场景定义例子常见应用场景 二、贝叶斯定理基础条件概率定义例子 贝叶斯公式定义例子 三、朴素贝叶斯算法原理基本构成定义例子 分类过程定义例子 不同变体定义例子 四、朴素贝叶斯的种类高斯朴素贝叶斯&a…

LM小型可编程控制器软件(基于CoDeSys)笔记三十一:保持变量和非保持变量

所谓变量&#xff0c;就是用字母、数字和下划线组成的一个标识符。 按照数据类型的不同&#xff0c;变量可以分为标准类型和用户自定义类型。其中标准类型包括布尔型 &#xff08; BOOL &#xff09;、整型&#xff08; INT &#xff09;、实型&#xff08; REAL &#xff09…

【网络协议】TCP报文格式

1.源端口和目的端口 源端口字段占16比特&#xff0c;用来写入源端口号。源端口号用来标识发送该TCP报文段的应用进程。 目的端口字段占16比特&#xff0c;用来写入目的端口号。目的端口号用来标识接收该TCP报文段的应用进程。 2.序号 当序号增加到最后一个时&#xff0c;下…