HTML5新标签

HTML演变过程

常用新标签

header:定义文档的页眉 头部
nav:定义导航链接的部分
footer:定义文档或节的页脚 底部
article:定义文章
section:定义文档中的节 （section、区段）
aside:定义其所处内容之外的内容 侧边

<article>
        <header>
            <h2>这是一把98K</h2>
            <p>98K打三级头一枪搞搞不掉</p>
        </header>
        <nav>
            <a href="#">UMP9</a>
            <a href="#">SCAR</a>
            <a href="#">M4</a>
        </nav>

        也许是因为年轻，总是充满着激情对待身边的所有事情，嘴角时常挂着青春的誓言。
        因为年轻，我们拥抱着希望，就像随风展翅的风筝一样，只要我们越跑越快，
        <section>风筝就会越飞越高</section>，希望也就越来越高，高得可以藐视世间万物，高得可以穿越云层，
        羡煞每一个云层下的看客。我们有的是脚力，即使一不小心被路上的石子绊倒了，伤得筋骨疼痛了，
        我们毫不畏惧，用手擦一擦痛处，拍掉身上的尘土，强忍住那一丝疼痛，继续前行！

        <footer>
            <p>版权所有归蓝洞</p>
        </footer>
    </article><hr/>

网页效果

datalist:定义选项列表，与input一起使用

<!-- datalist   标签定义选项列表   -->
    <input type="text" value="请选择你需要的装备" list="PUBG" />
    <datalist id="PUBG">
        <option>肾上腺素</option>
        <option>三级头</option>
        <option>三级甲</option>
        <option>AWM</option>
        <option>马格南20发</option>
    </datalist><hr/>

网页效果

需要将框中的原内容删除才能进行内容选择

fieldset元素可将表单内的相关元素分组，打包 与legend搭配使用

<!-- fieldset    -->
    <fieldset>
        <legend>用户登录</legend>
        用户名:<input type="text"  /><br/>
        密　码:<input type="password" /><br/>
        邮　箱:<input type="email">
        提　交:<input type="submit"  />
    </fieldset><hr/>

网页效果

加了边框线，更规范

新增的input type属性值

email:输入邮箱格式
tel:输入手机号码格式
url:输入url格式
number:输入数字格式
search:搜索框（体现语义化）
range:自由拖动滑块
time:小时分钟
date:年月日
datetime:时间
month:月年
week:星期 年

案例：

    <!-- input type的新属性值  -->
    <form action="test.html" method="post">
        用户名:<input type="text"  /><br/>
        密　码:<input type="password" /><br/>
        邮　箱:<input type="email"><br/>
        手机号:<input type="tel" oninput = "value=value.replace(/[^\d]/g,'')"  /><br/>
        URL:<input  type="url" /><br/>
        数字:<input type="number"  /><br/>
        搜索框:<input type="search"  /><br/>
        自定滑动:<input type="range" /><br/>
        小时分钟:<input type="time" /><br/>
        年月日:<input type="date"  /><br/>
        时间:<input type="datetime-local" /><br/>
        月年:<input type="month"  /><br/>
        星期年:<input type="week"  /><br/>
        <input type="submit"  />
    </form><hr/>

网页效果

tel属性值需要加正则才能进行格式校对

常用新属性
palceholder：占位符 当用户输入的时候 里面的文字消失 删除所有文字 自动返回
autofocus:规定当页面加载时input 元素应该自动获得焦点
multiple：多上传文件
autocomplete:规定表单是否应该启用自动完成功能 有2个 一个是on 一个是off on代表记录已输入的值
1.autocomplete 首先需要提交按钮
2.这个表单必须有名字
required 必须填 内容不能为空
accesskey:规定激活（使元素获得焦点）元素的快捷键 默认采用alt + s的形式 可以自己设置快捷键

<form action="test.html" method="post" name="a">
        用户名:<input type="text"  placeholder="请输入用户名" autofocus   autocomplete="on"  required  accesskey="u"/><br/>
        密　码:<input type="password" placeholder="请输入密码" autofocus  autocomplete="off" /><br/>
        年　龄:<input type="text"  accesskey="u"/>
        <!--  当选择multiple属性的时候，type必须等于file       -->
<!--        文件上传:<input type="file" multiple  />-->
        <input  type="submit" value="提交"/><br/>
    </form>

网页效果

accesskey=“u” 表示将快捷键设置成 alt + u的形式，按 alt + u自动获得焦点

多媒体标签

audio：播放音频

video：播放视频

案例

 <!--  audio：播放音频   -->
    <audio controls autoplay>
        <source src="../mp3/新宝岛.mp3" />
    </audio>


    <!-- video：播放视频  -->
    <video controls autoplay loop="-1">
        <source src="../mp4/LOL.mp4"  />
    </video>

网页效果

这里均设置了自动播放，视频还设置了无限循环

综上所述
html5的新标签就是这样！