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

前端知识——标签知识

news 2026/2/8 17:52:21

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

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2026/2/7 19:53:11

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2026/2/3 22:50:06

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

编程新知 2026/1/21 12:29:04

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2026/2/6 22:20:51

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

编程新知 2026/1/31 2:59:25

解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

编程新知 2025/12/15 0:46:42

认识CMake并使用CMake构建自己的第一个项目

1.CMake的作用和优势 跨平台支持&#xff1a;CMake支持多种操作系统和编译器&#xff0c;使用同一份构建配置可以在不同的环境中使用 简化配置&#xff1a;通过CMakeLists.txt文件&#xff0c;用户可以定义项目结构、依赖项、编译选项等&#xff0c;无需手动编写复杂的构建脚本…...

编程新知 2026/2/7 19:54:51

9-Oracle 23 ai Vector Search 特性 知识准备

很多小伙伴是不是参加了 免费认证课程&#xff08;限时至2025/5/15&#xff09; Oracle AI Vector Search 1Z0-184-25考试&#xff0c;都顺利拿到certified了没。 各行各业的AI 大模型的到来&#xff0c;传统的数据库中的SQL还能不能打&#xff0c;结构化和非结构的话数据如何和…...

编程新知 2026/2/7 23:29:43

redis和redission的区别

Redis 和 Redisson 是两个密切相关但又本质不同的技术&#xff0c;它们扮演着完全不同的角色&#xff1a; Redis: 内存数据库/数据结构存储 本质&#xff1a; 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能&#xff1a; 提供丰…...

编程新知 2025/11/6 1:34:07

React父子组件通信：Props怎么用？如何从父组件向子组件传递数据？

系列回顾&#xff1a; 在上一篇《React核心概念&#xff1a;State是什么&#xff1f;》中&#xff0c;我们学习了如何使用useState让一个组件拥有自己的内部数据&#xff08;State&#xff09;&#xff0c;并通过一个计数器案例&#xff0c;实现了组件的自我更新。这很棒&#…...

编程新知 2025/9/6 3:35:30