一，排版标签

1.1 标题标签

标题标签有 1 到 6 个级别的标题，重要程度依次递减。

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

特点：

  • 字体都有加粗
  • 字体都有变大，并从h1-->h6依次变小
  • 独占一行了

1.2 段落标签

作用：包围一段文章 内容。

<p>
    我是一段文字
</p>

特点：

  • 段落之间存在间隙
  • 独占一行。

1.2 换行标签

作用：让文字强制换行

<br/>

特点：

  • 单标签
  • 让文字强制换行

1.3 水平分割线

作用：就是一条分割线

<hr/>

特点：

  • 单标签
  • 在页面中显示一条水平线

二，文本格式化标签

作用：让文字加粗，下划线，倾斜，删除线效果。

代码：

2953321-20231125213005878-1095322098.png

三，媒体标签

3.1 图片标签

作用：在网页中显示一个图片。

<img src="" alt=""/>

特点：

  • 单标签
  • img标签要展示对应的效果，需要借助标签的属性进行设置。

常用属性：

  • src：指定图像文件的路径或 URL，这个是 image 标签必备标签。

  • alt：提供图像的替代文本，用于在图像无法加载时显示，同时也是辅助技术的重要信息。

  • width 和 height： 分别定义图像的宽度和高度。可以使用像素（px）或百分比（%）作为单位。

    如果只定义一个，另一个就自动变化。

  • title： 提供关于图像的附加信息，通常在用户将鼠标悬停在图像上时显示。

3.2 路径

一些标签需要加载资源的时候，需要通过路径来找到对应资源的位置。

路径分为：

  • 绝对路径

    指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径。

    例如：D:day01\images\1jpg

  • 相对路径

    从当前文件开始出发找目标文件的过程

    相对路径分类：

    • 同级目录：当前文件和目标文件在同一目录中

      此时路径写法：
      2953321-20231125214237815-1598235247.png

    • 下级目录：目标文件在下级目录中

      路径表示方法：

      目录/对应文件

    • 上级目录：目标文件在上级目录中

      路径表示方法：用 **../** 代表上一级目录

3.3 音频标签

作用：在页面中插入音频。

下面这种写法，浏览器会匹配 audio 标签中的 source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本。

<audio controls="controls">
      <source src="media/music.mp3" type="audio/mpeg" />
      <source src="media/music.ogg" type="audio/ogg" />
      你的浏览器版本太低了，不支持audio播放
</audio>

常用属性：

  • src：指定音频文件的路径或 URL。是必备属性。
  • controls： 在音频播放器上显示播放、暂停、音量和进度控件。
  • autoplay：指定音频在页面加载时自动播放。
  • loop： 指定音频在播放完毕后是否循环播放。
  • muted：将音频静音，即没有声音输出。

上述属性用法和普通的有点不同：如下图直接使用即可。

<audio src="path/to/audio.mp3" controls a></audio>

注意：音频标签目前支持三种格式：MP3，Wav，Ogg

3.4 视频标签

作用：在页面中插入视频。

下面这种写法，浏览器会匹配 video 标签中的 source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本。

<video controls>
      <source src="media/music.mp3" type="video/ogg" />
      <source src="media/music.ogg" type="video/mp4" />
      你的浏览器版本太低了，不支持audio播放
</video>

常见属性：

  • src：指定视频文件的路径或 URL。是vider标签必备属性。
  • controls： 在视频播放器上显示播放、暂停、音量和进度控件。
  • autoplay：指定视频在页面加载时自动播放。
  • loop：指定视频在播放完毕后是否循环播放。
  • width和height： 分别定义视频的宽度和高度。可以使用像素（px）或百分比（%）作为单位。
  • muted： 将视频静音，即没有声音输出。
  • poster：指定视频加载前或在用户按下播放按钮前显示的图像。通常用于视频封面。

注意要点：视频标签目前支持三种格式: MP4、WebM、Ogg

四，链接标签

作用：点击之后，从一个页面跳转到另外一个页面。

<a href="./目标网页.html" ></a>

特点：双标签，内部可包裹内容。

常用属性：

  • href：指定链接的目标地址（URL）。（必备属性）
  • targer：指定链接在何处打开。常用值包括
    • _blank：在新标签或窗口中打开。
    • _self： 在相同的框架中打开。
    • _parent： 在父框架中打开。
    • _top： 在整个窗口中打开。
  • title： 提供链接的附加信息，通常在用户将鼠标悬停在链接上时显示。
  • download：规定链接目标将被下载而不是导航。该属性的值是下载文件的名称。

4.1 超链接锚点

锚点功能就是在当前页面进行跳转

点击超链接实现 ：

  • 去顶部

    <a href="#">去顶部 </a>

  • 去任意的位置

    给你要去位置打个 id 属性，设置任意 id 属性值
    href 里：#id 属性值

    <a href="#dibu">去顶部 </a>
<p id="dibu">
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
</p>

五，html中通用的属性

在 html 里面有一些属性是通用的：

  • class： 为元素定义一个或多个类名，用于与 CSS 样式表关联。
  • id：为元素定义一个唯一的标识符。
  • style： 内联样式，用于为元素定义 CSS 样式。
  • title： 提供关于元素的附加信息，通常在用户将鼠标悬停在元素上时显示。

六，head标签中使用的标签

<head> 标签通常用于包含文档的元信息（metadata），而不是直接呈现在页面上的内容。以下是 <head> 标签内部常见的一些标签：

  • title： 定义文档的标题，显示在浏览器的标题栏或标签页上。

  • meta：用于设置页面的元信息，如字符集、视口设置、描述等。

    常见用法：

    <!--字符集设置 (charset)-->
<meta charset="UTF-8">
<!--视口设置 (viewport),为移动设备优化页面的显示。通常设置为适应设备的宽度，并允许用户缩放。-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--页面关键词 (keywords), 提供有关页面内容的关键词，用于搜索引擎优化 (SEO)。-->
<meta name="keywords" content="关键词1, 关键词2, 关键词3">
<!--页面描述 (description), 提供对页面内容的简短描述，同样用于搜索引擎优化。 -->
<meta name="description" content="页面描述">
<!--作者(author)，用于指定文档的作者。-->
<meta name="author" content="作者姓名">
<!--页面刷新 (refresh),定时刷新页面，其中 5 表示每隔 5 秒，url 是重定向到的新页面地址。-->
<meta http-equiv="refresh" content="5;url=https://www.example.com">

  • link： 用于引入外部资源，如样式表、图标等。

  • style： 用于在文档中定义样式。

  • script： 用于包含 JavaScript 代码，通常放在页面底部，或者使用 defer 或 async 属性进行优化。