H5新标签-CSDN博客

本文链接：https://blog.csdn.net/m0_62697897/article/details/126908985

1.语义化

（1）定义：标签名字有意义

（2）语义化的好处：

<1>在没有css样式的情况下对代码结构一目了然

<2>有利于SEO（网站爬虫尽快尽可能被检索到）

2.新增语义化标签

（1）header：头部

（2）nav：导航条

（3）main/section：内容

（4）footer：底部

（5）aside：侧边栏

（6）time：时间标签

（7）mark：标记标签

代码：

<style>
        /* 头部标签 */
        header{
            width: 800px;
            height: 50px;
            background-color: aqua;
            /* 让块属性元素实现水平居中 */
            margin: 0 auto;
            text-align: center;
            line-height: 50px;
            color: white;
            font-size: 30px;
        }
        /* 导航条标签 */
        nav{
            width: 800px;
            height: 30px;
            background-color: chartreuse;
            margin: 0 auto;
        }
        /* 内容标签 */
        main{
            width: 800px;
            height: 500px;
            background-color: blueviolet;
            margin: 0 auto;
        }
        /* 侧边栏标签 */
        aside{
            width: 200px;
            height: 500px;
            background-color: brown;
        }
        /* 内容标签 */
        section{
            width: 800px;
            height: 300px;
            background-color: blue;
            margin: 0 auto;
        }
        /* 时间标签 */
        time{
            width: 500px;
            height: 30px;
            background-color: burlywood;
        }
        /* 底部标签 */
        footer{
            width: 800px;
            height: 100px;
            background-color: chocolate;
            margin: 0 auto;
            text-align: center;
            line-height: 100px;
            color: white;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <header>头部</header>
    <nav></nav>
    <main>
        <aside></aside>
    </main>
    <section>
        <time>2022年8月12日</time>
        <mark>标记</mark>
    </section>
    <footer>底部</footer>
</body>

运行结果：

3.新增表单标签（input-type）

（1）color：颜色板

（2）date：日期

（3）range：范围

（4）number：数字

（5）time：时间

（6）email：邮箱

4.多媒体标签

（1）video：视频（1.格式：MP4、WebM、Ogg 2.type：文件的MIME格式）

（2）audio：音频（1.格式：MP3、Ogg、Wav 2.type：文件的MIME格式 mp3-mpeg）

（3）source：指定视频音频兼容格式

（4）多媒体标签属性

<1>src：放置过媒体的路径

<2>controls：控制器

<3>autoplay：自动播放

<4>loop：循环播放

<5>preload：预加载

<6>poster：指定播放显示的封面

<7>muted：静音

代码：

   <style>
         /* !important强制提高优先级 */
        div{
            color: chartreuse !important;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- 音频 audio(双标签) img(单标签)
              属性 src:防止音频的路径
                   controls:控制台
                   autoplay:自动播放 
                   loop:循环播放
                   preload:预加载
                   muted:静音效果
    -->
    <audio  controls autoplay loop preload="preload" muted>
        <source src="new/summer.mp3" type="audio/mpeg" />
        <source src="new/test.wav" type="audio/wav" />
    </audio>

  
    <video width="300px" src="new/ma.mp4" controls loop preload poster="https://img1.baidu.com/it/u=2776511572,3909343657&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1660410000&t=1c59ebfb278471ce57760701b59f6571" muted>
        <source src="new/test.mov" type="video/mov" />
        <source  src="new/ma.mp4" type="video/mp4"/>
    </video>
</body>

运行结果：