前言:
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键是访问不到的。