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