7.13HTML中的特殊标签

最新推荐文章于 2023-03-30 11:29:29 发布

执笔绘江山

最新推荐文章于 2023-03-30 11:29:29 发布

阅读量1.1k

点赞数 3

文章标签： html 前端 html5

本文链接：https://blog.csdn.net/qq_45059691/article/details/125771348

版权

hello大家好，从今天开始，我把标题按照日期来排序了，这样会让我更加感觉到时间流逝的感觉，激发我学习的动力，希望大家也可以与我一起进步，一起学习。今天我会把标签部分全部说完，包含了一些特殊的标签，也比较重要，那么话不多说，让我们开始吧。

1.结构布局标签

结构布局标签，听其名字就可以知道，他们在全局内起到布局的作用，其本身没有什么特殊的用法，可当做一个普通的块元素标签去使用，用法和p标签相同，它们都独占一行，结构布局标签有如下的几个：

header:表示头部

main：表示主体

footer：表示底部

nav：表示导航

aside：表示和主体相关的内容

article：文章相关的内容

2.列表

列表是一个比较重要的特殊标签，在后面的学习中会经常使用，所以一定要记住，列表有两种，分为有序列表和无序列表，我们一个一个说：

有序列表：用ol创建标签，li表示列表项，有序列表正如其名字一样，ol标签所包裹的li项都是默认有顺序的，下面我们用代码段来举个例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ol>
      <li>起床</li>
      <li>洗漱</li>
      <li>学习</li>
      <li>吃午饭</li>
      <li>睡午觉</li>
      <li>学习</li>
      <li>吃晚饭</li>
      <li>晚自习</li>
      <li>洗漱</li>
      <li>睡觉</li>
    </ol>
  </body>
</html>

在这里我列举了一天需要完成的事情，显示出来的结果如图所示：

可以看到默认情况下，列表项前面会按顺序排列数字，如果不想用数字，可以自行替换，可替换的有a,A,i,I等排序方法，但是注意需要通过type属性来更改项目符号，如下图所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ol type="a">
      <li>起床</li>
      <li>洗漱</li>
      <li>学习</li>
      <li>吃午饭</li>
      <li>睡午觉</li>
      <li>学习</li>
      <li>吃晚饭</li>
      <li>晚自习</li>
      <li>洗漱</li>
      <li>睡觉</li>
    </ol>
  </body>
</html>

运行结果的排序就变成了a开头的排序：

无序列表：用ul创建标签，li表示列表项，无序列表并不是其中的内容是无序排列，而是在前方没有排序的数字，默认情况下，是一个黑色的小圆点表示，代码段如下图所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>起床</li>
      <li>洗漱</li>
      <li>学习</li>
      <li>吃午饭</li>
      <li>睡午觉</li>
      <li>学习</li>
      <li>吃晚饭</li>
      <li>晚自习</li>
      <li>洗漱</li>
      <li>睡觉</li>
    </ul>
  </body>
</html>

运行结果如下图所示：

可以看到是实心小圆点代替了上面有序列表的数字或字母排序，在此用type属性可以把实心小圆点改为空心圆（circle），实心方块（square），我们用实心方块再演示一遍：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul type="square">
      <li>起床</li>
      <li>洗漱</li>
      <li>学习</li>
      <li>吃午饭</li>
      <li>睡午觉</li>
      <li>学习</li>
      <li>吃晚饭</li>
      <li>晚自习</li>
      <li>洗漱</li>
      <li>睡觉</li>
    </ul>
  </body>
</html>

运行结果如下：

2.图片标签：

图片标签就是用来引入我们需要的图片的标签，它为img标签，img是一个自结束标签，是一个行内快元素，具有行内元素和块元素的特点，它有四个属性，分别为：

1.src：引入图片的地址

2.alt：图片引入不成的时候，文字提示更重要的作业，浏览器会根据alt值来区分推荐图片

3.width：控制图片的宽度

4.height：控制图片的高度

一般width和height我们不同时设置，设置一个另外一个也会随之变为相应比例，如果两个同时更改可能会让图片变形，下面我来举个例子，引入一张图并设置宽度为300像素：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img src="./博客封面图像.jpg" alt="fault" width="300px" />
  </body>
</html>

代码较为简单，运行结果如下图所示：

3.音视屏标签：

音频标签：audio用于向页面中引入一个音频文件

视屏标签：video用于向页面中引入一个视屏文件

它们拥有相同的四个属性：

src：引入音频路径的地址

controls：是否允许用户控制音视屏的播放，默认是不允许

loop：循环（加载controls后面）

autoplay：自动播放

简单代码演示一下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <audio src="./" controls loop autoplay></audio>
    <video src="./" controls loop autoplay></video>
  </body>
</html>

演示结果：

由于我的代码中没有引入具体的内容，所以只有现实框，没有内容，内容可以自行添加。

今天说了基本标签中一些特殊的标签，明天将讲述基本标签中最后也是最重要的一个，以及介绍一下图片的格式，标签这一章就过去了，那么今天就先说到到这里了，感谢观看，共勉！

执笔绘江山

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
7.13HTML中的特殊标签

hello大家好，从今天开始，我把标题按照日期来排序了，这样会让我更加感觉到时间流逝的感觉，激发我学习的动力，希望大家也可以与我一起进步，一起学习。今天我会把标签部分全部说完，包含了一些特殊的标签，也比较重要，那么话不多说，让我们开始吧。1.结构布局标签结构布局标签，听其名字就可以知道，他们在全局内起到布局的作用，其本身没有什么特殊的用法，可当做一个普通的块元素标签去使用，用法和p标签相同，它们都独占一行，结构布局标签有如下的几个：header:表示头部main：表示主体footer：表示底部nav：表示
复制链接

扫一扫