1、HTML简介
1.1 HTML是什么？
- HTML 是 HyperText Mark-up Language 的⾸字母简写，意思是 超文本标记语言
- HTML不是一种编程语言，而是一种 标记语⾔
- 超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成
- ⽤这种语言制作的文件保存的是一个文本文件，文件的扩展名为 .html 或者 .htm
- html文档也叫 Web页面，其实就是一个网页，html文件用编辑器打开显示的是文本 ，可以⽤文本的方式编辑它
如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页
1.2 HTML的版本发展历史
1.3 HTML⽂文档类型的设定
HTML在不同版本下文档类型的设定，即 <!Doctype > 对应的属性值。
(1) HTML , 对应早期的 HTML4.0.1, 其基本结构如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title></head><body></body></html>
(2) XHTML ，其基本结构如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> </body> </html>(3) HTML5 ，其基本格式如下:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html>2. HTML基础语法
2.1 HTML基本结构
HTML文件的扩展名为 .html 或者 .htm
- HTML文本的结构包括“头”部分（head）、和“主体”部分（body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容
- HTML是由： 标签 和 内容 构成, 每个HTML页面都有两部分构成(head头和body体)，其最外层是 … 标签包裹
- HTML标签（标记）的语法是由 < 和 > 括起来。
- HTML标签有两种： 双标签 ： <标签名>….</标签名> 和 单标签 ： <标签名 />
- HTML标签中还可以添加属性： <标签名 属性名1=“值1” 属性名2=“值2” 属性名n=“值n”>….</标签名>
HTML标签规范：标签名小写、属性使用双引号、标签要闭合。规范不遵守浏览器不会报错，会尽量解析，大不了不显示效果 ^_^ 。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页标题</title> <!-- 此处可以写各种页头属性设置、CSS样式和JavaScript脚本等... --> </head> <body> 网页显示内容 </body> </html>2.2 HTML注释
html文档代码中可以插入注释，注释是对代码的说明和解释
<!-- 这就是唯一的一种HTML注释了 -->2.3 HTML中HEAD头部设置
head标签作用于网页的头部，它的内容不会在正文中显示出来，主要完成对当前页面的各种设置
在head中常包含如下子标签： | 标签 | 描述 | 示例 | | —- | —- | —- | |
| 定义了文档的标题 | 网页标题:<br /> | | <base> | 定义了页面链接标签的默认链接地址 | <base href="http://www.****.com/"<br ></base>target=”_blank”> | | <link> | 定义了一个文档和外部资源之间的关系 | 导入CSS文件<br /><link type="text/css" rel="stylesheet"<br />href=”**.css”/> | | <meta> | 定义了HTML文档中的元数据 | 设置网页编码、关键字、描述<br /><meta charset="utf-8"/><br /><meta name="Keywords" content="关键字"<br />/><br /><meta name="Description" content="简介、<br />描述" /> | | <script> | 定义了客户端的脚本文件 | <script ><br />JavaScript脚本程序<br /></script> | | <style> | 定义了HTML文档的样式文件 | <style type="text/css"><br />嵌入css样式代码<br /></style> |</p> </li><li><p>具体示例例如下：</p> <pre><code class="lang-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页标题</title> <meta name="Keywords" content="关键字" /> <meta name="Description" content="简介、描述" /> <link type="text/css" rel="stylesheet" href="**.css"/> <style type="text/css"> 嵌入css样式代码 </style> <script > JavaScript脚本程序 </script> </head> <body> <h3>网页显示内容</h3> </body> </html> </code></pre> <p><a name="xjCx6"></a></p> <h1 id="5gzmy8"><a name="5gzmy8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3. HTML文本标签</h1><p>常用文本标签如下：</p> </li><li><p><hn>…</hn> 其中n为1—6的值。 标题标签（加粗、独立行）</p> </li><li><i>…</i> 斜体</li><li><em>…</em> 强调斜体</li><li><b>…</b> 加粗</li><li><strong>…</strong> 强调加粗</li><li><cite></cite> 作品的标题（引用）</li><li><sub>…</sub> 下标 <sup>…</sup> 上标</li><li><del>…</del> 删除线</li></ul> <p>示例代码：</p> <pre><code class="lang-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本标题示例</title> </head> <body> <h3>HTML标签实例--文本标签</h3> <h1>h1标题</h1> <h2>h2标题</h2> <h3>h3标题</h3> <h4>h4标题</h4> <h5>h5标题</h5> <h6>h6标题</h6> <i>i: 斜体标签</i> <br/> <em>em: 强调斜体标签</em> <br/> <b>b: 加粗标签</b><br/><br/> <strong>strong: 强调加粗标签</strong><br/> <del>del: 删除线</del><br/> <u>u: 下划线</u> <br/><br/> 水分子：H<sub>2</sub>O <br/> 4<sup>2</sup>=16 </body> </html> </code></pre> <p>运行效果如下：<br /><img src="https://cdn.nlark.com/yuque/0/2020/png/2210628/1597377971178-0014299a-781c-48ce-902a-dd06668ff68a.png#align=left&display=inline&height=659&margin=%5Bobject%20Object%5D&name=image.png&originHeight=659&originWidth=1034&size=86077&status=done&style=none&width=1034" alt="image.png"></p> <ul> <li>HTML 中有用的字符实体</li><li>注释：实体名称对大小写敏感！</li></ul> <p><img src="https://cdn.nlark.com/yuque/0/2020/png/2210628/1597377992433-2895893a-ccc7-4fc5-85ba-9ae943760a5b.png#align=left&display=inline&height=851&margin=%5Bobject%20Object%5D&name=image.png&originHeight=851&originWidth=1034&size=118068&status=done&style=none&width=1034" alt="image.png"> <a name="3XvtC"></a></p> <h1 id="7hqggn"><a name="7hqggn" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4. HTML格式化标签</h1><p>常见格式化标签如下：</p> <ul> <li><br/> 换行</li><li><p>…</p> 换段</li><li><hr /> 水平分割线</li><li>列表：<ul> <li><ul>…</ul> 无序列表</li><li><ol>…</ol> 有序列表 其中type类型值：A a I i 1 start属性表示起始值</li><li><li>…</li> 列表项<ul> <li><dl>…</dl> 自定义列表</li><li><dt>…</dt> 自定义列表头</li><li><dd>…</dd> 自定义列表内容</li></ul> </li></ul> </li><li><div>…</div> 常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化</li><li><span>…</span> 常用于包含的文本，您可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。</li></ul> <p>示例代码：</p> <pre><code class="lang-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML标签实例--格式化标签</title> </head> <body> <h3>HTML介绍</h3> <p>超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的⼀个应用。HTML 不 是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。</p> <p>“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。<br/> 超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提 供关于网页的信息，“主体”部分提供网页的具体内容。</p> <hr/> <!-- 列表标签 --> 你的爱好： <ul> <li>看书</li> <li>上网</li> <li>爬山</li> <li>唱歌</li> </ul> <ol type="a"> <li>看书</li> <li>上网</li> <li>爬山</li> <li>唱歌</li> </ol> <dl> <dt>问：HTML?</dt> <dd>答：超⽂本标记语言</dd> <dt>问：HTML?</dt> <dd>答：超文本标记语言</dd> <dt>问：HTML?</dt> <dd>答：超文本标记语言</dd> </dl> <div>aaa</div> <div>bbb</div> <span>aaaa</span><span>bbbb</span> </body> </html> </code></pre> <p>运行效果如下：<br /><img src="https://cdn.nlark.com/yuque/0/2020/png/2210628/1597378712018-8f92208b-6002-4918-9707-e0fd06e332d1.png#align=left&display=inline&height=853&margin=%5Bobject%20Object%5D&name=image.png&originHeight=853&originWidth=1034&size=160579&status=done&style=none&width=1034" alt="image.png"> <a name="rNU9u"></a></p> <h1 id="335cby"><a name="335cby" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5. HTML图像标签</h1><ul> <li>在HTML网页中插入一张图片，使用img标签，他是一个单标签： <img /></li><li>其中img标签中常用属性如下：<ul> <li>src： 图片名及url地址</li><li>alt: 图片加载失败时的提示信息</li><li>title：文字提示属性</li><li>width：图片宽度</li><li>height：图片高度</li><li>border：边框线粗细</li></ul> </li></ul> <p><strong>理解 绝对路径和 相对路径:</strong><br />绝对路径：</p> <ul> <li>绝对路径就是你的主页上的文件或目录在硬盘上真正的路径，(URL和物理路径)</li><li>例如：<ul> <li>C:\xyz\test.txt 代表了test.txt文件的绝对路径。</li><li><a rel="nofollow" href="http://www.sun.com/index.htm">http://www.sun.com/index.htm</a>也代表了一个URL绝对路径。</li></ul> </li></ul> <p>相对路径：</p> <ul> <li>相对与某个基准目录的路径。包含Web的相对路径（HTML中的相对目录），</li><li>例如：</li><li>在Web开发中，”/“代表Web应用的根目录。</li><li>和物理路径的相对表示，<ul> <li>例如：”./“ 代表当前目录,</li><li>“../“代表上级目录。这种类似的表示，也是属于相对路径。</li></ul> </li></ul> <p>示例代码：</p> <pre><code class="lang-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h3>HTML标签实例--图片标签</h3> <img src="./images/a.jpg" title="图片" width="300" /> <img src="./images/add.jpg" alt="二⽉兰花图片" width="300" /> <img src="./images/a.jpg" width="280" border="2" /> </body> </html> </code></pre> <p><a name="6c4787c6"></a></p> <h1 id="7atear"><a name="7atear" class="reference-link"></a><span class="header-link octicon octicon-link"></span>6. HTML超链接标签</h1><p>超级链接标签a：</p> <ul> <li>格式： <a href="链接目标url地址">显示文字</a></li><li>a标签的属性：<ul> <li>href: 必须，指的是链接跳转地址</li><li>target: 表示链接的打开方式：<ul> <li>_blank 新窗口</li><li>_parent 父窗口</li><li>_self 本窗口（默认）</li><li>_top 顶级窗口</li><li>framename 窗口名</li><li>title：文字提示属性（详情）</li></ul> </li></ul> </li><li>锚点链接：<ul> <li>定义一个锚点： <a id="a1"></a> 以前使用的是 <a name="a1"></a></li><li>使用锚点： <a href="#a1">跳到a1处</a></li></ul> </li></ul> <pre><code class="lang-html"><!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> <h1>HTML实例-超级链接a标签</h1> <!-- 锚点链接 --> <a href="#mv1">美女1</a><br/><br/> <a href="#mv2">美女2</a><br/><br/><br/><br/> <!-- 普通超级链接 --> <a href="https://www.baidu.com" title="百度链接">百度1</a> <br/> <a href="https://www.baidu.com" target="_blank">百度2</a> <br/><br/> <a href="./c.html" target="_blank">图片标签实例</a> <br/><br/> <a id="mv1"></a> <h4>美女图片1</h4> <img src="./images/11.jpg" width="100%"/><br/><br/> <a id="mv2"></a> <h4>美女图片2</h4> <img src="./images/22.jpg" width="100%"/><br/><br/> </body> </html> </code></pre> <p><a name="47d5c86d"></a></p> <h1 id="d6xww6"><a name="d6xww6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>7. HTML表格标签</h1><p>表格中的标签：<br /><img src="https://cdn.nlark.com/yuque/0/2020/png/2210628/1597411799475-a9e629f6-fb1f-4d76-95c6-458da1c54f2b.png#align=left&display=inline&height=564&margin=%5Bobject%20Object%5D&name=image.png&originHeight=564&originWidth=1047&size=87915&status=done&style=none&width=1047" alt="image.png"><br />示例代码：</p> <pre><code class="lang-html"><!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> <h1>HTML实例--表格标签</h1> <table border="1" width="500" cellspacing="0" cellpadding="4"> <caption><h2>学生信息表</h2></caption> <thead> <tr> <th>学号</th> <th>姓名</th> <th>年龄</th> <th>班级</th> </tr> </thead> <tbody> <tr> <td>1001</td> <td>张三</td> <td>20</td> <td rowspan="2" align="center" valign="top">t201班</td> </tr> <tr> <td>1002</td> <td>李四</td> <td>22</td> <!--<td>t201班</td>--> </tr> <tr> <td>1003</td> <td>王五</td> <td>25</td> <td>t200班</td> </tr> <tr> <td>1004</td> <td>赵六</td> <td colspan="2" align="center">21</td> <!--<td>t202班</td>--> </tr> </tbody> </table> </body> </html> </code></pre> <p><a name="f59c6f0c"></a></p> <h1 id="dhbf29"><a name="dhbf29" class="reference-link"></a><span class="header-link octicon octicon-link"></span>8. HTML表单标签</h1><p>(1) <form>…</form> 表单标签<br />form标签常用属性：<br /><em>action属性:提交的目标地址(URL)<br /></em>method属性:提交方式:get(默认)和post<br />get方式是URL地址栏可见,长度受限制(IE2k ⽕火狐8k),相对不安全.<br />post方式是URL地址不可见,长度不受限制,相对安全.<br />enctype:提交类型<br />target: 在何处打开目标 URL。<br />name:属性为表单起个名字.在HTML5中使用 id 代替。<br />(2) <input> 表单项标签input定义输入字段，用户可在其中输入数据。在 HTML 5 中，type 属性有很多新的值。</p> <pre><code>具体在下面有详解： 如：<input type="text" name="username"> *type属性:表示表单项的类型:值如下: text:单行文本框 password:密码输入框 checkbox:多选框 注意要提供value值 radio:单选框 注意要提供value值 file:文件上传选择框 button:普通按钮 submit:提交按钮 image:图片提交按钮 reset:重置按钮, 还原到开始(第一次打开时)的效果 hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改 email 用于应该包含 e-mail 地址的输入域 url 用于应该包含 URL 地址的输入域 number 用于应该包含数值的输入域。 max 规定允许的最大值 min 规定允许的最小值 step 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） value 规定默认值 range 用于应该包含一定范围内数字值的输入域，显示为滑动条 max 规定允许的最大值 min 规定允许的最小值 step 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） value 规定默认值 日期选择器 Date pickers date - 选取日、月、年 month - 选取月、年 week - 选取周和年 time - 选取时间（小时和分钟） datetime - 选取时间、日、月、年（UTC 时间） datetime-local - 选取时间、日、月、年（本地时间） search 用于搜索域，比如站点搜索或 Google 搜索 color 颜色选择 *name属性: 表单项名,用于存储内容值的 *value属性: 输入的值(默认指定值) *placeholder: 预期值的简短的提示信息 size属性: 输入框的宽度值 maxlength属性: 输入框的输入内容的最大长度 readonly属性: 对输入框只读属性 *disabled属性: 禁用属性 *checked属性: 对选择框指定默认选项 accesskey属性: 指定快捷键(不常用) (IE:alt+键 火狐:alt+shift+键) tabindex属性: 通过数字指定tab键的切换顺序(不常用) src和alt是为图片按钮设置的 注意：reset重置按钮是将表单数据恢复到第一次打开时的状态，并不是清空 image图片按钮，默认具有提交表单功能。 </code></pre><p>(3) <select>…</select> 标签创建下拉列表。</p> <pre><code>name属性:定义名称,用于存储下拉值的 size：定义菜单中可见项目的数目，html5不支持 disabled 当该属性为 true 时，会禁用该菜单。 multiple 多选 <option>... </option> 下拉选择项标签,用于嵌入到<select>标签中使用的; *value属性:下拉项的值 *selected属性:默认下拉指定项. </code></pre><p>(4) <textarea>…</textarea> 多行的文本输入区域</p> <pre><code>name :定义名称,用于存储文本区域中的值。 cols ：规定文本区内可见的列数。 rows ：规定文本区内可见的行数。 disabled： 是否禁用 readonly： 只读 ... 默认值是在两个标签之间 </code></pre><p>(5) <button>…</button> 标签定义按钮。<br />您可以在 button 元素中放置内容，比如文档或图像。这是该元素与由 input 元素创建的按钮的不同之处。</p> <p>(6) <fieldset> —fieldset 元素可将表单内的相关元素分组。<br />disabled属性：定义 fieldset 是否可见。<br />form属性： 定义该 fieldset 所属的一个或多个表单。</p> <p>(7) <legend></legend> — 标签为 <fieldset> 、 <figure> 以及 <details> 元素定义标题。</p> <pre><code class="lang-html"><form> <fieldset> <legend>个⼈人信息：</legend> 姓名：<input type="text" /><br/> 年年龄：<input type="text" /><br/> </fieldset> <br/><br/> <fieldset> <legend>健康信息：</legend> 身⾼高：<input type="text" /><br/> 体重：<input type="text" /><br/> </fieldset> </form> </code></pre> <p>(8) <optgroup> html5标签— <optgroup> 标签定义选项组。此元素允许您组合选项</p> <pre><code class="lang-html">城市： <select name="city"> <optgroup label="河北北省"> <option>⽯石家庄</option> <option>保定</option> <option>廊坊</option> </optgroup> <optgroup label="河南省"> <option>郑州</option> <option>安阳</option> <option>周⼝口</option> </optgroup> </select> </code></pre> <p>(9) <datalist> html5标签— <datalist> 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。</p> <pre><code class="lang-html"><form action="demo_form.php" method="get"> 搜索： <input type="search" list="namelist" name="keywords"/> <datalist id="namelist"> <option value="zhangsan"> <option value="zhangsanfeng"> <option value="zhangwuji"> <option value="lisi"> <option value="lixiaolong"> </datalist> </form> </code></pre> <p><a name="ItuKP"></a></p> <h1 id="ah8fau"><a name="ah8fau" class="reference-link"></a><span class="header-link octicon octicon-link"></span>9. HTML框架标签</h1><pre><code>属性：src：规定在 iframe 中显示的文档的 URL name：规定 iframe 的名称 height：规定 iframe 的高度。 width：定义 iframe 的宽度。 frameborder：规定是否显示框架周围的边框。 例如：<iframe src="1.html" name="myframe" width="700" height="500"></iframe> </code></pre><p><a name="b4b8cce9"></a></p> <h1 id="dsel1n"><a name="dsel1n" class="reference-link"></a><span class="header-link octicon octicon-link"></span>10. HTML5标签</h1><p><a name="1V4iK"></a></p> <h2 id="978e9d"><a name="978e9d" class="reference-link"></a><span class="header-link octicon octicon-link"></span>10.1 新增布局标签：</h2><p><img src="https://cdn.nlark.com/yuque/0/2020/png/2210628/1597412869605-4ca03e42-b33a-4214-92e0-dd797dd93345.png#align=left&display=inline&height=530&margin=%5Bobject%20Object%5D&name=image.png&originHeight=530&originWidth=1047&size=71410&status=done&style=none&width=1047" alt="image.png"> <a name="24e37852"></a></p> <h2 id="bsaq6p"><a name="bsaq6p" class="reference-link"></a><span class="header-link octicon octicon-link"></span>10.2 新增的input type属性值：</h2><p>这些新增的类型，更加细化的限定了输入内容，如果输入格式不对，在提交的时候会自动给出相应提示<br />更多新增type 参考 w3school网站<br /><img src="https://cdn.nlark.com/yuque/0/2020/png/2210628/1597412962638-e4288e46-1f55-4e6e-80d4-21bb4d9707ae.png#align=left&display=inline&height=644&margin=%5Bobject%20Object%5D&name=image.png&originHeight=644&originWidth=906&size=86603&status=done&style=none&width=906" alt="image.png"> <a name="accf72c9"></a></p> <h2 id="bd99i6"><a name="bd99i6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>10.3 新增的input 属性</h2><p><img src="https://cdn.nlark.com/yuque/0/2020/png/2210628/1597413012575-d1d5a9e4-8ac3-4ac2-bdac-79d9c7856238.png#align=left&display=inline&height=404&margin=%5Bobject%20Object%5D&name=image.png&originHeight=404&originWidth=895&size=61175&status=done&style=none&width=895" alt="image.png"> <a name="9gNvP"></a></p> <h2 id="bqgv1d"><a name="bqgv1d" class="reference-link"></a><span class="header-link octicon octicon-link"></span>10.4 多媒体标签</h2><table> <thead> <tr> <th style="text-align:left">标签</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><embed></td> <td style="text-align:left">定义内嵌对象。HTML4 中不赞成，HTML5 中允许。</td> </tr> <tr> <td style="text-align:left"><object></td> <td style="text-align:left">定义内嵌对象。</td> </tr> <tr> <td style="text-align:left"><param></td> <td style="text-align:left">定义对象的参数。</td> </tr> <tr> <td style="text-align:left"><audio><strong>New</strong></td> <td style="text-align:left">定义了声音内容</td> </tr> <tr> <td style="text-align:left"><video><strong>New</strong></td> <td style="text-align:left">定义一个视频或者影片</td> </tr> <tr> <td style="text-align:left"><source><strong>New</strong></td> <td style="text-align:left">定义了media元素的多媒体资源(<video> 和 <audio>)</td> </tr> <tr> <td style="text-align:left"><track><strong>New</strong></td> <td style="text-align:left">规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)</td> </tr> </tbody> </table> <pre><code class="lang-html"><!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> <h1>HTML多媒体标签</h1> <audio src="./images/beidahuang.mp3" controls="controls"> 你的浏览器不支持audio音频标签 </audio> <br/> <audio controls> <source src="./images/beidahuang.mp3" type="audio/mpeg" /> 你的浏览器不支持audio音频标签 </audio> <br/><br/> <video src="./images/fun.mp4" controls="controls" width="400" height="400"> 你的浏览器不支持video视频标签 </video> <br/><br/> <video controls="controls" width="400" poster="./images/11.jpg" height="400"> <source src="./images/fun.mp4" type="video/mp4" /> 你的浏览器不支持video视频标签 </video> <br/><br/> <embed src="./images/haowan.swf" width="300" height="300" /> </body> </html> </code></pre> <p><a name="9HwfN"></a></p> <h1 id="62vg3c"><a name="62vg3c" class="reference-link"></a><span class="header-link octicon octicon-link"></span>11.案例练习</h1><p>做一个简单的视频播放网站，所有视频以图片列表的形式显示，当用户点击图片，可以在页面下方播放对应的视频。 <br />案例代码：<br /></p> <pre><code class="lang-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>电影播放器</title> </head> <body> <a href="./videos/17张牌你能秒我？.mp4" target="播放器"> <img src="./images/1.jpg" alt="17张牌你能秒我？" width="19%" height="200"> </a> <a href="./videos/最 强 法 海.mp4" target="播放器"> <img src="./images/2.jpg" alt="最强法海" width="19%" height="200"> </a> <a href="./videos/逮虾户.mp4" target="播放器"> <img src="./images/3.jpg" alt="逮虾户" width="19%" height="200"> </a> <a href="./videos/火影.mp4" target="播放器"> <img src="./images/4.jpg" alt="火影" width="19%" height="200"> </a> <a href="./videos/敢 杀 我 的 马？.mp4" target="播放器"> <img src="./images/5.jpg" alt="敢杀我的马？" width="19%" height="200"> </a> <br/> <br/> <br/> <iframe src="./videos/17张牌你能秒我？.mp4" name = "播放器" frameborder="2" width="100%" height="500"></iframe> </body> </html> </code></pre>
若有收获，就点个赞吧
0 人点赞
