【图片整合 + HTML5新加标签和表单】

图片整合

图片整合:
是把图片整合到一起(小图)

为什么进行图片整合?

     (1）通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度。
     (2）通过整合图片来减小图片的体积。

注意点:
拼接好的图片格式需要是png格式的因为png格式支持透明,jpg是不支持的,管整合好的这个大图叫做雪碧图也叫精灵图

图片整合完毕的代码操作:

        精灵图的使用方法1 用img配合margin- top实现
        精灵图的使用方法2 用背景图配合background- pos ition实现

HTML5常用标记

<header>头部</header>
     <footer>尾部</footer>
     <nav>导航</nav>
     <embed src="" type="">媒体文件引入
     <section>内容块</section>
     <aside>辅助信息</aside>
     <article>文章</article>
     

     <!-- 独立内容块  类似于dl dt dd-->
     <figure>
         <figcaption>这个是动物</figcaption>
         <img src="xiong.png" alt="">
     </figure>

     <mark>高亮显示文字</mark>
     <!-- 一个比较经典的应用就是在搜索结果中向用户高亮显示搜索关键词 行内元素-->
     
     <hgroup>标题组</hgroup>
     
     <dialog open>打开的对话窗口</dialog>
     <!-- 目前只有Chrome和Safari 6 支持<dialog>标签 -->
     
    <canvas>定义图形</canvas>
    <!-- 只是图形容器,必须使用脚本来绘制图形 -->

    <!-- video定义视频 两种写法:-->
    <video src="引入路径" controls="controls" autoplay="autoplay" preload ="auto" loop="loop" poster="../tupoan.jpg"></video>
    <!-- 
        src:引入路径
        controls:显示控件
        autoplay:自动播放, 在浏览器播放的时候,有的时候可以自动播放,有的时候不行,想要一直可以自动播放,需要添加个静音muted 才能自动播放,因为浏览器考虑用户体验
        preload:预备加载
        loop:循环
        poster:定义视频第一帧的图片
     -->

     <video controls="controls" autoplay="autoplay">
         <source src="myvideo.mp4" type="video/mp4"></source>
         <source src="myvideo.mp4" type="video/ogg"></source>
         <source src="myvideo.mp4" type="video/webm"></source>
     </video>
     <!-- video允许有多个source元素,source元素可以连接不同的视频文件,浏览器将使用第一个可识别的格式进行播放 -->

<!-- 音频文件 定义音频，比如音乐或其他音频流  -->
    <audio src="someaudio.mp3">您的浏览器不支持audio标签</audio>
    <!-- 提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息
 -->

 <!-- 表单属性 -->
 <form action="">
     <p>邮件: <input type="email" multiple="multiple"> </p>
     <!-- 写多个邮件,邮件之间用,隔开 -->

     <p>用于让用户输入和编辑URL <input type="url"> </p>
     <!-- 网址,必须添加http -->

     <p>数字: <input type="number" min="10" max="20" step="3"></p>
     <p>返回滑块控件 <input type="range" min="10" max="20" step="3"></p>
     <!-- step 间隔 -->

     <p>年月日 <input type="date"></p>


     <p>年月<input type="month"></p>
     <p>年周<input type="week"></p>
     <p>时间<input type="time"></p>
     <p>本地时间<input type="datetime-local"></p>
     <p>UTC(世界统一时间) <input type="datetime"> </p>
 </form>
 <!-- 
     跟 input 标签设置样式一样，但是要设置标签中局部的样式不能实现。如改变日历的背景色，颜色框的按钮效果等，这些都不可以实现。

  -->
  <form novalidate="novalidate">
      <!-- novalidate只能给form添加,一旦添加,所有验证全没了 -->


      <input type="text" required="required">
      <!-- required验证输入不能为空,只有是input都可以添加 -->

      <input type="password" placeholder="请输入您的密码">
      <!--  placeholder 输入框处于未输入状态时文本框中显示的输入提示-->
      <input type="email" autofocus="autofocus">
      <!-- autofocus当打开页面时,该控件自动获得国际焦点,一个页面只能有一个
    -->
    <input type="text" maxlength="11">
    <!-- maxlength 最大长度 -->

    <!-- datalist提供一个事先定义好的列表，通过id与input关联，当在input内输入时就会有自动完成（autocomplete）的功能，用户将会看见一个下拉列表供其选择。  -->
<form>
  <p><input type="text" list="words" autocomplete="off" name="浏览器">   </p>
    <datalist id="words">
        <option>火狐</option>
        <option>谷歌</option>
        <option>360</option>
    </datalist>
    <input type="submit">
</form>
   

     <!-- autocomplete 输入内容和所用的自动完成功能,是一个节省输入时间,同时也十分方便的功能,只有三个属性值 off/on/"" -->

     <!-- 输出标签<output name="x" for="a b"></output> -->
<form action="" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
	
    <input id="a" type="text" >+
	<input id="b" type="text" value="50">=
	<output name="x" for="a b"></output>
</form>