定位

作用：实现网页布局（移动盒子）
分类：1 静态定位(static)
      2 绝对定位(absolute)
      3 相对定位(relative)
      4 固定定位(fixed)

静态定位(static)

用法：position:static;
left/right/top/bottom: length....
特点： 1 静态定位不能移动盒子。
      2 静态定位的盒子就是标准流下的盒子

绝对定位(absolute)(看脸型)

语法：position:absolute;
left| right| top| bottom:  length...
特点：1 如果给一个元素设置绝对定位，如果该元素的父元素没有设置定位或者设置了静态定位，那么该绝对定位的元素以body标签为参照进行移动。
     2     如果设置了绝对定位的元素，如果该元素的父元素设置了除静态定位以为的其他定位，那么该绝对定位的子元素是以父元素为参照进行移动。
     3 绝对定位的元素脱标（不占位置）
     4 绝定位可以实现模式转换

使用场景：在页面中，有盒子压盒子的布局时候，使用绝对定位。

相对定位(自恋性)

语法：position:relative;
left| right| top| bottom:  length...
特点：1  相对定位的元素，只会以元素原来的位置为参照设置定位进行移动。
      2 相对定位的元素没有脱标（占位置）
      3 子绝父相（子元素设置绝对定位，父元素设置相对定位）

固定定位(死心眼子)

语法：position:fixed;
 left| right| top| bottom:  length...
 特点：
 1 固定定位的元素只以body标签为参照设置定位。
 2 固定定位的元素不占位置（脱标
 3 固定定位可以实现元素的模式转化 

z-index

注意：
1 只有定位的元素才有层级关系
2 设置z-index值的时候，该元素必须是一个定位的元素。
特点：
1 通过设置z-index值可以改变元素的层级关系
2 z-index值的默认值为auto (0)
3 z-index值越大，元素越靠上显示。
4 如果z-index值相同，后面的盒子会压着前面的盒子
5 如果元素的父元素设置了z-index值，父元素z-index值越大，元素越靠上显示。

绝对定位居中

1 margin: 0 auto;  只能让标准流的盒子居中显示
2 如何让绝对定位的盒子居中显示？
1) 通过设置left:50% ;         父元素宽度的一半
2) 设置margin-left:-元素自己宽度一半；
例： .nav{
    width:300px;
    height:500px;
    background-color:red;
    position:ansolute;
    margin: 0 auto;
    left:50%;
    margin-left:-150px;
}

标签包含规范

1 段落标签不能包含段落或者标题
2 段落标签不能包含div
3 不推荐使用行内元素包含块级元素，行内元素可以包含行内元素

网页布局规避脱标流

1 网页布局中优先考虑标准流
2 然后浮动
3 最后使用定位
4 元素要进行模式转换的时候，就是使用display属性。

vertical-align属性

作用：设置元素的垂直方向上的对齐方式。
ertical-align属性：
行内宽元素中设置垂直方向的对齐方式。
1 baseline 默认基线位置对齐
2 top 顶部对齐
3 bottom 地步对齐
4 middle 中间对齐

标准流

标准流：元素在浏览器中默认的显示方式。

浮动

float:left/right
特点：1） 元素脱离标准流
      2） 浮动可以让块元素在一行上显示
注意：如果想让块级元素在一行上显示，需要给所有的块级元素设置浮动。
      3） 该元素不占位置。
      4） 实现元素的模式转换（脱标）
作用：
    1）实现网页布局  （让网页中块级元素的盒子在一行上显示）
    2）用来制作网页导航（使用列表制作）

    3）根本的作用： 实现图片文字环绕效果 （文字不会被浮动的元素压着）

清除浮动

清除浮动：消除浮动的影响。
什么时候需要清除浮动？
1 父容器没有设置高度（不需要设置height属性）
2 父容器中所有的子元素都设置了浮动

清除浮动的方式

1 使用clean:left /right/    both
2 给父容器设置 overflow：hidden;
 注意：如果使用overflow:hidden清除浮动，首先要保证父容器中没有定位的元素，如果有定位的元素，则不推荐使用该方法清除浮动。
3 使用伪元素清除浮动
    .clearfix:after{
        content:"";
        height:0;
        line-height:0;
        clear:both;
        display:block;
        visibility:hidden;
    }
    .clearfix{
        zoom:1;// 兼容IE浏览器
    }
4 使用双伪元素清除浮动
    .clearfix:before,.clearfix:after{
        content:"";
        height:0;
        line-height:0;
        clear:both;
        display:block;
        visibility:hidden;
    }
    .clearfix{
        zoom:1;// 兼容IE浏览器
    }

清除浮动中遇到的问题

1 首先看父元素有没有设置固定高度
2 父元素中是不是所有的子元素都设置了浮动
3 清除浮动的代码有没有问题
4 调用清除浮动的标签是否正确
5 最后检查html结构是否有问题 

css 初始化

1  通过设置样式将页面中标签默认的样式层叠掉（margin，padding,list-style...）
2  设置页面中标签的默认样式（统一性）

overflow 的用法

[溢出，超出] overflow:visible(默认值)
            overflow: hidden 超出部分隐藏
            overflow: scroll 添加滚动条
            overflow: auto 根据内容判断是否添加滚动条

浏览器中默认文字大小

默认文字大小为16px;

行高

默认文字的行高为18px;
行高=文字大小+上间距+下间距
特点：
   1）文字大小会影响行高（不设置行高）
   2）文字字体也会影响行高
   3）行高只能影响文字
   作用：
       实现文字垂直居中
        1） 给一个盒子中的文字设置行高值等于该盒子的高度

行高单位问题

px, em,百分比（%），不带单位。

      ✔当给一个单独的标签设置行高（默认该标签中    的文字大小为20px）
     ☞如果行高值为px，那么文字的行高就是设置的行高值。与设置的文字大小无关。
     ☞如果行高值为em，那么文字的行高=文字大小*设置的行高值
      ☞如果设置行高为%，那么文字的行高=文字大小*设置的行高值
     ☞如果设置的行高不带单位，那么文字的行高=文字大小*设置的行高值
    ✔当给一个父元素设置行高，研究子元素中的文字行高大小。
      ☞如果父元素设置的行高值为px，默认子元素的行高=父元素的行高（行高继承）
      ☞如果父元素设置的行高为em, 默认子元素的行高=父元素的文字大小*父元素设置的行高值。（先计算后继承）
      ☞如果父元素设置的行高为%， 默认子元素的行高=父元素的文字大小*父元素设置的行高值。（先计算后继承）
      ☞如果父元素设置的行高不带单位， 默认子元素的行高=子元素的文字大小*父元素设置的行高值。（先继承后计算

盒子模型

作用： 进行网页布局
盒子的组成部分：
1 边框 border
2 内边距 padding 内容与边框之间的距离
(通过内边距可以移动盒子中的内容)
3 外边距 margin 盒子与盒子之间的距离
（通过外边距移动盒子）

盒子模型边框 border

1 border-width      设置边框的宽度    
2 border-style       设置边框的样式
    默认值： none  没有边框
            solid  实线边框
            dotted 点线边框
            dashed 虚线边框
3 border-color 设置边框的颜色
    注意：
     1）去掉边框  border:0  none;
     2) 去掉轮廓线  outline-style:   none;
优化写法： border:1px solid red;
合并边框： border-collapse：collapse;
注意： border-clooapse属性只能在表格中使用

内边距 padding

注意：
 1）设置的宽度和高度，指的是盒子中内容范围的大小。
内边距： padding-left/right/top/bottom;
内边距属性联写：
padding:5px 
内边距为：上，右，下，左各为5px
padding:10px 10px
内边距为：上下，左右各为10px

盒子大小问题

1）边框可以改变盒子大小
2）内边距可以改变盒子大小
盒子真正宽度=内容的宽度+左右边框+左右内边距
 盒子真正高度=内容的高度+上下边框+上下内边距

padding 值特殊性

会影响）

外边距 margin

注意：
    1）外边距移动的是盒子。
    2）外边距不会影响盒子大小
外边距属性联写,与padding属性联写的设置方向一样。

外边距特带你

1) 垂直外边距合并： 在垂直方向上设置外边距，以最大值为准。（水平方向不会发生合并）
2）垂直外边距塌陷： 当给子元素设置margin-top的时候，父元素也随之移动。
☞ 给父元素设置边框。
☞ 给父元素设置
overflow:hidden;  
 注意：
     给父元素设overflow:hidden 会触发父元素的bfc(格式化上下文) 
不要给行内元素设置上下内外边距。浏览器直接忽略

标签显示方式分类

1 块级元素
代表：h1,h2,..h6,div,p,ul,ol,dl,li,dd....
特点：
    1）一个块级元素没有设置宽度的情况下，该块级元素的默认宽度是其父元素的宽度，高度是其内容的高度（大小）.
    2）块级元素可以直接设置宽度和高度。
    3）块级元素独占一行显示。

2 行内元素
代表： span, a，b,s,strong,u,font.....
    特点：
    1） 行内元素都在一行上显示
    2） 行内元素没有宽度和高度 
    3） 行内元素不能设置宽度和高度。 
3 行内块元素
代表： img ，input
特点：
    1）元素在一行上显示。
    2）元素可以设置宽度和高度

元素模式转化

  ◆display      显示方式
     转块级元素：
             display: block;
     转化为行内块元素：
            display: inline-block;
     转换为行内元素：
            display: inline;
注意：
     如果需要让行内元素设置宽度和高度，那么需要进行模式转换。

CSS特性

层叠性：  同一个标签，权重一样，样式发生冲突，最后定义的样式会将前面定义的样式覆盖掉。                
◇继承性： 给父元素设置样式的时候，子元素在默认没有样式的情况下会受父元素的样式影响。
注意：
    1）CSS继承性，只能发生在标签的嵌套关系中。
     2）宽度和高度不能继承

可继承的属性

◇文字颜色可以被继承  color
◇与文字相关的属性都可以被继承
◆行高（line-height） 可以被继承
◆text-align
 继承的特殊性：
 1）a标签默认情况下不会受父元素的文字颜色影响
 2）标题标签默认情况下，不会受父元素的文字大小影响，要与父元素的文字大小要进行乘积运算。

优先级

    标签选择器 <类选择器 <ID选择器 < 行内样式 <! Important
         10        100       1000      10000    10000以上
◆  继承的权重（优先级）为0
◆  权重可以叠加（优先级）

伪类（以a标签为例）

a:link  {属性: 值；}  或者  a { color: red;}
          设置a标签的默认样式
            推荐使用 标签选择器设置样式。
  a:visited {属性: 值;}    访问过后的样式
   注意：  :visited 伪类中只能设与颜色相关的属性。
  a:hover {属性: 值;}   鼠标悬停到超链接上的样式
  a:active {属性: 值;}   激活状态下的样式
注意：1 如果伪类都设置，按照顺序设置L  V   H  A
    2 伪类中可以单独设置hover         

背景

◇ background-color      背景颜色
◇background-img        设置背景图片
默认值： none 
◇background-repeat      设置背景平铺方式
 默认值：  repeat      背景平铺
       no-repeat         背景不平铺
       repeat-x     横向平铺
       repeat-y     纵向平铺

◇background-position     设置背景图片的位置
1）给元素设置背景颜色或背景图片的时候，必须保证当前元素有宽度和高度
 2）当使用具体方位名称设置背景图片位置的时候，没有顺序的限制
3）当使用具体数字设置背景位置的时候，那么第一个参数代表水平方向，第二个参数代表垂直方向。
4）如果设置背景位置的时候，设置一个值，第二个默认值为center.

背景属性联写

特点： 1 没有属性个数的限制
       2 没有属性顺序的限制
 例：.box{
     width:300px;
     height:300px;
     background: red url(2.png) no-repeat 50px 30px;
 }

补充易忘点

1 list-style:none  去掉列表浅的小圆点
2 text-decoration:none/underline 下划线去掉/显示
3 text-align:center 文字图片居中
4 margin: 0 auto; 让盒子整体居中
5 text-indent:2em 移动2格，孔两格
6 cursor: pointer 小手

类选择器

.自定义类名 {属性: 值;}     类样的定义
◆类样的调用：
             标签通过class属性调用类样式
特点：
1 一个类样式可以同时被多个标签调用
2 一个标签可以同时调用多个类样式（人的名字）    
类的命名规范：
■不能使用数字或者以数字开头定义类名
■不推荐使用汉字定义类名
■不能使用特殊字符或者以特殊字符开头定义类名（“_”除外）

ID 选择器

#自定义名称 {属性: 值;}     样式的定义
ID样式的调用：
        标签通过ID属性调用定义好的样式即可。
ID选择器与类选择器之间的区别：
                1） 标签中的id值唯一 （身份证号码）
              2） 一个标签只能调用一个ID样式

通配符选择器

* {属性: 值; }
特点：该选择器可以将页面中的所有标签都选中。

后代选择器

  选择器 选择器{属性: 值;}
  注意：
  1） 后代选择器中，标签之间的关系必须是嵌套关系
  2） 后代选择器中，选择器与选择器之间使用空格隔开
3） 后代选择器中，能选中所有后代子元素

并集选择器

选择器,选择器,选择器 {属性: 值;}
 注意：
       1) 并集选择器中，标签之间可以是并列的关系也可以是嵌套关系。
     2）并集选择器中，选择器与选择器之间使用逗号隔开

       3）并集选择器中，可以选中所有满足条件的标签。

子代选择器

选择器>选择器 {属性: 值;}
注意：
        1) 子代选择器，标签之间必须是嵌套关系
          2）子代选择器，只能选中直接子元素

属性选择器

标签[属性] {属性：值;}
例：input[type='button']{
    color:red;
}

文本属性介绍

◆font-size     设置文字大小
◆font-weight  设置文字是否加粗显示
                 bold    文字加粗       与设置700一样
               normal  文字正常显示     与设置400一样
◆font-style   设置文字是否斜体显示
                 normal    文字正常显示
                 italic      文字斜体显示

◆font-family   设置文字字体
注意： 通过font-family可以设置多个字体，字体与字体之间使用逗号隔开。
◆line-height      文字行高

font属性联写

    font: font-weight   font-style   font-size/line-height    font-family;
注意：
          ◆font属性联写中，必须设置font-size 和font-family
          ◆font属性联写中，font-size 必须在font-family前设置

Css概念

Css：层叠样式表（cascading style sheets)
层叠：指的时Css的特性

css与html 之间的关系

html: 负责写网页结构
Css：负责美化网页
注意：
     1)CSS以html为基础的，CSS文件不能单独运行。
         2)CSS美化html标签（设置标签的样式）

CSS书写位置

1 内嵌式写法
特点： 讲css代码写到html页面中
写法： 载html页面中，添加style标签，载style标签中设置css即可。
2 外链式写法
首先新建一个CSS文件,然后通过link标签将CSS文件引入到当前html页面中
注意：
    1）一个html页面中可以同时引用多个外部CSS文件
    2）在css文件中不需要再写style标签，直接写CSS代码。
    3）实现了样式与结构的分离            
3 行内式写法 
 在标签内部写CSS代码。只能影响当前标签内部的样式。

CSS的语法结构

 选择器 {属性： 值； 属性： 值;.....}
     1）选择器： 选择器谁的过程(html标签)
         选择器分类：
             ◆简单选择器
                  ■标签选择器
                  ■类选择器
                  ■ID选择器
                ■通配符选择器
             ◆复合选择器
                  ■后代选择器
                ■标签指定式选择器（交集选择器）
                ■并集选择器
◆注意凡是在代码中出现的特殊符号都是英文输入法下的符号

标签选择器

标签名 {属性: 值; }
注意：
        标签名指的是html中的标签

常见的属性

   常见的属性     代表的意义
color :  red;    前景色 （文字颜色）
background-color:  red;    背景色
font-size：20px;    设置文字大小
width:  20px；    设置宽度
height：20px;    设置高度
text-align：left| center | right           设置内容居中显示（文字，图片）
注意： 设置text-align属性的时候，必须保证标签属于块级元素
text-indent： 2em;    首行缩进2个汉字大小

补充一点

1 文字大小单位：
 px ：像素
 em :一个文字的大小
 2 颜色或者背景颜色的表示方式：
◆ 十六进制表示法： #0-F表示
◆RGB表示法
           R: red              0-255
           G: green     0-255
             B：blue          0-255
◆RGBA表示法（可以实现半透明的效果）
        A:   透明度    0-1

◆opacity（设置半透明）
             取值为0 -1；

什么是HTML 5？

HTML 5是HTML的新标准，其主要目标是无需任何额外的插件如Flash、Silverlight等，就可以传输所有内容。它囊括了动画、视频、丰富的图形用户界面等。

HTML5是由万维网联盟（W3C）和Web Hypertext Application Technology Working Group （Web超文本应用技术工作组—WHATWG）合作创建的HTML新版本。

如果我不输入<!DOCTYPE HTML>，HTML 5能工作吗？

No，浏览器将无法识别HTML文件，并且HTML 5标签将无法正常工作。

哪些浏览器支持HTML 5？

几乎所有的浏览器都支持HTML 5，例如Safari，Chrome，火狐，Opera，IE等。

HTML 5的页面结构和HTML 4或早先的HTML有什么不同？

一个典型的Web页面有页眉（header），页脚（footer），导航（navigation），正文（central area）和侧栏（side bar）。现在如果是在HTML 4中，HTML部分中的上述这些专用名词需要使用DIV标签来描述。

但是，如果是在HTML 5，可以专门为这些区域创建特定的元素名，让HTML更具可读性。

以下是形成页面结构的HTML 5元素的更多细节。

<header>：表现HTML的标题数据。

<footer>：页面的页脚部分。

<nav>：页面中的导航元素。

<article>：正文内容。

<section>：用在正文中定义section或区段内容。

<aside>：表现页面侧边栏内容。

HTML 5中的DataList是什么？

HTML 5中的DataList控件元素有助于提供自动完成功能的文本框，如下图所示。

下面是DataList控件功能的HTML代码：

<input list="Country">
<datalist id="Country">
<option value="India">
<option value="Italy">
<option value="Iran">
<option value="Israel">

<option value="Indonesia">
</datalist>

HTML 5中的本地存储概念？

很多时候，我们想在本地计算机存储有关用户的信息。例如，假设用户已经填满了一半的长表单，互联网却突然连接中断。此时，用户希望能在本地存储这些信息，然后当重新连接到互联网的时候，获取这些信息，并将其发送到服务器进行存储。

现代的浏览器存储称为“本地存储”，可以让你存储这些信息。

网络状态检测

我们可以通过window.onLine 来检测，用户当前的网络状况，返回一个布尔值。
1 window.online用户网络连接时被调用
 例：window.addEventListener('online',function(){
     alert('已经建立了网络链接')
     })
2  window.offline用户网络断开时被调用
例： window.addEventListener('offline',function(){
    alert('已经失去了网络链接')
    })

文件读取

    通过FileReader对象我们可以读取本地存储的文件，可以使用 File 对象来指定所要读取的文件或数据。其中File对象可以是来自用户在一个 <input> 元素上选择文件后返回的FileList 对象，也可以来自由拖放操作生成的  DataTransfer
 1 FileList 对象
    由于HTML5中我们可以通过为表单元素添加multiple属性，因此我们通过<input>上传文件后得到的是一个FileList对象（伪数组形式）。
2 FileReader 对象
    HTML5新增内建对象(内置对象，内嵌对象)，可以读取本地文件内容。

DataUrl

1 readAsDataURL()
以DataURL形式读取文件
2 事件监听
onload 当文件读取完成时调用
3 属性
result 文件读取结果
    参考资料
    https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader#toc

视频常用api

方法：load() 加载， play() 播放， pause() 暂停
属性： currentTime 视频播放的当前进度
        duraton 视频的总时间
事件： oncanplay 事件在用户可以开始播放视频/音频（audio/video)时触发
    ontimeupdate : 通过该事件来报告当前播放进度
    onended: 播放完时触发
    video.webkitRequestFullScreen()  全屏

全屏

HTML5规范允许用户自定义网页上任一元素全屏显示。
requestFullscreen() 开启全屏显示
cancleFullscreen() 关闭全屏显示

不同浏览器需要添加前缀如

webkitRequestFullscreen, mozrequestFullScreen
webkitCancleFullScreen、mozCancleFullScreen
通过document.fullscreen 检测当前是否处于全屏
全屏伪类
    :full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {}

拖拽 draggable

在HTML5的规范中，我们可以通过为元素增加draggable="true"来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。
1 拖拽元素
    页面设置了draggable='true'属性的元素
2 目标元素
    页面中任何一个元素都可以成为目标元素
3 事件监听
    拖拽元素
    ondrag 应用于拖拽元素，整个拖拽过程都会调用
    ondragstart 应用于拖拽元素，当拖拽开始时调用
    ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
    ondragend 应用于拖拽元素，当拖拽结束时调用
    目标元素
    ondragenter 应用于目标元素，当拖拽元素进入时调用
    onderagover 应用于目标元素，当停留在目标元素上时调用
    ondrop 应用于目标元素，当在目标元素上松开鼠标时调用
    ondragleave 应用于目标元素，当鼠标离开目标元素时调用

WEB 存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。
storage 存储
window.sessionStorage  
session 会话声明周期和localstorage 不一样，存储时间比较短
window.localStorage     local本地
(向本地保存数据,有可能在浏览器内存里面，有可能在硬盘上面.)

storage特性

1 设置，读取方便
2 容量大 sessionStorage约5M、localStorage约20M
3 只能存储字符串，可以讲对象JSON.stringify()编码厚存储

window.sessionStorage和window.localStorage区别

window.sessionStorage
1 声明周期为关闭浏览器窗口
2 在同一个窗口下数据可以共享
window.localStorage
1 拥挤生效。除非手动删除
2 可以多窗口共享

方法详解

setltem(key,value) 设置存储内容
getltem(key) 读取存储内容
removeltem(key) 删除键值为key的存储内容
clear() 清空所有存储内容
key(n) 以索引值来获取存储内容

应用缓存 离线存储

HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件。
1 优势
- 可以配置 需要缓存的资源
- 网络无链接应用仍课用
- 本地读取缓存资源，提升访问熟读，增强用户体验
- 减少请求，环节服务器负担

缓存清单

一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用.appcache为后缀名，添加MIME类型
AddType text/cache-manifest .appcache
例如我们创建了一个名为demo.appcache的文件，然后在需要应用缓存在页面的根元素(html)添加属性manifest="demo.appcache"，路径要保证正确。

manifest 文件格式

1、顶行写CACHE MANIFEST
2、CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等
3、NETWORK: 换行 指定需要在线访问的资源，可使用通配符
4、FALLBACK: 当前页面无法访问时退回的页面(回退;  后退)
 换行 当被缓存的文件找不到时的备用资源 可自行查阅资料

HTML 新增表单类型

- 邮箱<input type="email" name="email" id="email">
  注意：会验证邮箱的格式，如果输入错误，则会提示
- 网址 <input type="url" name="url" id="url">
注意：会验证输入的url是否带有http或https协议前缀，如果没有，则会提示
- 搜索 <input type="search" name="search" id="search">
注意：在有内容的情况下，会出现清除按钮
- 数字 <input type="number" name="number" id="number" max=" min=" step="" value="">
注意：Max：数字输入框的最大值
  Min：数字输入框的最小值
  Step：步进值
  Value：当前的值
- 范围 <input type="range" name="range" id="range" max=" min=" step=" value=">
    注意：Max：数字输入框的最大值
      Min：数字输入框的最小值
      Step：步进值
      Value：当前的值
- 时间 <input type="time" name="time" id="time">
- 日期 <input type="date" name="date" id="date">
- 颜色 <input type="color" name="color" id="color">
- 手机号 <input type="tel" name="tel" id="tel">

新增表单元素

datalist 数据列表
一般河input配合使用，要保证datalist的id和input的listd的值完全一致
例： <input type="text" name="text" id="text" list="program">
<datalist id="program">
    <option value="java"></option>
    <option value="php"></option>
    <option value="C++"></option>
</datalist>    

新增表单属性

1 placeholder 占位符 
告诉用户在该输入框中输入什么样的内容
2 Autocomplete  自动完成
当在输入框中输入，提交之后，下次输入可以自动填充
3 autofouse 
自动完成，当页面载入之后，光标会自动聚焦在该输入框上
4 require 
必填，拥有该属性的输入框，如果不填，则无法成功提交
5 multiple 
多选，可以一次性选择多个文件
6 pattern 
自定义验证，根据正则表达式验证内容是否符合正则的规则

新增的表单事件

1 element.oninput=function(){}
作用：当用户在该输入框中输入的时候，会多次触发该事件
2 element.oninvalid=function(){}
作用：当验证不通过的时候，会触发该事件
3 element.setCustomValidity('')
作用：设置错误提示的信息

HTML5 多媒体标签

1 Audio 标签媒体标签
例： <audio controls="controls" autoplay="autoplay" loop="loop">
<source src="...." type="audio/mp3">    
</audio>
2 Video 标签播放视频
    <audio controls="controls" autoplay="autoplay" loop="loop">
    <source src="...." type="video/mp4">    
    </audio>
audio文件格式： ogg, Mp3,WAN,
video 文件格式： ogg MP4, WebM

HTML5 的DOM扩展

1 API获取元素
 document.querySelector('');
 document.querySelectorAll('');
 2 API 操作类名
 node.classList.add('')  添加类名
 node.classList.remove('') 删除类名
 node.classList.contains('') 判断类名中是否包含一个类名
 node.classList.toggle('')
 替换类名 （有则删除，无则添加）

API 自定义属性

自定义属性设置
以data开头 
格式： data-*(自定义的值)=value;
获取 node.dataset.* （*代表我们自己给属性起的名字）
用js获取自定义属性的值
node.dataset.*=value

HTML5简介

- 侠义上的html5 ：1  HTML4.0的升级版
                 2 HTML5+Css3+新增JS API 的结束组合
 - 广义上的HTML5 1 :HTML5行业的代名词
                  2 当前新技术的代名词

HTML 技术概括

1 邢增标签及属性
2 css3的信特性
3 Canvas绘图
4 javascript的新增api
5 移动端

HTML5的语法规范

1 文档声明
<!DOCTYPE html>
2 字符编码设置
<meta charset='UTF-8'>
3 HTML5 语法更加松散，容错性更高。

语义化标签的定义

常用的语义化标签
1 <header></header>   定义section 或page的页眉
    使用要点：
    可以是“网页”或任意“section”的头部部分
    没有个数限制
    如果h1-h6自己能工作的很好，就不要用header
2 <nav></nav>
使用要点：
用在整个页面主要导航部分上
<main></main>
使用要点：
一般放在主要内容区域，是和header同样层级的元素

3 <section></section>  定义文档中的节或段
    使用要点：
表示文档的节或段
Arcitcle、nav、aside可以理解为特殊的section，可以用article、nav、aside就不用section
4 <article></article>  定义文章
    使用要点：
    自身独立情况下：用article
    是相关内容：用section
    没有语义的：用div
5 <aside></aside>  定义页面内容之外的内容
    使用要点：
    Aside在main标签之内，和section或article标签对应，表示这些主要内容的附属信息
    如果是广告，其他日志链接或者其他分类导航也可以用
6 <footer></footer>  定义section或page 的页脚
    使用要点：

处理低版本浏览器兼容

解决方案：
<script type="text/javascript" src='js/html5shiv.js'></script>

[if lt IE 6]
说明：lt(代表less than)  当IE浏览器的版本小于IE6的时候，会执行其中的代码
[if lte IE 8]
说明：lte(代表less than equals)当IE浏览器的版本小于等于IE8的时候，会执行其中的代码