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

前端知识——标签知识

news 2026/3/29 11:56:52

1.p段落标签  ——一个p标签表示一个段落 单独占一行

>p标签里面不可以嵌套其它的块级标签(div  h1~h6 p等)  会导致浏览器自动分裂成两个标签   不规范的写法

>但是可以包裹span标签  

2.span标签 ——包裹文字标签   可以和span一行显示  

3.文本格式化标签 ——给文本使用的标签

- b和strong 加粗标签  

>b:加粗标签   视觉上加粗效果

>strong:加粗标签   视觉上加粗效果 能快速被搜索引擎找到 seo

- 文字倾斜标签 i和em  

>i 文字倾斜   视觉上倾斜效果

>em 文字倾斜   视觉上倾斜效果  能快速被搜索引擎找到  

4.br换行标签  

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是我的网页</title></head><body><!-- 段落标签  可以放很长文字   或者一个段落 --><p>在城市的绿色和乡村的绿色之外，还有一块心灵的绿色，它茂盛地长在每个人的心灵沃土上。它不以美丽的外表示人，它独自体现着生命的本质，既承受阳光雨露，呕经历电闪雷鸣。它无形却胜过有形，因为一个人的心灵如果失去了绿色，也就失去了善意，失去了真诚，失去了生机和活力。</p><!-- p标签里面不可以嵌套其它的块级标签(div  h1~h6 p等)  会导致浏览器自动分裂成两个标签   不规范的写法 --><!-- <p> --><!-- <div>我是盒子标签</div> --><!-- <h1>一级标题</h1> --><!-- <p>我是自己人p标签</p> --><!-- </p> --><p>大家感觉学的怎么样?1</p><p>大家感觉学的怎么样?2</p><!-- span标签  包裹文字标签  短文字   --><span>我是span包裹的文字内容1</span><span>我是span包裹的文字内容2</span><!-- span的结合样式的突出用法  --><p>班主任说: <span style='color:red;'>大家今天都要认真学习哦</span></p><!-- b:加粗标签   视觉上加粗效果--><b>加粗的标签</b><!-- strong:加粗标签   视觉上加粗效果 能快速被搜索引擎找到 seo--><strong>看看我</strong><!-- 文字倾斜标签  --><i>无限</i><em>今晚有空 开黑?</em><!-- 文字加粗并且倾斜 --><strong><i>看看倾斜了没</i></strong><br><!-- 下划线标签  u/ins --><u>下划线标签</u><!-- 换行标签  --><br><ins>文字有下划线</ins><!-- 删除线标签   --><s>特价:9.9</s><del>我也是删除线标签</del></body></html>

5.a标签——超链接标签 /超文本标签  

href:超链接地址路径

target: 指定你的超链接打开位置

    1.默认值: target='_self': 默认在当前页面中去打开新的链接地址

    2.target='_blank'  新开标签页  点多少次就新开多少个

    3.target="_new"  新开 所有new只会新开一个

代码：

<!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><!-- a:超链接  href:超链接跳转地址  --><a href="https://www.bilibili.com/">哔哩哔哩 俺想看b站</a><!-- href 可以放网络地址  相对路径方式: ./:在同级目录下去找对应的文件地址    常用../: 在上一个文件夹里面去找文件路径   02 访问 01 文件夹里的内容   不常用绝对路径: 从什么盘开始     一直到你的文件后缀名结束  完整的地址 写作业  最好不要用绝对路径的写法   (每个人的盘是不一样的    如果你要分享东西给别人最好用相对路径  )--><a href="./1-基础标签.html">点击我 去找01页面</a><!-- <a href="./1-基础标签.html">11111</a> --><!-- 我现在是在02 文件夹里面 想访问01 文件夹 怎么办 --><a href='../01_前端基础/01-网页模板介绍.html'>点我去01文件找 01-网页模板介绍</a><!-- 绝对路径演示 --><a href="F:\前端基础\02_标签知识\1-基础标签.html">用绝对去找</a><br><!-- 网络路径  有网就可以访问的 --><a href="https://img2.baidu.com/it/u=347034249,179256317&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800">点我给你看好看的</a><!-- 超链接放本地的图片  --><a href="E:\星星月亮共闪耀\chengpin1.jpg">我自己的图片</a><!-- <a href=""><p>我是p标签</p></a> --><p><a href="">超链接标签</a></p><!-- 不规范的写法 不允许a标签  嵌套a标签 --><!-- <a href=""><a href=""></a></a> --></body></html>

a标签锚点:

  a标签之间 锚点绑定对应的name属性  加#  

  a标签  然后想跳转到其他标签位置那就需要用id名   来进行跳转

 <a href="#bottom"  name='top'>

        <h2>我是这个页面的顶部位置</h2>

    </a>

    <!-- a标签锚点  点击跳转对应的位置   -->

     <a href="#top"  name='bottom'>

        <b>我是文章最底部  点我会上面去</b>

     </a>

6.img标签图片  

- src  图片地址

- alt: 提示文本

- width: 图片宽度

- height:图片高度  

- title: 图片描述  鼠标悬停在这个图片 就会显示文字

代码：

<img src="./1.webp" alt="看到图片了吗" width="500px" height='300px'  title='这是我的可莉吗?'>

7.div盒子标签  

8.h系列标签(h1~h6)——标题的文字是默认会出现不一样的大小和粗细  

>h1标题标签只允许在一个网页写一次  不允许写多个  写多个的话就会让浏览器分不清主次 导致称为不合格页面


 

相关文章：

前端知识——标签知识

1.p段落标签 ——一个p标签表示一个段落 单独占一行 >p标签里面不可以嵌套其它的块级标签(div h1~h6 p等) 会导致浏览器自动分裂成两个标签 不规范的写法 >但是可以包裹span标签 2.span标签 ——包裹文字标签 可以和span一行显示 3.文本格式化标签 ——给…...

编程日记 2024/9/25 6:59:11

使用Docker和cpolar在Linux服务器上搭建DashDot监控面板

使用Docker和cpolar在Linux服务器上搭建DashDot监控面板 前言环境准备安装Docker下载Dashdot镜像 部署DashDot应用本地访问DashDot服务安装cpolar内网穿透固定DashDot公网地址结语 前言 在这个数字化飞速发展的时代&#xff0c;服务器作为支撑各种应用和服务的基础设施&#xf…...

编程日记 2024/9/25 6:58:08

解决docker拉取镜像报错

报错信息如下&#xff1a; Error response from daemon: Get "https://registry-1.docker.io/v2/": net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting headers)网上试了很多方式&#xff0c;有的需要配置DNS解析&…...

编程日记 2024/9/25 6:57:07

C++之STL—deque容器

双端数组 区别于 vector (单端数组)&#xff0c; 构造函数 注意&#xff1a;读取数据时&#xff0c;const修饰保证函数内只能读取&#xff0c;不能修改数据 void print(const deque<int>& deq) {for (deque<int>::const iterator it deq.begin(); it ! deq.e…...

编程日记 2024/9/25 6:56:06

leveldb前缀匹配查找Seek

个人随笔 (Owed by: 春夜喜雨 http://blog.csdn.net/chunyexiyu) 参考&#xff1a;https://github.com/google/leveldb/blob/main/include/leveldb/db.h 参考&#xff1a;百度AI 1. 背景 最近偶然发现了&#xff0c;leveldb前缀匹配查找的功能。 之前没有从这个角度去想过See…...

编程日记 2024/9/25 6:49:59

【自动驾驶】ros如何隔绝局域网内其他电脑播包

1.问题 可能碰到自己播包的时候&#xff0c;别人播包的传到我们电脑上&#xff0c;导致无法分析问题&#xff0c;或者出现一些奇怪的现象。 2.解决 export ROS_LOCALHOST_ONLY1 在终端加上这句话&#xff0c;或者在~/.bashrc中添加&#xff0c;通过source ~/.bashrc使其生…...

编程日记 2024/9/25 6:44:54

MySQL程序

目录 MySQL程序 常用的MySQL的程序 mysqld程序 mysql客户端 客户端命令的常用的选项 配置文件 配置文件语法 MySQL客户端命令 ​编辑 .sql 文件中执行SQL语句 mysqlcheck &#xff08;表维护程序&#xff09; Mysqldump&#xff08;数据库备份程序&#xff09; mysql…...

编程日记 2024/9/25 6:42:53

吉林省自闭症寄宿学校：提供个性化培养方案

在吉林省的怀抱中&#xff0c;隐藏着一片温馨而特殊的天地——星贝育园自闭症儿童寄宿制学校。这里&#xff0c;不是简单的教育场所&#xff0c;而是无数自闭症儿童梦想启航的港湾&#xff0c;是他们感受爱、学习成长、绽放自我光芒的温馨家园。 自闭症&#xff0c;一个逐渐被…...

编程日记 2024/9/25 6:41:52

Java基础 — Java 虚拟机(上篇)

该文章属于Java进阶部分的JVM入门&#xff0c;本章讲述了JVM的历史、Java源代码到机器码的过程以及 Class字节码文件的内部结构等。 了解了这篇文章&#xff0c;能让你深入地了解JVM知识&#xff0c;保证在短时间内掌握JVM&#xff01; JVM 入门教程&#xff08;上篇&#xff0…...

编程日记 2024/9/25 6:36:48

C++ | Leetcode C++题解之第435题无重叠区间

题目&#xff1a; 题解&#xff1a; class Solution { public:int eraseOverlapIntervals(vector<vector<int>>& intervals) {if (intervals.empty()) {return 0;}sort(intervals.begin(), intervals.end(), [](const auto& u, const auto& v) {retur…...

编程日记 2024/9/25 6:33:44

AI编辑器CURSOR_CURSOR安装教程_使用AI进行编码的最佳方式。

一、CUROR简介 作为一个在代码海洋里遨游多年的老程序员&#xff0c;我得说&#xff0c;遇到CURSOR这位AI编辑器&#xff0c;就像是编程路上偶遇了一位智慧而又贴心的老友。 想象一下&#xff0c;夜深人静&#xff0c;你正埋头于那些错综复杂的逻辑和无尽的bug之中&#xff0…...

编程日记 2024/9/25 6:32:44

华为HarmonyOS灵活高效的消息推送服务(Push Kit) -- 10 推送实况窗消息

场景介绍 实况窗是一种帮助用户聚焦正在进行的任务，方便快速查看和即时处理的通知形态。有关实况窗简介、权限申请、开放场景、设计规范等说明，请参见Live View Kit简介。 通过Push Kit发送的实况窗消息支持三种操作类型，分别是： 实况窗消息操作类型 支持操作的场景类型 …...

编程日记 2024/9/25 6:31:43

探索 Go 语言程序实体：揭开神秘面纱

《探索 Go 语言程序实体：揭开神秘面纱》 在 Go 语言的世界里，程序实体是构建强大应用的基石。它们就像是魔法世界中的元素，各自有着独特的能力和用途。让我们一起深入探索 Go 语言程序实体的那些事儿。 一、什么是 Go 语言程序实体？ 在 Go 语言中，程序实体是指可以被命…...

编程日记 2024/9/25 6:30:42

深入理解端口、端口号及FTP的基本工作原理

FTP是TCP/IP的一种具体应用&#xff0c;FTP工作在OSI模型的第七层&#xff0c;TCP模型的第四层上&#xff0c;即应用层&#xff0c;FTP使用的是传输层的TCP传输而不是UDP&#xff0c;这样FTP客户在和服务器建立连接前就要经过一个被广为熟知的“三次握手”的过程&#xff0c;其…...

编程日记 2024/9/25 6:27:38

9.3 Linux_文件I/O_相关函数

打开与关闭 1、打开文件 int open(const char *pathname, int flags); int open(const char *pathname, int flags, mode_t mode);返回值&#xff1a;成功返回文件描述符&#xff0c;失败返回EOF pathname&#xff1a;文件路径 flags&#xff1a;标志&#xff0c;其中O_RDO…...

编程日记 2024/9/25 6:26:36

点亮一个LED灯

一、任务分析 一个灯怎么样才会亮&#xff1f; 图中的小灯两端接正负极&#xff0c;小灯就会点亮&#xff0c;但是我们不能主动控制灯的亮灭&#xff0c;于是加入了开关。开关打开断开小灯正极&#xff0c;小灯就会熄灭&#xff0c;反之则点亮。 在板子上的灯是如何连接的&…...

编程日记 2024/9/25 6:25:34

分布式框架 - ZooKeeper

一、什么是微服务架构 1、单体架构 顾名思义一个软件系统只部署在一台服务器上。 ​ 在高并发场景中&#xff0c;比如电商项目&#xff0c;单台服务器往往难以支撑短时间内的大量请求&#xff0c;聪明的架构师想出了一个办法提高并发量&#xff1a;一台服务器不够就加一台&am…...

编程日记 2024/9/25 6:24:33

8月份，AI图像生成领域web端产品排行榜及产品是做什么的

看全球用户量级别的Top12&#xff08;WEB&#xff09;。 排名 产品名 分类 8月访问量 上月对比 1 Canva AI Design Tool 711.9M 6.48% 2 Remove.bg AI Image Editor 72.79M 2.84% 3 Fotor AI Image Editor 15.62M 2.34% 4 Civitai Model Training & …...

编程日记 2024/9/25 6:22:31

Sqlite_Datetime列选择三月的行

In SQLite, use the strftime function to extract components from a date/time value SELECT * FROM table WHERE strftime(%m, datemonth) 03;strftime(‘%m’, datemonth): extracts the month part from the datemonth column as a string (with leading zeros for sing…...

编程日记 2024/9/25 6:19:29

spring里面内置的非常实用的工具

一 、请求数据记录 Spring Boot提供了一个内置的日志记录解决方案&#xff0c;通过 AbstractRequestLoggingFilter 可以记录请求的详细信息。 AbstractRequestLoggingFilter 有两个不同的实现类&#xff0c;我们常用的是 CommonsRequestLoggingFilter。 通过 CommonsRequestL…...

编程日记 2024/9/25 6:18:27

DS1202示波器功能详解与实战操作指南

1. DS1202示波器核心功能解析 第一次拿到DS1202示波器时&#xff0c;面对密密麻麻的按键和接口确实有点懵。但用久了就会发现&#xff0c;它的设计其实非常人性化。咱们先从最常用的垂直控制区说起——这是调节波形高低胖瘦的关键区域。 垂直位移按键就像给波形装了个电梯&…...

编程新知 2026/3/29 11:29:19

阿里小云KWS模型在STM32平台上的轻量化部署

阿里小云KWS模型在STM32平台上的轻量化部署 1. 为什么要在STM32上跑语音唤醒 很多开发者第一次听说要在STM32这种资源受限的微控制器上部署语音唤醒模型时&#xff0c;第一反应往往是&#xff1a;这可能吗&#xff1f;毕竟STM32通常只有几百KB的Flash和几十KB的RAM&#xff0…...

编程新知 2026/3/29 11:07:10

L1-012 计算指数、L1-013 计算阶乘和、 L1-014 简单题、 L1-015 跟奥巴马一起画方块、 L1-016 查验身份证

L1-012 计算指数、L1-013 计算阶乘和、L1-014 简单题、 L1-015 跟奥巴马一起画方块、 L1-016 查验身份证L1-012 计算指数题目描述输入格式输出格式输入样例输出样例解题思路C 代码双引号 " " 的作用拼接过程示例L1-013 计算阶乘和题目描述输入格式输出格式输入样例输…...

编程新知 2026/3/29 10:18:21

智能家居开发实战：用RxAndroidBle3实现多设备扫描与信号过滤（附完整Demo）

智能家居BLE开发进阶&#xff1a;RxAndroidBle3多设备扫描与动态过滤实战 在智能家居场景中&#xff0c;蓝牙低功耗&#xff08;BLE&#xff09;设备的高效扫描与筛选是构建稳定物联网系统的关键技术。本文将深入探讨如何利用RxAndroidBle3框架实现多设备并发扫描、动态信号过滤…...

编程新知 2026/3/29 9:22:02

终极指南：如何用BongoCat打造你的个性化桌面互动伙伴

终极指南&#xff1a;如何用BongoCat打造你的个性化桌面互动伙伴 【免费下载链接】BongoCat 让呆萌可爱的 Bongo Cat 陪伴你的键盘敲击与鼠标操作&#xff0c;每一次输入都充满趣味与活力&#xff01; 项目地址: https://gitcode.com/gh_mirrors/bong/BongoCat 你是否厌…...

编程新知 2026/3/29 9:08:00

内存暴涨却查无踪迹？Python对象生命周期管理的7个致命盲区，现在不看明天宕机！

第一章&#xff1a;Python智能体内存管理的核心原理Python智能体&#xff08;如基于LangChain、LlamaIndex构建的Agent&#xff09;在运行过程中并非仅依赖语言模型推理&#xff0c;其内存管理机制直接决定状态持久性、上下文感知能力与多轮交互一致性。核心在于Python对象生命…...

编程新知 2026/3/29 7:51:31

网盘下载加速工具：突破下载限制的直链提取技术详解

网盘下载加速工具&#xff1a;突破下载限制的直链提取技术详解 【免费下载链接】baiduyun 油猴脚本 - 一个免费开源的网盘下载助手 项目地址: https://gitcode.com/gh_mirrors/ba/baiduyun 你是否也曾遇到这样的情况&#xff1a;明明是自己辛苦上传的文件&#xff0c;下…...

编程新知 2026/3/29 7:25:24

Go gRPC 双向流通信实例

Go gRPC双向流通信实例解析 在现代分布式系统中&#xff0c;高效的双向通信是核心需求之一。gRPC作为Google开源的高性能RPC框架&#xff0c;支持双向流通信模式&#xff0c;允许客户端和服务端同时发送和接收多条消息。本文将以Go语言为例&#xff0c;介绍gRPC双向流通信的实…...

编程新知 2026/3/29 7:17:23

[技术解析]BetterJoy：Switch手柄电脑适配的原理与实战指南

[技术解析]BetterJoy&#xff1a;Switch手柄电脑适配的原理与实战指南 【免费下载链接】BetterJoy Allows the Nintendo Switch Pro Controller, Joycons and SNES controller to be used with CEMU, Citra, Dolphin, Yuzu and as generic XInput 项目地址: https://gitcode.…...

编程新知 2026/3/29 7:11:22

Video2X：用AI突破视频质量瓶颈的全栈解决方案

Video2X&#xff1a;用AI突破视频质量瓶颈的全栈解决方案 【免费下载链接】video2x A lossless video/GIF/image upscaler achieved with waifu2x, Anime4K, SRMD and RealSR. Started in Hack the Valley II, 2018. 项目地址: https://gitcode.com/GitHub_Trending/vi/video…...

编程新知 2026/3/29 7:09:22