04-前端技术_HTML与HTML5常用标签

原创

再见萤火虫IT 2022-12-26 16:42:38 博主文章分类：JavaEE开发工程师学习之路 ©著作权

文章标签 前端技术 HTML与HTML5常用标签新职课开课吧 JavaEE开发工程师 HTML 文章分类 运维

©著作权归作者所有：来自51CTO博客作者再见萤火虫IT的原创作品，请联系作者获取转载授权，否则将追究法律责任

一，HTML与HTML5常用标签

学前准备

1，HTML简介

1.1 HTML是什么

1.2 HTML发展历史

1.3 HTML⽂档类型的设定

2，HTML基础语法

2.1 HTML基本结构:

2.2 注释

2.3 HTML注释

2.4 HTML中HEAD头部设置

3，HTML文本标签

3.1 常用文本标签如下：

3.2 举例

4，HTML格式化标签

4.1 常见格式化标签

4.2 举例

4.3 小技巧

5，HTML图像标签

5.1 简介

5.2 举例

5.3 理解绝对路径与相对路径

5.4 小技巧

6，HTML超链接标签

6.1 超级链接标签a

6.2 举例

7，HTML表格标签

7.1 表格中的标签

7.2 举例

7.3 小技巧

8，HTML表单标签（重要）

8.1 form 表单标签

8.2 input 表单项标签input定义输入字段

8.3 select 标签创建下拉列表

8.4 textarea 多行的文本输入区域

8.5 button 标签定义按钮

8.6 fieldset 元素可将表单内的相关元素分组（圈框）

8.7 legend -- 标签为 fieldset 、 figure 以及 details 元素定义标题

8.8 optgroup html5标签-- 定义选项组

8.9 datalist html5标签-- 定义可选数据的列表

9，HTML框架标签

10，HTML5多媒体标签

10.1 新增布局标签

10.2 新增的input type属性

10.3 新增的input属性

一，HTML与HTML5常用标签

学前准备

1）百度上的关于操作系统上的使⽤统计

百度统计流量研究院

2）谷歌浏览器下载

⾕歌浏览器下载⽹址

3）浏览器的使⽤技巧——WEB前端助⼿(FeHelper) 前端⼈员的神器

WEB前端助手(FeHelper) 前端人员的神器
可参考网站上的安装说明进行安装（后缀crx改为zip =》直接拖入更多工具/拓展程序中）
安装完成效果：

4）工具介绍

SublimeText（高级记事本显示代码高亮，推荐）
Notepad++
aptana
EditPlus
VSCode（轻量级集成开发环境，推荐）
Hbuilder
WebStorm

1，HTML简介

1.1 HTML是什么

HTML 是 HyperText Mark-up Language 的⾸字⺟简写，意思是超⽂本标记语⾔
HTML不是⼀种编程语⾔，⽽是⼀种标记语⾔
超⽂本指的是超链接，标记指的是标签，是⼀种⽤来制作⽹⻚的语⾔，这种语⾔由⼀个个的标签组成
⽤这种语⾔制作的⽂件保存的是⼀个⽂本⽂件，⽂件的扩展名为 .html 或者 .htm
html⽂档也叫 Web⻚⾯，其实就是⼀个⽹⻚，html⽂件⽤编辑器打开显示的是⽂本，可以⽤⽂本的⽅式编辑它
如果⽤浏览器打开，浏览器会按照标签描述内容将⽂件渲染成⽹⻚，显示的⽹⻚可以从⼀个⽹⻚链接跳转到另外⼀个⽹⻚

1.2 HTML发展历史

04-前端技术_HTML与HTML5常用标签_JavaEE开发工程师_03

1.3 HTML⽂档类型的设定

HTML在不同版本下⽂档类型的设定，即 <!Doctype > 对应的属性值

(1) HTML , 对应早期的 HTML4.0.1, 其基本结构如下：

04-前端技术_HTML与HTML5常用标签_HTML_04

(2) XHTML ，其基本结构如下：

04-前端技术_HTML与HTML5常用标签_HTML与HTML5常用标签_05

(3) HTML5 ，其基本格式如下

04-前端技术_HTML与HTML5常用标签_前端技术_06

2，HTML基础语法

2.1 HTML基本结构:

HTML⽂件的扩展名为 .html 或者 .htm
HTML⽂本的结构包括“头”部分（head）、和“主体”部分（body），其中“头”部提供关于⽹⻚的信息（包括标题，字符集等），“主体”部分提供⽹⻚的具体内容
HTML是由：标签和内容构成, 每个HTML⻚⾯都有两部分构成(head头和body体)，其最外层是 <html>...</html>标签包裹
HTML标签（标记）的语法是由 < 和 > 括起来（比如head标签，body标签~）。
HTML标签有两种：双标签： <标签名>....</标签名> 和单标签： <标签名 />（双标签： <h1>....</h1>，单标签： <hr />）
HTML标签中还可以添加属性： <标签名属性名1=“值1” 属性名2=“值2” 属性名n=“值n”>....</标签名>
HTML标签规范：标签名⼩写、属性使⽤双引号、标签要闭合。规范不遵守浏览器不会报错，会尽量解析，⼤不了不显示效果

2.2 注释

04-前端技术_HTML与HTML5常用标签_新职课开课吧_07

2.3 HTML注释

html⽂档代码中可以插⼊注释，注释是对代码的说明和解释

<!-- 这就是唯⼀的⼀种HTML注释了 -->

2.4 HTML中HEAD头部设置

head标签作⽤于⽹⻚的头部，它的内容不会在正⽂中显示出来，主要完成对当前⻚⾯的各种设置

在head中常包含如下⼦标签：

04-前端技术_HTML与HTML5常用标签_前端技术_08

04-前端技术_HTML与HTML5常用标签_HTML与HTML5常用标签_09

3，HTML文本标签

3.1 常用文本标签如下：

<hn>...</hn> 其中n为1--6的值。标题标签（加粗、独⽴⾏）
<i>...</i> 斜体
<em>...</em> 强调斜体
<b>...</b> 加粗
<strong>...</strong> 强调加粗（搜索引擎会对此强调的内容进行收录，优先展示）
<cite></cite> 作品的标题（引⽤）
<sub>...</sub> 下标 <sup>...</sup> 上标
<del>...</del> 删除线

3.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>
  <h1>H1标题标签</h1>
  <h2>H2标题标签</h2>
  <h3>H3标题标签</h3>
  <h4>H4标题标签</h4>
  <h5>H5标题标签</h5>
  <h6>H6标题标签</h6>

  <u>u下划线标签</u><br/>
  <del>del删除线标签</del><br/>
  <b>b加粗标签</b><br/>
  <strong>strong强调加粗标签</strong><br/>
  <i>i斜体标签</i><br/>
  <em>em强调斜体标签</em><br/>
  <br/>
  <cite>清明上河图</cite>是我国十大传世名画之一 <br/><br/>
  水分子：H<sub>2</sub>O <br/>
  2<sup>4</sup>=16
</body>
</html>

04-前端技术_HTML与HTML5常用标签_新职课开课吧_10

4，HTML格式化标签

只是用于做一个简单排版

4.1 常见格式化标签

<br/> 换⾏
<p>...</p> 换段
<hr /> ⽔平分割线
列表：
<ul>...</ul> ⽆序列表
<ol>...</ol> 有序列表其中type类型值：A a I i 1 start属性表示起始值
<li>...</li> 列表项
<dl>...</dl> ⾃定义列表
<dt>...</dt> ⾃定义列表头
<dd>...</dd> ⾃定义列表内容（会有自动缩进）
<div>...</div> 常⽤于组合块级元素，以便通过 CSS 来对这些元素进⾏格式化（两个标签之间自动换行）
<span>...</span> 常⽤于包含的⽂本，您可以使⽤ CSS 对它定义样式，或者使⽤ JavaScript 对它进⾏操作。（两个标签之间不换行，无法指定宽、高、尺寸）

4.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>
    <h1>HTML格式化标签</h1>
    <hr>
    <div style="width: 600px">
        <p>
            据今日俄罗斯电视台（RT）援引当地媒体报道，以色列情报和特殊使命局（又称摩萨德）已获得中国新冠肺炎疫苗，并带回开始进行“研究”。
        </p>
        <p>
            以色列媒体12频道（Channel 12）周一报道称，最近几周，摩萨德将中国疫苗带到了以色列。目前还不清楚该情报机构究竟是如何获得这种疫苗的。
        </p>
    </div>
    我的爱好：
    <ul>
        <li>看书</li>
        <li>听歌</li>
        <li>学习</li>
        <li>运动</li>
    </ul>
    <ul type="circle">
        <li>看书</li>
        <li>听歌</li>
        <li>学习</li>
        <li>运动</li>
    </ul>
    <ol>
        <li>看书</li>
        <li>听歌</li>
        <li>学习</li>
        <li>运动</li>
    </ol>
    <ol type="a">
        <li>看书</li>
        <li>听歌</li>
        <li>学习</li>
        <li>运动</li>
    </ol>

    <dl>
        <dt>问：HTML是什么</dt>
        <dd>答：超文本标记语言</dd>
    </dl>
    <div>aaaaa</div><div>bbbbb</div><span>cccccc</span><span>dddddd</span>
</body>
</html>

04-前端技术_HTML与HTML5常用标签_HTML与HTML5常用标签_11

04-前端技术_HTML与HTML5常用标签_JavaEE开发工程师_12

4.3 小技巧

1）快速生成多个列表项

04-前端技术_HTML与HTML5常用标签_前端技术_13

04-前端技术_HTML与HTML5常用标签_JavaEE开发工程师_14

5，HTML图像标签

5.1 简介

在HTML⽹⻚中插⼊⼀张图⽚，使⽤img标签，他是⼀个单标签： <img />（也可以将图片作为背景，插入图片）
其中img标签中常⽤属性如下：
src：图⽚名及url地址
alt: 图⽚加载失败时的提示信息
title：⽂字提示属性（鼠标放置上去的提示信息）
width：图⽚宽度（宽/高只指定一个的话，另一个会根据比例自适应变动）
height：图⽚⾼度
border：边框线粗细

5.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>
    <h1>HTML图片img标签</h1>
    <img src="./images/11.jpg" alt="图片1" width="600">
    <img src="./images/12.jpg" alt="图片2" width="600">
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" title="百度一下" width="200">
</body>
</html>

04-前端技术_HTML与HTML5常用标签_新职课开课吧_15

5.3 理解绝对路径与相对路径

绝对路径：

绝对路径就是你的主⻚上的⽂件或⽬录在硬盘上真正的路径，(URL和物理路径)
例如：
C:\xyz\test.txt 代表了test.txt⽂件的绝对路径。
http://www.sun.com/index.htm也代表了⼀个URL绝对路径。

相对路径：

相对与某个基准⽬录的路径。包含Web的相对路径（HTML中的相对⽬录），例如：
在Web开发中，"/"代表Web应⽤的根⽬录。
"./" 代表当前⽬录,
"../"代表上级⽬录。这种类似的表示，也是属于相对路径。

5.4 小技巧

1）快速生成标签

04-前端技术_HTML与HTML5常用标签_HTML与HTML5常用标签_16

04-前端技术_HTML与HTML5常用标签_前端技术_17

6，HTML超链接标签

6.1 超级链接标签a

格式：

<a href="链接⽬标url地址">显示⽂字</a>

a标签属性

href: 必须，指的是链接跳转地址
target: 表示链接的打开⽅式：
_blank 新窗⼝
_parent ⽗窗⼝
_self 本窗⼝（默认，点击回退可以回到上一个页面）
_top 顶级窗⼝
framename 窗⼝名
title：⽂字提示属性（鼠标放上去，可以看到详情）

锚点链接（可以通过id定位，在页面内跳转）

定义锚点： <a id="自己定义的名称"></a> 以前使⽤的是 <a name="自己定义的名称"></a>
使⽤锚点： <a href="#a1">跳到a1处</a>

6.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>
    <h1>HTML实例-超级链接a标签</h1>

    <!-- 锚点超级链接 -->
    <a href="#girl1">美女1</a><br/><br/>
    <a href="#girl2">美女2</a><br/><br/>

    <!-- 普通超级链接 -->
    <a href="https://ww.baidu.com" title="百度链接">百度(本窗口打开)</a><br/>
    <a href="https://ww.baidu.com" target="_blank">百度(新窗口打开)</a> <br/><br/>

    <a href="./Demo.html" target="_blank" >图片标签实例</a><br/><br/>

    <a id="girl1"></a>
    <h4>美女1</h4>
    <img src="./images/11.jpg" alt="girl1" width="100%"><br/><br/>

    <a id="girl2"></a>
    <h4>美女2</h4>
    <img src="./images/22.jpg" alt="girl2" width="100%"><br/><br/>

</body>
</html>

04-前端技术_HTML与HTML5常用标签_HTML_18

7，HTML表格标签

7.1 表格中的标签

04-前端技术_HTML与HTML5常用标签_前端技术_19

th与td相比，th默认有加粗居中效果

7.2 举例

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>
<body>
    <h1>HTML实例-表格标签</h1>

    <table>
        <!-- 表头 -->
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>班级</th>
        </tr>

        <!-- 第一行数据 -->
        <tr>
            <td>100</td>
            <td>旗木·卡卡西</td>
            <td>21</td>
            <td>8班</td>
        </tr>

        <!-- 第二行数据 -->
        <tr>
            <td>101</td>
            <td>漩涡鸣人</td>
            <td>15</td>
            <td>8班</td>
        </tr>

        <!-- 第三行数据 -->
        <tr>
            <td>102</td>
            <td>宇智波·佐助</td>
            <td>15</td>
            <td>8班</td>
        </tr>
    </table>
    

</body>
</html>

04-前端技术_HTML与HTML5常用标签_新职课开课吧_20

2）添加表格线

04-前端技术_HTML与HTML5常用标签_JavaEE开发工程师_21

04-前端技术_HTML与HTML5常用标签_JavaEE开发工程师_22

3）调整宽度

04-前端技术_HTML与HTML5常用标签_JavaEE开发工程师_23

04-前端技术_HTML与HTML5常用标签_前端技术_24

4）消除缝隙

04-前端技术_HTML与HTML5常用标签_前端技术_25

04-前端技术_HTML与HTML5常用标签_新职课开课吧_26

5）调整内容与边框的距离

04-前端技术_HTML与HTML5常用标签_新职课开课吧_27

04-前端技术_HTML与HTML5常用标签_HTML_28

6）检查元素

04-前端技术_HTML与HTML5常用标签_前端技术_29

发现浏览器自动为表格添加 tbody 标签

7）添加标题

04-前端技术_HTML与HTML5常用标签_新职课开课吧_30

04-前端技术_HTML与HTML5常用标签_前端技术_31

8）跨单元格

从上往下跨，从左往右跨

04-前端技术_HTML与HTML5常用标签_新职课开课吧_32

04-前端技术_HTML与HTML5常用标签_前端技术_33

9）指定表格内容横向位置

04-前端技术_HTML与HTML5常用标签_新职课开课吧_34

04-前端技术_HTML与HTML5常用标签_新职课开课吧_35

10）指定表格内容纵向位置

04-前端技术_HTML与HTML5常用标签_新职课开课吧_36

04-前端技术_HTML与HTML5常用标签_JavaEE开发工程师_37

11）从左向右跨

04-前端技术_HTML与HTML5常用标签_前端技术_38

04-前端技术_HTML与HTML5常用标签_HTML与HTML5常用标签_39

7.3 小技巧

1）快速生成表格

04-前端技术_HTML与HTML5常用标签_前端技术_40

04-前端技术_HTML与HTML5常用标签_JavaEE开发工程师_41

8，HTML表单标签（重要）

8.1 form 表单标签

1）form标签常⽤属性：

*action属性:提交的⽬标地址(URL)
*method属性:提交⽅式:get(默认)和post
URL地址栏可⻅,⻓度受限制(IE2k ⽕狐8k),相对不安全.
post⽅式是URL地址不可⻅,⻓度不受限制,相对安全.
enctype:提交类型
target: 在何处打开⽬标 URL。
name:属性为表单起个名字.在HTML5中使⽤ id 代替。

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>
    <h1>HTML实例-表单标签：form, input, select, textarea</h1>
    
    <form action="a.html" method="GET">
        姓名：<input type="text" name="uname"/> <br/><br/>
        密码：<input type="password" name="upass"/> <br/><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>

</body>
</html>

04-前端技术_HTML与HTML5常用标签_HTML与HTML5常用标签_42

04-前端技术_HTML与HTML5常用标签_前端技术_43

8.2 input 表单项标签input定义输入字段

1）input常用属性

⽤户可在其中输⼊数据。在 HTML 5 中，type 属性有很多新的值。

*type属性:表示表单项的类型:值如下:

text:单⾏⽂本框
password:密码输⼊框
checkbox:多选框注意要提供value值
radio:单选框注意要提供value值
file:⽂件上传选择框
button:普通按钮
submit:提交按钮
image:图⽚提交按钮
reset:重置按钮, 还原到开始(第⼀次打开时)的效果（如果有默认值，则会恢复默认值，而不是清空的意思）
hidden:主表单隐藏域,要是和表单⼀块提交的信息,但是不需要⽤户修改
HTML5新增属性
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属性: 对选择框指定默认选项（单选，若多选项添加checked则默认最后一个）

accesskey属性: 指定快捷键(不常⽤) (IE:alt+键⽕狐:alt+shift+键)

tabindex属性: 通过数字指定tab键的切换顺序(不常⽤)

src和alt是为图⽚按钮设置的

注意：reset重置按钮是将表单数据恢复到第⼀次打开时的状态，并不是清空
image图⽚按钮，默认具有提交表单功能。

2）举例——type属性

radio

04-前端技术_HTML与HTML5常用标签_JavaEE开发工程师_44

04-前端技术_HTML与HTML5常用标签_新职课开课吧_45

0/1是要传送至后台的，之所以选择0/1而不是男/女，是因为数字相较于汉字，查询速度以及占用空间要更高效

checkbox

04-前端技术_HTML与HTML5常用标签_JavaEE开发工程师_46

04-前端技术_HTML与HTML5常用标签_HTML与HTML5常用标签_47

其他属性值

04-前端技术_HTML与HTML5常用标签_前端技术_48

04-前端技术_HTML与HTML5常用标签_JavaEE开发工程师_49

reset

设置默认值

04-前端技术_HTML与HTML5常用标签_JavaEE开发工程师_50

04-前端技术_HTML与HTML5常用标签_HTML_51

重置后

04-前端技术_HTML与HTML5常用标签_HTML_52

8.3 select 标签创建下拉列表

1）常用属性

name属性:定义名称,⽤于存储下拉值的
size：定义菜单中可⻅项⽬的数⽬，html5不⽀持
disabled 当该属性为 true 时，会禁⽤该菜单。
multiple 多选
<option>... </option> 下拉选择项标签,⽤于嵌⼊到<select>标签中使⽤的;
*value属性:下拉项的值
*selected属性:默认下拉指定项.

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>
    <h1>HTML实例-表单标签：form, input, select, textarea</h1>
    
    <form action="a.html" method="GET">
        学历：<select name="education" id="">
            <option value="1">大专</option>
            <option value="2">本科</option>
            <option value="3" selected>硕士</option>
            <option value="4">博士</option>
        </select>
    </form>

</body>
</html>

04-前端技术_HTML与HTML5常用标签_前端技术_53

8.4 textarea 多行的文本输入区域

1）常用属性

name :定义名称,⽤于存储⽂本区域中的值。
cols ：规定⽂本区内可⻅的列数。
rows ：规定⽂本区内可⻅的⾏数。
disabled：是否禁⽤
readonly：只读
...
默认值是在两个标签之间

2）举例

无value属性，而是在标签开始结束中间添加内容，如图：

04-前端技术_HTML与HTML5常用标签_JavaEE开发工程师_54

04-前端技术_HTML与HTML5常用标签_新职课开课吧_55

8.5 button 标签定义按钮

可以在 button 元素中放置内容，⽐如⽂档或图像。这是该元素与由 input 元素创建的按钮的不同之处。

8.6 fieldset 元素可将表单内的相关元素分组（圈框）

disabled属性：定义 fieldset 是否可⻅。
form属性：定义该 fieldset 所属的⼀个或多个表单。

8.7 legend -- 标签为 fieldset 、 figure 以及 details 元素定义标题

04-前端技术_HTML与HTML5常用标签_前端技术_56

04-前端技术_HTML与HTML5常用标签_新职课开课吧_57

8.8 optgroup html5标签-- 定义选项组

此元素允许您组合选项，允许进行分组

04-前端技术_HTML与HTML5常用标签_HTML_58

04-前端技术_HTML与HTML5常用标签_JavaEE开发工程师_59

8.9 datalist html5标签-- 定义可选数据的列表

与 input 元素配合使⽤，就可以制作出输⼊值的下拉列表。

04-前端技术_HTML与HTML5常用标签_前端技术_60

04-前端技术_HTML与HTML5常用标签_HTML与HTML5常用标签_61

9，HTML框架标签

1）常用属性：

src：规定在 iframe 中显示的⽂档的 URL
name：规定 iframe 的名称
height：规定 iframe 的⾼度。
width：定义 iframe 的宽度。
frameborder：规定是否显示框架周围的边框。
例如：<iframe src="1.html" name="myframe" width="700" height="500"></iframe>

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>
    <h1>HTML框架标签：iframe</h1>
    <ul>
        <li><a href="f.html" target="myframe">表单标签实例</a></li>
        <li><a href="e.html" target="myframe">表格标签实例</a></li>
        <li><a href="c.html" target="myframe">图片标签实例</a></li>
    </ul>
    <iframe src="f.html" name="myframe" frameborder="1" width="80%" height="500"></iframe>
</body>
</html>

04-前端技术_HTML与HTML5常用标签_HTML_62

04-前端技术_HTML与HTML5常用标签_HTML与HTML5常用标签_63

04-前端技术_HTML与HTML5常用标签_HTML_64

10，HTML5多媒体标签

10.1 新增布局标签

将一些标签的含义更加具体化，这样可以快速区分页面中的各个部分，提高检索内容的速度

04-前端技术_HTML与HTML5常用标签_新职课开课吧_65

10.2 新增的input type属性

这些新增的类型，更加细化的限定了输⼊内容，如果输⼊格式不对，在提交的时候会⾃动给出相应提示
更多新增type 参考 w3school

04-前端技术_HTML与HTML5常用标签_前端技术_66

10.3 新增的input属性

04-前端技术_HTML与HTML5常用标签_前端技术_67

举例audio标签

04-前端技术_HTML与HTML5常用标签_新职课开课吧_68

<!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>