目录
1 HTML基本结构
<!DOCTYPE html>
<!-- html 基本结构的快捷方式 !+回车enter -->
<html>
<!-- head标记，是HTML的子标记，有且只有一个 -->
<head><!-- html 头部 -->
<title>HTML的基本结构</title><!-- 展示在浏览器最上面的一栏 -->
</head>
<body>
用来定义网页内的可见内容
</body>
</html>
<!-- </HTML>是整个页面的跟标记 -->2 HTML元素
HTML文档由各种HTML元素来组成，而HTML元素指的就是一个个书写完整的标签(标记)。 以下通过案例来说明。
| 元素 | 开始标签 | 元素内容 | 结束标签 |
|---|---|---|---|
<p>桃花潭水深千尺</p> | <p> | 桃花潭水深千尺 | </p> |
<h1> 管理系统</h1> | <h1> | 管理系统 | </h1> |
<a href="default.htm">点我跳转</a> | <a href="default.htm"> | 点我跳转 | </a> |
| 换行元素 | <br/> | ||
| 划线元素 | <hr/> | ||
| meta元素 | <meta> | 详细内容见4 meta元素 |
开始标签也被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）
HTML元素的语法一般如下：
-
HTML 元素以开始标签起始
-
HTML 元素以结束标签终止
-
元素的内容是开始标签与结束标签之间的内容，也可以称为标签内容体，标签内容区，或者标签体
-
某些 HTML 元素具有空内容（empty content）， 比如上面的换行元素
<br/> -
空元素在开始标签中进行关闭（以开始标签的结束而结束）
-
大多数 HTML 元素可拥有属性
-
HTML元素可以嵌套
3 HTML属性
属于HTML的附加属性
-
属性一般位于开始标签中
-
属性总是以名/值对的形式出现，比如：name=“value”
-
属性的值始终被包括在引号中，常用双引号，单引号也没有问题
-
如果属性的值本身带有双引号，那么您必须使用单引号。例如
name ='my name is "Michael" and' -
属性名和属性值尽量使用小写字母。而新版本的 (X)HTML 要求使用小写属性。
下面列出了适用于大多数 HTML 元素的属性：
| 属性 | 描述 | 备注 |
|---|---|---|
| class | 为html元素定义一个或多个类名（classname）(类名从样式文件引入) | 该属性的值可以有多个，在双引号里使用空格分开 |
| id | 定义元素的唯一id | id作为唯一标识符，只能填写一个，具有唯一性 |
| style | 设置HTML的各种样式 | 规定元素的行内样式（inline style） |
| title | 描述了元素的额外信息 (作为工具条使用) | |
| script | 用来书写交互式代码 |
4 HTML字符实体
在某种特定的场景中无法正常显示时可以用实体代替，一般是由于浏览器误认为它们是标签
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML02-实体</title>
</head>
<body>
<!-- < 的替代实体 < -->
<p>
<hr>
34567
</body>
</html>运行结果：
常用实体如下：
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 人民币/日元 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
⚠️ 注意：实体字符对大小写敏感。
5 元素META
<!DOCTYPE html>
<html lang="en">
<head>
<!-- mate元素可以使用属性charset 来设置当前html文档使用的字符集 -->
<meta charset="UTF-8">
<!-- 使用refresh 刷新页面 -->
<!-- <meta http-equiv="refresh" content="5"> -->
<meta http-equiv="refresh" content="5;url=http://www.runoob.com">
<title>META元素的学习</title>
<style>
/* style元素用来设置HTML的各种样式 */
/* */
</style>
<!-- 当样式的代码过多时，可以将样式代码放入独立的css文件中 -->
<link rel="stylesheet" href="css文件的地址">
<script>
//script属性用来书写交互式代码的,如果交互式代码太多可放入一个独立的js文件中
//也是使用script标签里的属性src引入
</script>
<noscript>
<!-- 你的浏览器不支持javascript -->
<!-- 了解就行 -->
</noscript>
</head>
<body>
ppppps
</body>
</html>6 HTML基础标签
6.1 HTML基础标签-标题/段落
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="5 ">
<title>基础标签的学习</title>
</head>
<body>
<!-- 标题标签，用与设置一级到六级的标题，标签从h1到h2 -->
<h1>编程语言的学习</h1>
<h2>HTML语言</h2>
<h3>常用标签</h3>
<h4>HTML根标记</h4>
<h5>根标记简介</h5>
<h5>更标记练习</h5>
<h6>最小标题</h6>
<!-- hr 是一个水平线标签，是一个字节数标签(空元素，单标签)，也属于块级元素 -->
<hr>
<!-- 段落标记，用与将一段文字包裹起来，可以设置各种样式
可以使用p 标签，也是双标记，属于块级元素
-->
<p>段落1标记，用与将一段文字包裹起来，可以设置各种样式</p>
<p>五十走过</p>
<p>曾经多少次走过的彷徨，曾经多少次跌倒在路上/</p>
<p>彩虹</p>
<hr>
<p>
<!-- 换行标签 br/ 是一个字节数标记（空元素，单标记）在想要换行的位置处，插入换行符 -->
鹅鹅鹅，<br/>
曲项向天歌，<br/>
白毛浮绿水，<br/>
红掌拨清波。<br/>
</p>
</body>
</html>运行结果：
6.2 HTML基础标签-图片标签
img: 行内元素，主要作用是在网页上加入图片，
img内的alt属性是给搜索引擎使用，主要作用是加入关键词，供搜索引擎搜索
用法如下列代码所示
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签的学习</title>
</head>
<!--
图片标签 ：img ,单标签，不是块级原石，是内联元素(行内元素)
作用：在网页上加入图片
属性：
src：用于书写图片的具体位置(网上的照片，也可以是本地磁盘上的图片)
Alt：给搜索引擎使用的
width: 图片的宽
heigth: 高
注意事项：如果设置宽和高中的一项，图片会以原比例缩放
-->
<body>
<h1>引入任意照片</h1>
<img src="用想用导入的照片地址代替" alt="" width="250px" height="300px">
<hr>
<h1>相对路径引入本地磁盘上的照片</h1>
<!--
路径的写法： 相对路径和绝对路径
相对路径：相对的是当前文件所在的文件夹。
当前文件夹的表示方式 ./
注意 ./ 可以省略
-->
<h2>对图片进行说明</h2>
<img src="用想用导入的照片地址代替" alt="">
<h2>对图片进行说明</h2>
<img src="用想用导入的照片地址代替" alt="">
<hr>
<!-- 如果使用了live serve插件那么绝对路径就不是磁盘盘符，而是当前vscode的当前工作路径 -->
<h1>绝对路径引入本地磁盘上的照片</h1>
<h2>对图片进行说明</h2>
<img src="用想用导入的照片地址代替" alt="搜索引擎使用的关键词">
</body>
</html>6.3 HTML基础标签-超链接
基本结构：
<a herf="链接地址">文本或照片路径</a>超链接的属性：
herf： 该属性和图片标签里的src属性相似，都起到提供位置的作用,位置可以是网址，也可以是当前页面的任意位置；
title：超链接的标题，在鼠标悬停时显示；
target：
_blank:点击链接会出现在新的标签页；
_self： 点击链接在本标签页打开；（不设置该属性时，默认值是self）
主要有以下三种连接方式：
1.文字链接
2.图片链接
3.锚点链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接的学习</title>
</head>
<!-- 超链接：点击后跳往另一个界面或本页面的其他位置
属性：
href：与图片的属性src相似，书写目的地的路径
title: 鼠标悬停在超链接上显示的内容
target：去往目的地时， 决定去新标签页，还是本标签页
_blank: 在新标签页打开
_self: 在本标签页打开 默认值
-->
<body>
<h1>文字链接</h1>
<a href="https://www.runoob.com">点我跳往菜鸟教程网站</a>
<a href="https://www.abc.com">点我abc.html</a>
<h1>图片链接</h1>
<a href="https://www.vip.com" title="跳转到唯品会官网" target="_blank">
<img src="./images/1.jpg" alt="图1">
</a>
<h1>锚点链接：跳转到本页面的某一个位置</h1>
<!--
href的值，必须是#开头， 如果只有#表示跳转到当前页面的最顶端
如果是#配合id值，则是跳转到id值所在位置
因此目标位置，应该设置id值
-->
<a href="#c7">点我跳转到章节7</a>
<h1> 章节1</h1>
<p> 段落的内容</p>
<h1> 章节2</h1>
<p> 段落的内容</p>
<h1> 章节3</h1>
<p> 段落的内容</p>
<h1 id="c4"> 章节4</h1>
<p> 段落的内容</p>
<h1> 章节5</h1>
<p> 段落的内容</p>
<h1> 章节6</h1>
<p> 段落的内容</p>
<h1 id="c7"> 章节7</h1>
<p> 段落的内容</p>
<h1> 章节8</h1>
<p> 段落的内容</p>
<h1> 章节9</h1>
<p> 段落的内容</p>
<h1> 章节10</h1>
<p> 段落的内容</p>
<h1> 章节11</h1>
<p> 段落的内容</p>
<h1> 章节12</h1>
<p> 段落的内容</p>
<h1> 章节13</h1>
<p> 段落的内容</p>
<h1 id="c14"> 章节14</h1>
<p> 段落的内容</p>
<h1> 章节15</h1>
<p> 段落的内容</p>
<h1> 章节16</h1>
<p> 段落的内容</p>
<a href="#">回到最顶端</a>
</body>
</html>注意！：使用锚点链接时href=“”，“”之内必需加上#，再有跳转开头标签加上id值
6.4 HTML基本标签-按钮
基本按钮标签： button 双标记 内容体内可以放入文字或图片
οnclick="alert('你好')"；提示文本为你好
建议：添加type属性，指定属性值为button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮button的学习</title>
</head>
<body>
<button type="button" onclick="alert('你好')">点我提示你好</button>
<button type="button" onclick="alert('世界')">
这里输入文本，或添加图片均可
</button>
</body>
</html>运行代码/点击按钮：
7 HTML格式化标签
以下是一些常用的文本格式化标签：
-
<strong>加重语气的的文本 -
<b>加粗,bold的意思 -
<em>斜体效果，强调作用 -
<i>斜体效果itatic -
<pre>预格式化文本 -
<small>更小的文本 -
<code>用于存放计算机代码 -
<bdo>文字显示的方向 -
<blockquote>引用标签 ：对引用的文本加双引号 -
<q>双引号标签 -
<del>删除文本 -
<ins>插入文本 ：插入的文本会有下划线 -
<sub>下标文本 -
<sup>上标文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>格式化标签</title>
</head>
<body>
<a href="#down">我下去喽</a>
<h1>强调，加粗</h1>
<p><strong>我最帅</strong> ，，<b>噜啦噜啦嘞</b> 鹅鹅鹅 </p>
<h1>强调，斜体</h1>
<p>日照<em>香炉</em>生紫烟，遥看<em>瀑布</em>挂前川</p>
<p>我轻轻的走过你身旁的 <i>花丛中</i></p>
<h1>java代码</h1>
<code>
system.out.println("hello world");
</code>
<h1>预编译标签pre</h1>
<pre>
<!-- 保留文本当前的状态 -->
你好！ 前面三个空格
第二行
第三行
</pre>
<h1>bdo 改变文字方向</h1>
<bdo dir="rtl">你好！</bdo>
<h1>引用 双引号 </h1>
<p>鹅鹅鹅
<blockquote> --骆宾王</blockquote>
<q>鹅鹅鹅</q>， <br>曲项向天歌， <br>白毛浮绿<sub>水</sub>， <br>红掌拨清<sup>波</sup>。<br>
</p>
<h1>small标签</h1>
感兴趣自学<small>感兴趣自学</small>
<br>
<h1>删除文本</h1>
<p>我轻轻的走过你身旁的 花丛中</p><br>
<p>我轻轻的走过你身旁的 <del>花丛中</del></p><br>
<h1>插入文本</h1>
<p>我轻轻的走过你身旁的 <ins>花丛中</ins></p>
<h1>上/下标文本</h1>
<p>我轻轻的走过你身旁的 <sub>花丛中</sub><ins>飞呀飞</ins></p><br>
<p>我轻轻的走过你身旁的 <sup>花丛中</sup></p><br>
<a id="down" href="#">我回去了</a>
</body>
</html>8 HTML列表标签
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
8.1 无序列表
-
无序列表是一个项目的列表，列表项使用粗体圆点（典型的小黑圆圈）进行标记。
-
无序列表使用
<ul>标签，列表项使用<li>标签
<h1>无序列表</h1>
东北三省的名称：
<ul>
<li>吉林省</li>
<li>辽宁省</li>
<li>黑龙江省</li>
</ul>8.2 有序列表
-
有序列表也是一列项目，列表项使用数字进行标记。
-
有序列表始于
<ol>标签。每个列表项始于<li>标签。<h1>有序列表</h1> <ol> <li>吕布</li> <li>赵云</li> <li>典韦</li> <li>关羽</li> <li>马超</li> </ol>
8.3 自定义列表
-
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
-
自定义列表以
<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。
<h1>自定义列表</h1>
<!-- dl作为父标签 -->
<dl>
<dt>北京</dt>
<dd>北京是中国的首都，人口最多的城市</dd>
<dt>深圳</dt>
<dd>是一座城市</dd>
<dt>杭州</dt>
<dd>是最近几年发展最快的城市，科技公司大多想去哪，是美食荒漠</dd>
</dl>9 HTML表格标签
标签说明：
<table> 元素表示整个表格，在整体上可以分成四个部分：<caption>，<thead> ，<tbody> 和 <tfoot>
-
<caption>为整个表格定义主题 -
<thead>表格头部部分(也称表格页眉)。-
<th>在<thead>中使用<th>元素定义每一列的标题，有加粗效果，与普通单元格区分开来。（table header）
-
-
<tbody>表格主体部分-
<tr>在<tbody>中使用<tr>元素定义行（table row 的缩写） -
<td>在<tr>中使用<td>元素定义单元格数据（ table data 的缩写）
-
-
<tfoot>可用于在表格的底部定义摘要、统计信息等内容
案例演示1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格的学习</title>
</head>
<!-- 一般用于结构化的数据，有行有列，每一列都有标题
过去也用表格做页面整体布局，现在用div
bordor :边框的宽度
cellspacing：单元格之间的距离
cellpadding: 内容区距离单元格边框的距离
align: 表格整体的位置 center left right
width: 表格整体的宽度 可以是具体像素，也可以是屏幕的百分比
-->
<body>
<table border="20px" cellspacing="0px" cellpadding="5px" width="50%" align="center">
<caption><b>学生信息</b></caption>
<thead>
<tr>
<!-- th 表头用的单元格 -->
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>1</td>
<td>张三</td>
<td>19</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>19</td>
<td>男</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>18</td>
<td>女</td>
</tr>
</tbody>
<tfoot align="center">
<tr>
<td>统计</td>
<td>统计</td>
<td>统计</td>
<td>统计</td>
</tr>
</tfoot>
</table>
</body>
</html>运行结果：
rowspan: 跨行属性，跨几行就写数字几
colspan: 跨列属性，跨几列就写数字几
案例演示2：
<!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>
<table border="1px" cellspacing="0px" width="800px" align="center">
<tr>
<td>1</td>
<td colspan="3">1</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td>2</td>
<td>2</td>
<td rowspan="3">2</td>
</tr>
<tr>
<td colspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</table>
</body>
</html>运行结果：
10.表单form
form是整个表单的父元素，action是表单form的属性，是用于提交表单数据的路径；
method属性：它用于定义表单数据的提交方式，可以是以下值：
-
post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
-
get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。
子元素：
fieldset：表单的整个边框
在边框上使用表单标题可以使用legend，在边框的那一条线上添加内容
label:用于设置文字标签，扩大文字的点击域，其中的for属性用于关联某一个input，使用id值进行关联
input:输入元素框，，可以根据type属性的不同值定义不同的输入类型；
type属性：定义输入框的内容
text:文本框，用于文本输入，默认值可以省略；
file:用于上传本地文件；
password:密码框，输入的密码会用 . 或 * 代替；
radio:单选框，当属性name的值相同时，才有单选的属性，
checked:默认值，即加入该属性的，radio框会被默认选中；
checkbox: 复选框，与单选框类似，都需要有相同的name值，才能算为一组；
hidden:隐藏不需要对外展示的内容或修改；
submit:当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。
注意：input元素下，type属性只能有一个，多写浏览器只认第一个；
id属性：用于关联label标签，具有唯一标识的作用，不可重复
name属性：用于定义向服务器提交的数据 keyvalue 中 key 的名字；
value属性：用于接收用户输入的内容。
select属性：下拉菜单选择元素
name属性：用于定义提交到服务器的name具体值
option子元素：用于定义下拉菜单选项；
taxtarea:文本输入域，可输入的文本框比较大，也可以输入行数和列数,也可以在页面自由扩大或缩小文本域的大小
注意：与input的type="text" 的区别，text只有一行文本输入，且不可调节大小
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单form的学习</title> </head> <body> <form action="ac.ac" method="post"> <fieldset> <legend>表单演示</legend> <label for="username">姓名</label> <input type="text" id="username"> <br> <label for="password">密码</label> <input type="password" id="password"> <br> <label for="">性别</label> <input type="radio" name="gender" id="male" value="m" checked> <label for="male">男</label> <input type="radio" name="gender" id="female" value="f"> <label for="female">女</label> <hr> <label for="">爱好</label> <input type="checkbox" id="book" name="hobby" value="book" checked><label for="book">读书</label> <input type="checkbox" id="music" name="hobby" value="music"><label for="music">音乐</label> <input type="checkbox" id="action" name="hobby" value="action"><label for="action">体育</label> <input type="checkbox" id="huihua" name="hobby" value="huihua"><label for="huihua">绘画</label> <input type="checkbox" id="song" name="hobby" value="song"><label for="song">唱歌</label> <br> <label for="">地址</label> <select name="address" id=""> <option value="bj" selected>北京</option> <option value="sh">上海</option> <option value="gg">广州</option> <option value="hz">杭州</option> </select> <select multiple name="NAME" size=?></select> <hr> <label for="">文件上传</label> <input type="file" name="myfile"> <hr> <label for="">自我介绍</label> <textarea name="mytext" id="id1" rows="5" cols="50"></textarea> <hr> <label for="">隐藏信息</label> <input type="hidden" value="1001"> <hr> <label for="">颜色</label> <input type="color" >
注意： 以下这些属性是HTML5支持的新类型。并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。
color
date
datetime
datetime-local
month
number
range
search
tel
time
url
week
11.HTML区块
HTML 可以通过 <div> 和 <span>将元素组合起来。
元素分类
大多数HTML元素被定义为块级元素或内联元素(行内元素)。
- 块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>， <p>， <ul>，<ol>， <table>、<form>
- 内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>等，只要不是独占一行的，都是内联元素
HTML <div> 元素
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
12.浏览器的自动纠正功能
浏览器会自动的对网页中不符合规范的内容进行纠正
-- 标签写在根元素外面 ，浏览器会自动纠正到body里面去
-- p元素中嵌套了块元素，则会将p元素分解成两个p元素，其他块元素会挪出来
-- 根元素中出现了除了head 和 body 以外的子元素，会自动纠正到body里
13.HTML布局
-
网站布局：
大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。
大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
-
使用div布局
div 元素是用于分组 HTML 元素的块级元素。
现在一般使用css的外部样式或内部样式来对HTML整体布局，内联样式书写不美观，不便于检查，很少使用。
14.HTML5新元素
-
音频标签
audio: 用于加载音频文件
目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。
| 浏览器 | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
基本属性：
| 属性 | 值 | 描述 |
| src | URL | 规定音频文件地址 |
| autoplay | autoplay | 音频准备就绪后会自动播放 |
| controls | controls | 显示音频的控制组件 ，比如暂停，播放 |
| loop | loop | 出现该属性，则表示音频播放结束时会重新开始播放 |
| muted | muted | 出现该属性，音频输出为静音 |
| preload | auto metadata none | 规定当网页加载时，音频是否默认被夹在以及如何被加载 |
根据属性前后控制音频播放，比如：
<audio src="./resource/audio.mp3" autoplay controls >音频</audio>
上述则表示进入网页后音频加载完成后会自动播放，控制按钮可以控制音频的播放和暂停；
注意：不论autoplay属性，放在什么位置，重新加载网页都会自动播放
source元素：当前使用的浏览器如果不支持，音频播放格式，则会自动搜索，直到找到相应的能播放的音频为止；
麻烦的是，要列出所有想要播放的音频地址
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>音频标签学习</title> </head> <!-- 音频标签： audio: 用于加载音频文件 属性： src: 书写音频文件路径 controls: 提供控制，播放/暂停 autoplay: 自动播放 loop: 循环播放 --> <body> <audio src="./resource/audio.mp3" controls autoplay >音频</audio> <!-- 考虑兼容性，有的不支持 可以使用source子元素，浏览器可自上而下寻找可播放的音频，找到一个能播放的就不找了 --> <audio src=""> <source src="./resource/audio.mp3"> <source src="./resource/audio.ogg"> </audio> </body> </html>
视频标签 ：
<video> 标签定义视频，比如电影片段或其他视频流。目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。
基本属性和音频的差不多，比音频属性多下面几个：
| 属性 | 值 | 描述 |
| height | pixels | 设置视频播放器的高度 |
| width | pixels | 设置视频播放器的宽度 |
| poster | url | 规定用户下载时显示的图像，直到用户点击播放为止 |
注意： width 和 height 设置其中的一项都是按比例扩大缩小；
实例演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>视频标签学习</title> </head> <!-- 视频标签 属性： src: 用于书写视频路径 contros: 控制 autopaly: 自动播放 loop: 循环播放 width： heigth: 只设置一个会等比例缩放 --> <body> <video src="./resource/flower.webm" controls loop width="400px">视频</video> <!-- 考虑浏览器兼容问题，不支持的可使用sorce寻找可播放视频文件 --> <video controls> <source src="./resource/flower.webm"> <source src="./resource/flower.webm"> </video> </body> </html>
15.iframe标签
作用：用于将另外的网站嵌入到当前网页下，可以改变网页显示窗口的大小；
属性：
frameborder: 表示是否显示边框，0表示不显示，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> <!-- iframe 标签: 用于讲另一个网页嵌入到当前页面 属性：frameborder 表示是否显示边框，0不显示 ，1显示 可以改变窗口大小 --> <body> <h1>当前页面</h1> <iframe src="https://www.runoob.com" frameborder="1" width="100%" height="800px"></iframe> </body> </html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
