html4与html5的区别及html5的一些新特性
区别
1.html5语法的改变
HTML5简化了很多细微的语法，例如：
1.1doctype的声明;
html4:
/p>
"http://www.w3.org/TR/html4/loose.dtd">
html5:
1.2字符编码:
html4:
html5:
HTML5的语法兼容HTML4和XHTML1，但不兼容SGML(标准通用标记语言)。html5有向下兼容
的特性，他可以完整的显示html4的内容;
1.3元素标记
不允许写结束标记的元素：br、embed、hr、img、input、link、meta、param。正确格式:
1.4具有boolean值的属性
1.5省略引号
新特性
2.全局属性(所有标签都可以使用的属性)
1.contentEditable属性.允许用户对文本进行编辑,是布尔值类型，true为可编辑，false为不可编辑，默认为true
2.designMode属性.规定页面是否可编辑，值为on/off,on为页面可编辑，off页面不可被编辑，必须在javascript中使用
3.hidden属性
4.spellcheck属性.针对input和textarea标签的文本拼写语法检查，拼写错误会提示
5.tabindex属性.规定按tab键之后的选择顺序，默认按tab键对链接元素和form表单有用，
通过tabindex属性可以使其他标签也可以按Tab键获取焦点，值为-1不会获取焦点
3.HTML5新增元素
3.1 新增的主体结构元素:artical,aside,section,nav,time,pubdate元素
artical标签通常表示文档，页面中独立的部分，一篇博客，文章或其他独立的部分，通常可以用来表示插件，可嵌套
这里是标题
文本段落
这里是评论区域
正文在这里
底部文本
artical
aside标签通常表示当前页面或文章的附属信息，侧边栏，广告弹出框等，一个独立的部分
评论
- 好好学习
- 天天向上
aside
section内有标题有内容，强调分块或分段
标题
内容
section
nav主要用来做页面导航
- 导航1
- 导航2
- 导航3
nav
time元素表示时间
2017-2-4
2017-2-4
2017-2-4
2017-2-4
time
pubdate表示发布时间
2017-2-24
3.2 新增的非主体结构元素:address、header、hgroup、footer元素
address元素用来在文档中呈示联系信息，包括联系人，联系地址，邮箱，电话等联系信息
header元素(一个页面可以有多个):
- 导航1
- 导航2
- 导航3
hrader
hgroup标签用于归类同一个标题下的子标题
大标题
小标题
这是正文
hgroup
footer元素：
- 版权信息
- 站点地图
- 联系方式
footer
网页排版:
大标题
- 首页
- 帮助
大标题
小标题
文本正文
评论标题
评论内容
版权内容...
View Code
4.HTML5新增表单元素与属性
form属性：
form属性
formaction属性:
按钮1
按钮2
按钮3
formaction属性
formmethod属性:
formmethod属性
formtarget属性:
按钮1
按钮2
按钮3
按钮4
按钮5
formtarget属性
formenctype属性:
formenctype属性
autofocus属性:
autofocus属性
required属性:
提交
required属性
list元素:
html学习
css学习
ios学习
list属性
下拉菜单:
html5
css3
javascript
View Code
control属性:
control属性
//h5中，可以在标签内部放置一个表单元素，并且通过该标签的control属性来访问该表单元素;
functionsetValue() {varlabel=document.getElementById("label");vartextbox=label.control
textbox.value="100100"}
邮编:
请输入六位邮编
control属性
创建节点:
CoffeeTea
请点击按钮向列表插入一个项目。
试一下
functionmyFunction()
{varnewItem=document.createElement("LI")vartextnode=document.createTextNode("Water")
newItem.appendChild(textnode)varlist=document.getElementById("myList")
list.insertBefore(newItem,list.childNodes[0]);
}
注释：
首先请创建一个 LI 节点，
然后创建一个文本节点，
然后向这个 LI 节点追加文本节点。
最后在列表中的首个子节点之前插入此 LI 节点。
View Code
labels节点:
labels节点
functionvalidate(){varname=document.getElementById("name");varbutton=document.getElementById("button");varform=document.getElementById("form");if(name.value.trim()==""){varlabel=document.createElement("label");
label.setAttribute("for","name");
form.insertBefore(label,button);
name.labels[1].innerHTML="请输入姓名";
name.labels[1].setAttribute("style","color:red;font-size:8px;padding:10px;");
}
}
姓名
