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

前端知识——标签知识

news 2025/9/18 23:36:17

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

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2025/9/17 11:41:14

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2025/9/18 12:56:43

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2025/9/18 12:55:53

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2025/9/12 13:41:18

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

编程新知 2025/9/13 0:33:11

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2025/9/18 12:51:36

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

编程新知 2025/9/1 6:48:07

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2025/9/4 2:37:46

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

编程新知 2025/9/3 11:05:24

FFmpeg：Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

编程新知 2025/9/4 2:23:45