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

html学习第2篇---标签(1)

html学习第2篇---标签

  • 1、标题标签h1---h6
  • 2、段落标签p
  • 3、换行标签br
  • 4、文本格式化标签
  • 5、div标签和span标签
  • 6、图像标签img
    • 6.1、图像属性
    • 6.2、相对路径、绝对路径
  • 7、超链接标签a
    • 7.1、属性
    • 7.2、分类
  • 8、注释标签和特殊字符
    • 8.1、注释
    • 8.2、特殊字符

1、标题标签h1—h6

为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML 提供了6个等级的网页标题。

标签语义:作为标题使用,并且依据重要性递减。

特点:

  1. 加了标题的文字会变的加粗,字号也会依次变大。
  2. 一个标题独占一行。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>这是h1标签</h1>
<h2>这是h2标签</h2>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
<h5>这是h5标签</h5>
<h6>这是h6标签</h6>
</body>
</html>

在这里插入图片描述

2、段落标签p

p标签用于定义段落,它可以将整个网页分为若干个段落。

特点:

  1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
  2. 段落和段落之间保有空隙。
<body>
<p>我与父亲不相见已二年余了,我最不能忘记的是他的背影。</p>
<p>那年冬天,祖母死了,父亲的差使⑴也交卸了,正是祸不单行的日子。我从北京到徐州,打算跟着父亲奔丧⑵回家。到徐州见着父亲,看见满院狼藉⑶的东西,又想起祖母,不禁簌簌地流下眼泪。父亲说:“事已如此,不必难过,好在天无绝人之路!”
</p>
<p>回家变卖典质⑷,父亲还了亏空;又借钱办了丧事。这些日子,家中光景很是惨澹⑸,一半为了丧事,一半为了父亲赋闲⑹。丧事完毕,父亲要到南京谋事,我也要回北京念书,我们便同行。
</p>
<p>到南京时,有朋友约去游逛,勾留⑺了一日;第二日上午便须渡江到浦口,下午上车北去。父亲因为事忙,本已说定不送我,叫旅馆里一个熟识的茶房⑻陪我同去。他再三嘱咐茶房,甚是仔细。但他终于不放心,怕茶房不妥帖⑼;颇踌躇⑽了一会。其实我那年已二十岁,北京已来往过两三次,是没有什么要紧的了。他踌躇了一会,终于决定还是自己送我去。我再三劝他不必去;他只说:“不要紧,他们去不好!”</p>
</body>

在这里插入图片描述

3、换行标签br

在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望某段文本强制换行显示,就需要使用换行标签。

特点:

  1. br标签是单标签
  2. 标签只是简单的开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。
<body>
<p>我与父亲不相见已二年余了,<br/>我最不能忘记的是他的背影。</p>
</body>

在这里插入图片描述

4、文本格式化标签

标签语义:突出重要性,比普通文字跟重要

语义标签说明
加粗<strong></strong>或<b></b>更推荐使用<strong>标签加粗语义更强烈
倾斜<em></em>或<i></i>更推荐使用<em>标签加粗语义更强烈
删除线<del></del>或<s></s>更推荐使用<del>标签加粗语义更强烈
下划线<ins></ins>或<u></u>更推荐使用<ins>标签加粗语义更强烈
<body>
<p>我与父亲<strong>不相见已二年余了</strong>,我最<b>不能忘记的是他的背影</b></p>
<p>我与父亲<em>不相见已二年余了</em>,我最<i>不能忘记的是他的背影</i></p>
<p>我与父亲<del>不相见已二年余了</del>,我最<s>不能忘记的是他的背影</s></p>
<p>我与父亲<ins>不相见已二年余了</ins>,我最<u>不能忘记的是他的背影</u></p>
</body>

在这里插入图片描述

5、div标签和span标签

div标签和span标签是没有语义的,它们就是一个盒子,用来装内容

特点

  1. div标签是用来布局的,但是一行只能方一个div盒子
  2. span标签是用来布局的,一行可以多个span
<body>
<div>这是div标签,一个人独占一行</div>
<div>这是div标签,一个人独占一行</div><span>这是span标签,不换行</span>
<span>这是span标签,不换行</span></body>

在这里插入图片描述

6、图像标签img

图像标签img是单标签。
src是img标签的必须属性,它用于指定图像文件的路径和文件名。所谓属性,简单理解就是属于这个图像标签的特性。

6.1、图像属性

属性属性值说明
src图片路径必须属性
alt文本替换文本,图像不能显示时锁展示的文字
title文本提示文本。的那鼠标放到图像上时显示的文字
width像素设置图像的宽度
height像素设置图像的高度
border像素设置图像的边框粗细
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h4>图片标签的使用:</h4>
<img src="../img/noData.png" alt="" title="鼠标放在图片上提示的文字"><h4>图像显示不出来的时候用文字替换</h4>
<img src="" alt="暂无数据时的图片"><h4>给图片设置宽高度</h4>
<img src="../img/noData.png" height="100" width="100"><h4>给图片设置边框</h4>
<img src="../img/noData.png" height="100" border="10">
</body>
</html>

在这里插入图片描述

6.2、相对路径、绝对路径

  1. 相对路径:以应用文件所在位置为参考基础,而建立出的目录路径;
分类符号说明
同一级路径图像文件位于HTML文件同一级,如 xxx.gif
下一级路径/图像文件位于HTML文件下一级,如 images/xxx.gif
上一级路径…/图像文件位于HTML文件上一级,如…/xxx.gif
  1. 绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径

7、超链接标签a

语法:<a href="跳转目标" target="目标窗口弹出方式“> </a>

7.1、属性

属性1作用
href用于指定链接目标的url地址, (必须属性)当为标签应用href属性时,它就具有了超链接的功能
target用于指定链接页面的打开方式,其中,self为默认值,_blank为在新窗口中打开方式。

7.2、分类

  1. 外部链接
<h1>外部链接</h1>
<span>target:打开窗口的方式,默认是_self:当前窗口打开,_blank:新窗口打开页面</span>
<a href="https://www.baidu.com"  target="_blank">前往百度(打开一个新窗口)</a>
  1. 内部链接

网站内部页面之间的相互连接

<h1>内部链接</h1>
<a href="01标题标签.html"  target="_blank">前往内部页面(打开一个新窗口)</a>
  1. 空链接

如果当时没有确定链接目标时,<a href="#"></a>

<h1>空链接</h1>
<a href="#">我的地址</a>
  1. 下载链接

如果href里面地址是一个文件或者压缩包,会下载这个文件

<h1>下载地址</h1>
<a href="noData.zip">点击下载文件</a>
  1. 网页元素链接

在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.

<h1>网页元素链接</h1>
<a href="https://www.baidu.com" ><img src="../img/noData.png" alt=""></a>
  1. 锚点链接

当我们点击链接,可以快速定位到页面中的某个位置

  • 在链接文本的href属性中,设置属性值为#名字的形式,如
<a href="#two">点击跳转到外部链接</a>
  • 找到目标位置标签,在里面添加一个id属性=刚才的名字,如
<h1 id="two">外部链接</h1>
<h1 id="href">外部链接</h1>
<span>target:打开窗口的方式,默认是_self:当前窗口打开,_blank:新窗口打开页面</span>
<a href="https://www.baidu.com"  target="_blank">前往百度(打开一个新窗口)</a><h1>网页元素连接</h1>
<a href="https://www.baidu.com" ><img src="../img/noData.png" alt=""></a>

在这里插入图片描述
在这里插入图片描述

8、注释标签和特殊字符

8.1、注释

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。

注释以“<!--”开头,以“-->”结束

8.2、特殊字符

在HTML页面中,一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面的字符来替代。

特殊字符描述字符的代码
 空格符&nbsp;
<小于号&lt;
‘>’大于号&gt;
&和号&amp;
人民币&yen;
©版权&copy;
®注册商标&reg;
°摄氏度&deg;`
±正负号&plusmn
×乘号&times;
÷除号&divide;
²平方2(上标2)&sup2;
³立方3(上标3)&sup3;
<p>空格符:&nbsp;结束啦!</p>
<p>小于号:&lt;</p>
<p>大于号:&gt;</p>
<p>和号:&amp;</p>
<p>人民币:&yen;</p>
<p>版权:&copy;</p>
<p>注册商标:&reg;</p>
<p>摄氏度:&deg;</p>
<p>正负号:&plusmn;</p>
<p>乘号:&times;</p>
<p>除号:&divide;</p>
<p>平方2:&sup2;</p>
<p>立方3:&sup3;</p>

在这里插入图片描述

相关文章:

html学习第2篇---标签(1)

html学习第2篇---标签 1、标题标签h1---h62、段落标签p3、换行标签br4、文本格式化标签5、div标签和span标签6、图像标签img6.1、图像属性6.2、相对路径、绝对路径 7、超链接标签a7.1、属性7.2、分类 8、注释标签和特殊字符8.1、注释8.2、特殊字符 1、标题标签h1—h6 为了使网…...

爬虫逆向实战(二十四)--某鸟记录中心

一、数据接口分析 主页地址&#xff1a;某鸟记录中心 1、抓包 通过抓包可以发现数据接口是front/record/search/page 2、判断是否有加密参数 请求参数是否加密&#xff1f; 通过查看“载荷”模块可以发现&#xff0c;请求参数是加密的 请求头是否加密&#xff1f; 通过查…...

【操作系统】中断和异常

中断的作用 CPU上会执行两种程序&#xff1a;内核程序和应用程序 在适合的情况下&#xff0c;操作系统内核会把CPU的使用权主动让给应用程序&#xff0c;“中断”是让操作系统内核夺回CPU使用权的唯一途径&#xff08;用户态转内核态&#xff09;。 中断技术保证了并发。 中…...

锁策略、原子编程CAS 和 synchronized 优化过程

前言 锁冲突&#xff1a;两个线程获取一把锁&#xff0c;一个线程阻塞等待&#xff0c;一个线程加锁成功。 目录 前言 一、锁策略 &#xff08;一&#xff09;乐观锁和悲观锁 &#xff08;二&#xff09;重量级锁和轻量级锁 &#xff08;三&#xff09;自旋锁和挂起等待…...

【WINAPI】文件读写操作问题

问题描述 在利用WINAPI中的WriteFile和ReadFile函数进行文件读写操作时&#xff0c;出现无法正常读写文件报错。 分析问题 查阅WINAPI源码&#xff0c;查看参数列表各个参数的数据类型。 发现其中第二个参数&#xff0c;也就是需要写进文件的真实数据&#xff0c;其数据类型…...

【LeetCode-中等题】148. 排序链表

文章目录 题目方法一&#xff1a;集合排序&#xff08;核心是内部的排序&#xff09;方法二&#xff1a; 优先队列&#xff08;核心也是内部的排序&#xff09;方法三&#xff1a;归并排序&#xff08;带递归&#xff09; 从上往下方法四&#xff1a;归并排序&#xff08;省去递…...

Ceph EC pg backfill run

pg的backfill请求也是发送到osd的work queue中与业务IO一起竞争。 PGRecovery::run backfill 57 void PGRecovery::run( 58 OSD *osd, 59 OSDShard *sdata, 60 PGRef& pg, 61 ThreadPool::TPHandle &handle) 62 { 63 osd->do_recovery(pg.get(), epoch_queued…...

腾讯云服务器地域怎么选?广州上海北京?

腾讯云服务器地域有什么区别&#xff1f;怎么选择比较好&#xff1f;地域选择就近原则&#xff0c;距离地域越近网络延迟越低&#xff0c;速度越快。关于地域的选择还有很多因素&#xff0c;地域节点选择还要考虑到网络延迟速度方面、内网连接、是否需要备案、不同地域价格因素…...

Apple Configurator iphone ipad 设备管控 描述文件使用方法

一、准备 App Store 下载安装 Apple Configurator 二、Apple Configurator 注册组织&#xff0c; -----------这个组织可以是个人&#xff0c;或者其它组织导出-------再导入进来&#xff1a; 三、描述文件配置&#xff1a;“” 根据管控需求进行配置 “” 四、使用 Ap…...

Linux 管道(pipe)用法

在 Linux 中&#xff0c;管道&#xff08;pipe&#xff09;是一种特殊的机制&#xff0c;用于连接一个进程的标准输出到另一个进程的标准输入。通过使用管道&#xff0c;可以将一个命令的输出直接传递给另一个命令进行处理&#xff0c;实现了进程之间的通信和数据传输。 管道的…...

元素隐式具有 “any“ 类型,因为类型为 “string“ 的表达式不能用于索引类型

今天在写ts文件的过程中&#xff0c;我遍历了一个对象&#xff0c;然后取值的时候发现爆红,如下图&#x1f447; 经过我一通排查&#xff08;原因我对ts也不是很熟练&#xff09;&#xff0c;了解到大致意思是说key的值类型不是string类型&#xff0c;在javascript中是默认给你…...

34、springboot切换内嵌Web服务器(Tomcat服务器)与 生成SSL证书来把项目访路径从 HTTP 配置成 HTTPS

知识点1&#xff1a;springboot切换内嵌Web服务器&#xff08;Tomcat服务器&#xff09; 知识点2&#xff1a;生成SSL证书来把项目访路径从 HTTP 配置成 HTTPS ★ Spring Boot默认的Web服务器&#xff08;Tomcat&#xff09; ▲ 基于Servlet的应用&#xff08;使用Spring MV…...

3种CSS实现背景图片全屏铺满自适应的方式

01 margin:0px; background: url(images/bg.png) no-repeat; background-size:100% 100%; background-attachment:fixed; url(images/beijing.png)——图片路径的位置&#xff1b; no-repeat—— 图片不重复&#xff1b; center 0px——center是距离页面左边的定位&#xf…...

M1 Pro 利用docker 搭建pytho2的开发环境,以vscode连接开发为例

使用 M1 Pro &#xff08;不支持python2的安装&#xff09;开发&#xff0c;需要使用 Python 2.7 的环境&#xff0c;在使用 pyenv 安装 Python 2 时遇到了各种奇怪的问题。最终&#xff0c;我决定使用 Docker 搭建开发环境&#xff0c;并使用 VS Code 连接到本地容器。以下是详…...

MySQL概述,架构原理

一.MySQL简介 MySQL是一个关系型数据库管理系统&#xff0c;由瑞典的MySQL AB公司开发&#xff0c;后被oracle公司收购&#xff0c;MySQL是当下最流行的关系型数据库管理系统之一&#xff0c;在WEB应用方面&#xff0c;MySQL是最好的RDBMS&#xff08;Relational Database Man…...

Three.js实现模型,模型材质可拖拽效果 DragControls

Three.js提供了一个拖拽的API DragControls 用于实现模型材质拖拽效果 DragControls&#xff1a;是一个用于在Three.js中实现拖拽控制的辅助类。它简化了在Three.js中实现拖拽物体的过程。 DragControls的构造函数接受三个参数&#xff1a; objects&#xff1a;一个包含需要…...

机器学习笔记之优化算法(二十)牛顿法与正则化

机器学习笔记之优化算法——再回首:牛顿法与正则化 引言回顾&#xff1a;经典牛顿法及其弊端牛顿法&#xff1a;算法步骤迭代过程中可能出现的问题正则化 Hessian Matrix \text{Hessian Matrix} Hessian Matrix与相应问题 引言 本节我们介绍经典牛顿法在训练神经网络过程中的迭…...

【Go 基础篇】深入探索:Go语言中的切片遍历与注意事项

嗨&#xff0c;Go语言学习者&#xff01;在我们的编程旅程中&#xff0c;切片&#xff08;Slice&#xff09;是一个极其重要的工具。它可以帮助我们处理各种类型的数据&#xff0c;从而让我们的代码更加灵活和高效。本文将围绕Go语言中切片的遍历方法以及在遍历时需要注意的事项…...

一些经典的SQL语句

查sql中as的用法搜索到的一些经典的sql语句 convert(2008-11-20 18:03:50) In:等值连接&#xff0c;用来查找多表相同字段的记录 Not In:非等值连接&#xff0c;用来查找不存在的记录 Inner join:内连接&#xff0c;主要用来查找都符合条件的记录 Left join:左连接&#xff…...

〔018〕Stable Diffusion 之 批量替换人脸 篇

✨ 目录 &#x1f388; 下载插件&#x1f388; 插件基础使用&#x1f388; 基础使用效果&#x1f388; 批量处理图片&#x1f388; 多人脸部替换 &#x1f388; 下载插件 如果重绘图片的时候&#xff0c;你只想更换人物面部的话&#xff0c;可以参考这篇文章扩展地址&#xff…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

怎么让Comfyui导出的图像不包含工作流信息,

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

WPF八大法则:告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

Spring Security 认证流程——补充

一、认证流程概述 Spring Security 的认证流程基于 过滤器链&#xff08;Filter Chain&#xff09;&#xff0c;核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤&#xff1a; 用户提交登录请求拦…...

【iOS】 Block再学习

iOS Block再学习 文章目录 iOS Block再学习前言Block的三种类型__ NSGlobalBlock____ NSMallocBlock____ NSStackBlock__小结 Block底层分析Block的结构捕获自由变量捕获全局(静态)变量捕获静态变量__block修饰符forwarding指针 Block的copy时机block作为函数返回值将block赋给…...

数据分析六部曲?

引言 上一章我们说到了数据分析六部曲&#xff0c;何谓六部曲呢&#xff1f; 其实啊&#xff0c;数据分析没那么难&#xff0c;只要掌握了下面这六个步骤&#xff0c;也就是数据分析六部曲&#xff0c;就算你是个啥都不懂的小白&#xff0c;也能慢慢上手做数据分析啦。 第一…...

Neo4j 完全指南:从入门到精通

第1章&#xff1a;Neo4j简介与图数据库基础 1.1 图数据库概述 传统关系型数据库与图数据库的对比图数据库的核心优势图数据库的应用场景 1.2 Neo4j的发展历史 Neo4j的起源与演进Neo4j的版本迭代Neo4j在图数据库领域的地位 1.3 图数据库的基本概念 节点(Node)与关系(Relat…...