【web前端开发】HTML知识点超详细总结

妖狐艹你老母 2023-09-27 12:39 1阅读 0赞

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

*  1.什么是网页
 *  2.常用的浏览器及内核
 *  3.VScode和WebStrom使用
 *  4.HTML常用标签
 *  5.文档类型<!DOCTYPE>
 *  6.网页语言lang
 *  7.字符集
 *  8. title标签
 *  9.标题标签
 *  10.段落和换行标签
 *  11.文本格式化标签
 *  12.div和span标签
 *  13.图像标签
 *  14.路径
 *   *  14.1 相对路径
     *   *  (1)同一级路径
         *  (2)上一级路径:
         *  (3)下一级路径
     *  14.2 绝对路径
 *  15.链接标签
 *   *  15.1 超链接标签
     *   *  (1)外部链接:
         *  (2) 内部链接:
         *  (3) 空链接:
     *  15.2 下载链接
 *  16.锚点链接
 *  17.注释与空格符
 *  18. 表格相关标签
 *   *  18.1 表格标签
     *  18.2 表头单元格
     *  18.3 表格的相关属性
     *  18.4 表格的结构标签
     *  18.5 合并单元格
 *  19.列表标签
 *   *  19.1 无序列表(重要)
     *  19.2 有序列表
     *  19.3 自定义列表
 *  20. 表单标签
 *   *  20.1 表单域
     *  20.2 表单控件(表单元素)
     *  20.3 label标签
     *  20.4 select标签
     *  20.5 textarea文本域标签
     *  20.6 表单属性
 *  21. 语义标签
 *  22. 多媒体标签
 *   *  22.1. 视频标签
 *  23. 音频标签
 *  24. 总结

## 1.什么是网页 ##

> 网页是构成网站的基本元素，是承载各种网站应用的平台

网页通常是指HTML格式的文件 `文件扩展名为.html或.htm` 它通过浏览器来阅读  
HTML不是一种编程语言,而是一种标记语言

## 2.常用的浏览器及内核 ##

常用的浏览器有 IE浏览器（Internet explorer）火狐浏览器 谷歌(chrome) Safari浏览器 Opera浏览器

> 浏览器内核（Rendering Engine），是指浏览器最核心的部分，负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页

<table> 
 <thead> 
  <tr> 
   <th>浏览器</th> 
   <th>内核</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>IE</td> 
   <td>Trident</td> 
   <td>IE、猎豹安全、360极速浏览器、百度浏览器</td> 
  </tr> 
  <tr> 
   <td>firefox</td> 
   <td>Gecko</td> 
   <td>火狐浏览器内核</td> 
  </tr> 
  <tr> 
   <td>Safari</td> 
   <td>webkit</td> 
   <td>苹果浏览器内核</td> 
  </tr> 
  <tr> 
   <td>chrome</td> 
   <td>Chromium/Blink</td> 
   <td>大部分国产浏览器最新版都采用Blink内核</td> 
  </tr> 
  <tr> 
   <td>Opera</td> 
   <td>Blink</td> 
   <td>跟随chrome使用Blink内核,Blink其实是webkit的分支</td> 
  </tr> 
 </tbody> 
</table>

## 3.VScode和WebStrom使用 ##

工欲善其事,必先利其器.前端开发的软件有很多,下面给大家介绍一下VScode和WebStrom的使用,我们可以在VScode和WebStrom上写一些HTML文件

> VScode  
> 下载地址:https://code.visualstudio.com/  
> WebStorm  
> 下载地址:https://www.jetbrains.com/webstorm/

使用VScode要下载一些插件,如果嫌麻烦,可以使用WebStorm.

## 4.HTML常用标签 ##

在讲HTML标签之前,先看下面这段代码:

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

我们平时在使用编译器编写前端内容的时候，会生成这样一些代码，这些代码就相当于HTML的骨架了,下面给大家简单解释一下这些代码是什么意思

## 5.文档类型<!DOCTYPE> ##

<!DOCTYPE>文档类型的声明，作用是告诉浏览器是以那种HTML版本来显示网页
    其中要注意两点：
     - <!DOCTYPE html> 这句代码的意思就是说当前是以HTML5版本来显示网页的
     - <!DOCTYPE>不是HTML5的标签，只是文档类型声明标签

## 6.网页语言lang ##

lang是用来定义语言的种类

*  en 定义的语言为英语
 *  zh-CN 定义的语言为中文

![在这里插入图片描述][34086422406a4b2abb4281bf0318d988.png]  
出现这个就说明当前网页是一个英语网站,定义的语义为英语

## 7.字符集 ##

> 字符集（Character set）是多个字符的集合，字符集种类较多，每个字符集包含的字符个数不同，常见字符集名称：ASCII字符集、GB2312字符集、BIG5字符集、 GB18030字符集、Unicode字符集等。

*  UTF-8也叫万国码 ，是最常用的字符集编码方式，基本上包含了所有国家需要用到的字符。

## 8. title标签 ##

> 定义文档的标题, 浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上

<title>Document</title>  
    title标签里面的内容可以自己修改

简单来说就是设置网页的名字  
![在这里插入图片描述][e7ce89ee329d4cbc82d81d6d7603c54f.png]

## 9.标题标签 ##

在HTML中,标题标签一共有6种,如下:

效果图:  
![在这里插入图片描述][8b5502a1afea441aa90deef26067a452.png]  
h1~h6标题标签文字是逐渐变小的,一般常用的是h4标题标签.

## 10.段落和换行标签 ##

<p></p>标签用于定义段落 可以将文档文字分成若干段落
    大家理解为是写作文,作文中的每一段文字就在一对<p></p>里面
    文本在浏览器中会根据游览器大小子自动换行 
    段落与段落之间有空隙

<br> 强制换行标签  是一个单标签
    段落与段落之间的距离比较大,换行之间的距离比较小

## 11.文本格式化标签 ##

在网页中,有些内容需要以特殊方式显示,这时就需要用到文本格式化标签  
常用的文本格式化标签如下:

加粗标签:<strong></strong>
    粗体标签:<b></b>
    
    倾斜:<em></em>
    斜体:<i></i>
    
    闪烁标签:<blink></blink>
    放大标签:<big></big>
    缩小标签:<small></small>
    
    上标效果标签: <sup></sup>
    下标效果标签: <sub></sub>
    
    删除线标签:<del></del>和<s></s>
    下划线标签:<ins></ins>和<u></u>

## 12.div和span标签 ##

<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
    <div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化
    
    <span> 用于对文档中的行内元素进行组合。
    <span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
    <span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

div和span是没有语义的,它们就是盒子,用来放内容的

## 13.图像标签 ##

下面是一些图像标签中一些常见属性:

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>src</td> 
   <td>图片路径</td> 
   <td>必须要有的属性</td> 
  </tr> 
  <tr> 
   <td>alt</td> 
   <td>文本</td> 
   <td>替换文本,图片不能正常显示时,显示文本</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>文本</td> 
   <td>提示文本,鼠标放在图片上,显示的文字</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>像素</td> 
   <td>设置图片宽度</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>像素</td> 
   <td>设置图片高度</td> 
  </tr> 
  <tr> 
   <td>border</td> 
   <td>像素</td> 
   <td>设置图片边框</td> 
  </tr> 
 </tbody> 
</table>

图像标签的注意点:

*  图像可以有多个属性,必须在标签名后面
 *  属性之间不分先后
 *  属性采用键值对的格式,即 “属性 = 属性值”

## 14.路径 ##

### 14.1 相对路径 ###

相对路径就是以引用图片作为参考,得到的路径  
相对路径分为3种 `同一级路径,上一级路径和下一级路径`

#### (1)同一级路径 ####

![在这里插入图片描述][0d43d7c14c9b49cda74432eb47337458.png]  
以图片文件举例,这里的图片文件和HTML文件就是在web文件夹里面,这就是同一路径下,此时如果要引用这里的图片文件就可以这么写:

#### (2)上一级路径: ####

![在这里插入图片描述][ea9629590e214370be911b1f7e1f902b.png]

index2文件是code文件夹里的,而code文件夹和1.png这个图片文件都在WEB文件夹下,那么1.png文件就是在index2的上一级路径  
如果在index2里面引用1.png文件的话,写法如下:

<img src="../1.png"/> 
    ../就是返回上一级路径  
    ../ ../就是返回上两级路径 以此类推

#### (3)下一级路径 ####

![在这里插入图片描述][a1532490ba82440797ce2b3138d92936.png]  
如果index1要引用images里面的2.png路径,因为index1与images文件是同一级,图片在images文件夹里面,那么图片文件就是在index1的下一级路径  
如果index1文件要引用2.png图片文件的话,写法如下:

### 14.2 绝对路径 ###

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

例如:  
![在这里插入图片描述][389fce87c7e044f5905dda6b05bfdfdd.png]  
这个一般使用的很少,毕竟这只是我电脑里的文件,别人电脑在我这个路径下没有我想要的文件

## 15.链接标签 ##

### 15.1 超链接标签 ###

#### (1)外部链接: ####

<a> 标签用于定义超链接标签 作用是跳转到另一个链接
    语法格式:
    <a href="跳转链接", target="目标窗口的弹出方式">文本或者图像</a>

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>href</td> 
   <td>用于指定目标的url地址,从而实现超链接(必有属性)</td> 
  </tr> 
  <tr> 
   <td>target</td> 
   <td>用于指定连接的打开方式,_self是将当前页面跳转到链接地址,_blank是以新窗口打开</td> 
  </tr> 
 </tbody> 
</table>

#### (2) 内部链接: ####

![在这里插入图片描述][957781dbe46e4ac891cd7eb671bb1abd.png]  
链接标签也可以跳转到写好的HTML界面,例如我要在test里面设置一个超链接跳转到index1的界面,那么可以这么写:

<a href="index1.HTML">文本或者图片</a> #同一级路径

#### (3) 空链接: ####

如果没有想好跳转的地址,就可以使用空链接

<a href="#">文本或者图片</a>

### 15.2 下载链接 ###

`下载链接地址是文件(.exe 或者是zip等压缩包形式) 跳转后会自动下载文件`

## 16.锚点链接 ##

锚点链接:当我们点击链接,可以跳转到页面中的某个位置

*  在链接文本的**href**属性中,设置属性名为"\#名字"的形式
 *  在目标标签中,添加一个属性 id = 刚才的名字

## 17.注释与空格符 ##

注释在写代码时还是很重要的,如果代码很多,如果要改之前写的某个地方,就非常难找.那么在写代码时就可以写注释标识一下,这里写的是什么内容. 方便后续的检查和修改 . 一般编译器都有自己生成注释的快捷键,我只用过**WebStorm和VScode,快捷键都是 ctrl + /** 如果不喜欢也可以自定义快捷键

然后在HTML中会有一些特殊符号或者不方便使用,对于这些符号就需要用特殊符号来代替  
最常用的就是空格符了

空格: &nbsp

`直接记的话可能不太好记,大家可以记成&nb super plus`

## 18. 表格相关标签 ##

表格三要素 table、tr、td 缺一不可

### 18.1 表格标签 ###

<table></table>  用来定义表格的标签
    <tr></tr> 用来定义表格中的行
    <td></td> 用来定义表格中的单元格

### 18.2 表头单元格 ###

一般表头位于表格的第一行,使用表头单元格标签可以用来突出表头内容的重要性

<th></th>  表头单元格里面的文本会加粗居中显示

### 18.3 表格的相关属性 ###

这些属性要写到table标签里面

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>align</td> 
   <td>left,right,center</td> 
   <td>单元格整体的对齐方式</td> 
  </tr> 
  <tr> 
   <td>border</td> 
   <td>0或""(空)</td> 
   <td>规定单元格是否有边框,默认是没有的</td> 
  </tr> 
  <tr> 
   <td>cellpadding</td> 
   <td>像素值</td> 
   <td>创建单元格内容与其边框之间的空白</td> 
  </tr> 
  <tr> 
   <td>cellspacing</td> 
   <td>像素值</td> 
   <td>设置单元格之间的距离</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>像素值或百分比</td> 
   <td>设置表格的宽度</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>像素值或百分比</td> 
   <td>设置表格的高度</td> 
  </tr> 
 </tbody> 
</table>

### 18.4 表格的结构标签 ###

有的时候表格很大,为了更好的表示语义,就可以使用表格结构标签来解决这个问题

<thead></thead> 表格的头部区域 里面必须有<tr>标签 一般位于第一行
    <tbody></tbody> 表格的主体区域

### 18.5 合并单元格 ###

合并单元格的方式

*  跨行合并:rowspan=“合并单元格的个数”
 *  跨列合并:colspan=“合并单元格的个数”

![在这里插入图片描述][3f0c95d3a23d4910807c05829d6e1b93.png]  
目标单元格用来写合并代码

*  跨行合并:最上测为目标单元格
 *  跨列合并:最左侧为目标单元格

合并单元格的三个步骤:

1.  先确定是跨行合并还是跨列合并
2.  找到目标单元格,写合并代码
3.  删除多余的单元格

## 19.列表标签 ##

列表有三大类:== 无序列表,有序列表和自定义列表==

### 19.1 无序列表(重要) ###

<body>
        <ul>
            <li>内容1</li>
            <li>内容2</li>
            <li>内容3</li>
        </ul>
    </body>
    解释:
    1. <ul>标签表示的就是无序列表 里面只能放<li>标签
    2. 列表项用<li>标签来定义 <li>标签里面可以放任意的标签

效果如下:  
![在这里插入图片描述][59e76c21610441019d12a3c54505fbad.png]

### 19.2 有序列表 ###

<ol> 标签表示的就是有序列表 只有这一点不同
    <body>
        <ol>
            <li>内容1</li>
            <li>内容2</li>
            <li>内容3</li>
        </ol> 
    </body>

效果:  
![在这里插入图片描述][e710410d3f984b10a912d49b5c7988d8.png]

### 19.3 自定义列表 ###

> 自定义列表不仅仅是一列项目，而是项目及其注释的组合。

<body>
        <dl>
            <dt>表格</dt>
            <dd>无序列表</dd>
            <dd>有序列表</dd>
            <dd>自定义列表</dd>
        </dl>
    </body>
    解释:
    <dl> 标签用于定义自定义列表
    <dt> 自定义列表项目
    <dd> 用于解释自定义列表项目

效果:  
![在这里插入图片描述][6081e52e6ace4b7cb9bf9377034495ad.png]  
虽然解释自定义列表项目的内容不和自定义列表项目对齐,这是正常现象,可以通过CSS进行修改

## 20. 表单标签 ##

一张完整的表单通常是由表单域,表单控件(表单元素)和提示信息构成

### 20.1 表单域 ###

表单域是表示表单元素的区域

<from action="url地址" method="提交方式" name="表单域名称">
             
        </from>
    解释:
    <from> 标签用于定义表单域
    <from> 会把表单元素信息提交给服务器

常用属性:

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>属性值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>action</td> 
   <td>url地址</td> 
   <td>用于指定接受并处理表单数据的服务器的url的地址</td> 
  </tr> 
  <tr> 
   <td>method</td> 
   <td>get或post</td> 
   <td>用于设置表单的提交方式,值为get或post</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td>名称</td> 
   <td>指定表单的名称,用于区分同一区域内多个表单域</td> 
  </tr> 
 </tbody> 
</table>

### 20.2 表单控件(表单元素) ###

表单元素是允许用户在表单中输入内容  
接下来重点介绍以下表单元素:

*  input输入表单元素
 *  select下拉表单元素
 *  textarea文本域元素

<input type="属性值">
    type 是必须要写的属性

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>button</td> 
   <td>定义可点击按钮</td> 
  </tr> 
  <tr> 
   <td>checkbox</td> 
   <td>定义复选框</td> 
  </tr> 
  <tr> 
   <td>file</td> 
   <td>定义输入字段和"浏览"按钮,供文件上传</td> 
  </tr> 
  <tr> 
   <td>hidden</td> 
   <td>定义隐藏的输入字段</td> 
  </tr> 
  <tr> 
   <td>image</td> 
   <td>定义图像形式的提交按钮</td> 
  </tr> 
  <tr> 
   <td>password</td> 
   <td>定义密码字段,该字段的字符会被掩盖</td> 
  </tr> 
  <tr> 
   <td>radio</td> 
   <td>定义单选按钮</td> 
  </tr> 
  <tr> 
   <td>reset</td> 
   <td>定义重置按钮,重置按钮会清楚表单内的所有数据</td> 
  </tr> 
  <tr> 
   <td>submit</td> 
   <td>定义提交按钮,提交按钮会将表单元素提交给服务器</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>定于单行的输入字段,用户可输入文本,默认宽度为20字符</td> 
  </tr> 
  <tr> 
   <td>email</td> 
   <td>限制用户必须输入Email类型</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>限制用户必须输入url类型</td> 
  </tr> 
  <tr> 
   <td>date</td> 
   <td>限制用户必须输入日期类型</td> 
  </tr> 
  <tr> 
   <td>time</td> 
   <td>限制用户必须输入时间类型</td> 
  </tr> 
  <tr> 
   <td>month</td> 
   <td>限制用户必须输入月份类型</td> 
  </tr> 
  <tr> 
   <td>week</td> 
   <td>限制用户必须输入周类型</td> 
  </tr> 
  <tr> 
   <td>number</td> 
   <td>限制用户必须输入数字类型</td> 
  </tr> 
  <tr> 
   <td>tel</td> 
   <td>手机号码</td> 
  </tr> 
  <tr> 
   <td>search</td> 
   <td>搜索框</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>生成一个颜色选择表单</td> 
  </tr> 
 </tbody> 
</table>

### 20.3 label标签 ###

<label for="值">文本</label>
    <input type="" name="" id="值">
    解释:    	
    <label>标签为input元素定义标注
    <label>标签用于绑定一个表单元素,
    当点击<lable>标签里面的文本时,
    浏览器会自动将光标转到或者选择对应的表单元素上,
    增加用户的体验
    注意:for里面的值和id里面的值必须是一样的

### 20.4 select标签 ###

**select标签就是下拉列表标签**,应用场景:如填写家庭地址之类的,会提供省份和城市供用户选择,这时候就可以使用select标签来实现这个功能

<body>
        选择:
        <select>
            <option>选项一</option>
            <option>选项二</option>
            <option>选项三</option>
        </select>
    </body>
    解释:
    <select>标签里面至少有一对<option>标签
    <option selected="selected">文本</option> -> 
    <option>标签里面可以加selected="selected"这一句话,那么此时默认选项就是当前选项

效果:  
![在这里插入图片描述][b1b7c91d501b40a09530a8fb2584d454.png]

### 20.5 textarea文本域标签 ###

在表单元素中,textarea标签用于定义多行文本输入的控件,使用textarea标签可以输入更多的文字

<from>
            <textarea rows="5" cols="20">
                默认文字
            </textarea>
        </from>
    rows="" 这是显示的行数
    cols=""这是每行有多少字
    默认文字可加可不加

效果:  
![在这里插入图片描述][26126860a39245f29f1ac8331aec7c0b.png]

### 20.6 表单属性 ###

在HTML5中还新增了一些表单属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>required</td> 
   <td>required</td> 
   <td>表单拥有该属性的内容不能为空,一定要填</td> 
  </tr> 
  <tr> 
   <td>placeholder</td> 
   <td>提示文本</td> 
   <td>表单的提示信息,存在默认值不显示</td> 
  </tr> 
  <tr> 
   <td>autofocus</td> 
   <td>autofocus</td> 
   <td>页面加载完成后自动聚焦到指定表单</td> 
  </tr> 
  <tr> 
   <td>autocomplete</td> 
   <td>off/on</td> 
   <td>在用户进行输入时,会提示之前输入过的值,需要放在表单内,要有name属性且成功提交才可以</td> 
  </tr> 
  <tr> 
   <td>multiple</td> 
   <td>multiple</td> 
   <td>同时多选文件提交</td> 
  </tr> 
 </tbody> 
</table>

## 21. 语义标签 ##

之前布局页面使用div来做的,但是对搜索引擎来说,div是没有语义的  
因此HTML5里面就新增了一些语义标签

<header></header> 头部标签
    <nav></nav> 导航标签
    <article></article> 内容标签
    <section></section> 定义文档某个区域
    <aside></aside> 侧边栏标签
    <footer></footer> 底部标签
    解释:
    这些标签要配合CSS来使用
    在IE9中,需要将这些元素转化为块级元素

## 22. 多媒体标签 ##

在HTML5中新增了多媒体标签video和audio标签,这两个标签可以帮助我们很方便的在网页中嵌入音频和视频

### 22.1. 视频标签 ###

video里的常用属性:

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>controls</td> 
   <td>controls</td> 
   <td>向用户显示播放控件</td> 
  </tr> 
  <tr> 
   <td>autoplay</td> 
   <td>autoplay</td> 
   <td>视频就绪自动播放</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>像素</td> 
   <td>设置播放器宽度</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>像素</td> 
   <td>设置播放器高度</td> 
  </tr> 
  <tr> 
   <td>loop</td> 
   <td>loop</td> 
   <td>设置播是否继续播放视频,循环播放</td> 
  </tr> 
  <tr> 
   <td>preload</td> 
   <td>auto(预先加载视频) none(不预先加载视频)</td> 
   <td>是否加载视频</td> 
  </tr> 
  <tr> 
   <td>src</td> 
   <td>url</td> 
   <td>视频url地址</td> 
  </tr> 
  <tr> 
   <td>poster</td> 
   <td>Imgurl</td> 
   <td>加载等待的画面图片</td> 
  </tr> 
  <tr> 
   <td>muted</td> 
   <td>muted</td> 
   <td>静音播放</td> 
  </tr> 
 </tbody> 
</table>

video标签只支持3种视频样式,分别是**MP4,WebM和Ogg** 尽量使用MP4的视频样式

## 23. 音频标签 ##

音频标签同样支持3中格式的音频,分别是**MP3,Wav和Ogg**格式的音频,尽量使用MP3格式的音频  
常见属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>autoplay</td> 
   <td>autoplay</td> 
   <td>音频就绪后马上播放</td> 
  </tr> 
  <tr> 
   <td>controls</td> 
   <td>controls</td> 
   <td>向用户显示播放控件,如播放按钮</td> 
  </tr> 
  <tr> 
   <td>loop</td> 
   <td>loop</td> 
   <td>设置音频循环播放</td> 
  </tr> 
  <tr> 
   <td>src</td> 
   <td>url</td> 
   <td>音频url地址</td> 
  </tr> 
 </tbody> 
</table>

## 24. 总结 ##

> 感谢你的观看!  
> 前端的知识点很多,有些地方最好还是自己尝试一下比较好,可以方便理解和记忆.  
> 建议收藏后面可以还会增加一些新的东西  
> ![在这里插入图片描述][e40fd8ea24044a7d9e339593e692e46b.png_pic_center]

[34086422406a4b2abb4281bf0318d988.png]: https://img-blog.csdnimg.cn/34086422406a4b2abb4281bf0318d988.png
[e7ce89ee329d4cbc82d81d6d7603c54f.png]: https://img-blog.csdnimg.cn/e7ce89ee329d4cbc82d81d6d7603c54f.png
[8b5502a1afea441aa90deef26067a452.png]: https://img-blog.csdnimg.cn/8b5502a1afea441aa90deef26067a452.png
[0d43d7c14c9b49cda74432eb47337458.png]: https://img-blog.csdnimg.cn/0d43d7c14c9b49cda74432eb47337458.png
[ea9629590e214370be911b1f7e1f902b.png]: https://img-blog.csdnimg.cn/ea9629590e214370be911b1f7e1f902b.png
[a1532490ba82440797ce2b3138d92936.png]: https://img-blog.csdnimg.cn/a1532490ba82440797ce2b3138d92936.png
[389fce87c7e044f5905dda6b05bfdfdd.png]: https://img-blog.csdnimg.cn/389fce87c7e044f5905dda6b05bfdfdd.png
[957781dbe46e4ac891cd7eb671bb1abd.png]: https://img-blog.csdnimg.cn/957781dbe46e4ac891cd7eb671bb1abd.png
[3f0c95d3a23d4910807c05829d6e1b93.png]: https://img-blog.csdnimg.cn/3f0c95d3a23d4910807c05829d6e1b93.png
[59e76c21610441019d12a3c54505fbad.png]: https://img-blog.csdnimg.cn/59e76c21610441019d12a3c54505fbad.png
[e710410d3f984b10a912d49b5c7988d8.png]: https://img-blog.csdnimg.cn/e710410d3f984b10a912d49b5c7988d8.png
[6081e52e6ace4b7cb9bf9377034495ad.png]: https://img-blog.csdnimg.cn/6081e52e6ace4b7cb9bf9377034495ad.png
[b1b7c91d501b40a09530a8fb2584d454.png]: https://img-blog.csdnimg.cn/b1b7c91d501b40a09530a8fb2584d454.png
[26126860a39245f29f1ac8331aec7c0b.png]: https://img-blog.csdnimg.cn/26126860a39245f29f1ac8331aec7c0b.png
[e40fd8ea24044a7d9e339593e692e46b.png_pic_center]: https://img-blog.csdnimg.cn/e40fd8ea24044a7d9e339593e692e46b.png#pic_center