0

0

html5与传统html的区别,有哪些新增的和废除的元素?

yulia

yulia

发布时间:2018-09-17 17:58:31

|

2373人浏览过

|

来源于php中文网

原创

这篇文章围绕html展开,主要讲了html5与传统html的区别,以及一些html5新增的元素和废除的元素,有需要的小伙伴可以参考一下,希望对你有帮助。

一. HTML5语法的改变

该知识点所说变化指的是基于HTML4基础上所定义的改变,主要有如下:

1、HTML5的文件扩展符(.html或.htm)与内容类型(text/html)保持不变。
2、HTML5中,刻意不使用版本声明,一份文档将会适用于所有版本的HTML。
3、从HTML5开始,对于文件的字符编码推荐使用UTF-8。
4、HTML5确保了与之前HTML版本的最大程度的兼容性。  
   为了保证兼容性,需从元素说起,在HTML5.中,元素的标记可以省略。其体来说,元素的标记分为“不允许写结束标记”、“可以省略结束标记”和‘“开始标记和结束标记全部可以省略”三种类型。

 不允许写结束标记元素有:area、base、br、col.....
 可以省略结束标记:li、dt、dd、p、rt......
 开始标记和结束标记全部可以省略:html、head、body.....

立即学习前端免费学习笔记(深入)”;

二.新增的结构元素

section元素表示页面中的一个内容区块,比如章节、页眉、页脚或页面中的其他部分;
article元素表示页面中的一块与上下文不相关的独立内容,譬如博客中的一篇文章或报纸中的一篇文章;
aside元素表示article元素的内容之外的、与article元素的内容相关的辅助信息;
header元素表示页面中一个内容区块或整个页面的标题;
hgroup元素用于对整个页面或页面中一个内容区块的标题进行组合;
footer元素表示整个页面或页面中一个内容区块的脚注。一般来说,它会包含创作者的姓名、创作日期以及创作者联系信息;
nav元素表示页面中导航链接的部分;
figure元素表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元,使用figcaption元素为figure元素组添加标题

2、新增的其他元素

audio元素定义音频,比如音乐或其他音频流;
embed元素用来插入各种多媒体,格式可以是Midi、Wav、AU、MP3等;
mark元素上要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字,典型应用就是在搜索结果中向用户高亮显示搜素关键词;
progress元素表示运行中的进程
ruby元素表示ruby注释(中文注音或字符)
rt元素表示字符(中文注音或字符)的解释或发音
rp元素在ruby注释中使用,以定义不支持ruby素的浏览器所显示的内容。
wbr元素表示软换行,而当宽度不够时,主动在此处进行换行
canvas元素表示图形,比如图表和其他图像
cammand元素表示命令按钮,比如单选按钮、复选框或按钮
details元素表示用户要求得到并且可以得到的细节信息
datagrid元素表示可选数据的列表,它以树形列表的形式来显示
keygen元素表示生成密钥
output元素表示不同类型的输出,比如脚本的输出
source元素为媒介元素(比如<video>和<audio>)定义媒介资源
menu元素表示菜单列表

3、新增的input元素

email 类型表示必须输入E-main地址的文本输入框
url 类型表示必须输入URL地址的文本输入框
number类型表示必须输人数值的文本输入框
range 类型表示必须输入一定范围内数字值的文本输人框

HTML5拥有多个可供选取日期和时间的新型输入文本框:
date ——选取日、月、年
month ——选取月、年
week ——选取周和年
time ——选取时间(小时和分钟)
datetime ——一选取时间、日、月、年(UTC 时间)
datetime.local ——选取时间、日、月、年(本地时间)

三.废除元素

1、能使用CSS替代的元素
对干basefont、big、center、font、s、strike、tt、u这些元素,由于它们的功能都是纯粹去画面展示服务的,而HTML5中提倡把画面展示性功能放在CSS样式表中统一编辑,所以这些元素废除了

飞书多维表格
飞书多维表格

表格形态的AI工作流搭建工具,支持批量化的AI创作与分析任务,接入DeepSeek R1满血版

下载

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

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

对于applet、bgsound、blink、marquee等元素,由于只有部分浏览器支持这些元素,特别是bgsound元素以及marquee元素,只被Internet Explorer所支持,所以在HTML 5中被废除。其中applet元素可由ernedd元素或object元素替代,bgsound元素可由audio元素替代,marquee可以由JavaScript编程的方式所替代

4、其他被废除的元素:
废除rb元素,使用ruby元素替代
废除acronym元素,使用abbr元素替代
废除dir元素,使用ul元素替代
废除isindex元素,使用form元素与input元素相结合的方式替代
废除listing元素,使用pre元素替代
废除xmp元素,使用code元素替代
废除nextid元素,使用GUIDS替代
废除plaintext元素,使用“ text/plian” MIME类型替代

四.新增属性和废除属性

一、新增属性
1、与表单相关属性

新增autofocus属性,它以指定属性的方式让元素在画面打开时自动获得焦点;
新增placeholder属性,它会对用户的输入进行提示,提示用户可以输入的内容;
新增form属性,声明它属于哪个表单,然后将其放置在页面上任何位置,而不是表单之内;
新增required属性,该属性表示在用户提交的时候进行检查,检查该元素内一定要有输入内容;
   .....
2、与链接相关属性
增加media属性,该属性规定目标URL是为什么类型的媒介/设备进行优化的,只能在href属性存在时使用;
增加hreflang属性与rel属性,以保持与a元素、link元素的一致;
 ......
3、其他属性
属性reverend,它指定列表倒序显示;
为script元素增加async属性,它定义脚本是否异步执行;
......

二、废除属性

能被CSS样式表替代的属性全部废除掉;
多余属性,例如:target、profile、version等被废除掉;
.......       

五.全局属性

在HTML5中,新增了一个’‘全局属性“的概念。所谓全局属性,是指可以对任何元素都使用的属性。

1、contentEditable 属性
该属性允许用户编辑元素中的内容,可以获得鼠标焦点,属性为布尔值,可被指定为true或false。另外,该属性还有个隐藏inherit状态,为true时,允许编辑,为false时,不允许编辑,未指定时,由inherit决定。
2、designMode 属性
该属性用来决定整个页面是否可编辑。有两个属性“on”与"off"。属性为"on"时,可编辑,为“off”时,不可编辑。
3、hidden属性
所有元素都允许使用一个hidden属性,该属性类似于input元素中的hidden元素,功能是通知浏览器不渲染该元素,使该元素处于不可见状态。该属性值为布尔值,为true时,不可见,为false时,可见。
4、spellcheck属性
该属性是HTML 5针对input元素(type=text) 与textarea这两个文本输入框提供的一个新属性,主要对用户输入内容进行拼写与语法检查。属性值为布尔值,书写时必须明确声明属性值为true或false书写方式如下:
   <!—以下两种书写方法正确—>
   <textarea spellcheck="true"  >
   <input type=text spellcheck=false>
   <!—以下两种书写方法为错误—>
   <textarea spellcheck  >

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
html5动画制作有哪些制作方法
html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

550

2023.10.23

HTML与HTML5的区别
HTML与HTML5的区别

HTML与HTML5的区别:1、html5支持矢量图形,html本身不支持;2、html5中可临时存储数据,html不行;3、html5新增了许多控件;4、html本身不支持音频和视频,html5支持;5、html无法处理不准确的语法,html5能够处理等等。想了解更多HTML与HTML5的相关内容,可以阅读本专题下面的文章。

471

2024.03.06

html5从入门到精通汇总
html5从入门到精通汇总

想系统掌握HTML5开发?本合集精选全网优质学习资源,涵盖免费教程、实战项目、视频课程与权威电子书,从基础语法到高级特性(Canvas、本地存储、响应式布局等)一应俱全,适合零基础小白到进阶开发者,助你高效入门并精通HTML5前端开发。

296

2025.12.30

html5新老标签汇总
html5新老标签汇总

HTML5在2026年持续优化网页语义化与交互体验,不仅引入了如<header>、<nav>、<article>、<section>、<aside>、<footer>等结构化标签,还新增了<video>、<audio>、<canvas>、<figure>、<time>、<mark>等增强多媒体与

228

2025.12.30

html5空格代码怎么写
html5空格代码怎么写

在HTML5中,空格不能直接通过键盘空格键实现,需使用特定代码。本合集详解常用空格写法:&nbsp;(不间断空格)、&ensp;(半个中文空格)、&emsp;(一个中文空格)及CSS的white-space属性等方法,帮助开发者精准控制页面排版,避免因空格失效导致布局错乱,适用于新手入门与实战参考。

107

2025.12.30

html5怎么做网站教程
html5怎么做网站教程

想从零开始学做网站?这份《HTML5怎么做网站教程》合集专为新手打造!涵盖HTML5基础语法、页面结构搭建、表单与多媒体嵌入、响应式布局及与CSS3/JavaScript协同开发等核心内容。无需编程基础,手把手教你用纯HTML5创建美观、兼容、移动端友好的现代网页。附实战案例+代码模板,快速上手,轻松迈出Web开发第一步!

165

2025.12.31

HTML5建模教程
HTML5建模教程

想快速掌握HTML5模板搭建?本合集汇集实用HTML5建模教程,从零基础入门到实战开发全覆盖!内容涵盖响应式布局、语义化标签、Canvas绘图、表单验证及移动端适配等核心技能,提供可直接复用的模板结构与代码示例。无需复杂配置,助你高效构建现代网页,轻松上手前端开发!

53

2025.12.31

html5怎么使用
html5怎么使用

想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

72

2025.12.31

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

76

2026.03.11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

AngularJS教程
AngularJS教程

共24课时 | 4.1万人学习

CSS教程
CSS教程

共754课时 | 42.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号