1.查看所有的标签
HTML 标签参考手册 (w3school.com.cn) https://www.w3school.com.cn/tags/index.asp
部分标签主流的浏览器都不支持。
2.video视频标签
video标签 播放视频
src： 视频地址
autoplay：自动播放
autoplay="autoplay"
格式：
<video src="video/food.mp4" autoplay="autoplay"></video>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频标签</title>
</head>
<body>
<video src="video/food.mp4" autoplay="autoplay"></video>
</body>
</html>
bug:
chrome禁止了audio的autoplay属性。
音频是静音状态，autoplay属性还是可以生效的。可以播放，不能干扰用户的视听。
proload 预加载网络地址的视频
proload属性与 autoplay属性有冲突，如果设置了autiplay那么proload就会失效。
2.1muted静音
muted属性 设置静音。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>静音</title>
</head>
<body>
<video src="video/food.mp4" autoplay="autoplay" muted="muted"></video>
</body>
</html>
2.2controls控制条
contols 条件视频控制条组件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制条</title>
</head>
<body>
<video src="video/food.mp4" controls="controls"></video>
</body>
</html>
2.3poster封面
poster属性 为视频设置一个封面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频封面</title>
</head>
<body>
<video src="video/food.mp4" controls="controls" poster="video/mi.jpg"></video>
</body>
</html>
2.4loop循环播放
loop属性 设置视频循环播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循环播放</title>
</head>
<body>
<video src="video/bear.mp4" muted="muted" autoplay="autoplay" loop></video>
</body>
</html>
2.5height/width高/宽
height属性 设置高
width属性 设置宽
设置其中一个属性另一个会自动等比例缩放。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高宽设置</title>
</head>
<body>
<video src="video/bear.mp4" height="1080px" controls="controls"></video>
</body>
</html>
2.6.视频格式问题
五大浏览器厂商支持的视频格式不统一，导致某些视频格式兼容差。
老版本的浏览器不支持html5可以通过js的html5media框架来实现。
video支持的三种格式：
WebM Ogg MPEG 4 = mp4
W3C为了解决这个问题推出了第二个video标签的格式：
三种情况都写上，五大浏览器都支持能正常使用了，
source标签 支持可替换资源。
type属性 指定格式
type="video/xxx格式
<video controls="controls">
<source src="video/bear.mp4" type="video/mp4">
<source src="video/bear.Ogg" type="video/ogg">
<source src="video/bear.webm" type="video/webm">
</video>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第二格式</title>
</head>
<body>
<video controls="controls">
<source src="video/bear.mp4" type="video/mp4">
<source src="video/bear.Ogg" type="video/ogg">
<source src="video/bear.webm" type="video/webm">
</video>
</body>
</html>
3.audio音频标签
audio标签 播放音频
autoplay属性 自动播放（bug）
conerols属性 控制条组件
loop属性 自动循环
audio支持三个音频格式：
Ogg Mp3 Wav
二种使用方式：
<audio src="audio/NEXT%20TO%20YOU.mp3" controls="controls"></audio>
<audio controls="controls">
<source src="audio/NEXT%20TO%20YOU.mp3" type="audio/mp3">
<source src="audio/NEXT%20TO%20YOU.ogg" type="audio/ogg">
<source src="audio/NEXT%20TO%20YOU.wav" type="audio/wav">
</audio>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音频</title>
</head>
<body>
<audio src="audio/NEXT%20TO%20YOU.mp3" controls="controls"></audio>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio第二种格式</title>
</head>
<body>
<audio controls="controls" loop="loop">
<source src="audio/NEXT%20TO%20YOU.mp3" type="audio/mp3">
<source src="audio/NEXT%20TO%20YOU.ogg" type="audio/ogg">
<source src="audio/NEXT%20TO%20YOU.wav" type="audio/wav">
</audio>
</body>
</html>
4.详情/概要标签
details标签 信息的详情
summary标签 信息的概要
默认显示信息概要，左边有一个三角符合，点击可展开信息详情，再次点击折叠信息。
格式：
<details>
<summary>概要信息</summary>
每天学习并做好笔记多多练习。
</details>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>详情/概要标签</title>
</head>
<body>
<details>
<summary>概要信息</summary>
每天学习并做好笔记多多练习。
</details>
</body>
</html>
5.marquee滚动条
marquee标签 设置滚动条
不属于w3c官方的标签，但是5浏览器却支持使用。
direction属性 设置滚动方向
默认从右往左滚动
up / dowm / left / right 未指定值，默认值为
behavior属性 设置如何滚动
scroll 单方向循环滚动
slide 只滚动一次靠边停
alternate 文字来回滚动
未指定值，默认值为 scroll。
bgcolor属性 设置滚动条颜色
scrollamount属性 设滚动速度
loop属性 设置滚动次数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动条</title>
</head>
<body>
<marquee behavior="alternate">来回滚动</marquee>
<marquee behavior="slide">滚动一次</marquee>
<marquee behavior="scroll">一直滚动</marquee>
<hr>
<marquee direction="up">向上滚动</marquee>
<marquee direction="down">向下滚动</marquee>
<marquee direction="right">向右滚动</marquee>
<marquee direction="left">向左滚动</marquee>
<hr>
<marquee scrollamount="1">滚得慢</marquee>
<marquee scrollamount="100">滚得快</marquee>
<hr>
<marquee bgcolor="red">我有颜色</marquee>
<hr>
<marquee scrollamount="30">
<img src="image/ghost.jpg" alt="图片" height="300px">
</marquee>
</body>
</html>
6.HTML5废弃的标签
HTML中的标签作用是用来添加语义的，而早期的HTML标签中有一部分标签是没有语义的，还有一部分是用来修改样式的，所有被淘汰：
br 换行
hr 水平线
foot 设置文字大小颜色样式
b 加粗
u 下滑线
i 斜体
s 删除线
注意点：
开发中尽量不要去使用，一帮情况下都是作为css的钩子来使用。
HTML5也新增部分有语义的标签来替代淘汰的标签。
语义
strong == b 加粗 定义重要强调的文字
ins == u 下划线 定义插入的文字
em == i 斜体 定义强调的文字
del == s 删除线 定义被删除的文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>替换废弃标签</title>
</head>
<body>
<strong>aaa</strong>
<ins>bbb</ins>
<em>ccc</em>
<del>ddd</del>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css修改字体样式</title>
<style type="text/css">
.one {
font-weight:bold;
}
.two {
text-decoration: underline;
}
.three {
font-style: italic;
}
.four {
text-decoration: line-through;
}
</style>
</head>
<body>
<p class="one">AAA</p>
<P class="two">BBB</P>
<p class="three">CCC</p>
<p class="four">DDD</p>
</body>
</html>
7.字符实体
HTML中对空格/回车/tab不敏感，多个空格会被当做一个空格来展示，
某些字符有特殊的含义，不能呗浏览器直接显示出来，需要通过字符实体来展示。
例：
显示 <a> 网页空白的。
字符实体(带分号) 含义 （多个个&xxx;就是xxx）
空格
< < 小于
> > 大于
& & 和号
" " 引号
' ' 撇号
¥ ¥ 人名币 （日元用这个）
€ € 欧元
&cope; © 版权
® ® 注册商标
™ ™ 商标
× × 乘号
÷ ÷ 除号
注意点：大小写敏感。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符实体</title>
</head>
<body>
<p>
空 格
</p>
<p>
<a>标签
</p>
<p>
&和号
</p>
<p>
"引号
</p>
<p>
'撇号
</p>
<p>
¥人名币
</p>
<p>
€欧元
</p>
<p>
©版权
</p>
<p>
®注册商标
</p>
<p>
™商标
</p>
<p>
×乘号
</p>
<p>
÷除号
</p>
</body>
</html>
2396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
