HTML篇三：H5的区别

概述：h5针对h4增加和‘删除’了一些标签、属性。

一、新增标签

1、语义标签

• <header>：头部标签
• <nav>：导航标签
• <section>：定义文档某个区域
• <article>：内容标签
• <aside>：侧边栏标签
• <footer>：尾部标签

注：‘语义’，指的是标签或元素所代表的含义或作用，有助于浏览器、搜索引擎以及辅助技术理解网页内容的结构和含义。（了解即可）‌

2、多媒体标签

• <video>：视频标签
• <audio>：音频标签

这两者是H5更新的重要点，但我们只需要记住两者共有的属性即可掌握。

以下是两者的五个共有属性，同样也是常用属性。

• ‌src属性‌：用于指定媒体数据的URL地址。
• ‌autoplay属性‌：用于指定媒体是否在页面加载后自动播放。
• ‌preload属性‌：用于指定视频或音频数据是否预加载，有三个可选值：none、metadata和auto。
• ‌loop属性‌：用于指定是否循环播放视频或音频。
• ‌controls属性‌：用于指定是否为视频或音频添加浏览器自带的播放用的控制条。

3、其他标签

• <mark>：定义带有记号的文本
• <canvas>：定义一个图形，用于绘制图像

<meter>：定义已知范围内的标量或测量；

属性：包括value（表示当前值）、min（表示最小值）、max（表示最大值）、low（表示低值范围）、high（表示高值范围）、optimum（表示最优值）等，用于定义测量的具体范围和特征。

<progress>：标识任务的进度或进程；

属性：包括value（表示当前进度值）和max（表示总进度值），用于定义进度的具体状态。

二、新增全局属性

• ‌contentEditable‌：允许用户编辑元素内容，若未指定，则继承父元素的该属性。
• ‌contextmenu‌：定义元素的上下文菜单，用户右击元素时显示。
• ‌data-*‌：允许为元素添加自定义数据属性。
• ‌draggable‌：规定元素是否可拖动。
• ‌dropzone‌：规定当被拖动的数据被拖放到元素中时发生的行为。
• ‌hidden‌：隐藏元素，使其不显示但仍在文档流中。
• ‌spellcheck‌：规定是否对元素进行拼写或语法检查。
• ‌tabindex‌：规定元素的Tab键控制次序。

三、删除标签—解释

简单概括：其实h5中并未明确删除某个标签，严格意义上来说，它只是删除了部分标签的语义！同时将一些标签作用转移到了css中使用。

• ‌表现性标签‌：如<big>、<center>、<font>等，这些标签原本用于控制文本的样式，但HTML5推荐使用CSS来控制样式。
• ‌框架相关标签‌：如<frameset>、<frame>、<noframes>等，这些标签与框架布局相关，但HTML5推荐使用更现代的布局方法，如CSS Flexbox和Grid。
• ‌其他不再推荐使用的标签‌：如<acronym>、<applet>、<basefont>、<dir>、<isindex>、<s>、<strike>、<tt>、<u>、<xmp>等，这些标签在HTML5中也不再推荐使用，部分标签的功能被其他更语义化的标签或CSS所替代‌。

四、HTML完结语

简单概述一下，HTML只有三个篇幅，它难度并不高，且它的适的用性大多围绕底层逻辑语言——js来进行拓展，在实际开发中并不需要太过深入即可达到上手开发的程度，所以只需要针对标签及其属性进行记忆即可。