html5中get的特点,html4与html5的差异及html5的一些新特性

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;");

}

}

姓名