HTML5新增相关标签的和属性

总结一下今天学习的h5新增标签和属性

今天一共学了流、图标、响应式图像、音频视频、列表、h5超链接

定义流：

流表示图表、照片、图形、插图、代码片段等独立的内容。在 h5之前没有专门去实现的这个目的的元素。h5通过figure和figcaption引入流，其中figcaption是流标题，流标题不是必须的，但是如果包含它，它必须是figure的最前面或者最后面的一个元素。

figure——流容器——默认显示从新的开始显示流的内容，可以用css改变样式，figure默认显示左右缩进（margin的大小）40px，上下16px可以通过css改变 figcaption标签，需要将其放在figure标签里面的最后一个或者最前面一个位置，不允许出现在其他任何位置，作用是对内容最简单的一个描述，应用于表格上方的解释说明

定义图标：

图标大小一般默认是1616px，透明背景，创建一个1616px的图标文件，保存为favicon.ico，.ico文件中可以包含多个不同尺寸的同名文件。将该文件保存到工作区的根目录，通过

<link rel = "ico" src ="" type = "image/x-ico >

1

引入；如果图标无法加载显示到页面中，可能是因为网页加载图标过慢，或者可以尝试先访问图标http：//localhost/favicon.ico，再访问网页.

响应式图像

响应视图大小：

HTML5新增picture标签和img标签中的srcset、sizes属性

picture标签作为容器，可以包含一个或多个source标签，其中source可以加载多媒体源，包含以下属性：（IE9+支持source标签）

:（必需，设置图片路径，设置路径有两种设置方法，直接设置，或者用逗号分隔，利用图片像素描述路径，srcset = “image/ 01.png，image/02.png 2px”）

media：设置媒体查询，madia = “（min-width ：320px）”；

sizes: 设置宽度，如sizes =“100vw”，也可以通过媒体查询设置，如sizes = “（min-width ：320px）100vw，（min-width ：640px）50vw”，sizes里面的媒体查询只对w描述符起作用，即如果srcset里面采用的是x描述符，或者根本没有设置srcset属性，那么sizes完全不起作用；

type：设置MIME属性

以下是我上网查询之后对媒体查询的理解

媒体查询是向浏览器做出询问，通过对浏览器做出的改变来实现已知的样式或效果。媒体查询后由几个表达式组成，在css中设置时，表达式哪一个正确，css样式才会实现，如果表达式为假，那么会自动忽略。这里的理解是源于这篇文章，请参考前端中媒体查询

音频、视频

在h5中新增了音频audio标签和视频video标签，通过这两个标签，我们可以实现将音频和视频放置在网页上的操作

audio标签

（audio标签可以包裹多个source标签，用来导入不同的音频文件，浏览器会自动选择一个可以播放的文件播放

有些浏览器不支持某种格式的音频，可以使用source标签嵌套在audio标签中，添加几种不同格式的音频，当第一种不支持时可以转换到第二种，都不支持时则如上述提示文字或者链接信息；）

属性：

autoplay：设置自动播放、controls：设置播放组件，即用户可以自行开始暂停，音量等。loop：设置循环播放，当设置了loop：loop后，当音频结束时继续播放该音频。preload：设置后，音频在页面加载时加载，并预备播放，如果使用autoplay则可以忽略该属性。src：音频路径。如果浏览器不支持audio标签，可以在标签符之间加上HTML字符串，这样就算不兼容，旧浏览器可以显示中间的文字部分

video标签

(和audio一样可以包含多个source标签，作用类似）

属性：

具有和audio类似属性之外,还具有muted属性——设置视频的音频应该被静音；poster——设置视频下载时显示的图像或者在用户点击暂停时的出现的画面。

小结

source标签可以为audio和video标签定义多媒体资源，必须包裹在audio或者video标签中，source包含以下三个属性： media、src、type。media定义媒体资源的类型，如上述不支持时的情况。src定义资源文件的地址。type后的值，如果和media中不匹配，一般忽略；

列表

描述（自定义）列表

dl，dt，dd，其中dl中只能包含dt和dd标签，dt和dd标签中可以包含其他任何标签，应用实例——股票的增跌的数据表示

菜单列表

menu标签，定义命令的列表或菜单，其中可以包含command标签和menuitem标签。其中command标签中能够包含很多属性（type——定义command的类型，有command、checkbox、radio三种，默认值为command。checked——定义是否被选中，仅用于checked和radio类型。disable——定义command是否可用。icon——定义作为command来显示的图像的URL。label——定义command可见的label。radiogroup——定义command所属的组名，仅在类型为radio时使用）其中menuitem标签在web标准中已经删除MDN

H5超链接

h5中允许在链接内包含任意对象，如段落、列表、整篇文章和区块，但是不允许出现音频、视频、表单元素、iframe等交互式内容

关于锚点

H5中，a标签如果没有设置href时，只是链接的占位符，而不再是一个锚点, H4中没有设置href可以当做锚点使用

创建用于链接的锚点的一般方法——任何定义了ID值的元素都可以作为锚点标记，给标签的ID锚点命名时不要含有空格，同时不要置于绝对定位元素内，为a标签设置href属性，属性值设为“#+锚点名称”，如“#p4”，如果链接到不同页面，则设置如“demo.html#p4”可以使用相对路径也可以使用绝对路径，但是锚点名称是区分大小写的

有download和没有的比较

<a href = "01.jpg" download>下载图片</a>

<a href = "01.jpg" >浏览图片</a>

目前只有Chrome和firefox支持download属性

图像热点

图像的局部区域定义链接，需要用到标签，其中map里面的ID或者name属性要设置的一致，因为img标签里面的usemap可以引用map里面的id或者name属性。

area必须嵌套在标签中，其中alt是必须设置在area中的属性

area标签还包含以下几种属性

coords——热点区域坐标

href——定义热点区域的目标URL

nohref——从热点区域排除某个区域

shape——定义区域的形状（有default，rect（矩形），circ（圆形），poly（多边形））

target——规定在何处打开href的目标URL

框架链接

<iframe src = "URL">，其中框架的默认宽高是220*120px，可以用css进行样式修改

1

我目前是在职前端开发，如果你现在也想学习前端开发技术，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的前端学习交流3000人裙：前面：851 中间：231 最后：348。里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题，前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载

相对于我对面的大佬来说，学得实在是太少了，有些知识如果不通过这篇博客感觉自己已经忘了，但是没关系，以后会慢慢做一些小项目的，那样就可以记起来了，H5再有一天就可以学完了，到时候也会更新的，想一起学前端的小白，欢迎来踩！