Html5与Html4的区别

本文主要介绍Html5和Html4的区别。

语法的改变

内容类型
HTML5 的文件扩展符与内容类型保持不变。扩展符仍然为“.html”或“.htm”,内容类型(ContentType)仍然为“text/html”。
DOCTYPE声明
DOCTYPE 声明是 HTML 文件中必不可少的,它位于文件第一行。在 XHTML 1.0 Transitional 中,它的声明方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在 HTML5 中,刻意不使用版本声明,一份文档将会适用于所有版本的 HTML。HTML5 中的 DOCTYPE 声明方法(不区分大小写)如下:
<!DOCTYPE html>
另外,当使用工具时,也可以在 DOCTYPE 声明方式中加入 SYSTEM 识别符,声明方法如下面的代码所示:
<!DOCTYPE HTML SYSTEM "about:legacy-compat">
在 HTML5 中像这样的 DOCTYPE 声明是允许的(不区分大小写,引号不区分是单引号还是双引号)。

指定字符编码
在 HTML4 中,使用 meta 标签的形式指定文件中的字符编码,如下所示:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" >
在 HTML5 中,可以使用对 <meta> 标签直接追加 charset 属性的方式来指定字符编码,如下所示:
<meta charset="UTF-8">
两种方法都有效,可以继续使用前面那种方式(通过 content 属性来指定),但是不能同时混合使用两种方式,在以前的 HTML 代码中可能会存在下面代码所示的标记方式,但在 HTML5 中,这种字符编码方式将被认为是错误的,这一点请注意:
<meta charset="UTF-8" http-equiv="Content-Type" content="text/html;charset=UTF-8">
从 HTML5 开始,对于文件的字符编码推荐使用 UTF-8。

可以省略标记的元素
在 HTML5 中,标签的标记分为“不允许写结束标记”、“可以省略结束标记”和“开始标记和结束标记全部可以省略”三种类型。让我们来针对这三类情况列举一个标签清单,其中包括 HTML5 中的新标签。

不允许写结束标记的标签有:
area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。
可以省略结束标记的标签有:
li、dt、dd、p、rt、rp、op、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。
可以省略全部标记的标签有:
html、head、body、colgroup、tbody。

“不允许写结束标记的标签”是指,不允许使用开始标记与结束标记将标签括起来的形式,只允许使用“<标签/>”的形式进行书写。例如“<br>...</br>”的书写方式是错误的,正确的书写方式为“<br/>”。当然,HTML5之前的版本中<br>这种写法可以被沿用。

“可以省略全部标记的标签”是指,该标签可以完全被省略。请注意,即使标记被省略了,该标签还是以隐式的方式存在的。例如将body标签省略不写时,但它在文档结构中还是存在的,可以使用document.body进行访问。

具有boolean值的属性
对于具有boolean值的属性,例如 disabled 与 readonly 等,当只写属性而不指定属性值时,表示属性值为true;如果想要将属性值设为flase,可以不使用该属性。另外,要想将属性值设为true时,也可以将属性名设定为属值,或将空字符串设定为属性值。属性值的设定方法可以参考下面的示例:

<!--只写属性不写属性值代表属性为true-->
<input type="checkbox" checked>
<!--不写属性代表属性为false-->
<input type="checkbox">
<!--属性值=属性名,代表属性为true-->
<input type="checkbox" checked="checked">
<!--属性值=空字符串,代表属性为true-->
<input type="checkbox" checked="">

省略引号
在之前的 HTML 版本中,大家已经知道,指定属性值的时候,属性值两边既可以用双引号,也可以用单引号。HTML5 在此基础上做了一些改进,当属性值不包括空字符串、“<”、“>”、"="、单引号、双引号等字符时,属性值两边的引号可以省略。如下面的代码所示:

<!--请注意type的属性值两边的引号-->
<input type="text">
<input type='text'>
<input type=text>

示例:

<!DOCTYPE html>
<meta charset="UTF-8">
<title>HTML5 标记示例</title>
<p>这段代码是根据HTML5语法
<br/>编写出来的。

1、该代码完全是用 HTML5 写成的;
2、省略了<html><head><body>等标签;
3、DOCTYPE申明使用了 HTML5 支持的简洁申明方式;
4、用<meta>标签的 charset 属性指定字符编码;
5、省略了<p>标签的结束标记;
6、使用<标签/>的方式来结束<title>标签以及<br>标签。

新增和废除的元素(标签)

新增的结构标签

在 HTML5 中,新增了以下与结构相关的标签:
section标签
section 标签表示页面中的一个内容区块,比如章节、页眉、页脚或页面中的其他部分。
它可以与h1h2h3h4h5h6等标签结合起来使用,标识文档结构。
HTML5 中代码示例:
<section>....</section>
HTML4 中代码示例:
<div>...</div>

article标签
article 标签表示页面中的一块与上下文不相关的独立内容,比如博客中的一篇文章或报纸中的一篇文章。
HTML5 中代码示例:
<article>...</article>
HTML4 中代码示例:
<div>...</div>

aside标签
aside 标签表示 article 标签的内容之外、并与article 标签的内容相关的辅助信息。
HTML5 中代码示例:
<aside>...</aside>
HTML4 中代码示例:
<div>...</div>

header标签
header 标签表示页面中的一个内容区块或整个页面的标题。
HTML5 中代码示例:
<header>...</header>
HTML4 中代码示例:
<div>...</div>

hgroup标签
hgroup 标签用于对整个页面或页面中一个内容区块的标题进行组合。
HTML5 中代码示例:
<hgroup>...</hgroup>
HTML4 中代码示例:
<div>...</div>

footer标签
footer 标签表示整个页面或页面中一个内容区块的脚注。一般来说,它会包含创作者的姓名、创作日期以及创作者的版权或联系信息。
HTML5 中代码示例:
<footer>...</footer>
HTML4 中代码示例:
<div>...</div>

nav标签
nav标签表示页面中导航链接的部分。
HTML5 中代码示例:
<nav>...</nav>
HTML4 中代码示例:
<ul>...</ul>

figure标签
figure 标签表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。使用 figcaption 标签为 figure 标签组添加标题。
HTML5 中代码示例:

<figure>
    <figcaption>新增的结构标签</figcaption>
    <p>在 HTML5 中,新增了以下与结构相关的标签:</p>
</figure>

HTML4 中代码示例:

<dl>
    <h1>新增的结构标签</h1>
    <p>在 HTML5 中,新增了以下与结构相关的标签:</p>
</dl>
新增的其他标签

除了结构标签外,在 HTML5 中,还新增了以下标签:
video标签
video 标签定义视频,比如电影片段或其他视频流。
HTML5 中代码示例:
<video src="movie.ogg" controls="controls">video标签</video>

HTML4 中代码示例:

<object type="video/ogg" data="movie.ogv">
    <param name="src" value="movie.ogv">
</object>

audio标签
audio 标签定义音频,比如音乐或其他音频流。
HTML5 中代码示例:
<audio src="someaudio.wav">audio标签</audio>

HTML4 中代码示例:

<object type="application/ogg" data="someaudio.wav">
    <param name="src" value="someaudio.wav">
</object>

canvas标签
canvas 标签表示图形,比如图表和其他图像。这个标签本身没有行为,仅提供一块画布,但它把一个绘图 API 展现给客户端JavaScript,以使脚本能够把想绘制的东西绘制到这块画布上。
HTML5 中代码示例:
<canvas id="myCanvas" width="200" height="200"></canvas>

HTML4 中代码示例:
<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>

embed标签
embed 标签用来插入各种多媒体,格式可以是 midi、wav、aiff、au、mp3等。
HTML5 中代码示例:
<embed src="horse.wav" />

HTML4 中代码示例:
<object data="flash.swf" type="application/x-shockwave-flash"></object>

mark标签
mark 标签主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark 标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
HTML5 中代码示例:
<mark>...</mark>

HTML4 中代码示例:
<span>...</span>

progress标签
progress 标签表示一个进度条,可以使用 progress 标签来显示那些执行耗时较长的操作,提升用户体验。
HTML5 中代码示例:
<progress value="22" max="100"></progress>

HTML4 中代码示例:
这是 HTML5 中新增功能,故无法用 HTML4 代码来实现,只能通过 javascript 来控制。

time标签
time 标签表示日期或时间,也可以同时表示两者。
HTML5 中代码示例:
<time>...</time>

HTML4 中代码示例:
<span>...</span>

ruby标签
ruby 标签表示 ruby 注释(中文注音或字符)。
HTML5 中代码示例:
<ruby>漢<rt><rp>(</rp>魏<rp>)</rp></rt></ruby>

HTML4 中代码示例:
这是 HTML5 中新增的功能。

rt标签
rt 标签表示字符(中文注音或字符)的解释或发音。
HTML5 中代码示例:
<ruby>漢<rt>魏</rt></ruby>

HTML4 中代码示例:
这是 HTML5 中新增的功能。

rp标签
rp 标签在 ruby 注释中使用,以定义不支持 ruby 标签的浏览器所显示的内容。
HTML5 中代码示例:
<ruby>漢<rt><rp>(</rp>魏<rp>)</rp></rt></ruby>

HTML4 中代码示例:
这是 HTML5 中新增的功能。

wbr标签
wbr 标签表示软换行。wbr 标签与 br 标签的区别是:br 标签表示此处必须换行;而 wbr 标签的意思是浏览器窗口或父级标签的宽度足够宽时(没必要换行时),不进行换行,而当宽度不够时,主动在此处进行换行。wbr 标签好像对字符型的语言作用挺大,但是对于中文,貌似没多大用处。
HTML5 中代码示例:
<p>To learn AJAX, you must be fami<wbr>liar with the XMLHttp<wbr>Request Object.</p>

HTML4 中代码示例:
这是 HTML5 中新增的功能。

command标签
command 标签表示命令按钮,比如单选按钮、复选框或按钮。
HTML5 中代码示例:
<command onclick="cut()" label="cut">

HTML4 中代码示例:
这是 HTML5 中新增的功能。

details标签
details 标签表示用户要求得到并且可以得到的细节信息。它可以与 summary 标签配合使用。summary 标签提供标题或图例。标题是可见的,用户点击标题时,会显示出细节信息。summary 标签应该是 details 标签的第一个子标签。

HTML5 中代码示例:

<details>
    <summary>HTML5</summary>
    This document teaches you everything you have to learn about HTML 5.
</details>

HTML4 中代码示例:
这是 HTML5 中新增的功能。

datalist标签
datalist 标签表示可选数据的列表,与 input 标签配合使用,可以制作出输入值的下拉列表。
HTML5 中代码示例:
<datalist></datalist>

HTML4 中代码示例:
这是 HTML5 中新增的功能。

datagrid标签
datagrid 标签表示可选数据的列表,它以树形列表的形式来显示。
HTML5 中代码示例:
<datagrid></datagrid>

HTML4 中代码示例:
这是 HTML5 中新增的功能。

keygen标签
keygen 标签表示生成密钥。
HTML5 中代码示例:
<keygen>

HTML4 中代码示例:
这是 HTML5 中新增的功能。

output标签
output 标签表示不同类型的输出,比如脚本的输出。

HTML5 中代码示例:
<output></output>

HTML4 中代码示例:
<span></span>

source标签
source 标签为媒介标签(比如<video>和<audio>)定义媒介资源。
HTML5 中代码示例:
<source>

HTML4 中代码示例:
<param>

menu标签
menu 标签表示菜单列表。当希望列出表单控件时使用该标签。

HTML5 中代码示例:

<menu>
    <li><input type="checkbox" />Red</li>
    <li><input type="checkbox" />Blue</li>
</menu>

HTML4 中代码示例:
在 HTML4 中 menu 标签不被推荐使用。

新增的input标签的类型

HTML5 中新增了很多 input 标签的类型,现列举如下:
email
email 类型表示必须输入 E-mail 地址的文本输入框。

HTML5 中代码示例:
<input type="email" />

HTML4 中代码示例:
这是 HTML5 中新增的功能。

url
url 类型表示必须输入URL地址的文本输入框。
HTML5 中代码示例:
<input type="url" />

HTML4 中代码示例:
这是 HTML5 中新增的功能。

number
number 类型表示必须输入数值的文本输入框。

HTML5 中代码示例:
<input type="number" />

HTML4 中代码示例:
这是 HTML5 中新增的功能。

range
range 类型表示必须输入一定范围内数字值的文本输入框。

HTML5 中代码示例:
<input type="range" />

HTML4 中代码示例:
这是 HTML5 中新增的功能。

Date Pickers
HTML5 拥有多个可供选取日期和时间的新型输入文本框:

HTML5 中代码示例:

<input type="date" />----选取日、月、年
<input type="month" />----选取月、年
<input type="week" />----选取周和年
<input type="time" />----选取时间(小时和分钟)
<input type="datetime" />----选取时间、日、月、年(UTC时间)
<input type="datetime-local" />----选取时间、日、月、年(本地时间)

HTML4 中代码示例:
这是 HTML5 中新增的功能。

废除的标签

由于各种原因,在 HTML5 中废除了很多标签,简单介绍如下。

1、能使用CSS替代的标签

对于 basefont、big、center、font、s、strike、tt、u这些标签,由于它们的功能都是纯粹为画面展示服务的,在 HTML5 中提倡把画面展示型功能放在 CSS 样式表中统一编辑,所以将这些标签废除了,并使用添加或编辑 CSS 样式表的方式进行替代。

2、不再使用frame框架

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

3、只有部分浏览器支持的标签

对于 applet、bgsound、blink、marquee 等标签,由于只有部分浏览器支持这些标签,特别是 bgsound 标签以及 marquee 标签,只被 IE 所支持,所以在 HTML5 中被废除。其中 applet 标签可由 embed 标签或 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. contentEditable

主要功能:是否允许用户编辑元素内容。bool值。
例:
<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>
语法:
<element contenteditable="value">
属性值:

描述
true 规定可以编辑元素内容。
false 规定无法编辑元素内容。
classname 继承父元素的 contenteditable 属性。

2. designMode

主要功能:指定整个页面是否允许用户编辑元素内容。bool值。

3. hidden

主要功能:隐藏页面元素。bool值。

4. spellcheck

主要功能:规定是否对元素内容进行拼写检查。
可对以下文本进行拼写检查:
类型为 text 的 input 元素中的值(非密码)
textarea 元素中的值
可编辑元素中的值

5. tabindex

主要功能:规定当使用 "tab" 键进行导航时元素的顺序。

以下元素支持tableindex属性:<a>, <area>, <button>, <input>, <object>, <select> 以及 <textarea>

<!DOCTYPE HTML>
<html>
<body>
<a href="http://layjoy.xyz/" tabindex="2">xyz</a><br />
<a href="http://layjoy.space/" tabindex="1">space</a><br />
<a href="http://layjoy.com/" tabindex="3">com</a>

</body>
</html>

6.draggable

主要功能:规定元素是否可拖动。

提示:链接和图像默认是可拖动的。

<p draggable="true">This is a draggable paragraph.</p>
属性值:

描述
true 规定元素是可拖动的。
false 规定元素是不可拖动的。
auto 使用浏览器的默认特性。

原文链接:http://layjoy.space/2017/02/03/html5-html4/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 156,265评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,274评论 1 288
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,087评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,479评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,782评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,218评论 1 207
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,594评论 2 309
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,316评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,955评论 1 237
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,274评论 2 240
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,803评论 1 255
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,177评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,732评论 3 229
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,953评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,687评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,263评论 2 267
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,189评论 2 258

推荐阅读更多精彩内容

  • 一、html5语法特点 1.DOCTYPE及字符编码① 文档声明DOCTYPE:<!doctype html>② ...
    MGd阅读 924评论 0 2
  • 格式后期处理。 Jeremy Keith在 Fronteers 2010 上的主题演讲 今天我想跟大家谈一谈HTM...
    LordZhou阅读 1,098评论 0 17
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,535评论 25 707
  • 闭上双眼 离别时,与他轻柔拥抱 红色的野花,盛开在半山腰 我在荒芜的草地上疯狂地逃 我用尽全身力气喊叫 我把日夜颠...
    毛腻阅读 307评论 0 1
  • 一个姑娘最酷的时候,是该看书时看书,该玩时尽情玩,看见优秀的人欣赏,看到落魄的人也不轻视,有自己的小生活和小情趣,...
    婳祎儿阅读 135评论 0 1