博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html4与html5的区别及html5的一些新特性
阅读量:5022 次
发布时间:2019-06-12

本文共 7158 字,大约阅读时间需要 23 分钟。

区别

1.html5语法的改变

HTML5简化了很多细微的语法,例如:

1.1doctype的声明;

html4:

 

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主要用来做页面导航

 time元素表示时间

time

 pubdate表示发布时间

3.2 新增的非主体结构元素:address、header、hgroup、footer元素

address元素用来在文档中呈示联系信息,包括联系人,联系地址,邮箱,电话等联系信息

header元素(一个页面可以有多个):

hgroup标签用于归类同一个标题下的子标题

大标题

小标题

这是正文

hgroup

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元素:

list属性

下拉菜单:

View Code

 control属性:

    
control属性
control属性

创建节点:

  • Coffee
  • Tea

请点击按钮向列表插入一个项目。

注释:

首先请创建一个 LI 节点,
然后创建一个文本节点,
然后向这个 LI 节点追加文本节点。
最后在列表中的首个子节点之前插入此 LI 节点。

View Code

labels节点:

    
labels节点
View Code

placeholder属性:

autocomplete标签:

注释:autocomplete 属性适用于 <form>,以及下面的 <input> 类型:text, search, url, telephone, email, password, datepickers, range 以及 color。

View Code

image标签的宽高属性:

View Code

checkbox属性:

选中测试
View Code

pattern正则表达式:

请输入
View Code

selectionDirection属性:

    
View Code

 5、HTML5 改良的 input 元素的种类

5.1表单验证

    
checkValidity()方法执行输入校验

5.2 type类型

    
Title
+ =
15
type

5.3计算器

+=
计算器

5.4 radio单选按钮的使用

你是男生还是女生?
女生
男生
View Code

6、新增的页面元素

6.1 cite元素

cite元素

我最近想看电影功夫瑜伽

6.2 small元素

这里可以写版权等

6.3 details元素和summary元素

    
好看是电影在这里

我就是好看的电影

View Code

6.4 figure元素

    
图片
图片
图片
图片
View Code

6.5 mark元素

谁比较突出,就是

6.6progress元素

    

progress进度

完成的百分比

View Code

7.列表的使用

ul无序列表:

  • html5
  • css3
  • javascript
View Code

ol有序列表:

  1. html5
  2. css3
  3. javascript
View Code

ol li ul嵌套列表:

  1. 动物
  2. 植物
  3. 生物
    • 大树
View Code

dl自定义列表:

标题
注释
标题
注释
View Code

8.table表格

标题
表头1 表头2 表头3 表头4
单元格1 单元格1 单元格1
单元格2 单元格2 单元格2 单元格2
单元格3 单元格3 单元格3
单元格4 单元格4 单元格4
View Code

9.内联框架

iframe元素:

10.实体

带有特殊字符的标签不能被展现出来,要通过html实体的方式表达,如:
<html>表示

11.audio音频元素

View Code

12.video视频元素

View Code

13.拖放

        

请把图片拖放到矩形中:

View Code

 14.web存储

之前,都是由cookie完成数据存储的,但是,cookie不适合大量数据的存储,因为它们由每一个对服务器请求来传递,使得cookie速度很慢且效率不高。

14.1localStorage数据存储

    
web存储1
View Code

14.2 sessionStorage数据存储

    
web存储2 0
View Code

 15.canvas图形绘制标签

<canvas> 标签只是图形容器,必须使用脚本来绘制图形。

your browser does not support the canvas tag

 

15.HTML5废除的元素

废除basefont、big、center、font、s、tt、u等元素,

不再使用frame框架

转载于:https://www.cnblogs.com/chooper/p/6428627.html

你可能感兴趣的文章
Linux常用命令总结
查看>>
yii模型ar中备忘
查看>>
C#线程入门
查看>>
CSS清除浮动方法
查看>>
JVM内存回收机制简述
查看>>
洛咕 P2480 [SDOI2010]古代猪文
查看>>
js-创建对象的几种方式
查看>>
JDK JRE Java虚拟机的关系
查看>>
2018.11.20
查看>>
word20161215
查看>>
12th week blog
查看>>
dijkstra (模板)
查看>>
python小记(3)
查看>>
编译Linux驱动程序 遇到的问题
查看>>
大型分布式网站架构技术总结
查看>>
HDU 1017[A Mathematical Curiosity]暴力,格式
查看>>
[算法之美] KMP算法的直观理解
查看>>
EntityFramework 性能优化
查看>>
【ASP.NET开发】菜鸟时期的ADO.NET使用笔记
查看>>
android圆角View实现及不同版本号这间的兼容
查看>>