3-标签分类

Posted 2021-03-24

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了3-标签分类相关的知识，希望对你有一定的参考价值。

html5新增标签

HTML5新增了27个标签元素，废弃了16个标签元素，主要包括结构性标签、级块性标签、行内语义标签、交互性标签

1）结构性标签

负责web上下文结构的定义，确保HTML文档完整性，包括：

article（中间内容）：文章主题内容（一篇博客、一篇论坛帖子、一段用户评论、插件）
header（头部）：标记头部区域的内容
foot（尾部）：标记脚部区域内容
section：区域章节表述
nav：菜单导航，连接导航

http://book.sina.com.cn/news/whxw/2019-05-25/doc-ihvhiews4585024.shtml?pos=202061
上连接：是一个新闻连接

技术图片
上图：头部有标题标签还有其他一些内容

技术图片

上2图：中间内容可能会有多个标题段落等内容组成。

技术图片

上图：这是尾部内容

技术图片

上图：webstorm文件；图片是新浪微博的图标。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--标签页标题-->
    <title>第十七届华语文学传媒盛典颁奖：六大奖项致敬时代书写者</title>
</head>
<body>
    <!--新闻-->
    <article>
        <!--头部-->
        <header>
            <!--头部标题-->
            <h2>第十七届华语文学传媒盛典颁奖：六大奖项致敬时代书写者</h2>
            <!--头部子标题-->
            <h3>2019年05月25日23:43   新浪读书</h3>
            <!--图标-->
            <img src="images/1.png" alt="微博">
        </header>
        <!--中间章节-->
        <section>
            <!--标题标签-->
            <h3>李洱：从事写作30年，我还是个新手</h3>
            <!--段落-->
            <p>
                继《花腔》、《石榴树上结樱桃》之后，李洱磨砺十三年的厚重之作《应物兄》一经出版即引来评论界高度赞誉。
                这部八十万字的煌煌巨著，生动地刻画了当代学院知识分子的群像，话语交织、角色纷纭、引述广博，
                被誉为一部百科全书式的小说创作。
            </p>
        </section>

        <section>
            <h3>陈继明：小说家永远是学徒</h3>
            <p>陈继明以长篇小说《七步镇》斩获第17届华语文学传媒盛典“年度小说家”。授奖辞称“陈继明创造了自己的‘七步镇’，一个爱欲与救赎、记忆与遗忘、欢悦与酷烈交织的美学时空。穿过生命巨大的迷茫，经由自我内在的辩论，那个亦虚亦实、似前世又似今生的一段内心旅行，所从何来，又去往何方？出版于二〇一八年度的长篇小说《七步镇》，写出了这种现实的重影和灵魂的歧途。”</p>
        </section>
        <!--尾部-->
        <footer>
            <h3>应用中心</h3>
            <p>尾部内容。。。。</p>
        </footer>
    </article>
</body>
</html>

技术图片
上图：通过浏览器查看代码生成的效果

快级性标签

块级性标签：

完成Web页面区域的划分，确保内容的有效分隔，包括：
aside 注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容
figure 对多个元素组合并展示的元素,常与figcaption联合使用
code 表示一段代码块
dialog 人与人之间对话,包含dt和dd两个组合元素（dt用于表示说话者、dd用于表示说话者的内容）（不常用）

行内语义性标签

行内语义性标签：

完成Web页面具体内容的引用和表述，丰富展示内容，包括：
meter 特定范围内的数值，如工资、数量、百分比
time 时间值
progress 进度条，可用max、min、step进行控制，完成对进度的表示和监听
video 视频元素，用于视频播放，支持缓冲预载和多种视频媒体格式
audio 音频元素，用于音频播放，支持缓冲预载和多种音频媒体格式

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <progress max="100" value="30"></progress>
</body>
</html>

代码：在body中设置了进度条效果；百分比为100%，进度值为：30%；后面学了javascript后可以动态的显示。

技术图片

上图：进图条的效果

技术图片

上图：新建一个source目录，然后考进来一个视频文件、一个音频文件。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <progress max="100" value="30"></progress>
    <hr>
    <!--播放音频-->
    <audio src="source/music.m4a" controls="controls"></audio>
    <hr>
    <!--播放视频-->
    <video src="source/BigBuck.m4v" controls="controls"></video>
</body>
</html>

技术图片

上图：
音频可以调音量、进度；
视频可以调音量、进度、放大、下载等。

交互性标签

交互性标签：

功能性内容的表达，有一定的内容和数据的关联，是各种事件的基础，包括：
details 表示一段具体的内容，默认不显示，通过某种方式（单击）与legend交互才会显示
datagrid 控制客户端数据与显示，可用于动态脚本及时更新
menu 用于交互菜单
command 用来处理命令按钮

以上是关于3-标签分类的主要内容，如果未能解决你的问题，请参考以下文章