1.1 html5基础知识1
2017-02-22 本文已影响148人
cd72c1240b33
一、 html5声明、将此html文档标记为html5文档
<!DOCTYPE html>
二、 html5定义了8个新的块级元素，要让旧版本的浏览器正确显示这些元素，可以设置 CSS 的 display 属性值为 block;
header, section, footer, aside, nav, main, article, figure {
display: block;
}
- header: 标签定义文档的页眉;
- section:定义文档中的节;
- footer:定义文档或节的页脚;
- aside:定义其所处内容之外的内容;//可用作文章的侧栏;
- nav:定义导航链接的部分;//文档中有“前后”按钮，则应该把它放到 <nav> 元素中;
- main:规定文档的主要内容;//在一个文档中，不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>;
- article:规定独立的自包含内容;
- figure:规定独立的流内容（图像、图表、照片、代码等等）;//使用<figcaption>为<figure>定义标题，置于 "figure" 元素的第一个或最后一个子元素的位置
三、 IE兼容问题
HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。可以在head标签中引入htmltshiv.js解决;
四、 HTML5新元素
包含：图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储...
4.1 canvas
- audio:[{src:"/URL",Desc:"音频URL地址,也可以用<audio>内设置<source src="" type="audio/mpeg(.mp3)|audio/ogg|audio/wav">标签的src;"},{autoplay:"autoplay",Desc:"音频在就绪后马上播放"},{controls:"controls",Desc:"向用户显示控件，比如播放按钮"},{loop:"loop",Desc:"每当音频结束时重新开始播放"},{muted:"muted",Desc:"默认为静音"},{preload:"auto/meta/none",Desc:"音频在页面加载时进行加载，并预备播放"}];
- video:同audio相似，可以播放的格式：video/mp4、video/webm、video/ogg
- embed:可以直接指定src路径输出插件
- track:用于规定字幕文件或其他包含文本的文件，当媒体播放时，这些文件是可见的;
4.3 新表单元素
datalist:规定了 <input> 元素可能的选项列表,可根据预定义的项自动完成
- keygen:客户端生成一个密匙（<keygen name="security" />）;然并卵;
-
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删除
