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

前端知识——标签知识

news 2025/7/15 10:17:39

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

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2025/7/12 20:53:34

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2025/7/14 8:19:18

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2025/7/13 18:57:32

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2025/7/14 17:21:49

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

编程新知 2025/7/9 22:43:54

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/7/9 16:47:32

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/6/25 4:08:42

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

编程新知 2025/7/14 21:42:19

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

编程新知 2025/7/15 5:59:55

ZYNQ学习记录FPGA(一)ZYNQ简介

一、知识准备 1.一些术语,缩写和概念&#xff1a; 1&#xff09;ZYNQ全称&#xff1a;ZYNQ7000 All Pgrammable SoC 2&#xff09;SoC:system on chips(片上系统)&#xff0c;对比集成电路的SoB&#xff08;system on board&#xff09; 3&#xff09;ARM&#xff1a;处理器…...

编程新知 2025/7/15 3:26:40