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.mzph.cn/news/51670.shtml

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

相关文章

【Unity学习笔记】DOTween（2）官方案例

【Unity学习笔记】DOTween（2）官方案例

本文中大部分内容学习来自DOTween官方文档 此处无法展示动图&#xff08;懒得录GIF&#xff09;&#xff0c;请下载官方案例场景自行学习 文章目录 场景1 基本补间场景2 动态补间场景3 Shader修改场景4 路径拟合运动场景5 序列播放场景6 UGUI 场景1 基本补间 案例一展示了最基…
阅读更多...
AMBA总线协议（0）——目录与传送门

AMBA总线协议（0）——目录与传送门

一、AMBA总线协议 Arm高级微控制器总线架构&#xff08;Advanced Microcontroller Bus Architecture&#xff0c;AMBA&#xff09;是一种开放式标准片上互联规范&#xff0c;用于连接和管理片上系统&#xff08;System on Chip,Soc&#xff09;中的功能块。 AMBA是一种广泛用于…
阅读更多...
【DevOps视频笔记】4.Build 阶段 - Maven安装配置

【DevOps视频笔记】4.Build 阶段 - Maven安装配置

一、Build 阶段工具 二、Operate阶段工具 三、服务器中安装 四、修改网卡信息 五、安装 jdk 和 maven Stage1 : 安装 JDK Stage 2 : 安装 Maven 2-1 : 更换文件夹名称 2-2 : 替换配置文件 settings.xml- 2-3 : 修改settings.xml详情 A. 修改maven仓库地址 - 阿里云 B…
阅读更多...
CentOS系统环境搭建（十七）——elasticsearch设置密码

CentOS系统环境搭建（十七）——elasticsearch设置密码

centos系统环境搭建专栏&#x1f517;点击跳转 elasticsearch设置密码 没有密码是很不安全的一件事&#x1f62d; 文章目录 elasticsearch设置密码1.设置密码2.登录elasticsearch3.登录kibana4.登录elasticsearch-head 1.设置密码 关于Elasticsearch的安装请看CentOS系统环境搭…
阅读更多...
适配小程序隐私保护指引设置

适配小程序隐私保护指引设置

由于小程序发布了一个公告&#xff0c;那么接下来就是怎么改简单的问题了。毕竟不太想大的改动历史上的代码。尽量简单的适配隐私策略就可以了。 整体思路也是参考现在App普遍的启动就让用户同意隐私策略&#xff0c;不同意不让用&#xff0c;同意了之后才能够继续使用。 公告…
阅读更多...
计算机网络 QA

计算机网络 QA

DNS 的解析过程 浏览器缓存。当用户通过浏览器访问某域名时&#xff0c;浏览器首先会在自己的缓存中查找是否有该域名对应的 IP 地址&#xff08;曾经访问过该域名并且没有清空缓存&#xff09;系统缓存。当浏览器缓存中无域名对应的 IP 地址时&#xff0c;会自动检测用户计算机…
阅读更多...
docker搭建owncloud，Harbor，构建镜像

docker搭建owncloud，Harbor，构建镜像

1、使用mysql:5.6和 owncloud 镜像&#xff0c;构建一个个人网盘。 拉取镜像 docker pull owncloud docker pull mysql:5.6 2、安装搭建私有仓库 Harbor 1.下载docker-compose 2.安装harbor 3.编辑 harbor.yml文件 使用./intall.sh安装 4.登录 3、编写Dockerfile制作Web应用系…
阅读更多...
【学习FreeRTOS】第13章——FreeRTOS队列

【学习FreeRTOS】第13章——FreeRTOS队列

1.队列简介 队列是任务到任务、任务到中断、中断到任务数据交流的一种机制&#xff08;消息传递&#xff09; FreeRTOS基于队列&#xff0c; 实现了多种功能&#xff0c;其中包括队列集、互斥信号量、计数型信号量、二值信号量、 递归互斥信号量&#xff0c;因此很有必要深入了…
阅读更多...
Linux CentOS7系统，抓取http协议的数据包

Linux CentOS7系统，抓取http协议的数据包

使用 tcpdump 命令 1.首先确认是否安装 [rootlocalhost ~]# which tcpdump /usr/bin/which: no tcpdump in (/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin) [rootlocalhost ~]#我这里没有安装 1.1 安装 tcpdump yum install tcpdump 安装成功如下&#xf…
阅读更多...
【C++ 学习 ⑯】- 继承（上）

【C++ 学习 ⑯】- 继承（上）

目录 一、继承的概念和定义 1.1 - 概念 1.2 - 定义 二、继承时的对象内存模型 三、向上转型和向下转型 四、继承时的名字遮蔽问题 4.1 - 有成员变量遮蔽时的内存分布 4.2 - 重名的基类成员函数和派生类成员函数不构成重载 一、继承的概念和定义 1.1 - 概念 C 中的继承…
阅读更多...
【AWS】创建IAM用户；无法登录IAM用户怎么办？错误提示：您的身份验证信息错误，请重试（已解决）

【AWS】创建IAM用户；无法登录IAM用户怎么办？错误提示：您的身份验证信息错误，请重试（已解决）

目录 0.背景问题分析 1.解决步骤 0.背景问题分析 windows 11 &#xff0c;64位 我的问题情景&#xff1a; 首先我创建了aws的账户&#xff0c;并且可以用ROOT用户登录&#xff0c;但是在登录时选择IAM用户&#xff0c;输入ROOT的名字和密码&#xff0c;就会提示【您的身份验证…
阅读更多...
【分布式技术专题】「OSS中间件系列」从0到1的介绍一下开源对象存储MinIO技术架构

【分布式技术专题】「OSS中间件系列」从0到1的介绍一下开源对象存储MinIO技术架构

MinIO背景介绍 MinIO创始者是Anand Babu Periasamy, Harshavardhana&#xff08;戒日王&#xff09;等人&#xff0c; Anand是GlusterFS的初始开发者、Gluster公司的创始人与CTO&#xff0c;Harshavardhana曾经是GlusterFS的开发人员&#xff0c;直到2011年红帽收购了Gluster公…
阅读更多...
基于VUE3+Layui从头搭建通用后台管理系统（前端篇）十：实体配置功能实现

基于VUE3+Layui从头搭建通用后台管理系统（前端篇）十：实体配置功能实现

一、本章内容 本章实现实体配置功能，包括识别实体属性、设置各属性的展示方式、相关类型、要和展示、编辑的内容等。 1. 详细课程地址： 待发布 2. 源码下载地址： 待发布 二、界面预览 三、开发视频 3.1 B站视频地址：
阅读更多...
MISRA 2012学习笔记(3)-Rules 8.4-8.7

MISRA 2012学习笔记(3)-Rules 8.4-8.7

文章目录 Rules8.4 字符集和词汇约定(Character sets and lexical conventions)Rule 4.1 八进制和十六进制转译序列应有明确的终止识别标识Rule 4.2 禁止使用三字母词(trigraphs) 8.5 标识符(Identifiers)Rule 5.1 外部标识符不得重名Rule 5.2 同范围和命名空间内的标识符不得重…
阅读更多...
673. 最长递增子序列的个数

673. 最长递增子序列的个数

673. 最长递增子序列的个数 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;方法一&#xff1a;动态规划方法二&#xff1a;贪心 前缀和 二分查找 参考代码&#xff1a;__673最长递增子序列的个数__动态规划__673最长递增子序列的个数__贪心_前缀和_二分查找…
阅读更多...
书单背景图片哪里找？如何制作成视频？

书单背景图片哪里找？如何制作成视频？

有没有小伙伴们发现&#xff0c;如今很多热门的短视频平台有很多使用书单文案制作的视频&#xff0c;很多情感博主会配上一些精致的图片&#xff0c;唯美的背景承载着一些美好的文案内容。这种类型的视频让不少的小伙伴都想制作专属于自己的视频来投稿&#xff0c;那么小伙伴们…
阅读更多...
linux系统（centos、ubuntu、银河麒麟服务、uos、deepin）判断程序是否已安装，通用判断方法：使用所有应用和命令的判断

linux系统（centos、ubuntu、银河麒麟服务、uos、deepin）判断程序是否已安装，通用判断方法：使用所有应用和命令的判断

前言 项目中需要判断linux服务器中是否已经安装了某个服务 方法有很多种&#xff0c;但是很多都不通用&#xff0c; 脚本代码就不容易做成统一的 解决方案 用下面的脚本代码去进行判断 用jdk测试 脚本意思如下&#xff1a; 输入java -version命令&#xff0c;将返回的字…
阅读更多...
【数据结构练习】单链表OJ题（一）

【数据结构练习】单链表OJ题（一）

目录 一、移除链表元素思路1&#xff1a;思路2&#xff1a; 二、反转链表三、链表的中间节点四、链表中倒数第k个节点五、回文结构六、合并两个有序链表 一、移除链表元素 题目&#xff1a; 思路1&#xff1a; 在原来的链表上进行修改&#xff0c;节点的数据是val的删除&am…
阅读更多...
Cesium 使用 Entity 绘制点线面

Cesium 使用 Entity 绘制点线面

文章目录 一、绘制点1. 第一种2. 第二种 二、绘制面三、绘制线四、移除 Entity <!--* Author: HuKang* Date: 2023-08-18 11:06:43* LastEditTime: 2023-08-25 09:16:59* LastEditors: HuKang* Description: program-c* FilePath: \global-data-display\src\views\program-c…
阅读更多...
第一讲使用IDEA创建Java工程——HelloWorld

第一讲使用IDEA创建Java工程——HelloWorld

一、前言导读 为了能够让初学者更快上手Java，不会像其他书籍或者视频一样，介绍一大堆历史背景，默认大家已经知道Java这么编程语言了。本专栏只会讲解干货，直接从HelloWord入手，慢慢由浅入深，讲个各个知识点，这些知识点也是目前工作中项目使用的，而不是讲一些老的知识点…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023