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

前端知识——标签知识

news 文章来源：https://blog.csdn.net/qq_53256193/article/details/142381968 2025/5/15 9:40:05

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

计算机毕业设计 基于Python内蒙古旅游景点数据分析系统 Django+Vue 前后端分离 附源码 讲解 文档

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…...

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

centos7 docker部署nacos

1. 一行代码安装git yum -y install git 2. 下载最新版nacos源码&#xff1a; git clone https://github.com/nacos-group/nacos-docker.git 进入nacos-docker文件 cd nacos-docker 3.docker安装数据库Mysql8 按这个来就行&#xff0c;非常好 Docker安装mysql8-超详细、每…...

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

短视频矩阵源码/短视频矩阵系统搭建/源码开发知识分享

集星云推智剪获客系统&#xff0c;通过自主研发的高效发布模式&#xff0c;为企业提供稳定的接口与自动化操作&#xff0c;助力企业实现短视频矩阵的构建。该系统整合了十大核心功能&#xff0c;包括AI辅助文案撰写、视频剪辑、智能去重、内容拆分、文字转语音、文本提取、批量…...

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

Git使用教程-将idea本地文件配置到gitte上的保姆级别教程

&#x1f939;‍♀️潜意识起点&#xff1a;个人主页 &#x1f399;座右铭&#xff1a;得之坦然&#xff0c;失之淡然。 &#x1f48e;擅长领域&#xff1a;前端 是的&#xff0c;我需要您的&#xff1a; &#x1f9e1;点赞❤️关注&#x1f499;收藏&#x1f49b; 是我持…...

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

论文 | Reframing Instructional Prompts to GPTk’s Language

作者&#xff1a;Swaroop Mishra, Daniel Khashabi, Chitta Baral, Yejin Choi, Hannaneh Hajishirzi 论文摘要&#xff1a;语言模型 (LM) 更容易遵循哪些类型的指令提示&#xff1f; 我们通过进行广泛的实证分析来研究这个问题&#xff0c;这些分析阐明了成功指令提示的重要特…...

编程日记 2024/9/25 6:10:20

C++ Qt / VS2019 +opencv + onnxruntime 部署语义分割模型【经验2】

前序工作 C Qt / VS2019 opencv onnxruntime 部署语义分割模型【经验】 引言 前序工作中介绍了Pytorch模型如何转为ONNX格式&#xff0c;以及在Python中如何使用onnx模型 介绍了如何在VA或QT中配置Onnxruntime运行库 本文重点列出全部源代码及其使用 依赖库 onnxruntime…...

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

代码随想录算法训练营Day9

232.用栈实现队列 Collection——List——Vector类——Stack类 class MyQueue {Stack<Integer> stackIn;Stack<Integer> stackOut;public MyQueue() {stackInnew Stack();stackOutnew Stack();} public void push(int x) {stackIn.push(x);}public int pop() {no…...

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

2025秋招NLP算法面试真题(二十)-有监督微调基本概念

1.基本概念 1.微调方法是啥？如何微调？ 微调（Fine-tuning）是一种迁移学习的方法，用于在一个预训练模型的基础上，通过在特定任务的数据上进行有监督训练，来适应该任务的要求并提高模型性能。微调利用了预训练模型在大规模通用数据上学习到的语言知识和表示能力，将其迁移…...

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

使用宝塔部署项目在win上

项目部署 注意&#xff1a; 前后端部署项目&#xff0c;需要两个域名&#xff08;二级域名&#xff0c;就是主域名结尾的域名&#xff0c;需要在主域名下添加就可以了&#xff09;&#xff0c;前端一个&#xff0c;后端一个 思路&#xff1a;访问域名就会浏览器会加载前端的代…...

编程日记 2024/9/25 6:05:14

[大语言模型-论文精读] Diffusion Model技术-通过时间和空间组合扩散模型生成复杂的3D人物动作

​​​​​​Generation of Complex 3D Human Motion by Temporal and Spatial Composition of Diffusion Models L Mandelli, S Berretti - arXiv preprint arXiv:2409.11920, 2024 通过时间和空间组合扩散模型生成复杂的3D人物动作 摘要 本文提出了一种新的方法&#xff0…...

编程日记 2024/9/25 6:04:12