前端——2.HTML标签1

news2024/11/14 13:31:41

这篇文章我们从0来介绍一下HTML的相关标签内容

目录

1.HTML语法规范

1.1基本语法概述

1.2标签关系

2.HTML的基本结构标签

2.1第一个HTML网页

2.2基本结构标签总结


1.HTML语法规范

下面,我们来看一下HTML的语法规范的内容

1.1基本语法概述

首先,我们来看一下HTML的基本语法:

  1. HTML标签是由尖括号包围的关键词,例如 <html>
  2. HTML标签通常是成对出现的,例如 <html> 和 </html>,我们称为双标签。标签对中的第一个标签是开始标签,第二个标签是结束标签
  3. 有些特殊的标签必须是单个标签(极少情况),例如 <br />,我们称为单标签

1.2标签关系

双标签关系可以分为两类:包含关系并列关系

包含关系:

<head>
    <title></title>
</head>

并列关系:

<head></head>
<body></body>

2.HTML的基本结构标签

下面,我们来讲解一下HTML的基本结构标签

2.1第一个HTML网页

每一个网页都会有一个基本结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写的。

HTML页面也称为HTML文档

下面,我们来看一下HTML页面的基本结构标签:

<html>
    <head>
        <title>Test01</title>
    </head>

    <body>
        这是你我相遇的地方
    </body>
</html>

 

说明:

1. 最大的标签是<html></html>标签,它把所有的标签都包含在内,也就是说,不管你写什么,都要在<html></html>标签内部写,我们也将其称为 根标签

2. <head></head>标签,我们称之为 头部标签,它控制我们一个网页的 头部,如下图所示:

注意:head标签里面必须设置title标签

3. <title></title>标签,我们称之为标题标签,它控制的是我们这个页面的标题,如下图所示:

 

4. <body></body> 标签,我们也称之为主体标签,因为它是我们文档的主体,里面包含文档的所有内容,也就是说,我们页面所要展示的内容基本都放在body标签里面。如下图所示:

 

 下面给个表格,大家来体会一下:

 

下面,我们具体来写一下,体会一下:

首先,建个txt文件,写上如下内容: 

其次,将文件后缀名更改为.html

最后,双击该文件运行: 

 

经过上述例子,我们更能体会到,HTML文档的后缀名必须是.html或.htm,浏览器的作用就是读取HTML文档,并以网页的形式显示它们。

2.2基本结构标签总结

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/393516.html

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

相关文章

【0成本搭建个人博客】——Hexo+Node.js+Gitee Pages

目录 1、下载安装Git 2、下载安装Node.js 3、使用Hexo进行博客的搭建 4、更改博客样式 5、将博客上传到Gitee 6、更新博客 首先看一下Hexo的博客的效果。 1、下载安装Git Git 是一个开源的分布式版本控制系统&#xff0c;可以有效、高速地处理从很小到非常大的项目版本…

openpnnp - 载入板子后,要确定板子的放置角度

文章目录openpnnp - 载入板子后,要确定板子的放置角度概述用openpnp提供的功能来确定被夹住的板子的左下角原点位置和板子的角度备注ENDopenpnnp - 载入板子后,要确定板子的放置角度 概述 设备是有夹具的, 用百分表打过, 夹具本身在Z方向的平行度是没问题的. 但是, PCB板子的…

Flink Table Store 0.3 构建流式数仓最佳实践

摘要&#xff1a;本文整理自阿里巴巴高级技术专家&#xff0c;Apache Flink PMC 李劲松&#xff08;之信&#xff09;&#xff0c;在 FFA 2022 实时湖仓的分享。本篇内容主要分为四个部分&#xff1a;挑战&#xff1a;Streaming DW 面临的难题案例&#xff1a;FlinkFTS 典型场景…

Active Directory DNS备份和恢复

DNS是Active Directory域服务&#xff08;AD DS&#xff09;不可或缺的一部分&#xff0c;因为它全权负责DNS名称解析。当发生DNS服务器灾难时&#xff0c;无法在网络中查找资源&#xff0c;并且所有AD操作都将暂停。因此&#xff0c;恢复DNS服务器是绝对必要的。Active Direct…

JS实现css的hover效果,兼容移动端

Hi I’m Shendi JS实现css的hover效果&#xff0c;兼容移动端 功能概述 CSS的hover即触碰时触发&#xff0c;在电脑端鼠标触碰&#xff0c;移动端手指触摸 有的时候光靠css实现不了一些效果&#xff0c;例如元素触发hover&#xff0c;其他元素触发动画效果&#xff0c;所以需要…

npm i 安装报错

npm WARN EBADENGINE Unsupported engine { npm WARN… npm WARN deprecated stable0.1.8: Modern JS… 诸如此类的报错。大部分都是因为 node 版本问题&#xff01;比如node版本无法满足&#xff0c;对应项目里需要的那些模块和依赖所需要的条件。 有些模块对node版本是有要…

【兴趣探索】采用Docker部署Rustdesk自建服务器

采用Docker部署Rustdesk自建服务器 场景&#xff1a;本想找一个远程手机的软件&#xff0c;使用的三款都存在限制&#xff1a; ①向日葵一天只能远程三次&#xff0c;需要花钱升级会员 ②Todesk因为手机兼容问题&#xff0c;需要花钱买插件解决 ③Airdorid免费200M&#xf…

23年如何备考PMP考试呢?攻略+资料

我建议准备的最短时间至少1个半月到2个月&#xff0c;集中精力备考大约4个小时&#xff0c;大家可以根据自己的专注力的长短去调节每天的备考时间。 1、《PMBOK指南》第六版&#xff08;16天&#xff09; 教材是要读的&#xff0c;虽然说考试考纲和教材不太一样&#xff0c;但…

led灯性价比最高的品牌有哪些?2023名牌led灯有这些品牌值得推荐

Led灯是现在人造灯具中使用最为普遍的一种灯光&#xff0c;具有高效节能、光线柔和等特点&#xff0c;这方面有一些专业的品牌做的很不错&#xff0c;比如松下、南卡、雷士照明等等&#xff0c;那么它们好在哪儿呢&#xff1f; 一个是光线舒适度高。采用高品质的led灯珠&#…

网络编程之UDP套接字(四)

12. 基于 UDP 的套接字 UDP 是无链接的&#xff0c;可以实现服务端与多个客户端进行同时进行通讯&#xff0c;无论先启动哪一端都可以。&#xff08;qq 聊天 UDP 服务&#xff09; 12.1 基于 udp 套接字模板 UDP 服务端 s socket(AF_INET, SOCK_DGRAM) # 创建一个服务器的…

MySQL运维篇之分库分表

03、分库分表 3.1、介绍 3.1.1、问题分析 随着互联网及移动互联网的发展&#xff0c;应用系统的数据量也是呈指数式增长&#xff0c;若采用单数据库进行数据存储&#xff0c;存在以下性能瓶颈&#xff1a; IO瓶颈&#xff1a;热点数据太多&#xff0c;数据库缓存不足&#…

脑机接口科普0012——脑机接口的灭亡

本文禁止转载&#xff01;&#xff01;&#xff01;&#xff01;中国人比较好玩&#xff0c;好玩就好玩在&#xff0c;对于每个行业&#xff0c;都喜欢说一句话&#xff0c;XXX从入门到放弃&#xff01;我们才科普到第12小节&#xff0c;然后&#xff0c;我们这边就说到脑机接口…

Vue 使用 Export2Excel.js 导出多 sheet 的 excel

项目需求&#xff0c;导出多sheet的excel表格。 具体思路是&#xff1a;后端返回json数据&#xff0c;前端根据数据和具体的几项字段去导出excel表格&#xff0c;多sheet&#xff0c;多页表格到一个excel表里面&#xff0c;具体思路 根据Export2Excel插件&#xff0c;并修改插件…

NFTScan:怎么使用 NFT API 开发一个 NFT 数据分析平台?

对很多开发者来说&#xff0c;在 NFT 数据海洋中需要对每个 NFT 进行索引和筛选是十分困难且繁琐的&#xff0c;NFT 数据获取仍是一大问题。而数据平台提供的 API 使得开发者可以通过接口获取区块链上 NFT 的详细信息&#xff0c;并对其进行分析、处理、统计和可视化。在本篇文…

今天女神节,用python画个贺卡送给母亲吧

今天女神节&#xff0c;你给女神妈妈准备了什么祝福呢&#xff1f;如果还没有&#xff0c;那么画个贺卡送给她吧&#xff0c;在你眼里&#xff0c;她是一个什么样的人呢&#xff1f; 是"可爱"&#xff0c;“温柔”&#xff0c;“美丽”&#xff0c;“漂亮”&#xf…

OpenCV各模块函数使用实例(11)--- 矩阵和数组操作(Operations on arrays)

OpenCV各模块函数使用实例&#xff08;11&#xff09;M、矩阵和数组操作&#xff08;Operations on arrays&#xff09;本节描述矩阵的基本操作&#xff0c;这些操作是图像处理和其他数组算法实现的基本操作&#xff0c;包括矩阵的运算&#xff0c;特征值和特征向量&#xff0c…

详细介绍关于链表【数据结构】

文章目录链表单链表尾插头插尾删第一种方式删除第二种头删查找pos之前插入pos位置删除pos后面插入pos位置后面删除链表 顺序表缺点&#xff1a; 空间不够了 需要扩容&#xff0c;但是扩容是有消耗的头部或中间位置需要插入或删除&#xff0c;需要挪动 &#xff0c;但是挪动是…

如何让AI帮你干活-娱乐(3)

背景今天的话题会偏代码技巧一些&#xff0c;对于以前没有接触过代码的朋友或者接触代码开发经验较少的朋友会有些吃力。上篇文章介绍了如何广视角的生成相对稳定的视频。昨天的实现相对简单&#xff0c;主要用的是UI界面来做生成。但是生成的效果其实也显而易见&#xff0c;不…

汽车娱乐系统解决方案

Danlaw在汽车和航空航天行业里是全球知名的技术和服务供应商&#xff0c;致力于提供更加安全与智能的系统。Danlaw以突破性技术和高效开发、动态环境的自适应解决方案而闻名。Danlaw优秀的联网汽车解决方案使之成为全球大型互联设备供应商之一。 一 信息娱乐系统测试 | 风丘科…