HTML5基础知识

1. html5新增标签

（1）常用布局标签

<header>定义页面的头部，相当于文档的页眉</header>
<nav>定义导航链接的部分</nav>
<footer>定义页面的底部，相当于文档的页脚</footer>
<article>定义文章</article>
<section>定义区域，文档中的节，区段</section>
<aside>定义其所处内容之外的内容，侧边</aside>

（2）datalist标签：定义选项列表，配合input标签使用，选项以输入时输入框下方提示的形式出现

<input type="text" value="请输入明星" list="star" /> <!-- input里用list属性 -->
<datalist id="star">                               <!-- datalist里用id实现和input的链接 -->
    <option>王俊凯</option>
    <option>王源</option>
    <option>易烊千玺</option>
</datalist>

（3）fileset标签：将表单内的元素打包，与legend搭配使用

<fieldset>                          
    <legend>用户登录</legend>    <!-- 定义标题 -->
    用户名：<input type="text" /><br /><br />
    密 码：<input type="text" />
</fieldset>

（4）新增input表单的type类型

<fieldset>
    <legend>HTML5新增的INPUT type类型</legend>
    <form action="">
        邮箱：<input type="email" /><br /><br />        <!-- 邮箱格式，必须包含@ -->
        手机：<input type="tel" /><br /><br />          <!-- 手机号码格式，数字 -->
        数字：<input type="number" /><br /><br />       <!-- 数字 -->
        url：<input type="url" /><br /><br />           <!-- 网址格式 -->
        搜索：<input type="search" /><br /><br />       <!-- 搜索框 -->
        区域：<input type="range" /><br /><br />        <!-- 可拖动的滑块 -->

        时间：<input type="time" /><br /><br />         <!-- 小时 分钟 -->
        年月日：<input type="date" /><br /><br />       <!-- 年月日 -->
        时间：<input type="datetime" /><br /><br />
        月份：<input type="month" /><br /><br />        <!-- 年月 -->
        星期：<input type="week" /><br /><br />         <!-- 星期 年 -->
        颜色：<input type="color" /><br /><br />
        <input type="submit" />
    </form>
</fieldset>

（5）新增input表单属性

用户名：<input type="text" placeholder="请输入用户名" autofocus required /><br /><br />
<!-- placeholder占位符；autofocus自动聚焦；required内容不能为空 -->
昵称：<input type="text" accesskey="s" /><br /><br />  <!-- 规定**元素的快捷键，alt+字母 -->

上传头像：<input type="file" multiple /><br /><br />    <!-- 多文件上传 -->

<form>	                                              <!-- 自动记录完成，需提交按钮，表单需命名 -->
    姓名：<input type="text" autocomplete name="userName" />
    <input type="submit" />
</form>

（6）表单综合练习

<form action="">
<fieldset>
    <legend>学生档案录入</legend>
    <label>姓名：<input type="text" placeholder="请输入学生姓名" /></label><br /><br />
    <label>手机号：<input type="tel" /></label><br /><br />
    <label>邮箱：<input type="email" /></label><br /><br />
    学院：<input type="text" placeholder="请选择学院" list="institute"/></label><br /><br />
    <datalist id="institute">
        <option>软件工程</option>
        <option>计算机科学</option>
        <option>通信工程</option>
    </datalist>
    <label>出生日期：<input type="date" /></label><br /><br />
    <label>成绩：<input type="number" /></label><br /><br />
    <input type="submit" /> <input type="reset" />
</fieldset>
</form>

（7）embed标签：引入网上视频

<embed src="helloworld.swf" tppabs="http://www.runoob.com//try/demo_source/helloworld.swf">

（8）播放音频audio

<!-- 为了浏览器兼容，需多种声音文件 ogg  mp3  wav 
    controls显示控制面板，autoplay自动播放，loop为循环次数，值为-1时无限循环-->
<audio controls autoplay loop="2">
    <source src="horse.mp3" type="audio/mpeg">
    <source src="horse.ogg" type="audio/ogg">
    <embed src="horse.mp3">
</audio>

（9）播放音频video

<video width="320" height="240" autoplay controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.webm" type="video/webm">
    <object data="movie.mp4" width="320" height="240">
        <embed src="movie.swf" width="320" height="240">
    </object>
</video>

参考w3c手册中文官网：http://w3school.com.cn/