您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

博学谷 - HTML5 笔记01 - HTML5 的新特性

1.语义化标签

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

注意:

  • 这种语义化标准主要是针对搜索引擎的
  • 这些新标签页面中可以使用多次
  • 在 IE9 中,需要把这些元素转换为块级元素
  • 其实,我们移动端更喜欢使用这些标签

demo:

        .c {
            height: 30px;
            width: 400px;
            background-color: bisque;
            margin: 10px auto;
            text-align: center;
            line-height: 30px;
        }

        .bd {
            height: 100px;
            background-color: transparent;
        }

        .bd-l {
            float: left;
            width: 195px;
            height: inherit;
            background-color: bisque;
        }

        .bd-r {
            line-height: 100px;
            float: right;
            width: 195px;
            height: inherit;
            background-color: bisque;
        }

        .bd-l span {
            display: inline-block;
            width: inherit;
            height: 50%;
            line-height: 50px;
        }

        .bd-l section {
            margin: auto;
            background-color: aquamarine;
            height: 40px;
            width: 160px;
            line-height: 40px;
        }
    <header class="c">header:头部标签</header>
    <nav class="c">nav:导航标签</nav>
    <div class="c bd">
        <article class="bd-l">
            <span>article:内容标签</span>
            <section>section:文档某个区域</section>
        </article>
        <aside class="bd-r">aside:侧边栏标签</aside>
    </div>
    <footer class="c">footer:尾部标签</footer>

效果:
在这里插入图片描述

2.多媒体标签
视频<video>支持三种视频格式:

在这里插入图片描述
属性:
在这里插入图片描述
demo:

    <video muted="muted" autoplay="autoplay">
        <source src="./media/mi.mp4" type="video/ogg">
        <source src="./media/mi.mp4" type="video/mp4">
        您的浏览器暂不支持 &lt;video&gt; 标签播放视频
    </video>

音频<audio>支持三种音频格式:
在这里插入图片描述
demo:

    <audio controls="controls">
        <source src="happy.mp3" type="audio/mpeg">
        <source src="happy.ogg" type="audio/ogg">
        您的浏览器暂不支持 &lt;audio&gt; 标签。
    </audio>

总结:

  • 音频标签和视频标签使用方式基本一致
  • 浏览器支持情况不同
  • 谷歌浏览器把音频和视频自动播放禁止了
  • 我们可以给视频标签添加 muted 属性来静音播放视频,音频不可以(可以通过JavaScript解决)
  • 视频标签是重点,我们经常设置自动播放,不使用 controls 控件,循环和设置大小属性

3.input 类型
在这里插入图片描述

表单属性:
在这里插入图片描述

demo:

    <ul>
        <li> email:<input type="email">
        <li> url:<input type="url">
        <li> date:<input type="date">
        <li> time:<input type="time">
        <li> month:<input type="month">
        <li> week:<input type="week">
        <li> number:<input type="number">
        <li> tel:<input type="tel">
        <li> search:<input type="search">
        <li> color:<input type="color">
    </ul>

效果:
在这里插入图片描述

4.文章参考链接
a. https://www.boxuegu.com/
b. https://www.w3school.com.cn/html5/html5_video.asp
c. https://www.w3school.com.cn/tags/tag_audio.asp


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进