HTML5新增相关标签的和属性

Posted 2021-04-04 前端留学生

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

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

定义流：

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

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

定义图标：

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

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

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

响应式图像

响应视图大小：

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

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

<srcset>:（必需，设置图片路径，设置路径有两种设置方法，直接设置，或者用逗号分隔，利用图片像素描述路径，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——设置视频下载时显示的图像或者在用户点击暂停时的出现的画面。

小结

列表

描述（自定义）列表

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进行样式修改

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

扫描下方二维码

获取web前端、学习资料视频