HTML5 01. 布局、语义化标签、智能化表单、表单元素／标签／属性／事件、多媒体、类操作、自定义属性

　　　　1.知识点

lang = “en” 所用语言是英文
文档结构更简洁
IE8一下不支持h5c3
书写更宽松
div没有语义
标签语义化：在合适的地方使用合适的标签

对seo优化友谊

网页经典布局

页头、导航、主题（左右）、页尾

max-wifth、min-width:最大最小宽度

<!-- 头部 --> 

<div class="header"> 

    <ul class="nav"></ul>

     

</div> 

<!-- 主体部分 --> 

<div class="main"> 

     <!-- 文章 --> 

     <div class="article"></div>

      <!-- 侧边栏 --> 

     <div class="aside"></div>

     

</div> 

<!-- 底部 --> 

<div class="footer"></div>

H5经典网页布局

<!-- 头部 --> 

<header> 

    <ul class="nav"></ul>

</header> 

<!-- 主体部分 --> 

<div class="main"> 

    <!-- 文章 --> 

    <article></article>

    <!-- 侧边栏 --> 

    <aside></aside>

</div>

 <!-- 底部 --> 

<footer></footer>

语义化标签

header页头、nav导航、sectioc：区/块 aside侧边栏、article文章、footer页脚、figure媒介内容与分组（与ul>li做个比较）、

mark表示标记（带用UI）、progress进度、time日期

本质上新语义标签与<div>、<span>没有区别，只是其具有表意性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成<div class="nav"> 相当于 <nav>。

通过检测IE浏览器的版本来加载三方的一个JS库来解决H5兼容问题

<!--[if lte ie 8]>
    <script src="html5shiv.min.js"></script>
<![endif]-->

表单

　　收集用户信息、H5自动验证表单、form表单、fieldset表单分组、legend表单名、

　　新增(兼容较差)：email：邮箱、color：取色器、url：网址、

　　　　　　search：搜索栏（带有删除符号、手机端会显示键盘）、number：只能输入数值（step：步长）

　　　　　　tel：电话（没有自动验证）、time：时间、week：周、month：月、date：日期、

　　　　　　datetime：时间、range滑动条

　　　　部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。

表单元素（标签）

　　<datelist>数据列表与input配合使用

<input type="text" list="data">

<datelist id="data">

    <option>boy</option>

    <option>girl</option>

    <option>gay</option>

</datelist>

<keygen> 生成加密字符串

<output> 不可当做数据提交？

<meter> 表示度量器，不建议用作进度条

<meter value="81" min="0" max="100" low="60" high="80" />

表单属性：

placeholder:提示文字（占位符，输入文字后，提示文字消失）

autofocus：自动获取焦点

autocomplete：on/off 自动匹配已经输入国的内容；

required：必填项

mulitiple：多选

novalidate：关闭表单自动验证功能（只能加给form）

pattern = “正则表达式” ；自定义正则验证

 <form action="" >

        <fieldset>

            <legend>表单属性</legend>

            <label for="">

                用户名：<input type="text" placeholder="例如：李狗蛋" autofocus
　　　　　　　　　　　　　　 name="userName" autocomplete="on" required/>

            </label>

            <label for="">

                电话：<input type="tel" pattern="1\d{10}" />

            </label>

            <!-- 上次文件-->

            <input type="file" name="file" multiple/>

            <input type="submit" formaction=“XXX.PHP/>

        </fieldset>

    </form>

表单事件：

oninput:一般用于字数统计　　事件源.oninput

oninvalid:验证不通过的时候触发，用来设置验证不通过的时候提示文字　　事件源.setCustomValifity("提示文字")

<body>

<form action="">

    <fieldset>

        <legend>表单事件</legend>

        <label for="">

            邮箱：<input type="email" name="" id="txt1"/>

        </label>

        <label for="">

            密码：<input type="text" name="" id="txt2"/>

        </label>

        <input type="submit" />

    </fieldset>

</form>

<script>

    //表单事件： oninput　当用户输入的时候

//        oninvalid 当验证不通过是触发

    var  txt1=document.getElementById('txt1');

    var  txt2=document.getElementById('txt2');

    var num=0;

    txt1.oninput=function(){

        num++;

//         将字数显示在txt2中

        txt2.value=num;

    }

//    oninvalid 当验证不通过是触发

//    一般用于设置验证不通过时的 提示文字

    txt1.oninvalid=function(){

//        用于设置验证不通过时的 提示文字

         this.setCustomValidity('亲，请输入正确的邮箱格式！');

    }

</script>

</body>

表单事件

多媒体：

之前在网页上播放多媒体必须依靠第三方插件

　　mediaplay／快播／false插件

H5新增音频视频标签

　　audio音频标签、video视频标签

　　　　controls：播放控制条

　　　　autoplay：自动播放

　　　　loop：循环播放

　　音频支持：mp3/wav／ogg

　　视频支持：mp4/ogg／webm／

<audio controls autoplay>
<source src = "music.mp3">
<source src = "music.ogg">
<source src = "music.wav">
抱歉，你的浏览器不支持音频标签
</audio>

DOM

类操作

　　var new = document.querySelector("选择器“)；只会选择符合条件的第一个元素；

　　var newArr=document.querySelectorAll("选择器“）;

　　box.classList.add("类名“）；添加类名

　　box.classList.remove("类名“);删除类名

　　box.classList.toggle("class");切换class，有则删除无则添加

　　box.classList.contains("类名“）；是否包含某个类名

自定义属性

在HTML5中我们可以自定义属性，其格式如下data-*=""，例如

data-info="我是自定义属性"，通过Node.dataset['info'] 我们便可以获取到自定义的属性值。

Node.dataset是以类对象形式存在的

当我们如下格式设置时，则需要以驼峰格式才能正确获取

data-my-name="itcast"，获取Node.dataset['myName']

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Tab 标签</title>

    <style>

        body {

            margin: 0;

            padding: 0;

            background-color: #F7F7F7;

        }

        .tabs {

            width: 400px;

            margin: 30px auto;

            background-color: #FFF;

            border: 1px solid #C0DCC0;

            box-sizing: border-box;

        }

        .tabs nav {

            height: 40px;

            text-align: center;

            line-height: 40px;

            overflow: hidden;

            background-color: #C0DCC0;

            display: flex;

        }

        nav a {

            display: block;

            width: 100px;

            border-right: 1px solid #FFF;

            color: #000;

            text-decoration: none;

        }

        nav a:last-child {

            border-right: 0 none;

        }

        nav a.active {

            background-color: #9BAF9B;

        }

        .cont {

            overflow: hidden;

            display: none;

        }

        .cont ol {

            line-height: 30px;

        }

    </style>

</head>

<body>

<div class="tabs">

    <nav>

        <a href="javascript:;" data-cont="local">国内新闻</a>

        <a href="javascript:;" data-cont="global">国际新闻</a>

        <a href="javascript:;" data-cont="sports">体育新闻</a>

        <a href="javascript:;" data-cont="funny">娱乐新闻</a>

    </nav>

    <section class="cont" id="local" >

        <ol>

            <li>河感在生矿难，死伤在全10</li>

            <li>禽流感在感在广1处继续蔓延，*指示</li>

            <li>南方大旱，农作物减产绝收面积上亩</li>

            <li>猪流感在广在全国暴发</li>

            <li>禽流感在全国多处继续蔓延，*指示</li>

            <li>南方大旱，农作物减产绝收面积上亩</li>

            <li>猪流感在广东群体性暴发</li>

        </ol>

    </section>

    <section class="cont" id="global">

        <ol>

            <li>河南再次发生矿难，死伤人数超过100</li>

            <li>禽流感次发生蔓延，*指示</li>

            <li>南方大旱，农作物减产绝收面积上亩</li>

            <li>猪流感在广减产绝收发</li>

            <li>禽流感在全国多作物减产绝收面积上亩</li>

            <li>猪流感在广东群体性暴发</li>

        </ol>

    </section>

    <section class="cont" id="sports">

        <ol>

            <li>333河南再次发生矿难，死伤人数超过100</li>

            <li>禽流感在全国多处农作物农延，*指示</li>

            <li>南方大旱，农作物减产绝收面积上亩</li>

            <li>猪流感在广东群体性暴发</li>

            <li>禽流感在全农作物继续蔓延，*指示</li>

            <li>南方大农作物减产绝收面积上亩</li>

            <li>猪流感在广东群体性暴发</li>

        </ol>

    </section>

    <section class="cont" id="funny">

        <ol>

            <li>福建发生血腥命案:两女遭割喉 1男孩被砍数刀</li>

            <li>四川原副省长李成云被查 5年前曾违纪又复出</li>

            <li>胡歌反对粉丝探班：以前请吃饭现在会黑脸</li>

            <li>曝郑爽爸爸歌厅撩妹 与女子勾肩搭背显亲密</li>

            <li>宜宾*副局长无证驾驶出车祸 弃车离开现场</li>

            <li>国子监大街门匾现错字 已悬挂近10年(图)</li>

            <li>猪流感在广东群体性暴发</li>

        </ol>

    </section>

</div>

<script>

    // 目标： 默认显示一个 当前的样式

    //  点击导航，实现切换

    //  key 表示的当前显示的是第几个

    (function(key){

//         获取所有的导航

        var navs=document.querySelectorAll('nav a');

//         遍历 给导航 绑定事件，并且添加当前样式

        for(var i=0;i<navs.length;i++){

//            如果是用户指定的当前样式

            if(key==i){

                navs[i].classList.add('active');

//              拿到要显示内容section的id

                var secId=navs[i].dataset['cont'];

//               获取对应的section标签

                document.querySelector('#'+secId).style.display='block';

            }

//            给每一个导航绑定点击事件

            navs[i].onclick=function(){

            // 排他

            // 之前有active样式的清除, 之前显示的section 隐藏

                var  currentNav=document.querySelector('.active');

//                获取对应的内容区域 ，让其隐藏

                var currentId=currentNav.dataset['cont'];

//                去掉导航的active 样式

                currentNav.classList.remove('active');

//                对应的内容区域

                document.querySelector('#'+currentId).style.display='none';

            //   突出显示自己 导航添加样式  对应的section 显示

//                给自己添加active样式

                this.classList.add('active');

//                对应的section模块显示出来

                var myId=this.dataset['cont'];

                document.querySelector('#'+myId).style.display='block';

            }

        }

    })(0);

</script>

</body>

</html>

秒客网