HTML——我们学习过的标签有哪些？

- 日理万妓 2023-10-04 17:42 6阅读 0赞

#### 文章目录 ####

*  一、WEB标准
 *  二、HTML的初认识
 *   *  1、概念
     *  2、结构
     *  3、标签
 *  三、排版标签
 *  四、文本格式化标签
 *  五、媒体标签
 *  六、音频标签
 *  七、视频标签
 *  八、链接标签
 *  九、总结

--------------------

## 一、WEB标准 ##

在学习HTML之前，先介绍一些web的标准。

<table> 
 <thead> 
  <tr> 
   <th>构成</th> 
   <th>语言</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>结构</td> 
   <td>HTML</td> 
   <td>页面元素和内容</td> 
  </tr> 
  <tr> 
   <td>表现</td> 
   <td>CSS</td> 
   <td>网页元素的外观和位置等页面样式（如：颜色、大小等）</td> 
  </tr> 
  <tr> 
   <td>行为</td> 
   <td>JavaScript</td> 
   <td>网页模型的定义与页面交互</td> 
  </tr> 
 </tbody> 
</table>

## 二、HTML的初认识 ##

### 1、概念 ###

> HTML（Hyper Text Markup Language）中文译为：超文本标记语言  
> 专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述

### 2、结构 ###

最基本的结构就如下图的红色框架部分。  
![在这里插入图片描述][16634b338ed447b1a2f64b07992c7b7a.png]  
可以把html比作小猪佩奇的身体，head比作是她的头，body就是她的身体，title就是她的眼睛——标题。  
![在这里插入图片描述][e3c9d56ef6ba42119dda241f73f527d3.png]

### 3、标签 ###

以`strong`标签的结构图为例：  
![在这里插入图片描述][aaa49b998aa144ac9abe8b0e1ca09664.png]  
**结构说明：**

*  标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
 *  常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
 *  少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。

## 三、排版标签 ##

*  1、标题标签  
    ![在这里插入图片描述][66a65fe527b44425bf8e187ac1b77a6b.png]

**场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题**

> 特点：
> 
>  *  文字都有加粗
>  *  文字都有变大，并且从h1 → h6文字逐渐减小
>  *  独占一行

*  2、段落标签

**场景：在新闻和文章的页面中，用于分段显示**

> 特点：
> 
>  *  段落之间存在间隙
>  *  独占一行

*  3、换行标签

> 特点：
> 
>  *  单标签
>  *  让文字强制换行

*  4、水平线标签

> 特点：
> 
>  *  单标签
>  *  在页面中显示一条水平线

## 四、文本格式化标签 ##

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>b或strong</td> 
   <td>加粗</td> 
  </tr> 
  <tr> 
   <td>u或ins</td> 
   <td>下划线</td> 
  </tr> 
  <tr> 
   <td>i或em</td> 
   <td>倾斜</td> 
  </tr> 
  <tr> 
   <td>s或del</td> 
   <td>删除线</td> 
  </tr> 
 </tbody> 
</table>

**实际项目开发中选择标签的原则：标签语义化**

*  即：根据语义选择对应正确的标签
 *  如：需要写标题，就使用h系列标签
 *  如：需要写段落，就使用p标签
 *  ……

> 好处：
> 
>  *  对人：好理解，好记忆
>  *  对机器：有利于机器解析，对搜索引擎（SEO）有帮助

> 推荐： • strong、ins、em、del，表示的强调语义更强烈！

## 五、媒体标签 ##

**场景：在网页中显示图片**

> 特点：
> 
>  *  单标签
>  *  img标签需要展示对应的效果，需要借助标签的属性进行设置！

标签的完整结构图：  
![在这里插入图片描述][dad2c77faa4642f49b4d957fecd40627.png]  
**属性注意点：**

*  标签的属性写在开始标签内部
 *  标签上可以同时存在多个属性
 *  属性之间以空格隔开
 *  标签名与属性之间必须以空格隔开
 *  属性之间没有顺序之分

**图片标签的src属性：**

> 1、属性名：src  
> 2、属性值：目标图片的路径
> 
> 注意点： 当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）

**图片标签的alt属性：**

> 属性名：alt  
> 属性值：替换文本 当图片加载失败时，才显示alt的文本 当图片加载成功时，不会显示alt的文本

**图片标签的title属性：**

> 属性名：title  
> 属性值：提示文本 当鼠标悬停时，才显示的文本  
> 注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签

**图片标签的width和height属性：**

> 属性名：width和height  
> 属性值：宽度和高度（数字） 注意点：  
> 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）  
> 如果同时设置了width和height两个，若设置不当此时图片可能会变形

进行一个小总结：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>src</td> 
   <td>指定需要展示图片的路径</td> 
  </tr> 
  <tr> 
   <td>alt</td> 
   <td>替换文本，当图片加载失败时，才显示的文字</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>提示文本，当鼠标悬停时，才显示的文字</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>图片的宽度</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>图片的高度</td> 
  </tr> 
 </tbody> 
</table>

## 六、音频标签 ##

**场景：在页面中插入音频**

常见属性：

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>src</td> 
   <td>音频的路径</td> 
  </tr> 
  <tr> 
   <td>controls</td> 
   <td>显示播放的控件</td> 
  </tr> 
  <tr> 
   <td>autoplay</td> 
   <td>自动播放(部分浏览器不支持)</td> 
  </tr> 
  <tr> 
   <td>loop</td> 
   <td>循环播放</td> 
  </tr> 
 </tbody> 
</table>

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

## 七、视频标签 ##

**场景：在页面中插入视频**

常见属性：

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>src</td> 
   <td>视频的路径</td> 
  </tr> 
  <tr> 
   <td>controls</td> 
   <td>显示播放的控件</td> 
  </tr> 
  <tr> 
   <td>autoplay</td> 
   <td>自动播放(谷歌浏览器中需配合muted实现静音播放)</td> 
  </tr> 
  <tr> 
   <td>loop</td> 
   <td>循环播放</td> 
  </tr> 
 </tbody> 
</table>

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

## 八、链接标签 ##

**场景：点击之后，从一个页面跳转到另一个页面**

> 特点： 双标签，内部可以包裹内容  
> 如果需要a标签点击之后去指定页面，需要设置a标签的href属性

**链接标签的target属性**

> 属性名：target  
> 属性值：目标网页的打开形式

<table> 
 <thead> 
  <tr> 
   <th>取值</th> 
   <th>效果</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>_self</td> 
   <td>默认值，在当前窗口中跳转(覆盖原网页)</td> 
  </tr> 
  <tr> 
   <td>_blank</td> 
   <td>在新窗口中跳转(保留原网页)</td> 
  </tr> 
 </tbody> 
</table>

**空链接（了解）**

> 功能： 点击之后回到网页顶部  
> 开发中不确定该链接最终跳转位置，用空链接占个位置

## 九、总结 ##

> 乐莫乐兮新相知，很高兴各位小伙伴可以坚持看完这篇文章。  
> 如果对你有帮助，可以给博主三连支持一下哦~~ 非常感谢， 一起加油，一起进步！

![在这里插入图片描述][9d380540632c41f7a117228f2b0bc6ac.png_pic_center]

[16634b338ed447b1a2f64b07992c7b7a.png]: https://img-blog.csdnimg.cn/16634b338ed447b1a2f64b07992c7b7a.png
[e3c9d56ef6ba42119dda241f73f527d3.png]: https://img-blog.csdnimg.cn/e3c9d56ef6ba42119dda241f73f527d3.png
[aaa49b998aa144ac9abe8b0e1ca09664.png]: https://img-blog.csdnimg.cn/aaa49b998aa144ac9abe8b0e1ca09664.png
[66a65fe527b44425bf8e187ac1b77a6b.png]: https://img-blog.csdnimg.cn/66a65fe527b44425bf8e187ac1b77a6b.png
[dad2c77faa4642f49b4d957fecd40627.png]: https://img-blog.csdnimg.cn/dad2c77faa4642f49b4d957fecd40627.png
[9d380540632c41f7a117228f2b0bc6ac.png_pic_center]: https://img-blog.csdnimg.cn/9d380540632c41f7a117228f2b0bc6ac.png#pic_center