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

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

news 2026/4/11 0:27:26

使用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

AD22100K温度传感器嵌入式驱动设计与ADC信号链优化

1. OSS-EC_ADI_AD22100K_00000057 温度传感器驱动库深度解析1.1 器件特性与工程定位OSS-EC_ADI_AD22100K_00000057 是面向 Analog Devices AD22100K 集成温度传感器的嵌入式软件驱动库。该库并非通用型传感器框架&#xff0c;而是针对 AD22100K 独特模拟输出特性的专用适配层&a…...

编程新知 2026/4/11 0:08:40

Keil UV4配色进阶：不止替换文件，教你用global.prop打造专属高效编码环境

Keil UV4深度调校指南&#xff1a;从global.prop解析到现代IDE级编码环境定制 当你每天面对Keil UV4那个灰暗的默认界面时&#xff0c;是否想过这个老牌嵌入式开发工具也能拥有VS Code般的优雅体验&#xff1f;不同于简单的主题替换&#xff0c;我们将深入global.prop文件的每一…...

编程新知 2026/4/10 23:46:23

OpenClaw+优云智算Coding Plan：从灵感到成文，再到发布的全流程AI自动化肆

1.安装环境准备 1.1.查看物理内存 [rootaiserver ~]# free -m 1.2.操作系统版本 [rootaiserver ~]# cat /etc/redhat-release 1.3.操作系统内存 [rootaiserver ~]# df -h /dev/shm/ 1.4.磁盘空间 [rootaiserver ~]# df -TH [rootaiserver ~]# df -h /tmp/ [rootaiserver ~]# d…...

编程新知 2026/4/10 22:38:58

Steam DLC解锁工具终极指南：5分钟快速上手SmokeAPI游戏DLC模拟器

Steam DLC解锁工具终极指南&#xff1a;5分钟快速上手SmokeAPI游戏DLC模拟器 【免费下载链接】SmokeAPI Legit DLC Unlocker for Steamworks 项目地址: https://gitcode.com/gh_mirrors/smo/SmokeAPI 想要体验心仪游戏的所有DLC内容却受限于预算&#xff1f;作为开发者需…...

编程新知 2026/4/10 22:30:52

一条命令搞定OpenClaw部署？PPClaw的便利背后，你得先看清这些代价

先说结论PPClaw通过云端沙箱和命令行工具&#xff0c;确实能大幅降低OpenClaw的初始部署门槛&#xff0c;尤其适合快速验证场景。这种便利性背后&#xff0c;意味着你将依赖PPIO的特定环境&#xff0c;可能面临供应商锁定和长期成本不可预测的风险。对于需要深度定制或大规模生…...

编程新知 2026/4/10 22:14:45

SAP ABAP长文本读取性能瓶颈诊断与批量优化实战：从READ_TEXT到READ_TEXT_TABLE

1. 当SAP报表遇上长文本&#xff1a;性能噩梦的开始 相信每个ABAP开发者都遇到过这样的场景&#xff1a;一个原本运行良好的物料报表&#xff0c;突然因为增加了长文本显示需求而变得奇慢无比。我去年就接手过这样一个项目&#xff0c;用户抱怨说点击报表后可以去泡杯咖啡&…...

编程新知 2026/4/10 21:56:14

2026年心脑血管疾病专科风云榜：谁是健康守护者？

随着现代生活节奏的加快和生活方式的变化&#xff0c;心脑血管疾病的发病率逐年上升。根据《中国心血管健康与疾病报告2025》显示&#xff0c;我国40岁以上人群中心脑血管疾病患者已超过3亿人。面对这一严峻形势&#xff0c;如何找到值得信赖的心脑血管疾病专科医院&#xff0c…...

编程新知 2026/4/10 21:03:44

前后端分离架构的实践指南：如何高效实现与优化

1. 前后端分离架构的核心价值 十年前我刚入行时&#xff0c;主流还是用JSP、PHP这类服务端渲染技术。记得有次修改登录页面的按钮颜色&#xff0c;我需要同时改动Java代码里的样式表和JSP模板文件&#xff0c;还要协调后端同事一起联调。这种开发体验让我深刻体会到前后端耦合的…...

编程新知 2026/4/10 19:00:35

AI 日报 - 2026年4月10日

&#x1f52c; 科技类 5 条1. Anthropic 年化收入首超 OpenAI&#xff0c;4个月从90亿飙到300亿美元这速度真的让人有点惊呆——Anthropic 的年化收入在短短4个月内从90亿美元狂飙到300亿美元&#xff0c;首次反超 OpenAI&#xff08;当前约250亿&#xff09;。更有意思的是&am…...

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

lvgl-micropython、lv_micropython和lv_binding_micropython到底啥关系？一文读懂婆

一、背景与问题缘起 MySQL 5.6.51 版本下 2000 万行核心业务表开展新增字段操作&#xff0c;需求为新增BIGINT(19) NOT NULL DEFAULT 0 COMMENT 注释&#xff08;因业务实际需要存储大数值关联字段&#xff09;。 表的核心特性为Java 多线程密集读写&#xff0c;业务请求持续高…...

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