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>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/105402.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SpringBoot案例-文件上传

SpringBoot案例-文件上传

目录 简介 文件上传前端页面三要素 服务端接收文件 小结 本地储存 实现 代码优化 小结 阿里云OSS 阿里云 阿里云OSS 使用第三方服务--通用思路 准备工作 参照官方SDK代码&#xff0c;编写入门程序 集成使用 阿里云OSS-使用步骤 阿里云OSS使用步骤 参照SDK编写入…
阅读更多...
【C++11】future和async等

【C++11】future和async等

C11的future和async等关键字 1.async和future的概念 std::async 和 std::future 是 C11 引入的标准库功能&#xff0c;用于实现异步编程&#xff0c;使得在多线程环境中更容易处理并行任务。它们可以帮助你在不同线程中执行函数&#xff0c;并且能够方便地获取函数的结果。 在…
阅读更多...
两个步骤让图片动起来！

两个步骤让图片动起来！

在当今数字时代&#xff0c;动态图片已经成为了网页设计和移动应用设计的标配之一。动态图片能够吸引用户的注意力&#xff0c;提高用户体验和页面交互性。那么&#xff0c;图片怎么动起来&#xff1f;有什么好用的方法呢&#xff1f;下面我们来一起探讨一下。 通常我们认知的动…
阅读更多...
java八股文面试[JVM]——JVM内存结构2

java八股文面试[JVM]——JVM内存结构2

知识来源&#xff1a; 【2023年面试】JVM内存模型如何分配的_哔哩哔哩_bilibili
阅读更多...
2023中国算力大会 | 中科驭数加入DPU推进计划，探讨DPU如何激活算网融合新基建

2023中国算力大会 | 中科驭数加入DPU推进计划，探讨DPU如何激活算网融合新基建

8月18日&#xff0c;由工业和信息化部、宁夏回族自治区人民政府共同主办的2023中国算力大会在宁夏银川隆重召开。作为DPU算力基础设施领军企业&#xff0c;中科驭数产品运营部副总经理曹辉受邀在中国信通院承办的算网融合分论坛发表主题演讲《释放极致算力 DPU激活算网融合新基…
阅读更多...
Vue使用Element的表格Table显示树形数据，多选框全选无法选中全部节点

Vue使用Element的表格Table显示树形数据，多选框全选无法选中全部节点

使用Element的组件Table表格&#xff0c;当使用树形数据再配合上多选框&#xff0c;如下&#xff1a; 会出现一种问题&#xff0c;点击左上方全选&#xff0c;只能够选中一级树节点&#xff0c;子节点无法被选中&#xff0c;如图所示&#xff1a; 想要实现点击全选就选中所有的…
阅读更多...
嵌入式学习之linux

嵌入式学习之linux

今天&#xff0c;主要对linux文件操作原理进行了学习&#xff0c;主要学习的内容就是对linux文件操作原理进行理解。写的代码如下&#xff1a;
阅读更多...
CSS3盒模型+flex

CSS3盒模型+flex

1.盒模型 标准盒模型: wwidthpaddingborderhheightpaddingborder 怪异盒模型(ie盒模型) wwidth包含了(paddingborder)hheight包含了(paddingborder) 2.CSS3弹性盒(重点新版弹性盒) 弹性盒: 设置为弹性盒后,父元素为容器,子元素为项目弹性盒中存在两根轴,默认水平为主轴,垂…
阅读更多...
成集云 | 畅捷通T+cloud连接器自动同步财务费用单至畅捷通 | 解决方案

成集云 | 畅捷通T+cloud连接器自动同步财务费用单至畅捷通 | 解决方案

源系统成集云目标系统 方案介绍 财务管理作为企业管理中重要的组成部分&#xff0c;在企业的发展和成长中扮演着重要角色&#xff0c;成集云以钉钉费用单OA审批与畅捷通TCloud系统为例&#xff0c;与钉钉连接器深度融合&#xff0c;通过数据处理和字段匹配实现了费用…
阅读更多...
6.oracle中listagg函数使用

6.oracle中listagg函数使用

1. 作用 可以实现行转列&#xff0c;将多列数据聚合为一列&#xff0c;实现数据的压缩 2. 语法 listagg(measure_expr&#xff0c;delimiter) within group ( order by order_by_clause); 解释&#xff1a; measure_expr可以是基于任何列的表达式 delimiter分隔符&#xff0c…
阅读更多...
线性代数的学习和整理8：行列式相关

线性代数的学习和整理8：行列式相关

目录 1 从2元一次方程组求解说起 1.1 直接用方程组消元法求解 1.2 有没有其他方法呢&#xff1f;有&#xff1a;比如2阶行列式方法 1.3 3阶行列式 2 行列式的定义 2.1 矩阵里的方阵 2.2 行列式定义&#xff1a;返回值为标量的一个函数 2.3 行列式的计算公式 2.4 克拉…
阅读更多...
打印所有声母，韵母组合汉语拼音并显示到表格中

打印所有声母，韵母组合汉语拼音并显示到表格中

最近辅导孩子学习语文&#xff1a;声母&#xff0c;韵母。现在将其组合起来。打印所有拼音集合 以下是整理出的有关拼音的内容。 声母&#xff08;23个&#xff09;&#xff1a; b、p、m、f、d、t、n、l、g、k、h、j、q、x、zh、ch、sh、r、z、c、s、y、w。 韵母&#xff0…
阅读更多...
《华为认证》交换堆叠介绍

《华为认证》交换堆叠介绍

定义 堆叠是指将多台支持堆叠特性的交换机通过堆叠线缆连接在一起&#xff0c;从逻辑上变成一台交换设备&#xff0c;作为一个整体参与数据转发。如图1所示&#xff0c;SwitchA与SwitchB通过堆叠线缆连接后组成堆叠系统。 图1 堆叠示意图 应用场景 提高可靠性 堆叠系统多台成…
阅读更多...
python连接PostgreSQL 数据库

python连接PostgreSQL 数据库

执行如下命令安装 pip3 install psycopg2 python代码 Author: tkhywang 2810248865qq.com Date: 2023-08-21 11:42:17 LastEditors: tkhywang 2810248865qq.com LastEditTime: 2023-08-21 11:51:56 FilePath: \PythonProject02\PostgreSQL 数据库.py Description: 这是默认设置…
阅读更多...
用户端Web自动化测试_L3

用户端Web自动化测试_L3

目录&#xff1a; 浏览器复用Cookie 复用pageobject设计模式异常自动截图测试用例流程设计电子商务产品实战 1.浏览器复用 复用浏览器简介 为什么要学习复用浏览器&#xff1f; 自动化测试过程中&#xff0c;存在人为介入场景提高调试UI自动化测试脚本效率 复用已有浏览…
阅读更多...
docker的资源控制及docker数据管理

docker的资源控制及docker数据管理

文章目录 docker的资源控制及docker数据管理一.docker的资源控制1.CPU 资源控制1.1 资源控制工具1.2 cgroups有四大功能1.3 设置CPU使用率上限1.4 进行CPU压力测试1.5 设置50%的比例分配CPU使用时间上限1.6 设置CPU资源占用比&#xff08;设置多个容器时才有效&#xff09;1.6.…
阅读更多...
Docker常用操作命令(二)

Docker常用操作命令(二)

Docker常用操作命令(二) 11、进入容器 docker exec -it 容器名称or容器ID /bin/bash [rootzch01 ~]# docker exec -it 973ff3caff19 /bin/bash 退出容器 root973ff3caff19:/# exit 12、查看容器中的进程 docker top 容器名称or容器ID [rootzch01 ~]# docker top 973ff3c…
阅读更多...
概率密度函数 累积分布函数

概率密度函数 累积分布函数

概率密度函数&#xff1a;是指想要求得面积的图形表达式&#xff0c;注意只是表达式&#xff0c;要乘上区间才是概率&#xff0c;所以概率密度并不是概率&#xff0c;而是概率的分布程度。 为什么要引入概率密度&#xff0c;可能是因为连续变量&#xff0c;无法求出某个变量的…
阅读更多...
async/await 编程理解

async/await 编程理解

博客主要是参考 Asynchronous Programming in Rust &#xff0c;会结合简单的例子&#xff0c;对 async 和 await 做比较系统的理解&#xff0c;如何使用 async 和 await 是本节的重点。 async 和 await 主要用来写异步代码&#xff0c;async 声明的代码块实现了 Future 特性&a…
阅读更多...
java八股文面试[JVM]——元空间

java八股文面试[JVM]——元空间

JAVA8为什么要增加元空间 为什么要移除永久代&#xff1f; 知识来源&#xff1a; 【2023年面试】JVM8为什么要增加元空间_哔哩哔哩_bilibili
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023