HTML5 新增标签

最新推荐文章于 2023-02-24 17:34:41 发布

LyaJpunov

最新推荐文章于 2023-02-24 17:34:41 发布

阅读量558

点赞数

分类专栏： # HTML5 文章标签： html5 html 前端

本文链接：https://blog.csdn.net/weixin_43903639/article/details/121780500

版权

HTML5 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

语义化标签

语义化标签只是适合阅读，适合爬虫，其本质和div一样样滴

<header> 标签定义文档的页眉（介绍信息）

<nav> 标签定义导航链接的部分

<article> 标签定义外部的内容。外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本

<footer> 标签定义文档或节的页脚。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等

<aside>使用例子：页面侧边栏、广告、友情链接、文章引语（内容摘要）

<section>一个主题性的内容分组，通常包含一个头部（header），可能还包含一个尾部（footer）

<figure>用于对元素进行组合

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0px;
            padding: 0px;
        }
        html,body{
            height:100%;
        }
        header,footer{
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: tomato;
        }
        section{
            height: calc(100% - 100px);
            background-color: thistle;
        }
        nav,aside{
            width: 200px;
            height: 100%;
            background-color: snow;
            float: left;
            text-align: center;
        }
        main{
            width: calc(100% - 400px);
            height: 100%;
            background-color: thistle;
            float: left;
            text-align: center;
        }
        article>header{
            background-color: wheat;
            font-size: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
<header>header</header>
<section>
    <nav>
        <figure>nav</figure>
        <ul>
            <li>link1</li>
            <li>link2</li>
            <li>link3</li>
            <li>link4</li>
        </ul>
    </nav>
    <main>
        <article>
            <header>article header 1</header>
            <p>lorem</p>
            <header>article header 2</header>
            <p>lorem</p>
        </article>
    </main>
    <aside>
        <figure>aside</figure>
        <p>
            lorm ..... ...... ..... ... .. .. ..... .... .. ..... .. .  ...... .... ...... .... .. ..... ..
        </p>
    </aside>
</section>
<footer>footer</footer>
</body>
</html>

音频标签

controls控制按钮，必须开启

loop是否循环

autoplay自动播放，有些浏览器会在刷新以后自动关闭这个功能

<audio src="./1.wav" controls="controls" loop autoplay></audio>

视频标签

controls控制按钮，必须开启

loop是否循环

autoplay自动播放，有些浏览器会在刷新以后自动关闭这个功能

muted静音

poster封面

可以直接设置宽高，当然css也可以设置

<video src="./a.mp4" controls loop autoplay poster="1.png"></video>

LyaJpunov

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录