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

通过创建自定义标签来扩展HTML

news 2026/4/11 0:15:14

使用HTML时，例如，使用<b>标记显示粗体文本。 如果需要列表，则对每个列表项使用<ul>标记及其子标记<li> 。 标签由浏览器解释，并与CSS一起确定网页内容的显示方式以及部分内容的行为。

有时，仅使用一个HTML标记不足以满足Web应用程序所需的功能。 通常，这可以通过将多个HTML标记与JavaScript和CSS结合使用来解决，但是这种解决方案并不是那么优雅。

更为优雅的解决方案是使用自定义标签 - 用<>括起来的标识符，浏览器将其解释为呈现我们预期的功能。 与常规HTML标签一样，我们应该能够在页面中多次使用自定义标签，并且还应该能够具有标签属性和子标签来辅助自定义标签的功能。 所以，让我们看一个例子！

示例：创建Gravatar自定义HTML标签

下面是用自定义标签封装了一个HTML片段，使得这个HTML片段更具有语义性，且可以多处复用。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body>This is my Gravatar picture:<dog-gravatar id="dog-gravatar" email="admin@coding-dude.com"><div><img src="" alt="图片"><div>内容</div></div></dog-gravatar></body><script>const dogGravatar = document.querySelector('dog-gravatar');console.log(dogGravatar.getAttribute('email'));</script>
</html>

在这里插入图片描述

相关文章：

通过创建自定义标签来扩展HTML

使用HTML时&#xff0c;例如&#xff0c;使用<b>标记显示粗体文本。 如果需要列表&#xff0c;则对每个列表项使用<ul>标记及其子标记<li> 。 标签由浏览器解释&#xff0c;并与CSS一起确定网页内容的显示方式以及部分内容的行为。 有时&#xff0c;仅使用一…...

编程日记 2023/11/12 22:30:51

Nacos热更新

Nacos热更新 相比其他注册中心&#xff0c;Nacos的优势之一在于热更新。 热更新&#xff0c;就是不需要重启服务&#xff0c;就能够更新配置。 nacos配置中心 首先&#xff0c;需要搭建 Nacos&#xff0c;详情见&#xff1a; https://www.cnblogs.com/expiator/p/17392549.h…...

编程日记 2023/11/12 22:29:49

CSS3 中 transition 和 animation 的属性分别有哪些

Transition 属性&#xff1a; ​​transition​​ 属性用于定义元素在状态改变时从一个样式转换到另一个样式的过渡效果。它包含以下几个属性&#xff1a; • ​​transition-property​​&#xff1a;指定过渡效果应用的 CSS 属性名称&#xff0c;多个属性可以用逗号分隔。 •…...

编程日记 2023/11/12 22:28:47

【狂神说Java】Nginx详解

✅作者简介&#xff1a;CSDN内容合伙人、信息安全专业在校大学生&#x1f3c6; &#x1f525;系列专栏 &#xff1a;狂神说Java &#x1f4c3;新人博主 &#xff1a;欢迎点赞收藏关注&#xff0c;会回访&#xff01; &#x1f4ac;舞台再大&#xff0c;你不上台&#xff0c;永远…...

编程日记 2023/11/12 22:26:46

【第六章】软件设计师 之 数据结构与算法基础

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 备考资料导航 软考好处&#xff1a;软考的…...

编程日记 2023/11/12 22:25:45

Git基本概念和使用方式

Git 是一种版本控制系统&#xff0c;用于管理文件版本的变化。以下是其基本概念和使用方式&#xff1a; 仓库&#xff08;repository&#xff09;&#xff1a;Git 存储代码的地方&#xff0c;可以理解为一个项目的文件夹。提交&#xff08;commit&#xff09;&#xff1a;Git …...

编程日记 2023/11/12 22:24:44

Falcon构建轻量级的REST API服务

Falcon构建轻量级的REST API服务 文章目录 Falcon构建轻量级的REST API服务安装falcon构建falcon项目应用托管(Hosting Your App)简单示例内容服务(Serving Text)JSON请求和响应处理路由和 URI 参数中间件异常处理 图像服务(Serving Images)创建图像资源关联资源请求和响应对象…...

编程日记 2023/11/12 22:23:43

【Python】python读取，显示，保存图像的几种方法

一、PIL&#xff1a;Python Imaging Library&#xff08;pillow&#xff09; PIL读取图片不直接返回numpy对象&#xff0c;可以用numpy提供的函数np.array()进行转换&#xff0c;亦可用Image.fromarray()再从numpy对象转换为原来的Image对象&#xff0c;读取&#xff0c;显示&…...

编程日记 2023/11/12 22:22:42

k8s系列-kuboard 该操作平台的使用操作

文章目录 一、相关平台&#xff0c;以及账号和密码镜像打包服务器仓库地址K8s平台数据库mysql 二、平台概述1.集群导入2.集群管理3.名称空间4.访问控制授权5.集群用户操作审计 三、kuboard平台操作手册一、部署服务操作1.名称空间部署2.工作负载部署 一、相关平台&#xff0c;以…...

编程日记 2023/11/12 22:21:41

基于讯飞星火大语言模型开发的智能插件：小策问答

星火大语言模型是一种基于深度学习的自然语言处理技术&#xff0c;它能够理解和生成人类语言。这种模型的训练过程涉及到大量的数据和复杂的算法&#xff0c;但最终的目标是让机器能够像人一样理解和使用语言。 小策问答是一款基于星火大语言模型的定制化GPT插件小工具。它的主…...

编程日记 2023/11/12 22:20:39

笔记：AI量化策略开发流程-基于BigQuant平台（二）

五、模型训练股票预测 完成了数据处理&#xff0c;接下来就可利用平台集成的各算法进行模型训练和模型预测啦。本文将详细介绍“模型训练”、“模型预测”两大模块操作、原理。 模型训练和模型预测是AI策略区别于传统量化策略的核心&#xff0c;我们通过模型训练模块利用训练…...

编程日记 2023/11/12 22:18:36

100127. 给小朋友们分糖果 II

给你两个正整数 n 和 limit 。 请你将 n 颗糖果分给 3 位小朋友&#xff0c;确保没有任何小朋友得到超过 limit 颗糖果&#xff0c;请你返回满足此条件下的 总方案数 。 示例 1&#xff1a; 输入&#xff1a;n 5, limit 2 输出&#xff1a;3 解释&#xff1a;总共有 3 种方…...

编程日记 2023/11/12 22:17:36

【2】Spring Boot 3 项目搭建

目录 【2】Spring Boot 3 初始项目搭建项目生成1. 使用IDEA商业版创建2. 使用官方start脚手架创建 配置与启动Git版本控制 个人主页: 【⭐️个人主页】 需要您的【&#x1f496; 点赞关注】支持 &#x1f4af; 【2】Spring Boot 3 初始项目搭建 项目生成 1. 使用IDEA商业版创…...

编程日记 2023/11/12 22:16:35

【第七章】软件设计师 之 程序设计语言与语言程序处理程序基础

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 1、前言 正规式 2、编译过程 编译型&…...

编程日记 2023/11/12 22:14:33

如何判断一个角是否大于180度（2）

理论计算见上一篇&#xff1a; 如何判断一个角是否大于180度&#xff1f;_kv1830的博客-CSDN博客 此篇为代码实现 一。直接上代码&#xff1a; import cv2 as cv import numpy as np import mathdef get_vector(p_from, p_to):return p_to[0] - p_from[0], p_to[1] - p_from…...

编程日记 2023/11/12 22:13:33

ASAM OpenDRIVE V1.7协议超详解（一）

文章目录 前言一、仿真场景的构成二、openDRIVE框架三、g_additionalData四、openDRIVE-header五、openDRIVE-road1、Road总拓扑结构2、Road-link介绍1&#xff09;link的拓扑结构2&#xff09;link链接示例3&#xff09;link前继后继4&#xff09;道路link规则 3、road-type介…...

编程日记 2023/11/12 22:12:31

springboot的配置信息的设置和读取（application.properties/application.yml）

springboot提供了两种配置信息的文件格式&#xff0c;application.properties和application.yml&#xff0c;基于直接明了&#xff0c;使用方便和高效的前提下下面的配置均采用yml格式配置&#xff0c; 注意 yml采用缩减方式来排列键后面紧跟冒号&#xff0c;然后空格&#x…...

编程日记 2023/11/12 22:10:28

Deepsort项目详解

一、目标追踪整体代码 代码目录如下图所示&#xff1a; 、 追踪相关代码&#xff1a; 检测相关代码和权重 调用 检测 和 追踪的代码&#xff1a; 首先代码分为三个部分&#xff1a; 目标追踪的相关代码和权重目标检测相关代码和权重&#xff0c;这里用的是yolov5.5目标检…...

编程日记 2023/11/12 22:09:27

C语言证明一个偶数总能表示为两个素数之和。输入一个偶数并将其分解为两个素数

完整代码&#xff1a; // 一个偶数总能表示为两个素数之和。输入一个偶数并将其分解为两个素数#include<stdio.h>//判断一个数n是否为素数 int isPrimeNumber(int n){//1不是素数if (n1){return 0;}for (int i 2; i <(n/2); i){//当有n能被整除时&#xff0c;不是素…...

编程日记 2023/11/12 22:08:26

Python 的 datetime 模块

目录 简介 一、date类 &#xff08;一&#xff09;date 类属性 &#xff08;二&#xff09;date 类方法 &#xff08;三&#xff09;实例属性 &#xff08;四&#xff09;实例的方法 二、time类 &#xff08;一&#xff09;time 类属性 &#xff08;二&#xff09;tim…...

编程日记 2023/11/12 22:07:24

新手程序员必看！用缓存优化RAG，让你的大模型知识库性能飙升，收藏学习！

本文介绍了RAG在大模型知识库中的应用及其面临的性能挑战&#xff0c;提出通过结果缓存、检索结果缓存和嵌入缓存等策略来优化RAG系统。文章强调缓存机制能有效提升响应速度、降低Token消耗&#xff0c;并阐述了构建高效知识缓存体系的原则&#xff0c;如冷热分层、设置TTL和监…...

编程新知 2026/4/10 23:15:59

noc-examples-processing入门：从零开始学习Processing编程的终极教程

noc-examples-processing入门&#xff1a;从零开始学习Processing编程的终极教程 【免费下载链接】noc-examples-processing Repository for example code from The Nature of Code book 项目地址: https://gitcode.com/gh_mirrors/no/noc-examples-processing noc-exam…...

编程新知 2026/4/10 23:05:42

构建高可用CephFS NFS网关：NFS-Ganesha与RADOS集群的深度整合

1. 为什么需要CephFS的NFS网关&#xff1f; 想象一下你有个超大的仓库&#xff08;CephFS&#xff09;&#xff0c;里面堆满了各种宝贝文件。但每次取东西都得用专门的叉车&#xff08;Ceph客户端&#xff09;&#xff0c;而大多数工人&#xff08;普通服务器&#xff09;只会开…...

编程新知 2026/4/10 22:41:05

【2026年认证杯】【D题夫共享充电宝的投放配置】数学中国数学建模比赛思路、代码、论文助攻

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程新知 2026/4/10 22:16:47

MiniMax 闫俊杰向左， DeepSeek 梁文锋向右

2026 年初&#xff0c;大模型赛道有两件事值得关注。3 月&#xff0c;MiniMax 发布首份年报&#xff0c;营收爆发式增长。2 月&#xff0c;DeepSeek 创始人梁文锋接受 Lex Fridman 4 小时访谈&#xff0c;震惊全球 AI 圈。两个年轻人&#xff0c;两种打法&#xff0c;两条完全不…...

编程新知 2026/4/10 22:04:41

华为服务器SP380网卡固件升级保姆级教程（附避坑指南）

华为SP380网卡固件升级全流程实战手册 当数据中心运维团队遇到网络性能瓶颈或安全漏洞时&#xff0c;网卡固件升级往往是最经济高效的解决方案。作为华为服务器搭载的高性能网卡&#xff0c;SP380在企业级环境中承担着关键的网络流量处理任务。本文将深入解析通过Smart Provisi…...

编程新知 2026/4/10 22:02:33

AI原生研发成本黑洞诊断手册（附可落地的TCO/TTV双轨评估表）

第一章&#xff1a;AI原生研发成本黑洞的本质解构 2026奇点智能技术大会(https://ml-summit.org) AI原生研发并非简单地将模型“接入”系统&#xff0c;而是一场从基础设施、数据契约、服务边界到可观测性的全栈重构。其成本黑洞常被误归因于GPU算力开销&#xff0c;实则根植于…...

编程新知 2026/4/10 20:55:40

跳表（Skip List）：思想、优劣与应用场景完全解读

一、为什么需要跳表&#xff1f;在计算机科学中&#xff0c;我们经常需要一种数据结构&#xff0c;既能快速查找&#xff0c;又能高效插入和删除。数组的二分查找虽然快&#xff08;O(log n)&#xff09;&#xff0c;但插入删除却需要移动大量元素&#xff08;O(n)&#xff09;…...

编程新知 2026/4/10 20:53:12

AI原生软件容灾设计避坑指南（2024最新Gartner认证框架实操版）

第一章&#xff1a;AI原生软件容灾设计的核心范式演进 2026奇点智能技术大会(https://ml-summit.org) 传统容灾体系面向确定性状态机与静态服务拓扑构建&#xff0c;而AI原生软件——尤其是以LLM推理服务、实时微调管道、向量检索集群为代表的新型负载——其核心特征在于动态权…...

编程新知 2026/4/10 19:21:04

DXVK终极指南：彻底解决GTA IV在Linux上的纹理模糊问题

DXVK终极指南&#xff1a;彻底解决GTA IV在Linux上的纹理模糊问题 【免费下载链接】dxvk Vulkan-based implementation of D3D8, 9, 10 and 11 for Linux / Wine 项目地址: https://gitcode.com/gh_mirrors/dx/dxvk 你是否曾经在Linux上畅玩《GTA IV》时&#xff0c;发现…...

编程新知 2026/4/10 18:38:26