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