Html5编程技术
在哪里写：
主流的IDE工具比较
在哪里看：
浏览器打开html文件
浏览器f12查看源码
HTML5语法：
主要是记住便签
比如：body就是显示在浏览器上面的内容 bgcolor就是背景颜色，这就是属性
所以说：html文档是由元素构成的，元素又是由标签加内容构成的
标签又可以带各种属性
创建第一个网页
以html为开头的， head是网页的头：是不会显示在浏览器里面的。但是对这个网页是至关重要的。
比如网页的标题是啥，网页的编码格式是啥，还有各搜索引擎哪些关键字，能让搜索引擎抓到它
虽然不是给客户看的，但是很多重要的东西在里面
注释
HTML5特性
HTML5标签
单标签就是只要有前面的，不需要有后面的。比如：<link>
双标签就是，前后都要有的：<h1>aaa<h1>
块便签：就是一个容量，里面是可以放东西的，比如一个表格，一个段落
行标签：指定行的一些特性的
html里面最关键的一些标签的解释
案例解析：
1.我的第一个网页
标题和内容所在的标签
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 这个是标题 -->
<title>我的第1个网页</title>
</head>
<!-- 这个是正文 -->
<body>
我的第一个网页。
Hello world!
</body>
</html>
结果
2.HTML5特性
空格得写成这样：
<得写成这样:<
不然会转义！！！
代码：
<!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>
<h2>1.空格折叠</h2>
<!--p是一个段落，里面有很多空格，但是显示的时候，不会显示出来 -->
<p>人要是行， 干一行行一行，一行行行行行，人要是不行，干一行不行一行，一行不行行行不行</p>
<h2>2.换行折叠</h2>
<p>人要是行，
干一行行一行，
一行行行行行，
人要是不行，
干一行不行一行，
一行不行行行不行</p>
<h2>3.内壁效应</h2>
<p> 人要是行，干一行行一行，一行行行行行，人要是不行，干一行不行一行，一行不行行行不行 </p>
<h2>4.转义字符</h2>
<p>
今天我们学习<title></title>标签对。
</p>
<p>
<!--要想显示<,直接写是不行的，得写成<-->
今天我们学习<title></title>标签对。
</p>
<p>
<!--p是一个段落，得加 ，直接敲空格没用 -->
姓名： 身份证号码：
</p>
<p>
<!--p是一个段落，要想显示段落，得加 ，一个  就是一个空格-->
姓名： 身份证号码：
</p>
</body>
</html>
效果：
3.网页Title,关键字，页面描述
head里面加keywords，容易被收缩引擎抓到
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<!--
作为测试开发我们写的东西，可能不需要搜索引擎去抓
如果是开发想要在网上做推广的话，这里面的两个关键字用的比较多，在head里面
搜索引擎优化，主要就是优化这些：
加上Keywords，就容易被蜘蛛抓到
-->
<meta charset="UTF-8">
<meta name="Keywords" content="软件测试,csdn软件测试,软件测试在线培训,松勤教育,csdn网,软件测试自学,软件测试工程师,软件测试资料下载,软件测试视频,软件自动化测试,软件性能测试,软件接口测试,网上学习软件测试,ISTQB">
<meta name="Description" content="csdn是一家专注于软件测试技能培训的在线教育机构。目前已开设软件测试相关课程100余门,涵盖软件测试基础、自动化测试、性能测试、安全测试、接口测试、认证考试、职场">
<title>松勤网</title>
</head>
<body>
Title、关键词、网页描述。
</body>
</html>
效果：
4.HTML4时代的分区标签
在对前面的骨架了解了之后，我们就要去做页面，做页面
做网页，首先要对他进行分区，就是一个网页的上下左右分别放什么东西，要分割成不同的模块。就像拼图一样
模块怎么排序由css来决定
怎么划分是由html来决定，一般是用div
代码：
<!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>
<!--可以看出有4个div
就表示网页的分区
就相当于分为4个豆腐块
所以做网页开发第一步就是做网页的布局
用div来分区是比较常见的
后面就是用css来排序了
class="header"是名字，后面就可以通过css来排布了
模块怎么排序由css来决定
怎么划分是由html来决定，一般是用div
-->
<div class="header">
<div class="logo">logo区域</div>
<div class="nav">导航区域</div>
</div>
<div class="banner">广告区域</div>
<div class="content">
<div class="aside">左侧栏</div>
<div class="main">主要内容区域</div>
</div>
<div class="footer">页面底部</div>
</body>
</html>
效果：
5.HTML5新增的区块化标签
专门增加了head标签，专门用来指定头部的
专门增加了main标签
专门增加了底部标签<footer></footer>，默认放在尾部了
之前用div来指定的，现在给了特定的名字
代码：
<!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>
<!--1. 网页的头部-->
<header>
<div class="logo">网页的logo</div>
<nav>导航条</nav>
</header>
<!--2. 网页的核心-->
<main>
<!--广告-->
<aside>广告</aside>
<article>
<h1>文字的标题</h1>
<section>部分1</section>
<section>部分2</section>
<section>部分3</section>
</article>
</main>
<!--3页脚 -->
<footer></footer>
</body>
</html>
效果：
6.标题，段落标签
当我们把网站的大的模块定好之后，接下来就是要把里面的内容排版好
段落一般用的P标签，P标签是块标签，块标签里面是可以放东西的，作为一个容器的，放一段话的
h1是大标题，h2是比h1小一点的标题，也是块标签
代码：
<!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>
<h1>南京市十大景点</h1>
<h2>1.遇难同胞纪念馆</h2>
<p>
侵华日军南京大屠杀遇难同胞纪念馆位于原日军大屠杀遗址之一的万人坑，是一处以史料文物、建筑、雕塑、影视等综合手法，全面展示“南京大屠杀”惨案的专史陈列馆。展馆分为广场陈列、史料陈列、遗骨陈列三个部分。广场陈列有记录大屠杀时间的十字架形标志碑、刻着遇难者名字的“哭墙”、记载大屠杀史实的浮雕、大型石雕母亲像、“万人坑”遗址等
</p>
<h2>2.牛首山世凹桃源景区</h2>
<p>
世凹桃源位于南京江宁谷里周村社区世凹村，坐落在牛首山西南麓。说起世凹村，就不得不提岳飞和牛首山，世凹因前者得名，因后者获桃源美誉。世凹村原本只是一个小村落，八百多年前，岳飞抗金在此屯兵，留下了大世凹之名。
</p>
<h2>3.南京夫子庙</h2>
<p>
南京夫子庙儒学文化中轴线坐落于古都南京老城区秦淮区，是国家5A级旅游景区夫子庙—秦淮风光带上最为耀眼的一颗明珠。在南京自公元前472年越王勾践命大夫范蠡筑越城起，近2500年的建城史上，南京夫子庙的孔庙和学宫扮演过无可替代的角色，起着举足轻重的作用
</p>
<h2>4.太平天国历史博物馆</h2>
<p>
瞻园又称大明王府，始建于明嘉靖年间，原为明开国功臣徐达的王府，是南京现存历史最久的一座园林，与无锡寄畅园、苏州拙政园及留园并称为“江南四大名园”。整个园林布局典雅精致，有宏伟壮观的明清古建筑群、陡峭峻拔的假山、闻名遐迩的北宋太湖石、清幽素雅的楼榭亭台等，堪称“金陵第一园”
</p>
<h2>5.夫子庙秦淮风光带</h2>
<p>
夫子庙秦淮风光带位于南京市秦淮区，以夫子庙古建筑群为中心、十里秦淮为轴线、明城墙为纽带，串联起众多全国重点文物保护单位、省级和市级文物保护单位，以儒家思想与科举文化、民俗文化等为内涵，集自然风光、山水园林、庙宇学堂、街市民居、乡土人情、美食购物、科普教育、节庆文化于一体，是南京历史文化荟萃之地，也是中国著名的开放式国家5A级旅游景区和中国旅游胜地四十佳。
</p>
<h2>6.红山森林动物园</h2>
<p>
南京市红山森林动物园位于江苏省南京市鼓楼区和燕路，是国家AAAA级旅游景区。园区总面积68公顷。园内山峦叠嶂，绿化覆盖率达85%，展示世界各地珍稀动物216种 2600余只。红山森林动物园以独特的森林景观、丰富的动物资源、多彩的主题活动成为中国最具特色的动物园之一，每年吸引来自世界各地访客五百万余人。
</p>
<h2>7.南京总统府</h2>
<p>
南京总统府位于南京市玄武区长江路292号，是中国近代建筑遗存中规模最大、保存最完整的建筑群，也是南京民国建筑的主要代表之一，中国近代历史的重要遗址，现已辟为中国近代史遗址博物馆。
</p>
<h2>8.玄武湖公园</h2>
<p>
玄武湖公园位于南京城中，三面环山，一面临城。钟山雄峙湖东，古城濒临西南，富贵、覆舟、鸡笼山屏列于南，秀峰塔景隔城辉映，朝阳、幕府山绵延湖北，山城环抱，沿湖名胜古迹众多，巍峨的明城墙、秀美的九华山、古色古香的鸡鸣寺环抱其右。
</p>
<h2>9.钟山明孝陵</h2>
<p>
明孝陵是明朝开国皇帝朱元璋和皇后马氏的合葬陵墓，因皇后谥“孝慈”，故名孝陵。作为中国明陵之首的明孝陵壮观宏伟，代表了明初建筑和石刻艺术的最高成就，直接影响了明清两代500多年帝王陵寝的形制，依历史进程分布于北京、湖北、辽宁、河北等地的明清帝王陵寝，均按南京明孝陵的规制和模式营建，在中国帝陵发展史上有着特殊的地位，故而有“明清皇家第一陵”的美誉。
</p>
<h2>10.钟山中山陵</h2>
<p>
中山陵是中国近代伟大的民主革命先行者孙中山先生的陵寝，及其附属纪念建筑群，面积8万余平方米。中山陵自1926年春动工，至1929年夏建成，1961年成为首批全国重点文物保护单位，2006年列为首批国家重点风景名胜区和国家5A级旅游景区。
</p>
</body>
</html>
效果：
7.有序列表
在很多时候，段落排好之后，有很多列表，内容要排序的，或者是要按照顺序的
我们用ol表示，单独的列表下用li表示
<ol type="A">表示：以大写A开头
不写的话，默认是阿拉伯数字
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="...">
<title>Document</title>
</head>
<body bgcolor="#006400">
<span></span>
<ol>
<li>周杰伦-晴天</li>
<li>李荣浩-麻雀</li>
<li>海伦《游山恋》</li>
<li>周杰伦-告白气球</li>
</ol>
<ol type="A">
<li>周杰伦-晴天</li>
<li>李荣浩-麻雀</li>
<li>海伦《游山恋》</li>
<li>周杰伦-告白气球</li>
</ol>
<ol type="a">
<li>周杰伦-晴天</li>
<li>李荣浩-麻雀</li>
<li>海伦《游山恋》</li>
<li>周杰伦-告白气球</li>
</ol>
<ol type="I">
<li>周杰伦-晴天</li>
<li>李荣浩-麻雀</li>
<li>海伦《游山恋》</li>
<li>周杰伦-告白气球</li>
</ol>
<ol type="i">
<li>周杰伦-晴天</li>
<li>李荣浩-麻雀</li>
<li>海伦《游山恋》</li>
<li>周杰伦-告白气球</li>
</ol>
</body>
</html>
效果：
8.无序列表
无序列表使用ul表示的，里面的列表项是li
默认是实心圆圈
代码：
<!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>
<ul>
<li>猪肉</li>
<li>粉条</li>
<li>小鸡</li>
<li>蘑菇</li>
<li>地瓜</li>
</ul>
<ul type="circle">
<li>猪肉</li>
<li>粉条</li>
<li>小鸡</li>
<li>蘑菇</li>
<li>地瓜</li>
</ul>
<ul type="square">
<li>猪肉</li>
<li>粉条</li>
<li>小鸡</li>
<li>蘑菇</li>
<li>地瓜</li>
</ul>
</body>
</html>
效果：
9.自定义列表
用dl表示，里面的项有两类：一个是dt，一个是dd
dt一般就是项
dd是解释，可以有多个
在网站的底部用的比较多，会再加上超链接
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=d, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<dl>
<dt>鲁迅</dt>
<dd>原名周樟寿，后改名周树人，字豫山</dd>
<dd>著名文学家、思想家、革命家、民主战士</dd>
<dt>周作人</dt>
<dd>原名周櫆寿，又名周奎绶，后改名周作人</dd>
<dt>胡适</dt>
<dd>曾用名嗣穈，字希疆，后改名适，字适之</dd>
</dl>
<dl>
<dt>水果</dt>
<dd>香蕉</dd>
<dd>苹果</dd>
<dt>蔬菜</dt>
<dd>青椒</dd>
<dd>黄瓜</dd>
</dl>
<hr>
<dl>
<dt>浙江省</dt>
<dd>杭州市</dd>
<dd>宁波市</dd>
<dt>江苏省</dt>
<dd>南京市</dd>
<dd>苏州市</dd>
</dl>
</body>
</html>
效果：
10.表格
表格标签用的蛮多的
格式是这样的：在body标签里面用table，table里面会有一些属性
行用tr表示，行里面有列，用td表示
表格指定标题用caption
表格跨列用colspan
表格跨行用rowspan
代码：
<!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>
<h2>什么是表格</h2>
<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td>B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</table>
<table border="1">
<caption>表格的标题</caption>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
</table>
<hr>
<h2>th表格标题标签</h2>
<table border="1">
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
<tr>
<td>A1</td>
<td>A2</td>
</tr>
</table>
<hr>
<h2>表格行分组标签</h2>
<table border="1">
<thead>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
</thead>
<tbody>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td>B4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</tfoot>
</table>
<hr>
<h2>表格的列跨度案例</h2>
<table border="1" cellspacing="0">
<tr>
<td colspan="2">A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td colspan="3">B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</table>
<hr>
<h2>表格的行跨度案例</h2>
<table border="1" cellspacing="0">
<tr>
<td rowspan="2">A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>B2</td>
<td>B3</td>
<td rowspan="2">B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
</table>
</body>
</html>
结果：
从第3到第10，上面所讲的都叫块，用它来作为容器装东西的。内容，图片等放在里面
后面，我们就可以用css把整个模块移到一个地方，或者整个模块加一个属性
下面讲的就是行标签。
11.语义标签
语义标签就是对于特定的内容，给与特定的含义
b标签是加粗
u标签是加下划线
i标签是斜体的
<strong>努力</strong>是重点强调努力，加粗的效果
<mark>一点点</mark>一点点是标黄的
代码：
<!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>
<!--1. span标签-->
<p>
<span>姓名：</span><span>张三</span>
</p>
<!--2. b、u、i标签-->
<p>
<b>该努力还是要努力，进步一点点也是进步</b>
</p>
<p>
<u>该努力还是要努力，进步一点点也是进步</u>
</p>
<p>
<i>该努力还是要努力，进步一点点也是进步</i>
</p>
<!--3. strong、em、mark标签-->
<p>该<strong>努力</strong>还是要<em>努力</em>，进步<mark>一点点</mark>也是进步</p>
<!--4. figure、figcaption标签-->
<p>
<figure>
<figcaption>西湖美景-断桥</figcaption>
<img src="images/duanqiao.jpg" width="300">
</figure>
</p>
</body>
</html>
效果：
12图片标签
用的很多的
用img标签，是一个单向标签
src属性：指的是图片的地址，可以来源网络，也可以来源本地
alt属性：就是鼠标放在上面显示的文字，相当于提示符
代码：
<!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>
<p>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
</p>
<h1>西湖美景</h1>
<p>
<img src="images/hehua.jpg" alt="西湖荷花">
</p>
<p>
<img src="images/hehua.jpg" width="100">
</p>
<p>
<img src="7.jpg" width="100px">
</p>
<p>
<img src="images/duanqiao.jpg" width="100px">
</p>
<p>
<img src="images/hehua.jpg">
</p>
<p>
<img src="../hourse.jpg">
</p>
<p>
<img src="https://www.baidu.com/img/
PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="100">
</p>
</body>
</html>
效果：
13.超链接
作为一个网站，少不了要导航到其他地方去
会用到超链接
是以a开的一个双标签，里面有一个重要的属性是：href
就是要链接的地址
<a href="mailto:abcd@163.com">发送邮件</a>
点击发送邮件，就会跳到mailto:abcd@163.com网站
可以连接到一个网站，可以连接到本地的一个路径
也可以连接到一个图片，也可以用于下载（xxxx.rar）
可以写一个文件，搭建一个web服务器，将常用的网站都放在上面
代码：
<!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>
<h2>1. 超级超链接</h2>
<p>
<a href="test.html">到另外一个网页</a>
</p>
<h2>2. a标签的href属性</h2>
<p>
<a href="login/1.html">到网页1</a>
</p>
<p>
<a href="../login/2.html">到网页2</a>
</p>
<p>
<a href="http://www.songqinnet.com">到松勤网</a>
</p>
<h2>3. a标签的title属性</h2>
<p>
<a href="test.html" title="悬停时显示的内容">到另外一个网页</a>
</p>
<h2>4. a标签的target属性</h2>
<p>
<a href="test.html" target="blank">到另外一个网页（新窗口打开）</a>
</p>
<h2>5. 图片链接</h2>
<p>
<a href="test.html">
<img src="images/hehua.jpg" width="100">
</a>
</p>
<h2>6. 下载链接</h2>
<p>
<a href="test.rar">下载</a>
</p>
<h2>7. 邮件链接</h2>
<p>
<a href="mailto:abcd@163.com">发送邮件</a>
</p>
<h2>8. 电话链接</h2>
<p>
<a href="tel:4008208888">拨打电话</a>
</p>
</body>
</html>
效果：
前面所有的这些东西都是展示的，没办法输入的，不能想服务器提交数据的
14.15.表单创建,表单基本控件
表单标签是form，是一个双向标签
action属性：点提交按钮的时候，会调服务器里面的另外一个页面
提交的方法有两种：一个是post，一个是get
post提交的时候，内容不在url里面。post提交的长度没有限制
代码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>
<form action="login.do" method="POST">
</form>
</body>
</html>
代码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>
<form action="login.do" method="POST">
<p>请输入用户名：<input type="text"></p>
<!--默认值是admin-->
<p>请输入用户名：<input type="text" value="admin"></p>
<!--提示：请输入用户名-->
<p>请输入用户名：<input type="text" placeholder="请输入用户名"></p>
<!--写上admin，不能编辑-->
<p>请输入用户名：<input type="text" value="admin" disabled></p>
<!--写上admin，元素的名称是username-->
<p>请输入用户名：<input type="text" value="admin" name="username"></p>
<!--输入的内容，不显示明文-->
<p>请设置密码：<input type="password"></p>
<p>请选择性别：
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女
</p>
<p>请选择性别：
<input type="radio" name="sex2" value="1" checked>男
<input type="radio" name="sex2" value="2">女
</p>
<p>
<input type="radio" name="sex4" id="boy" value="1">
<label for="boy">男</label>
<input type="radio" name="sex4" id="girl" value="2">
<label for="girl">女</label>
</p>
<p>
<label>
<input type="radio" name="sex5" value="1">男
</label>
<label>
<input type="radio" name="sex5" value="2">女
</label>
</p>
<p>请勾选你的爱好:
<input type="checkbox" name="hobby" checked>唱歌
<input type="checkbox" name="hobby">游泳
</p>
<p>
<select name="bank">
<option value="1">中国银行</option>
<option value="2">工商银行</option>
<option value="3">建设银行</option>
<option value="4">农业银行</option>
</select>
</p>
<p>
<textarea name="content" cols="30" rows="5"></textarea>
</p>
<p>
<input type="button" value="按钮">
</p>
<p>
<input type="submit">
</p>
<p>
<input type="reset">
</p>
</form>
</body>
</html>
效果：
16.datalist控件
代码：
<!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>
<input type="text" list="pro-list">
<datalist id="pro-list">
<option value="北京市"></option>
<option value="上海市"></option>
<option value="广东省"></option>
<option value="浙江省"></option>
<option value="江苏省"></option>
</datalist>
</body>
</html>
效果：
17.音频视频标签
特别是手机端，页面上用播放器
h5用的比较多。
标签是：audio（声音）；video（视频，有自动播放的属性）
地址用：src指定的
如果这个浏览器不支持h5，就会显示：对不起，您的浏览器不支持video标签，请升级浏览器！
代码：
<!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>
<h2>音频标签</h2>
<p>
<!--对不起，您的浏览器不支持audio标签，请升级浏览器！
这句话是自己写的，当显示失败的时候，会显示这个提示
-->
<audio src="media/test.mp3" controls>
对不起，您的浏览器不支持audio标签，请升级浏览器！
</audio>
</p>
<p>
<audio src="media/test.mp3" controls autoplay>
对不起，您的浏览器不支持audio标签，请升级浏览器！
</audio>
</p>
<p>
<audio src="media/test.mp3" controls loop >
对不起，您的浏览器不支持audio标签，请升级浏览器！
</audio>
</p>
<p>
<audio src="media/test.mp3" controls muted >
对不起，您的浏览器不支持audio标签，请升级浏览器！
</audio>
</p>
<h2>视频标签</h2>
<p>
<video src="media/test.ogg" controls autoplay width="250" height="200">
对不起，您的浏览器不支持video标签，请升级浏览器！
</video>
</p>
</body>
</html>
效果：
工作中会经常要查，这个标签有没有想要的属性
28万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
