当前位置: 首页 > news >正文

前端——2.HTML基本结构标签

这篇文章我们从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基本结构标签总结

相关文章:

前端——2.HTML基本结构标签

这篇文章我们从0来介绍一下HTML的相关标签内容 目录 1.HTML语法规范 1.1基本语法概述 1.2标签关系 2.HTML的基本结构标签 2.1第一个HTML网页 2.2基本结构标签总结 1.HTML语法规范 下面&#xff0c;我们来看一下HTML的语法规范的内容 1.1基本语法概述 首先&#xff0c…...

OAK深度相机使用不同镜头和本地视频流进行模型推理

编辑&#xff1a;OAK中国 首发&#xff1a;oakchina.cn 喜欢的话&#xff0c;请多多&#x1f44d;⭐️✍ 内容可能会不定期更新&#xff0c;官网内容都是最新的&#xff0c;请查看首发地址链接。 ▌前言 Hello&#xff0c;大家好&#xff0c;这里是OAK中国&#xff0c;我是助手…...

[项目] Boost搜索引擎

目录 1.项目相关背景 2.项目宏观原理 3.技术栈和项目环境 4.正排索引&&倒排索引 5.去标签与数据清洗 6.构建索引模块Index 6.1正排索引 6.2 建立倒排 jiebacpp使用 建立分词 7.搜索引擎模块Searcher Jsoncpp -- 通过jsoncpp进行序列化和反序列化 处理Cont…...

解决新版QGIS找不到Georeferencer插件

目录1. 问题分析1.1 去 Raster 找&#xff0c;没找到1.2 去插件搜&#xff0c;未搜到1.3 插件库里也搜不到2. 解决办法在 QGIS 3.30中&#xff0c;按常规办法&#xff0c;找不到 Georeferencer插件&#xff0c;它并没有被安装&#xff0c;在库中也找不到它&#xff0c; 请问问题…...

c---冒泡排序模拟qsort

一、冒泡排序 二、冒泡排序优化排各种类型数据 文章目录一、冒泡排序二、冒泡排序优化排各种类型数据冒泡排序 冒泡排序原理&#xff1a;两两相邻元素进行比较 初级版 void bulle_sort(int* a, int sz) {int i 0;for (int i 0; i < sz-1; i){int j 0; for (j 0; j…...

Java知识复习(十四)JS

1、数据类型 基本数据类型&#xff1a;null、undefinde、boolean、string、number、symbol&#xff08;ES6新增&#xff09;引用数据类型&#xff1a;Function、Array、Object、Map和Set&#xff08;ES6新增&#xff09; 2、let、var和const的区别 var定义的变量&#xff0c…...

代码随想录刷题-数组-移除元素

文章目录写在前面习题我的想法暴力解法双指针写在前面 本节对应代码随想录中&#xff1a;代码随想录 习题 题目链接&#xff1a; 27. 移除元素- 力扣&#xff08;LeetCode&#xff09; 给你一个数组 nums 和一个值 val&#xff0c;你需要原地移除所有数值等于 val 的元素&a…...

聚观早报 |拼多多跨境电商业务正式登陆澳洲;中国加快6G网络研发

今日要闻&#xff1a;拼多多跨境电商业务正式登陆澳洲&#xff1b;全球自动驾驶公司排名特斯拉垫底&#xff1b;中国将加快 6G 网络研发&#xff1b;B站再次“崩”上热搜&#xff01;已闪电修复&#xff1b;微软将必应AI聊天每次对话上限增加至8条拼多多跨境电商业务正式登陆澳…...

MDK Keil5 创建Stm32工程-理论篇(这里以Stm32F103Zet6为例)

一、文件夹创建与文件说明整个工程可以粗略的划分为几个文件夹&#xff1a;BSP底层驱动比如GPIO\Timer等驱动文件CMSIS内核相关的文件Firmware生成的固件下载文件Mycode用户编写的相关文件&#xff0c;主要编写的文件都在这个文件夹里Project工程文件startup芯片启动文件STM32F…...

应届大学生学什么技术好?哪些技术适合年轻人?

到了毕业季&#xff0c;应届大学生面临的就是就业问题&#xff0c;很多专业的大学生难以找到对口的工作&#xff0c;或是不得已随便就业&#xff0c;或者是学个技术高薪就业&#xff0c;那么&#xff0c;问题来了&#xff0c;应届大学生学什么技术好&#xff1f;哪些技术适合年…...

车企数据分类分级的实践指南出炉!“数据安全推进计划”发布,奇点云参编

日前&#xff0c;“数据安全推进计划”&#xff08;DSI&#xff09;正式发布《智能网联汽车数据分类分级实践指南》&#xff08;下文简称“指南”&#xff09;&#xff0c;旨在以合规为主要导向&#xff0c;明确智能网联汽车数据分类分级的方法论&#xff0c;为数据全生命周期的…...

Nginx学习 (2) —— 虚拟主机配置

文章目录虚拟主机原理域名解析与泛域名解析&#xff08;实践&#xff09;配置文件中ServerName的匹配规则技术架构多用户二级域名短网址虚拟主机原理 为什么需要虚拟主机&#xff1a; 当一台主机充当服务器给用户提供资源的时候&#xff0c;并不是一直都有很大的用户量&#…...

Java 动态代理简述和实例

Java动态代理是一种在运行时动态创建代理对象的技术。它可以让我们在不修改原始代码的情况下&#xff0c;对原始对象进行增强或者添加额外的行为。这种代理方式可以用于很多场景&#xff0c;例如AOP编程、RPC框架等。动态代理是基于Java反射机制实现的&#xff0c;它允许程序在…...

Unity编译器扩展(Advanced Editor Scripting)

Untiy编译器扩展允许我们对编译器的增加自己编写的的功能菜单栏MenuItemContextMenu和ContextMenuItemContextMenuContextMenuItemMenuItem 该属性允许您将菜单项添加到主菜单和检查器窗口上下文菜单。 该属性将任何静态函数转换为菜单命令。只有静态函数可以使用该属性。 Men…...

AFR机制及流程介绍

AFR(Auto Fast Return)不符合3GPP协议标准,因此终端默认是disable状态。如果运营商有要求可以配置开启。 AFR有两种场景 2G或者3G AFR到4G4G AFR到5G3G AFR TO 4G AFR到LTE功能的作用就是终端从LTE Handover或者重定向到3G进行业务,等业务做完后能够快速回到LTE网络。...

9.Hbase 部署

9.Hbase部署 注意事项&#xff1a; 1&#xff1a;必须事先安装 Hadoop分布式集群&#xff0c;zookeeper分布式集群 2&#xff1a;查看版本号&#xff1a; hbase version1、解压文件并改名 tar -zxvf /opt/software/hbase-2.2.3-bin.tar.gz -C /usr/app/ mv hbase-2.2.3/ hba…...

【maven 学习记录】

maven 学习记录一、maven基础1. maven是什么2. maven的作用3. maven的下载安装4. maven仓库5. maven坐标6. 第一个maven项目 手工实现7. maven插件8. 依赖管理9. 生命周期二、maven进阶一、maven基础 1. maven是什么 maven的本质是一个项目管理工具&#xff0c;将项目开发和管…...

NB-IOT宣传这么多年,这次总算用好了吧

一、方案概述随着实体经济快速发展&#xff0c;石化、港口、货场、工地等区域规模日益扩大&#xff0c;厂区面积广阔、环境复杂、作业人员和车辆众多&#xff0c;如无法实时掌握工作人员状态及外来人员位置、外来车辆情况等问题&#xff0c;将存在非常大的安全隐患。今天小编介…...

sort函数对结构体|pair对组|vector容器|map排序|二维数组的第x列 的排序

目录 sort对 vector容器 sort对 vector<pair<int,int>>对组 sort对 结构体 结构体外部规定排序 结构体内部运算符重载 map容器的排序 map的键排序 map的值排序 sort对二维数组的排序 sort对 vector容器 sort()函数可以用于对vector容器进行排序。具体来…...

Java定时器Timer的使用

一、Timer常用方法 Timer应用场景&#xff1a; 1、每隔一段时间执行指定的代码逻辑&#xff08;即按周期执行任务&#xff09; 2、指定时间执行指定的代码逻辑 为方便测试并查看运行效果&#xff0c;首先先建一个类并继承TimerTask&#xff0c;代码如下: package timerTest…...

别再死记硬背了!用PyTorch和TensorFlow动手实现四种池化层,直观理解它的作用

用代码可视化理解深度学习中的池化层&#xff1a;PyTorch与TensorFlow实战指南 当你第一次听说"池化层"这个概念时&#xff0c;是否也感到困惑&#xff1f;为什么神经网络需要这样一个"缩小"图像的层&#xff1f;本文将通过PyTorch和TensorFlow两种框架的实…...

Windows 10/11 环境下 OpenClaw v2.7.1 安装避坑与常见问题解决方案

&#x1f99e; OpenClaw v2.7.1 Windows 一键部署教程&#xff5c;5 分钟搭建本地 AI 智能体 在本地 AI 自动化工具快速普及的当下&#xff0c;OpenClaw&#xff08;小龙虾&#xff09;凭借全程可视化、一键部署、本地运行的特点&#xff0c;成为 Windows 平台上易用性突出的 …...

告别外部中断!用STM32定时器输入捕获实现EC11编码器的高效解码

STM32定时器输入捕获实现EC11编码器的高效解码方案 在嵌入式开发中&#xff0c;旋转编码器作为人机交互的重要组件&#xff0c;广泛应用于工业控制、智能家居和消费电子等领域。EC11作为常见的机械编码器&#xff0c;其稳定性和低成本使其成为许多项目的首选。然而&#xff0c;…...

基于SpringBoot的企业客户管理系统(附源码)

项目编号050 项目获取&#xff1a;合集 想学习Java开发却找不到合适的项目练手&#xff1f;这套基于Spring Boot的企业客户管理系统就是你的最佳选择&#xff01;代码简单清晰&#xff0c;功能实用完整&#xff0c;非常适合初学者学习和二次开发。 这是什么项目&#xff1f; …...

Intel Wi-Fi 6 AX201网卡‘代码10’通病?华硕/戴尔/联想多品牌用户自救指南

Intel Wi-Fi 6 AX201网卡‘代码10’故障全解析与跨品牌解决方案 当你的笔记本突然无法连接Wi-Fi&#xff0c;设备管理器中那个带着黄色感叹号的Intel Wi-Fi 6 AX201网卡图标格外刺眼&#xff0c;显示着"该设备无法启动&#xff08;代码10&#xff09;"的提示——这不…...

紫光同创Logos系列FPGA的PCB设计避坑指南:从BGA扇出到配置管脚,新手必看

紫光同创Logos系列FPGA的PCB设计避坑指南&#xff1a;从BGA扇出到配置管脚实战解析 第一次接触紫光同创Logos系列FPGA的硬件设计时&#xff0c;面对密密麻麻的BGA封装和复杂的配置电路&#xff0c;多数工程师都会感到无从下手。我在设计第一块PGL22G开发板时&#xff0c;就曾因…...

别再折腾wgrib了!用Python的xarray+cfgrib在Windows上优雅读取GRIB气象数据

告别命令行混乱&#xff1a;用Python生态在Windows上高效处理GRIB气象数据 气象数据分析工作中&#xff0c;GRIB格式文件一直是让人又爱又恨的存在。这种专为网格化气象数据设计的二进制格式&#xff0c;虽然存储效率高、兼容性强&#xff0c;但处理起来却常常让初学者望而生畏…...

从硬盘拷贝文件到内存,CPU真的在‘摸鱼’吗?聊聊DMA背后的性能优化实战

从硬盘拷贝文件到内存&#xff0c;CPU真的在‘摸鱼’吗&#xff1f;聊聊DMA背后的性能优化实战 当你在服务器上执行一个简单的文件读取操作时&#xff0c;是否曾好奇过背后发生了什么&#xff1f;传统认知中&#xff0c;CPU需要亲自搬运每个字节的数据&#xff0c;但实际上现代…...

开源物联网平台SiteWhere:架构解析与实战部署指南

1. 项目概述&#xff1a;一个开源的物联网应用平台如果你正在寻找一个能够快速搭建、灵活扩展&#xff0c;并且能统一管理成千上万台设备的物联网平台&#xff0c;那么你很可能已经听说过或者正在评估 SiteWhere。作为一个在物联网领域摸爬滚打了多年的从业者&#xff0c;我见过…...

从ONOS 1.10.0升级到1.15.0,我踩了这些坑:日志命令、GUI激活与依赖项变化全记录

从ONOS 1.10.0升级到1.15.0的实战避坑指南 当你从ONOS 1.10.0升级到1.15.0时&#xff0c;可能会遇到一系列意料之外的"惊喜"。作为一个刚从这场升级大战中幸存下来的老兵&#xff0c;我想分享一些血泪教训和实用技巧&#xff0c;帮助后来者少走弯路。 1. 升级前的准备…...