<!-- 1,HTML 文本格式化 https://www.runoob.com/html/html-formatting.html-->
<!-- HTML 文本格式化标签 -->
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
<!-- HTML "计算机输出" 标签 -->
<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本
<!-- HTML 引文, 引用, 及标签定义 -->
<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目。
<!-- 2,form表单 -->
<datalist> 指定一个预先定义的输入控件选项列表,像select但是可以输入搜索功能
<input list="browsers">
<datalist id="browsers">
<option value="Firefox">
<option value="Chrome">
<option value="Safari">
</datalist>
<!-- 3,HTML字符实体 https://www.runoob.com/tags/ref-entities.html-->
实体名称对大小写敏感！
显示结果 描述 实体名称 实体编号
空格  
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (IE不支持) '
￠ 分 ¢ ¢
£ 镑 £ £
¥ 人民币/日元 ¥ ¥
€ 欧元 € €
§ 小节 § §
© 版权 © ©
® 注册商标 ® ®
™ 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷
¦ 间断的竖杠 ¦ ¦
« 左双角引号 « «
» 右双角引号 » »
° 度符号 ° °
± 加减号/正负号 ± ±
· 中间点 · ·
<!-- 4,HTML5 浏览器支持 -->
为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。
我们可以使用 Sjoerd Visscher 创建的 "HTML5 Enabling JavaScript", " shiv" 来解决该问题:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。
注意：国内用户请使用本站静态资源库（Google 资源库在国内不稳定）：
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
<!-- 5,HTML5 新元素 -->
注意,基本都是IE9才开始支持
<nav> 定义导航链接的部分。
<nav>
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
</nav>
<progress> 定义任何类型的任务的进度。
<progress value="22" max="100"></progress> //标记"下载进度"：
<ruby> 定义 ruby 注释（中文注音或字符）。
<ruby>
汉 <rp>(</rp><rt>Han</rt><rp>)</rp>
字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>
<!-- 6,Canvas画布 https://www.runoob.com/html/html5-canvas.html-->
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas"); //找到 <canvas> 元素:
var ctx=c.getContext("2d"); //创建 context 对象：
//绘制一个红色的矩形：
ctx.fillStyle="#FF0000"; //设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
ctx.fillRect(0,0,150,75); //fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
</script>
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，
那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
Canvas 坐标:
canvas 是一个二维网格,左上角坐标为 (0,0)
fillRect在画布上绘制 150x75 的矩形，从左上角开始 (0,0)
<!-- 更多线,文本,圆,渐变,图片看菜鸟 -->
<!-- 7,HTML5 内联 SVG https://www.runoob.com/html/html5-svg.html-->
SVG 指可伸缩矢量图形,使用 XML 格式定义图形,图像在放大或改变尺寸的情况下其图形质量不会有损失,
SVG 图像可通过文本编辑器来创建和修改
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" /> //显示一个红色的圆
</svg>
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
<!-- 8,拖放（Drag 和 Drop） https://www.runoob.com/html/html5-draganddrop.html-->
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img loading="lazy" id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
<script>
function allowDrop(ev){ev.preventDefault();}
function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
分析:
A,使元素可拖动
draggable="true"
B,拖动什么
ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值
c,放到何处
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法
D,进行放置
当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
<!-- 9,HTML5 新的表单属性 https://www.runoob.com/html/html5-form-attributes.html-->
查看input属性支持情况
<!-- 10,HTML 插件 -->
插件的功能是扩展 HTML 浏览器的功能。
辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件。
辅助程序可用于播放音频和视频（以及其他）。辅助程序是使用 <object> 标签来加载的。
使用辅助程序播放视频和音频的一个优势是，您能够允许用户来控制部分或全部播放设置。
插件可以通过 <object> 标签或者 <embed> 标签添加在页面中。
大多数辅助应用程序允许对音量设置和播放功能（比如后退、暂停、停止和播放）的手工（或程序的）控制。
所有主流浏览器都支持 <object> 标签。该标签用于插入对象 (例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) 。
<object width="400" height="50" data="https://www.runoob.com/bookmark.swf"></object>
<object width="100%" height="500px" data="https://www.runoob.com/snippet.html"></object>
<object data="https://www.runoob.com/audi.jpeg"></object>
<!-- 11.audio 音频标签 -->
<audio src="小猪佩奇.mp3" autoplay> </audio> //autoplay马上播放 controls显示控件 loop重新开始播放。
source : 源，文件路径 //用来指定多个播放路径 当第一个source标签的路径出错时，自动会切换到第二个source标签
<audio controls="controls">
<source src="media/snow.mp3" type="audio/mpeg" />
<source src="media/snow.ogg" type="audio/ogg" />
您的浏览器不支持播放声音
</audio>
<!--12. video 视频标签 -->
<video src="小猪佩奇.mp4" autoplay controls></video>
video常用属性、方法、事件:
方法: play 播放 pause 暂停
事件: canplay 视频加载完毕 准备播放 timeupdate 播放时-持续触发
属性: duration 视频播放时长 currentTime 当前播放进度 volume 音量大小
autoplay="autoplay" 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
controls="controls" 向用户显示播放控件
width="" 设置播放器宽度 px
height="" 设置播放器高度
loop="loop" 播放完是否继续播放该视频，循环播放
preload="" auto（预先加载视频）none（不应加载视频） 规定是否预加载视频(如果有了autoplay 就忽略该属性）
src="url" 视频url地址
poster="Imgurl" 加载等待的画面图片 （视频首帧：首画面。海报）
muted="muted" 静音播放
注意: 视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性
<!-- 谷歌浏览器把自动播放功能给禁用了 有解决方案： 给视频添加静音属性 -->
<video autoplay="autoplay" muted="muted">
<source src="media/video.mp4" type="video/mp4" />
<source src="media/video.ogg" type="video/ogg" />
您的浏览器太low了，不支持播放此视频
</video>
当video标签视频内容宽度没有铺满video标签时，可以在css写上 该属性即可
video {
/* 让视频内容铺满整个video标签 fit意为：合适 */ //此属性用的比较少，视频一般都是铺满video标签的
object-fit: fill; /* fit意为：合适 */
}
兼容性: 因为多媒体标签在不同的浏览器下是不一样的外观，我们有时候需要统一所有的样式，
所以就需要我们自己使用div + 多媒体 的一些api实现 控制条工具 。
移动端H5单视频播放插件zy.media.js解决
<!--13. h5新增表单 https://www.runoob.com/html/html5-form-input-types.html-->
<!-- 注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。 -->
<form action="">
<ul>
<li>邮箱: <input type="email" required="required" /></li> //required 表单拥有该属性表示其内容不能为空，必填
<li>网址: <input type="url" placeholder="请输入用户名" /></li> //占位符-提示信息 存在默认值将不显示,会自动验证 url 域的值。
<li>日期: <input type="date" autofocus="autofocus" /></li> // 自动获取焦点，页面加载完成自动聚焦到指定表单,弹出日历选择
<li>生日 (日期和时间): <input type="datetime-local" name="bdaytime"></li> //选择一个日期和时间 (无时区),弹框
<li>时间: <input type="time" /></li> //定义可输入时间控制器（无时区）,弹出数据选择框
<li>月: <input type="month"></li> //限制用户输入必须为月类型,有月显示框
<li>周: <input type="week"></li> //week 类型允许你选择周和年。
<li>数量: <input type="number" min="1" max="100"/></li> //定义一个数值输入域(限定)
<li>手机号码: <input type="tel" name="username" autocomplete="off" /></li>
//on 浏览器基于之前输入过的值，开始提示 代码中需要带上name属性，提交的时候才会将input的内容提交过去
<li>搜索: <input type="search" /></li>
<li>颜色: <input type="color" /></li> //筛选颜色,如拾色器
上传头像: <input type="file" name="" id="" multiple="multiple"> //multiple:可以多选文件提交 //不加只能上传单个文件
<li>E-mail: <input type="email" name="email"></li> //在提交表单时，会自动验证 email 域的值是否合法有效
<li><input type="range" name="points" min="1" max="10"></li> //range 类型用于应该包含一定范围内数字值的输入域。显示为滑动条。
//max - 规定允许的最大值 min - 规定允许的最小值 step - 规定合法的数字间隔 value - 规定默认值
<li> <input type="submit" value="提交"></li>
</ul>
</form>
使用下面的属性来规定对数字类型的限定：
属性 描述
disabled 规定输入字段是禁用的
max 规定允许的最大值
maxlength 规定输入字段的最大字符长度
min 规定允许的最小值
pattern 规定用于验证输入字段的模式
readonly 规定输入字段的值无法修改
required 规定输入字段的值是必需的
size 规定输入字段中的可见字符数
step 规定输入字段的合法数字间隔
value 规定输入字段的默认值
