查看: 44|回复: 0

[前端资源] 学前段好还是后端好-Html5与Html4的区别

发表于 7 天前
本文主要介绍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">

从 HTML5 开始,对于文件的字符编码推荐使用 UTF-8。

省略引号
在之前的 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 标签表示页面中的一个内容区块,比如章节、页眉、页脚或页面中的其他部分。
它可以与h1、h2、h3、h4、h5、h6等标签结合起来使用,标识文档结构。
HTML5 中代码示例:
<section>....</section>
HTML4 中代码示例:
<div>...</div>
article标签
article 标签表示页面中的一块与上下文不相关的独立内容,比如博客中的一篇文章或报纸中的一篇文章。
HTML5 中代码示例:
<article>...</article>
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>

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

HTML5 中代码示例:
<p>To learn AJAX, you must be fami<wbr>liar with the XMLHttp<wbr>Request Object.</p>
HTML4 中代码示例:
这是 HTML5 中新增的功能。
command标签
command 标签表示命令按钮,比如单选按钮、复选框或按钮。
HTML5 中代码示例:
<command label="cut">
HTML4 中代码示例:
这是 HTML5 中新增的功能。
HTML4 中代码示例:
这是 HTML5 中新增的功能。

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>
更多资讯 https://jq./?_wv=1027&k=475UPi2   
      
   ww 验证
   



回复

使用道具 举报