HTML的基础标签【第一节】一、基础标签概述 1、标题标签 1.1、概念 1.2标题标签属性那么就先来说一下属性的

一、基础标签概述

1、标题标签

1.1、概念

html提供了6个等级的标题标签，分别是h1~h6，他们的字体大小也是逐渐减小的，也就是说，h1是最大的标签，而h6则是最小的标签，这是一个双标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>标题标签</title>
  </head>
  <body>
    <h1>测试文本</h1>
    <h2>测试文本</h2>
    <h3>测试文本</h3>
    <h4>测试文本</h4>
    <h5>测试文本</h5>
    <h6>测试文本</h6>
  </body>
</html>

1.2标题标签属性

那么就先来说一下属性的书写方式吧！在这里以一种直观的方式去表示一下，如下图：

在这里插入图片描述

属性由，属性名：属性值组成，一个都不可以少，书写在双标签的开始标签中或者单标签的结束标记之前。

那么接下来就开始演示标题标签的属性：

1.2.1、水平对齐方式

align属性：这个属性表示标题标签中内容的水平对齐方式

属性值：left【左】、center【中】、right【右】

示例：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>水平对齐方式</title>
  </head>
  <body>
    <h1 align="left">测试文本</h1>
    <h2 align="center">测试文本</h2>
    <h3 align="right">测试文本</h3>
  </body>
</html>

2、段落标签

2.1、概念

<p></p>标签在html中表示一段独立的文本区域，也叫做段落,这也是一个双标签。

例如这样一段文本：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>段落标记</title>
  </head>
  <body>
    <p>
      段落标签在html中表示一段独立的文本区域。
      段落标签在html中表示一段独立的文本区域。
      段落标签在html中表示一段独立的文本区域。
      段落标签在html中表示一段独立的文本区域。
    </p>
  </body>
</html>

这段文本在代码中是有换行的，但是当显示到浏览器中时，是不会被浏览器所解析的。是有到了这一段的结尾才会自动换行。

2.2属性

这个标签同标题标签一样，都只有水平对齐方式属性

align属性：这个属性表示段落标签中内容的水平对齐方式

属性值：left【左】、center【中】、right【右】

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>段落标记</title>
  </head>
  <body>
    <p align="left">段落标签在html中表示一段独立的文本区域。</p>
    <p align="center">段落标签在html中表示一段独立的文本区域。</p>
    <p align="right">段落标签在html中表示一段独立的文本区域。</p>
  </body>
</html>

3、水平线标签

3.1概念

<hr/>标签在html中表示水平线，可以在页面中插入一条水平线，如下图所示：

在这里插入图片描述

水平线标签在新闻网上比较常见

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>水平线标签</title>
  </head>
  <body>
    <hr />
  </body>
</html>

3.2、属性

3.2.1宽度属性

宽度属性：width

属性值：数值+px【像素】

3.2.2粗细属性

粗细属性：size

属性值：数值+px【像素】

3.2.3颜色属性

颜色属性：color

属性值：颜色的英文单词、16进制、rgb、rgba

3.2.4水平对齐方式

align属性：这个属性表示水平线标签中内容的水平对齐方式

属性值：left【左】、center【中】、right【右】

综合示例：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>水平线标签</title>
  </head>
  <body>
    <hr width="200px" align="left" size="5px" color="#00f" />
    <hr width="200px" align="center" size="10px" color="red" />
    <hr width="200px" align="right" size="15px" color="rgb(0,255,0)" />
  </body>
</html>

二、文本效果

1、换行标签

标签为
哪里需要换行就把这个标签插入在哪里

在这里插入图片描述

2、div和span标签

这两个元素就相当于两个盒子，用来承载的容器。

在这里插入图片描述

可以承载其他标签，比如文本，图片等...

2.1 二者的区别

div标签：

独占一行

就是一个大盒子

没有任何的语义（正因为没有任何的语义所以可以高频次使用）

span标签：

不是独占一行

是一个小盒子

没有任何的语义（可以高频次的使用）

3、font标签

font标签可以规定文本的大小和颜色

<!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>
  <font>你好</font>
</body>
</html>

在这里插入图片描述

综合示例：

<!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>
  <font size="5px" color="red">你好</font>
</body>
</html>

在这里插入图片描述

属性解释：

color：是颜色属性，值可以是颜色英文、16进制、rgb、rgba等颜色值；

size：size是文字的大小，也是在没有学习css前可以设置大小的一个途径；

除了以上的两个属性，还有一个属性，那就是face，也就是字体，可以是你电脑上安装过的任意有效字体。

4、图片标签

img标签，通过这个标签，就可以将想要展示到页面的图片写入代码当中。

说到这个标签就不得不说一说路径，可能第一次听到这个词语的伙伴，对它很陌生，但是我们去学习它又是重中之重的，所以接下来就一起来看一看，路径是什么？

4.1 理解路径

4.1.1 路径是什么

首先我先来解决大家的第一个疑惑，路径的定义是：

路劲，顾名思义就是寻找一个目标所经过的地方，在这里就是寻找一张图片所经过的文件。

先来说一下img标签如何去引入图片：

结构：

那么接着来说路径，常用路径分为，相对路径、绝对路径、网络路径

代码	行为
./	当前位置同级
/	下一级
../	返回当前位置的上级目录

相对路径：

相对路径是指目标相对于当前文件的路径

绝对路径：

绝对路径是完整的描述文件位置的路径，分为两类

本地绝对路径：以根位置（盘符）为起点 D:/img/myPhoto.png（很少使用）

网络绝对路径：网址 www.baidu.com/search/sear…

路径我们就先说到这里，接下来就来说一说图片标签的属性。

4.2 属性

属性	属性值	说明
src	图片路径	相对路径或绝对路径
width	数值	图片的宽度
height	数值	图片的高度
alt	当图片无法正常显示的时候会把alt属性里面的内容显示在网页上	好处：对SEO（搜索引擎）友好，可以让搜索引擎的蜘蛛知道这张没有显示的图片大概是什么内容对用户友好（可以知道这张没有显示的图片大致是什么内容）
title	当图片可以正常显示的时候，鼠标悬浮于图片之上就可以把title的内容显示出来了
border	数值

4.2.1 综合示例

在这里插入图片描述

<!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>
  <img src="图片路径" alt="暂时无法加载" title="这是一张图片" border="1" width="100px" height="200px">
</body>
</html>

三、常见的图片格式

格式	解释
jpg	jpg是常见的一种图片格式，扩展名为.jpg或.jpeg，是一种有损压缩格式，既然jpg是“有损的”图像，也就是说使用此格式时，若减小文件大小，在一定程度上也会降低图像质量，往往会把肉眼不容易察觉出来的细节丢弃掉
png	扩展名为.png，是一种无损的压缩格式，能够更高质量的保存图片
bmp	扩展名为.bmp，过期的一种无压缩图片格式，最大程度上保留了图片的更多细节
gif	扩展名为.gif，该格式也使用了无损压缩，且将图像“约束”为8bits/每个像素（JPG可支持24-bit），并限制为256色调色板，色彩呈现不是很完整
webp	扩展名为.webp，谷歌推出的一种格式，专门用来在网页中呈现图片，是jpg、png的最佳替代者
base64	准确地说，Base64并不是一种图像文件格式，而是一种用于传输8位字节码的编码方式，它通过将代表图像的编码直接写入HTML或CSS中来实现图像的展示要通过浏览器打开传统的看图工具通常无法查看

本小节就先说到这里，下一节继续html的基础标签。

四、总结

本节主要讲解了标题标签、段落标签、水平线标签，以及一些文本效果标签，还有路径和常见的图片格式，下节我们继续了解html的其他标签。

对前端知识感兴趣的伙伴可以加入我的社区，会不定时的发布一些前端的相关知识，欢迎加入。

社区链接：点此加入我们的社区，欢迎加入