HTML5--新增全局属性(1)
前言:
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定，最初设计目的是为了在移动设备上支持多媒体。
HTML5初识:
1.HTML5并不是新的语言，而是html语言的第五次重大修改。
2.版本支持：所有的主流浏览器都支持HTML5(chrome、firefox、safari......)，IE9及以上支持HTML5(有选择性支持，并不是全部支持)，但是IE8及以下不支持HTML5。
3.新增了多媒体：video、audio等，以往实现音频、视频的播放需要使用flash，一方面苹果不支持flash，另一方面flash在移动端并不友好。
4.增加了很多的新特性：语义特性、本地存储、多媒体、二维/三维、文件API、地图等，在后面课程依次学习。
HTML5新增全局属性:
1.contentEditable属性
功能：设置元素是否可被编辑
取值：默认为true
true -- 表示元素可被编辑
false -- 表示元素不可被编辑
属性继承：
当子元素没有显示设置值，那么子元素编辑状态继承父元素的contentEditable状态
示例：
<h2>可编辑列表</h2> <ul contenteditable> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul>
运行结果：子元素li继承ul的contenteditable属性可以进行编辑，当点击列表1时，光标就选中列表1的内容。
2.designMode属性
功能：设置整个页面是否可编辑
取值：只能在JavaScript中进行修改
on -- 表示此页面允许修改
页面中所有允许设置contenteditable属性的元素都可编辑
off -- 表示此页面不允许修改
页面中所有允许设置contenteditable属性的元素都禁止编辑
示例：
<h2>design Mode</h2> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> <script> window.document.designMode = 'on' </script>
运行结果：h2和ul(都可以设置contentEditable属相)，都允许被修改
3.hidden属性
功能：通知浏览器不渲染该元素，使该元素处于隐藏状态
取值：默认取值为true，且只能通过JavaScript代码修改hidden的值
true -- 表示此元素不可见
off -- 表示元素可见
示例：
<h2>hidden属性练习</h2> <ul hidden> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> <script> document.getElementsByTagName('ul')[0].hidden = false </script>
运行结果：通过JavaScript代码对hidden设置为false，ul元素不被隐藏
4.spellcheck属性
功能：针对input和textarea元素输入的内容进行拼写和语法检查
取值：默认为true
true -- 表示进行拼写和语法检查
false -- 表示不进行拼写和语法检查
示例：
<h2>spellCheck属性</h2> <input type="text" spellcheck="">
运行结果：当文本框中单词拼错就会出现红色的下划线(效果图截不到，大家自行实验)
5.tabindex属性
功能：通过点击tab键访问页面上的元素，tableIndex表示被访问到的元素的索引
取值：为number类型
正数值 -- 表示正常访问的顺序
-1-- 表示无法通过tab键获取到焦点
示例：
<a href="#" tabindex="1">hello1</a> <a href=# tabindex="3">hello3</a> <a href="#" tabindex="2">hello2</a> <ul tabindex="-1"> <li>1</li> <li>2</li> <li>3</li> </ul>
运行结果：
通过按tab键，先选中hello1接着是hello2，最后是hello3，由于ul的tableIndex设置为-1，通过tab键是访问不到的。
