H5新标签

 H5标签

H5新特性都有哪些

            1.新增了许多语义化标签

            2.废弃了一些css修饰和html标签

            3.支持本地持久化数据

            4.增加了音视频标签的api

            5.提供了canvas画布及其api

            6.增加了一些历史记录的操作

            H5各种功能比较新，低于IE9的浏览器支持的功能不够全面，建议使用 IE9及其以上浏览器

mark 标记标签

<p>两只 <mark>黄鹂</mark> 鸣翠柳</p>

meter 用电量标签

        常用于能量的使用或者内容的使用量等

        属性

            value 当前电量的值

            max 最大值

            min 最小值

            high 用电量最高报警值

            low 用电量最低报警值

            当前标签中的文字，只有在浏览器不支持的时候会被渲染出来

<meter
    value="0"
    max="100"
    high="90"
    low="20"
    min="0"
>你的浏览器太low了</meter>

进度条标签

    只有最大值max属性

    没有min属性

    value属性是当前值

<progress
    max="100"
    value="50"
></progress>

ruby 标签

常用来做拼音，注音，注释等

        rt 表示注释的内容

        rp 如果浏览器不支持，现实的内容

<ruby>赵
    <rt>zhao</rt>
    <rp>你的浏览器太low了</rp>
</ruby>

datalist 数据列表

            通过 input的 list属性和 datalist的id属性进行绑定

            datalist 中的选项使用 option 标签

            通过 datalist 可以制作关联查询效果

sup 上角标

sub 下角标

    常用于注释

<p> 3<sup>2</sup>+4<sup>2</sup>=5<sup>2</sup></p>
<p> 3<sub>2</sub>+4<sub>2</sub>=5<sub>2</sub></p>

details

展示详情标签，自带折叠效果

        summary 标签是 details的 标题

<details>
    <summary>四大名著</summary>
    <p>西游记</p>
    <p>红楼梦</p>
    <p>三国演义</p>
    <p>水浒传</p>
</details>

audio 标签

用来播放音频文件，支持 MP3 ogg wav 类型文件

            属性

                controls：控制是否出现播放的控制条

                autoplay：控制自动播放

                loop：循环播放

                muted：静音

                preload：设置预加载

                    值：

                        auto：默认值，在整个页面加载之后立即加载音频文件

                        metadata:只加载音乐的源文件

                        none:不加载,可以用它来减少服务器压力

                    如果设置了autoplay,则可以不设置preload,默认即可

<audio src="../src/9.mp3" 
     controls 
     loop
     preload="auto"
></audio>

audio 结合source标签 做音频播放兼容效果

        source 专门用来解决不同浏览器对不同资源格式的支持问题，做兼容

<audio controls>
    <source src="../src/9.mp3" />
    <source src="../src/9.ogg" />
    <source src="../src/9.wav" />
</audio>

video 视频播放标签

支持 mp4，ogg，webm 格式

        controls

        loop

        muted

        autoplay

        width：视频播放区域的宽度

        poster：视频的封面

<video src="../src/1.mp4"
    controls
    loop
    muted
    width="400"
    poster="../src/a1.png"
    class="man"
></video>

视频播放的兼容写法

<video controls class="man">
    <source src="../src/1.mp4">
    <source src="../src/1.ogg">
    <source src="../src/1.webm">
</video>

figure注释标签，一般包裹一段文字，图片，代码，图表等

        注释的内容写在 figcaption 标签中

<figure>
    <figcaption>二次元的内容</figcaption>
    <img width="300" src="../src/a2.png" alt="">
</figure>

H5新增关于布局的标签

        header ：页面的头部区域，要和head标签作区分

        footer ：页面的底部区域

        nav ：导航区域

        aside :侧边栏区域

        section ：一个独立的区域，类似 div

        article :他一般包含在 section中，使用article包裹独立的模块

<header>头部内容</header>
    <nav>导航部分</nav>
    <section>
        <aside>侧边栏</aside>
        <article>主要内容</article>
    </section>
<footer>底部内容</footer>

H5 input标签新增的类型

email 约束输入内容为邮箱

url 约束输入内容为网址

number 约束输入内容为数字

             step 属性为，每次的步长

color 取色器

range 滑竿

min 最小值

            max 最大值

            value 当前值

date 显示日期

month 显示日期到月

week 显示当前周

time 设置时间

datetime-local 设置当地时间

image 图片提交按钮