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

HTML 标签讲解

news 2026/4/6 7:37:42

HTML 标签讲解

      • HTML 语言结构
      • 根元素
      • 元数据元素
      • 主体根元素
      • 大纲元素
      • 文本内容
      • 语义化内联文本
      • 图像与多媒体
      • 编辑标识
      • table表格内容
      • 表单内容
      • table表单

HTML 语言结构

  • Markup （标记、标签）用来容纳和描述内容

严格意义上，标签是指开始标签（例如 <p> 标签）或结束标签（例如 </p> 标签）；元素（例如 p 元素或者称为<p>元素）则包括开始标签（自然也包括标签中定义的属性）、结束标签以及中间的内容（Content）。

根元素

该元素表示一个HTML文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代。

  • HTML (Hypertext Markup Language 超文本标记语言)
  • 标签含义：
    • html 它把其内部的内容描述为html代码，所有的html代码都必须放在html标签当中
      • html标签只包含 body 和 head 标签

在这里插入图片描述

元数据元素

该元素用来设定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。

基本信息以及对该网页描述类的数据都要放在该标签中，其中包括style和link标签

该元素可以包含任何可配置的元数据信息。

<meta charset="UTF-8">
<meta auther="jeffrey">
<meta email="tm@163.com">

  • meta表示基本信息，中文含义：元

    meta属于单标签，单标签无法加载内容

  • charset表示字符编码，中文含义：属性，charset属于meta的私有属性

    • 即：meta用来承载基本信息，交给浏览器，属性名=“属性值” key=“value”

该元素用来定义文档的标题，显示在浏览器的标题栏或标签页上。它只可以包含文本，若是包含有标签，则包含的任何标签都不会被解释。

该元素规定了外部资源与当前文档的关系。这个元素最常于链接样式表。

该元素的内部内容用来定义文档的样式风格，即层叠样式表。

  • style.css文件的引用
<link rel="stylesheet" href="./css/style.css">
  • rel全名relationshiop，中文：关联；表示引入的文件与当前文件的关系
  • href全名hypertext reference，超文本协议

该元素指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base> 元素。

base 用于定义href的基础网站，默认的根链接

1. 若href没有网络协议，则跳转至根链接，否则反之
  1. 如果没有base的，即默认base为当前服务器目录

主体根元素

该元素称为网页主体，所有的网页主体内容都在body当中,即显示在网页可视化窗口中展示的内容。

块级元素是纵向开辟空间，所以块级元素始终可以向下延展，css认为高度没有参考价值，因为可以随时可边，但宽度不能延展，块元素不能横向开辟空间，所以只有宽度可以被子元素参考。

​ body默认贴合窗口，body有margin值但不能发生穿透，body默认高度为0，它是所有元素的父级元素，任何块级元素的默认宽度都是父级元素的100%，但高度是根据自身内容而定，无法参照。

  • 若想参照父元素的宽度，有三个方法：

    1. 必须给父级元素固定高度，若子元素参照父级元素的百分比，会造成溢出。

      ​ 假设父级元高为100，子元素为父元素的50%，也就是50，那么父级元素会增长到150，那么子元素的高到底是多少；

    2. 将父级元素为body元素宽高的100%，然后绝对定位，top和left都为0，绝对定位参照整个可视化页面，窗口有多大，父级元素就有多大；

    3. 将父级元素绝对定位，上下左右全为0，不能有固定宽高。

大纲元素

该元素表示这部分内容在文档中应当是独一无二的，不包含在任何一系列文档中重复的内容，用来体现网页中的主要信息。使用 <main> 元素值得注意的一点是，它在每个页面中只能使用一次。<main> 元素的另外一个规定是，它不能作为 <article>, <header>, <aside>, <footer>, <nav> 的子元素节点。

该元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。

该元素用来描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表。

该元素表示文档中的一个区域，我们使用该元素来进行页面的逻辑性分区。

相关文章：

HTML 标签讲解

HTML 标签讲解 HTML 语言结构根元素元数据元素主体根元素大纲元素文本内容语义化内联文本图像与多媒体编辑标识table表格内容表单内容table表单 HTML 语言结构 Markup &#xff08;标记、标签&#xff09;用来容纳和描述内容 严格意义上&#xff0c;标签是指开始标签&#xf…...

编程日记 2023/9/5 15:44:11

ue5 小知识点 ue的world type，pie editor game

说明以该命令行模式启动游戏的前提下的两个问题&#xff1a; 1.WITH_EDITOR中的代码会被编译 2.由于没有在编辑器中(即没有打开虚幻编辑器)&#xff0c;所以GIsEditor为false WITH_EDITOR和WITH_EDITORONLY_DATA的区别 在论坛中找到的答案&#xff1a; WITH_EDITORONLY_DAT…...

编程日记 2023/9/5 15:43:10

两表union 如何保证group by 字段唯一

当要计算的指标可能来源多个表时&#xff0c;可能会使用到union all把不同的表中计算的指标合起来。关于union all使用条件&#xff1a;两个要联合的SQL语句 字段个数必须一样&#xff0c;而且字段类型要“相容”&#xff08;一致&#xff09; 另外&#xff0c;回顾union和uni…...

编程日记 2023/9/5 15:42:09

【⑰MySQL】 变量 | 循环 | 游标 | 处理程序

前言 ✨欢迎来到小K的MySQL专栏&#xff0c;本节将为大家带来MySQL变量 | 循环 | 游标 | 处理程序的分享✨ 目录 前言1. 变量1.1系统变量1.2 用户变量 2. 定义条件与处理程序2.1 案例分析2.2 定义条件2.3 定义处理程序2.4 案例解决 3. 流程控制3.1 分支结构3.2 循环结构3.3 跳转…...

编程日记 2023/9/5 15:41:08

如何在arXiv上发表一篇文章

目录 1. 初始信息确认2. 提交论文文件3. 论文编译结果4. 补充论文信息5. 总览 1. 初始信息确认 版权问题需要根据个人情况选择。 IEEE, Elsevier, BioMed Central, 这几个出版商都允许在投稿之前挂文章到arXiv下。通常是选择&#xff1a; arXiv.org perpetual, non-exclusive l…...

编程日记 2023/9/5 15:40:07

重要性采样

重要性采样 前言 离散型随机变量 X X X&#xff0c;我们可以通过以下方法求取其期望&#xff1a; 直接计算法&#xff0c;需要知道概率分布&#xff1a; E ( X ) ∑ x ∈ X [ p ( x ) ⋅ x ] \mathbb{E}(X)\sum_{x\in X}\left[p(x)\cdot x\right] E(X)x∈X∑​[p(x)⋅x] 采…...

编程日记 2023/9/5 15:39:05

说说Omega架构

分析&回答 Omega架构我们暂且称之为混合数仓。 什么是ECS设计模式 在谈我们的解法的时候&#xff0c;必须要先提ECS的设计模式。 简单的说&#xff0c;Entity、Component、System分别代表了三类模型。 实体(Entity)&#xff1a;实体是一个普通的对象。通常&#xff0c…...

编程日记 2023/9/5 15:38:04

高忆管理：光刻胶概念强势拉升，同益股份、格林达涨停

光刻胶概念5日盘中强势拉升&#xff0c;截至发稿&#xff0c;同益股份、格林达涨停&#xff0c;波长光电、晶瑞电材涨超7%&#xff0c;容大感光涨逾5%&#xff0c;华懋科技、茂莱光学、苏大维格、南大光电等均走强。 音讯面上&#xff0c;据新加坡《联合早报》网站9月2日报导&…...

编程日记 2023/9/5 15:37:03

计算机图形学线性代数相关概念

Transformation&#xff08;2D-Model&#xff09; Scale(缩放) [ x ′ y ′ ] [ s 0 0 s ] [ x y ] (等比例缩放) \left[ \begin{matrix} x \\ y \end{matrix} \right] \left[ \begin{matrix} s & 0 \\ 0 & s \end{matrix} \right] \left[ \begin{matrix} x \\ y \en…...

编程日记 2023/9/5 15:36:02

开源PHP 代挂机源码，可对接QQ、网易云、哔哩哔哩、QQ空间、等级加速等等

本程序运行环境PHP5.6 95dg/config.php修改系统数据库 进入数据库绑定 你搭建的域名即可 部署完成 进入数据库 找到data 输入绑定授权域名即可进行授权打开此网站 网站是无对接接口 需要您自行找对接接口即可 本源码有点乱 有实力的铁铁 可以修改一下哦&#xff01;...

编程日记 2023/9/5 15:35:01

【仿牛客论坛java项目】第五章 Kafka，构建TB级异步消息系统：阻塞队列、Kafka入门、Spring整合Kafka、发送系统通知、显示系统通知

这里写自定义目录标题 一、阻塞队列简单的阻塞队列测试案例总结阻塞队列 二、Kafka入门1、基础知识Kafka术语消息队列实现方式两种 2、配置3、启动全部命令启动 zookeeper 服务器再启动 kafka 服务器创建Topic关闭 4、总结Kafka的特点Kafka的术语 三、 Spring整合Kafka导入依赖…...

编程日记 2023/9/5 15:34:00

【AIGC专题】Stable Diffusion 从入门到企业级实战0401

一、概述 本章是《Stable Diffusion 从入门到企业级实战》系列的第四部分能力进阶篇《Stable Diffusion ControlNet v1.1 图像精准控制》第01节&#xff0c; 利用Stable Diffusion ControlNet Inpaint模型精准控制图像生成。本部分内容&#xff0c;位于整个Stable Diffusion生…...

编程日记 2023/9/5 15:32:59

Matlab信号处理1：模拟去除信号噪声

由于工作内容涉及信号系统、信号处理相关知识&#xff0c;本人本硕均为计算机相关专业&#xff0c;专业、研究方向均未涉及信号相关知识&#xff0c;因此需进行系统地学习。之前已将《信号与系统》快速过了一遍&#xff0c;但感觉较抽象且理解较浅显。在此系统地学习如何使用Ma…...

编程日记 2023/9/5 15:31:58

Bootstrap的行、列布局设计(网络系统设计)

目录 00-基础知识01-等宽列布局02-指定某一列的宽度03-根据内容自动改变列的宽度04-五种预定义列宽度 .col、.col-sm-*、.col-md-*、.col-lg-*、.col-xl-*05-不同视口宽度按不同的分列方案划分06-删除列内容的盒模型的外边距07-超过12列怎么办&#xff1f;08-重新排列各列的顺序…...

编程日记 2023/9/5 15:30:56

1.1 计算机网络在信息时代中的作用

思维导图&#xff1a; 正文&#xff1a; 我的理解&#xff1a; 这段话是一本书或课程的第一章简介&#xff0c;它的目的是为读者或学生提供一个关于计算机网络基础知识的框架或大纲。 首先&#xff0c;它强调了这章是整本书的一个概览&#xff0c;会先介绍计算机网络在信息时…...

编程日记 2023/9/5 15:29:56

mysql CONCAT使用

问题 有一个查找数据的mysql语句&#xff1a;SELECT DISTINCT fund_id,version,statistic_date FROM fund_nv_divident WHERE version ( SELECT max(version) FROM fund_nv_divident) and statistic_date > ‘2023-06-04’ and fund_id not in (SELECT DISTINCT fund_id f…...

编程日记 2023/9/5 15:28:55

maven基础学习

什么是maven 构建 依赖 maven核心概念坐标 在黑窗口使用maven命令生成maven工程 pom.xml 想导入哪个jar包把它的坐标放到dependency里就可以 maven核心概念POM maven核心概念约定的目录结构 执行maven的构建命令 清理操作&#xff0c;clean 编译操作 compile 测试操作 test 打包…...

编程日记 2023/9/5 15:27:53

uniapp移动端地图，点击气泡弹窗并实现精准定位

记录移动端地图map组件的使用 需求记录&#xff1a; 移动端地图部分需要展示两个定位点&#xff0c;上报点及人员定位点。通过右上角的两个按钮实现地图定位。点击对应定位气泡&#xff0c;弹出定位点的信息。 效果图如下&#xff1a; map在nvue中的使用。直接用nvue可以直接…...

编程日记 2023/9/5 15:26:51

2023牛客暑期多校训练营7 CI「位运算」「根号分治+容斥」

C-Beautiful Sequence_2023牛客暑期多校训练营7 (nowcoder.com) 题意&#xff1a; 给定一个b序列&#xff0c;a序列满足 a [ i − 1 ] < a [ i ] a[i-1]<a[i] a[i−1]<a[i]且 a [ i ] ⊕ a [ i 1 ] b [ i ] a[i]\oplus a[i1]b[i] a[i]⊕a[i1]b[i]&#xff0c;求字…...

编程日记 2023/9/5 15:25:50

YOLOv5算法改进（10）— 替换主干网络之GhostNet

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。GhostNet是一种针对计算机视觉任务的深度神经网络架构&#xff0c;它于2020年由中国科学院大学的研究人员提出。GhostNet的设计目标是在保持高精度的同时&#xff0c;减少模型的计算和存储成本。GhostNet通过引入Ghost模块…...

编程日记 2023/9/5 15:24:49

从零到一：手把手教你用cam_lidar_calibration标定自己的VLP-16与海康相机（附完整ROS Bag录制技巧）

从零到一&#xff1a;VLP-16激光雷达与海康相机联合标定实战指南 当激光雷达点云与相机图像在自动驾驶系统中完美对齐时&#xff0c;传感器融合的魔法才真正开始。作为机器人感知的核心环节&#xff0c;标定质量直接决定了后续目标检测、SLAM等模块的精度上限。本文将手把手带您…...

编程新知 2026/4/6 6:49:33

Leather Dress Collection 实战：为开源项目自动生成 README 与贡献指南

Leather Dress Collection 实战&#xff1a;为开源项目自动生成 README 与贡献指南 你有没有过这样的经历&#xff1f;辛辛苦苦写好了一个开源项目&#xff0c;代码功能强大&#xff0c;架构清晰&#xff0c;但一想到要写 README、贡献指南、行为准则这些文档&#xff0c;头就…...

编程新知 2026/4/6 6:47:29

AI绘画作品集：Anything V5图像生成服务实际效果与案例分享

AI绘画作品集&#xff1a;Anything V5图像生成服务实际效果与案例分享 1. 引言&#xff1a;当AI绘画遇见Anything V5 想象一下&#xff0c;你有一个创意在脑海中盘旋——也许是一个穿着宇航服在咖啡馆里喝咖啡的熊猫&#xff0c;或者是一座漂浮在云端的蒸汽朋克城市。在过去&…...

编程新知 2026/4/6 6:45:27

通义千问1.5-1.8B-Chat-GPTQ-Int4在网络安全领域的应用初探：威胁情报摘要

通义千问1.5-1.8B-Chat-GPTQ-Int4在网络安全领域的应用初探&#xff1a;威胁情报摘要 每天一上班&#xff0c;安全运营中心的分析师小李就要面对成百上千条新涌进来的安全告警、漏洞报告和威胁情报。这些文档动辄几十页&#xff0c;充斥着技术术语和复杂描述&#xff0c;光是快…...

编程新知 2026/4/6 6:43:27

OpenClaw配置备份指南：gemma-3-12b-it模型迁移与快速恢复

OpenClaw配置备份指南&#xff1a;gemma-3-12b-it模型迁移与快速恢复 1. 为什么需要备份OpenClaw配置&#xff1f; 上周我的主力开发机突然硬盘故障&#xff0c;导致精心调校的OpenClaw配置全部丢失。整整两天时间&#xff0c;我都在重新配置模型参数、飞书通道和自定义技能—…...

编程新知 2026/4/6 6:10:43

ClawdBot部署全流程：从安装到设备授权，手把手带你跑通

ClawdBot部署全流程&#xff1a;从安装到设备授权&#xff0c;手把手带你跑通 1. ClawdBot简介与核心价值 ClawdBot是一个可以在本地设备上运行的个人AI助手&#xff0c;它使用vLLM提供后端模型能力。与常见的云端AI服务不同&#xff0c;ClawdBot的设计理念强调&#xff1a; …...

编程新知 2026/4/6 5:58:34

创作灵感枯竭？试试Asian Beauty Z-Image Turbo：一键生成多种东方人物设定

创作灵感枯竭&#xff1f;试试Asian Beauty Z-Image Turbo&#xff1a;一键生成多种东方人物设定 1. 为什么你需要这个东方美学生成工具 作为一名内容创作者&#xff0c;你是否经常遇到这样的困境&#xff1a;脑海中构思了完美的东方人物形象&#xff0c;却苦于找不到合适的视…...

编程新知 2026/4/6 5:46:22

Llama-3.2V-11B-cot保姆级教学：Streamlit缓存机制加速推理响应

Llama-3.2V-11B-cot保姆级教学&#xff1a;Streamlit缓存机制加速推理响应 1. 项目概述 Llama-3.2V-11B-cot是基于Meta Llama-3.2V-11B-cot多模态大模型开发的高性能视觉推理工具&#xff0c;专为双卡4090环境深度优化。这个工具解决了视觉权重加载的关键Bug&#xff0c;支持…...

编程新知 2026/4/6 5:10:14

智慧校园系统采购，如何平衡功能、价格与服务？

✅作者简介&#xff1a;合肥自友科技 &#x1f4cc;核心产品&#xff1a;智慧校园平台(包括教工管理、学工管理、教务管理、考务管理、后勤管理、德育管理、资产管理、公寓管理、实习管理、就业管理、离校管理、科研平台、档案管理、学生平台等26个子平台) 。公司所有人员均有多…...

编程新知 2026/4/6 4:41:22

告别龟速迭代！用埃特金算法2步搞定方程求根（附C++代码实战）

告别龟速迭代&#xff01;用埃特金算法2步搞定方程求根&#xff08;附C代码实战&#xff09; 在数值计算的世界里&#xff0c;求解非线性方程根就像一场与时间的赛跑。工程师们常常被困在缓慢收敛的迭代法中&#xff0c;眼看着计算资源被一点点消耗&#xff0c;而精度提升却如同…...

编程新知 2026/4/6 4:24:42