HHTML5封装一些标签和属性,方便了开发。
1 <form> 2 <p> 3 <label>Username:<input name="search" type="text" id="search" autofocus></label> 4 </p> 5 </form>
1 <form> 2 <p> 3 <label>Username:<input name="search" type="text" id="search"></label> 4 </p> 5 <script type="text/javascript"> 6 document.getElementById("search").focus(); 7 </script> 8 </form>
对于页面结构,HTML5将不同结构使用不同的标记进行区分,这点在HTML4的时候,基本上都用div标签,然后使用class属性进行区分
- HTML5的出现是为了解决以下问题
浏览器之间的兼容性问题
文档结构不明确
Web应用程序功能受限
- HTML5与HTML4在语法上的一些区别
1、DOCTYPE声明
2、指定字符集编码
HTML4:
<meta http-equiv="CONTENT-TYPE" content="text/html;charset=UTF-8">
HTML5:
<meta charset="UTF-8">
两种方式都能用,但不能混用
- 可以省略标记的元素
不允许写结束标记:area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
可以省略结束标记:li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th
可以完全省略标记:html、head、body、colgroup、tbody
- 具有boolean值得属性
这些属性,只要写上了就比表示true,如:
<input checked type="checkbox">
还有readonly、disabled等
- 新增结构元素
section:表示页面中的一个内容区块,如:章节、页眉、页脚等,可以与h1~h6元素结合使用,标示文档结构
article:标示页面中的一块与上下文不相关的独立内容,如博客中的一篇文章或报纸上的一篇文章
aside:标示article元素之外,但是相关的,辅助信息
header:页面中的一个内容区块或整个页面的标题
hgroup:对整个页面或页面中的一个内容区块的标题进行整合
footer:整个页面或页面中内容区块的脚注,一般包含作者的姓名、创作日期以及作者的联系方式的等
nav:页面中的导航链接
figure:表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元,使用figcaption元素在figure元素组添加标题
- 其他新增元素
video:视频
audio:音频
embed:插入各种多媒体格式
mark:在视觉上需要高亮的文字
progress:表示运行中的进程,一般用于显示js耗时的时间函数
time:日期或时间
ruby:ruby注释,中文注音或字符
rt:字符的解释或发音
rp:在ruby注释中石油
wbr:软换行,当父级元素宽度不够的时候才换行
canvas:绘图的画布
command:命令按钮,如单选按钮、复选框、复选按钮
details:表示用户要求得到并且可以得到的细节信息。可以与summary元素配合使用
datalist:下拉列表,与input配合使用
datagrid:可选数据列表,树形列表的形式显示
keygen:生成密匙
output:表示不同类型的输出
source:为媒介元素定义媒介资源
menu:菜单列表
- 新增的input类型,也就是input元素中,type的属性
email、url、number、range、date、month、week、time、datetime、datetime-local
对于新增的元素或属性,在使用前最好查阅一下浏览器的支持情况
- 废除的元素
能够用CSS代替的一般都废除了,如 basefont、big、center、font、s、strike、tt、u等
不再使用frame框架:frameset、frame、noframes元素。因为frame框架对网页的可用性存在负面影响。HTML5中只支持iframe框架
- 新增的表单属性
autofocus:自动获取焦点
placeholder:提示用户输入
form:声明属于哪个表单,然后可以放在页面的任何位置,不一定非要在表单内
required:表示是否必填
list:与datelist元素配合使用,生成下拉框
multiple:允许一次上传多个文件
其他属性详见HTML5
- 全局属性
contentEditable:是否允许编辑元素内的内容
1 <!DOCTYPE html>2 <html>3 <head lang="en">4 <meta charset="UTF-8">5 <title></title>6 <script type="text/javascript">7 function getInnerHTML(){8 alert(document.getElementById("price1").innerHTML+"\n"+document.getElementById("price2").innerHTML); 9 } 10 </script> 11 </head> 12 <body> 13 <table contenteditable="true"> 14 <tr contenteditable="false"> 15 <td>书籍</td> 16 <td>单价</td> 17 </tr> 18 <tr> 19 <td contenteditable="false">ajax权威指南</td> 20 <td id="price1">10元</td> 21 </tr> 22 <tr> 23 <td contenteditable="false">JavaScript权威指南</td> 24 <td id="price2">20元</td> 25 </tr> 26 <tr> 27 <td><button οnclick="getInnerHTML()">提交</button></td> 28 </tr> 29 </table> 30 </body> 31 </html>
contenteditable 属性允许直接编辑html元素的内容,然后可以通过innerHTML获取编辑完后的值
该属性具有继承的特点,也就是说如果父元素设置了为true,那么子元素默认也都是true,除非手动修改为false
页面一旦刷新后,编辑的数据就会恢复成编辑前的
如果想要对页面的全部元素都设置为可编辑的,可以这么干
1 <body οndblclick="document.designMode='on';"> 2 ....... 3 ....... 4 ....... 5 </body>
designMode:指定整个页面是否可编辑
hidden:隐藏
speelcheck:拼写检查
tabindex:tab获取焦点
<input tabindex="1">
<input tabindex="2">
<input tabindex="3">