初识 H5-day-01

HTML5 ： HTML 标准的最新版本，是对 HTML 的第五次重大修改。HTML5的出现，对于WEB来说意义重大，其目的是想要把目前WEB中存在的各种问题一并解决掉。

1.H5新增语义化标签

<header>用来定义网页的头部</header>
<nav>用来定义网页的导航栏</nav>
<main>用来定义网页的主体内容</main>
<aside>用来定义网页的侧边栏</aside>
<article>用来定义网页当中一段独立的文章</article>
<section>用来定义网页当中的一块区域</section>
<footer>用来定义网页当中的底部</footer>

2.H5常用新属性

    <!-- 
    placeholder：占位符 提示信息
    autofocus ： 自动获取焦点
    multiple : 支持多文件上传
    autocomplete: 当提交过表单内容之后规定 某个表单控件的提示内容 关闭和打开
    required : 必填项
    tabindex : 指定表单控件获取焦点的顺序
    -->

 <form action="">
        <div>
            用户名： <input type="text" required placeholder="请输入用户名" name="user" autocomplete="off">
        </div>
        <div>
            密码： <input type="password" required name="pwd">
        </div>
        <div>
            手机号： <input type="tel"  name="tel">
        </div>
        <div>
            邮箱： <input type="email" name="email" >
        </div>
        <div>
            日期： <input type="date" name="date">
        </div>
        <div>
            文件： <input type="file" multiple name="file">
        </div>
        <div>
            <input type="submit">
        </div>
    </form>

3.H5中input新增type类型

 <!-- 

        email:邮箱
        tel：手机号
        url：路径
        number：数值
        search：搜索（语义化 ）
        range：滑块
        time：时间
        week：周
        date：年月日
        month：月
        
     -->
    <form action="">
        <div>
            邮箱： <input type="email" >
        </div>
        <div>
            手机号： <input type="tel">
        </div>
        <div>
            路径： <input type="url">
        </div>
        <div>
            数字： <input type="number">
        </div>
        <div>
            搜索: <input type="search">
        </div>
        <div>
            滑块： <input type="range" max="" min="" value="">
        </div>
        <div>
            时间： <input type="time">
        </div>
        <div>
            周： <input type="week">
        </div>
        <div>   
            日期： <input type="date">
        </div>
        <div>
            月份： <input type="month">
        </div>
    </form>

4.多媒体标签

    <!-- *video 视频* -->

​    <!-- *autoplay 自动播放（18年开始，谷歌浏览器不支持自动播放）* -->

​    <!-- *muted 静音播放* -->

​    <!-- *controls 是否显示默认播放控件* -->

​    <!-- *loop 循环播放* -->

​    <!-- *width 设置播放窗口宽度* -->

​    <!-- *height 设置播放窗口的高度* -->
     

      <iframe height=498 width=510 src='https://player.youku.com/embed/XNDMwMzY5MDg2MA=='
      frameborder=0 'allowfullscreen'></iframe>
          

      <iframe height=498 width=510 src='https://player.youku.com/embed/XNDMwMzY5MTYxMg=='
      frameborder=0 'allowfullscreen'></iframe>




    <!-- 多媒体音频标签audio -->
    <!-- controls 是否显不默认播放控件 -->
    <!-- autoplay 自动播放(目前很多浏览器不支持自动播放) -->
    <!-- loop 循环播放 -->

    <button class="btn">点击播放</button>
    <audio controls autoplay class="audio"
    src="https://dl.stream.qqmusic.qq.com/C400000UA33L3tgRFz.m4a? guid=6661798375&vkey=BD4A035245602D0CE8BCE8CCBC58E6FA67D10AF95DE5DE23A6B877A0A08F44225870024BB6333803C28E8A3412C85FD9F9C4B810A1734C82&uin=2811698851&fromtag=120032"></audio>
    <script>
        var btn = document.getElementsByClassName("btn")[0];
        var audio = document.getElementsByClassName("audio")[0];
        var flag = true;
        btn.onclick = function(){
            if (flag) {
                audio.play();
                flag = false
            }else{
                audio.pause();
                flag = true;
            }
            
        }

 5.案例