1.1 html5基础知识1

学习参考链接

一、 html5声明、将此html文档标记为html5文档

二、 html5定义了8个新的块级元素，要让旧版本的浏览器正确显示这些元素，可以设置 CSS 的 display 属性值为 block;

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

• header: 标签定义文档的页眉;
• section:定义文档中的节;
• footer:定义文档或节的页脚;
• aside:定义其所处内容之外的内容;//可用作文章的侧栏;
• nav:定义导航链接的部分;//文档中有“前后”按钮，则应该把它放到
  元素中;
• main:规定文档的主要内容;//在一个文档中，不能出现一个以上的
  元素。

  元素不能是以下元素的后代：

  、

  、

  、

  或

  ;
• article:规定独立的自包含内容;
• figure:规定独立的流内容（图像、图表、照片、代码等等）;//使用
  为

  定义标题，置于 "figure" 元素的第一个或最后一个子元素的位置

三、 IE兼容问题

HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。可以在head标签中引入htmltshiv.js解决;

四、 HTML5新元素

包含：图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储...

4.1 canvas

//一个宽200px高200px的画布容器;

Canvas参考手册

4.2 新多媒体元素

• audio:[{src:"/URL",Desc:"音频URL地址,也可以用
• video:同audio相似，可以播放的格式：video/mp4、video/webm、video/ogg
• embed:可以直接指定src路径输出插件
• track:用于规定字幕文件或其他包含文本的文件，当媒体播放时，这些文件是可见的;

4.3 新表单元素

datalist:规定了 元素可能的选项列表,可根据预定义的项自动完成

• keygen:客户端生成一个密匙（）;然并卵;

• output:(IE不支持)

  
  
  

4.4 新的语义和结构元素-ps:感觉最为有用的还是块级元素

五、新选择器

JS多了一个原始支持，类似jqueryDOM选择器

• document.querySelector(selector) 返回第一个满足选择器条件的元素 一个dom对象
• document.querySelectorAll('.item') 返回所有满足该条件的元素 一个元素类型是dom类型的数组
• DOM数组的每一个成员注册事件不能像jquery一样直接注册， 必须分别给每个元素注册

六、元素.classList - 给元素添加删除"类名"

• 新H5中DOM对象多了一个classList属性，是一个数组
• add 添加一个新的类名
• remove 删除一个的类名
• contains 判断是否包含一个指定的类名
• toggle 切换一个class element.toggle('class-name',[add_or_remove])
  toggle函数的第二个参数true为添加 false删除