首页 > 其他分享 >HTML5与HTML4的区别,新增了哪些元素

HTML5与HTML4的区别,新增了哪些元素

时间:2023-08-03 09:23:21浏览次数:43  
标签:哪些 元素 值为 HTML4 HTML5 页面 true 属性

注:部分格式编写存在<>封闭错误,只为在博客中显示,并非正确写法。
1.    HTML5推出的理由

解决Web上存在的问题:

Web浏览器间的兼容性低:在一个浏览器中可以运行的HTML、Css、Javascript,在另一个浏览器中不能运行。

原因:各浏览器规范不统一,没有被标准化。

解决方案:使各浏览器的功能符合通用标准。

文档结构不够明确:HTML4中元素不能把文档结构表示清楚。

解决方案:增加与结构相关的元素。

Web应用程序的功能受到限制:HTMLL4对Web应用程序的贡献很小,比如:不允许同时上传多个文件。

解决方案:提供供Web应用程序使用的API。

2.    HTML5语法的改变

内容类型不变

HTML5的文件扩展符(html或.htm)与内容类型(text/html)保持不变。

DOCTYPE声明变化

HTML4中需要指明是HTML的哪个版本,HTML5不需要,只使用即可。

指定字符编码变化

HTML4: 《meta http-equiv=‶content-type″ content=‶text/html; charset=UTF-8″》

HTML5:《meta charset=‶UTF-8″》

可以省略元素的标记

HTML5中很多元素标记可以省略

具有boolean值的属性调整

不指定属性值、属性名设定为属性值、字符串设为空时表示属性值为true;

不写该属性表示属性值为false。

例如:

input type=‶checkbox″ checked>                          表示checked值为true

input type=‶checkbox″ checked=‶checked″>          表示checked值为true

input type=‶checkbox″ checked=‶″>                      表示checked值为true

input type=‶checkbox″>                                       表示checked值为false

可省略引号

HTML5可省略指定属性值时的引号。

3.    新增的元素和废除的元素

新增元素

新增的结构元素

section:表示页面中内容块,比如章节、页眉、页脚或页面中的其他部分,可与h1>到h6>结合使用表示文档结构。

article:表示页面中一块与上下文不相关的独立内容,比如博客中的一篇文章或报纸中的一篇文章。

aside:表示article内容之外,与article内容相关的辅助信息。

header:表示页面中的区域块,通常用它表示标题。

hgroup:用于对整个页面或页面中标题进行整合。

footer:表示页面中的区域块,通常表示区域快的脚部或底部,用于承载作者姓名、创作日期等与作者的元素。

nav:表示页面中导航部

figure:表示一段独立的流内容,一般表示主体流内容的一个独立单元。

新增的其他元素

video:定义电影片段、视频流等视频。

audio:定义音乐或音频流。

canvas:画布,本身没有行为,仅提供一块画布,但它的API展现给JavaScript及脚本,能够把想绘制的东西绘制在canvas上。

embed mark progress meter time ruby rt rp wbr command details detalist

datagrid keygen output source menu

新增的input元素的类型

email:表示必须输的email地址

url:表示文本框输入的一个地址

number:表示数字

range:表示数字范围值

DataPickers:表示日历的日期、时间

废除的元素

能使用css代替的元素

basefont big center font s tt u等

不再使用frame框架

由于frame框架对网页可用性存在负面影响,HTML5中已不支持frame框架,只支持iframe框架或者用服务器方式创建的由多个页面组成的复合页面的形式,同时将frameset元素、frame元素、noframes元素废除。

只有部分浏览器支持的元素

其他被废除的元素

4.    新增的属性和废除的属性

新增的属性

表单相关的属性

链接相关的属性

其他属性

废除的属性

5.    全局属性

HTML5中新增全局属性的概念,全局属性指可以对任何元素都使用的属性。

contentEditable属性

允许用户编辑元素中内容,使用该属性的元素必须为可以获得鼠标焦点的元素,而且在点击鼠标后向用户提供一个插入符号,提示用户该元素允许进行编辑。

是boolean值类型,可以设为true、false或继承状态。其中,true代表可编辑,false代表不可编辑,当未指定true或false时与父元素的继承状态相同。

designMode属性

用来指定整个页面是否可编辑,当页面可编辑时,页面中所有支持contentEditable属性的元素都变为可编辑状况。designMode属性只能在JavaScript脚本中被修改、编辑。属性值可取on(可编辑)或off(不可编辑)。

hidden属性

HTML5中所有元素都允许使用hidden属性,该属性类似于input元素中hidden元素,boolean值,可设为true(不可见)、false(可见)。当某元素的hidden属性值为true时,浏览器不渲染该元素,使该元素处于不可见状态,但浏览器创建该元素内容,即页面加载后允许使用JavaScript脚本将该属性值取消,使该元素可见。

spellcheck属性

针对input(type=text)与textarea这两个文本输入框提供的一个新属性,主要对用户输入内容进行拼写与语法检查。属性值为boolean值,可取true或false。

tableindex属性

当点击Tab键时,让窗口或页面中可获得焦点的链接元素或表单元素进行遍历,tableindex表示该元素第几个被访问到。

若tableindex值为”-1”时表示无法获取该元素.

标签:哪些,元素,值为,HTML4,HTML5,页面,true,属性
From: https://www.cnblogs.com/delishcomcn/p/17602379.html

相关文章

  • 监控对象都有哪些分类
    1、业务监控这类指标是管理层非常关注的,代表企业营收,或者跟客户主流程相关,类似BI数据。不过相比BI数据,业务监控指标有两点不同。对精确度要求没有那么高:因为监控只要发现趋势异常就可以,至于是从5000变成了1000还是变成了1001,没有什么区别。对实时性要求很高:很多BI数据可......
  • 9.手写实现智能指针类需要实现哪些函数?
    9.手写实现智能指针类需要实现哪些函数?1.智能指针是一个数据类型,一般用模板实现,模拟指针行为的同时还提供自动垃圾回收机制。它会自动记录SmartPointer<T*>对象的引用计数,一旦T类型对象的引用计数为0,就释放该对象。除了指针对象外,我们还需要一个引用计数的指针设定对象的值,并将......
  • ##英语中哪些地名前必须加the?
    英语中哪些地名前必须加the?在写作中总是分不清什么时候加the,直到最近看到一篇贴子。https://www.englishcurrent.com/grammar/definite-article-place-names-geography/把它翻译总结出来:1.大陆前不加the,海洋前加theAsia,EuropethePacific/thePacificOcean2.河海前......
  • HTTP代理是什么?比较好的HTTP代理商有哪些?
    什么是HTTP代理?HTTP代理是一种网络代理技术,主要作用是接收用户发送的HTTP请求,并将这些请求转发到目标服务器,在用户和目标服务器之间充当中介。HTTP代理在各个领域都有广泛的应用。数据抓取:HTTP代理可用于大规模的数据采集任务,实现高并发请求,帮助用户高效获取不同区域、大量的数......
  • 盘点HTTP代理服务器能用于哪些网络工作
     亲爱的小伙伴们!今天我来和你分享的内容是,HTTP代理服务器能用于哪些网络工作? HTTP代理服务器作为一种功能强大的工具,可以应用于多种网络任务,让你事半功倍,发现更多有趣的用途。 1.网络舆情监控:在这个信息爆炸的时代,网络舆情监控变得越来越重要。通过使用HTTP代理服务器,你可......
  • Jest和Mocha对比:两者之间有哪些区别?
    什么是单元测试?所谓单元测试,是对软件中单个功能组件进行测试的一种软件测试方式,其目的是确保代码中的每一个基本单元都能正常运行。因此,开发人员在应用程序开发的整个过程(即代码编写过程)中都需要进行单元测试。在进入到软件开发的下一阶段之前,对程序进行单元测试是一个不错的......
  • 免费听音乐的工具有哪些值得推荐的?
    MusicFree使用平台:Android+Windows它和那些“破解音乐软件”不同,用开发者的话来说,这是一款开源免费且插件化、定制化、无广告的免费音乐播放器。划重点,“插件”才是精髓!Android端:初次进入软件,你能看到的只是一个空空如也的播放器,里面啥都没,包括那些歌单、榜单里也都是空的......
  • Java面试题 P35:数据库篇:MySql篇-事务-并发事务带来哪些问题?怎么解决这些问题呢?MySQL
         ......
  • 代码格式有哪些注意事项
    提问代码格式有哪些注意事项回答垂直格式:代码行数别太多横向格式:代码别太宽......
  • 有哪些靠谱的证书可以考?
     有哪些靠谱的证书可以考人力资源社会保障部办公厅关于2023年度专业技术人员职业资格考试计划及有关事项的通知:http://www.gov.cn/zhengce/zhengceku/2023-01/20/content_5738275.htm中国教育考试网:https://www.neea.edu.cn/中国人事考试网:http://www.cpta.com.cn/index.ht......