文档章节

HTML5与HTML4的区别?

w-rain
 w-rain
发布于 2016/08/30 18:55
字数 2564
阅读 136
收藏 6

HTML5和HTML4在基本语法上的区别?

    1. 内容类型(ContentType)

                HTML5中的文件扩展符仍然为".html" 或 ".htm",内容类型仍然为"text/html"。

    2. DOCTYPE声明

                 HTML4:

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

                  HTML5:

<!DOCTYPE html>

//当使用工具时,也可以在DOCTYPE声明方式中加入SYSSTEM识别符,声明方法如下:

<!DOCTYPE HTML SYSTEM "about:legacy-compat">

    3. 指定的字符编码

              HTML4中使用meta元素的形式指定文件中的字符编码,如下所示:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

               HTML5中,可以使用<meta>元素直接追加charsetd属性的方式来指定字符编码,如下所示:

<meta charset="UTF-8">

                这2种方式都有效,也可以用前一种方式,但是不能同时混用,下面这种方式是错误的。

<meta charset="UTF-8" http-equiv="Content-Type" content="text/html;charset=UTF-8">

HTML5中新增元素

    新增与结构相关的元素

                        section元素表示页面中一个内容区块,<section>...</section>,HTML4中代码示例<div>...</div>。

                        article元素表示页面中一块与上下文不相关的独立内容,<article>...</article>,HTML4中代码示例<div>...</div>。

                        aside元素表示article元素的内容之外的、与article元素的内容相关的辅助信息。<aside>...

</aside>,HTML4中代码示例<div>...</div>。

                        header元素表示页面中一个内容区块或整个页面的标题。<header>...

</header>,HTML4中代码示例<div>...</div>。

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

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

                        nav元素表示页面中导航链接的部分,<nav></nav>,HTML4中代码示例<ul>...</ul>。

                        figure元素表示一段独立的流内容,一般表示文档主体流内容的一个独立单元,使用figcaption元素为figure元素添加标题。

<figure>
<figcaption>/...</figucaption>
<p>...</p>
</figure>

//HTML4中的代码示例

<dl>
<h1>...</h1>
<p>...</p>
</dl>

    其他元素

                        video元素,定义视频,比如电影片段或其他视频流。

//HTML5中代码示例

<video src="movie.ogg" controls="controls">video元素</video>


//HTML4中代码示例

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

                       audio元素,audio元素定义音频,比如音乐或其他音频流。

//HTML5中代码示例

<audio src="movie.wav">video元素</audio>


//HTML4中代码示例

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

                       embed元素, embed元素用来插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等。

//HTML5中代码示例

<embed src="movie.wav" />


//HTML4中代码示例

<objext type="application/x-shockwave-flash" data="movie.wav"></object>

                        mark元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。典型就是在搜索结果中向用户高亮显示搜索关键词。


//HTML5中的代码示例

<mark></mark>


//HTML4中的代码示例

<span></span>

                           progress元素,progress元素表示运行中的进程,可以使用progress元素来显示javascript中耗费时间的函数进程。<meter></meter> ,这是HTML5中新增功能,HTML4中代码无法实现。

                             time元素,time元素表示日期或时间,同时可以表示两者。


//HTML5中的代码示例

<time></time>


//HTML4中的代码示例

<span></span>

                             ruby元素,ruby元素表示 ruby注释(中文注音或字符),这也是HTML5中新增的功能。

<ruby>汉 <rt><rp>(</rp>...<rp>)</rp></rt></ruby>

                             rt元素,rt元素表示字符(中文注音或字符)的解释或发音。

                             rp元素,rp元素在ruby注释中使用,以定义不支持ruby元素的浏览器所显示的内容。

                             wbr元素,wbr元素表示软换行。wbr元素与br元素的区别是: br元素表示此处必须换行,而wbr元素的意思是浏览器窗口或父级元素的宽度足够宽时不进行换行,而当宽度不够时,主动在此处换行。

<p>... <wbr></p>

                             canvas元素,canvas元素表示图形, 比如图标和其他图像,仅提供画布,但它把一个绘图API展现给客户端javascript,以使脚本想把绘制的东西绘制到这块画布上。


//HTML5中的代码示例

<canvas id="myCanvas" width="200" height="200"> </canvas>


//HTML4中的代码示例

<object data="inc/exm.svg" type="image/svg/svg+xml" width="200" height="200"></object>

                             command元素,command元素表示命令按钮,比如单选按钮、复选框或按钮,这是HTML5中新增的功能。

<command onclick="cut()" label="cut">

                             details元素,details元素表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary元素提供标题或图例, 这是HTML5中新增的功能。

<details>
  <summary>HTML 5</summary>
  ...
</details>

                            datalist元素,datalist元素表示可选数据的列表,与input元素配合使用,可以制作输出值的下拉列表。这是HTML5中新增的功能。

<datalist></datalist>

                            datagrid元素,datagrid元素表示可选数据的列表,它以树形的形式来显示,这是HTML5中新增的功能。

<datagrid></datagrid>

                            keygen元素,keygen元素表示生成密钥,这是HTML5中新增的功能。

<keygen>

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

//HTML5中的代码示例

<output></output>


//HTML4中的代码示例

<span></span>

                           source元素,source元素为媒介元素(比如<video>和<audio>)定义媒介资源。

//HTML5中的代码示例

<source>


//HTML4中的代码示例

<param>

                           menu元素,menu元素表示菜单列表,当希望列出表单空间时使用该标签,在HTML4中不被推荐使用。

<menu>
  <li><input type="checkbox">RED</li>
  <li><input type="checkbox">blue</li>
</menu>

    新增的input元素的类型

                         email、url、number、range、Date Pickers

                           Date Pickers:

                           date(年、月、日)

                            month(月、年)

                            week(周和年)

                            time(时间小时和分钟)

                            datetime(选择时间、日、月、年(UTC时间))

                            datetime-local(选取时间、日、月、年(本地时间))。

 

HTML5中新增属性

    表单相关的属性

                        1. 可以对input(type=text)、select、textarea与button元素指定autofocus属性。它是以指定属性的方式让元素在画面打开时自动获得焦点。

                        2. 可以对input(type=text)与textarea元素指定placeholder属性,它会对用户的输入进行提示,提示用户可以输入的内容。

                        3. 可以对input(type=text)与textarea元素指定required属性,该属性表示在用户提交的时候进行检查,检查该元素内一定要有输入内容。

                        4. 对input新增的属性:autocomplete、min、max、multiple、pattern与step。

                        5. 对input和button元素新增新属性:formaction、formenctype、formmethod、formnovalidate与formtarget。为fieldset元素增加了disabled属性,可以把它的子元素设为disabled状态。

                        6. 为input、button、form元素增加了novalidate属性,该属性可以取消提交时进行的有关检查,表单可以被无条件地提交。

    链接相关属性

                        1. 为a与area增加了media属性,该属性规定目标URL是什么类型的媒介/设备进行优化的,在鞥在href属性存在时使用。

                        2.  为area元素增加了hreflang属性与rel属性,以保持与a元素、link元素的一致。

                        3. 为link元素增加了新属性sizes。

                        4. 为base元素增加了target属性,主要目的是保持与a元素的一致性。

    其他属性

                        1. 为ol元素添加reversed,指定列表倒序显示。

                        2. 为meta元素增加charset属性。

                        3. 为menu增加 type和label属性。

                        4. 为style元素增加scoped属性,用来规定样式的作用范围。

                        5. 为script增加async属性 ,定义脚本是否异步执行。

                        6. 为html元素增加属性manifest,开发离线web应用程序时它与其他API结合使用,定义一个URL,在这个URL上描述文档的缓存信息。

                        7. 为iframe元素增加sandbox、seamless、srcdoc,用来提高页面安全性,防止不信任的web页面执行某些操作。

 

几个常用的全局属性

    全局属性

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

    contentEditable

                        contentEditable是一个布尔值属性,主要功能是允许用户编辑元素中的内容,所以该元素是可以获得鼠标焦点的元素,而且在点击鼠标后要向用户提供一个插入符号,提示该元素中的内容允许编辑。

    designMode

                        designMode属性有2个值,"on"和"off",用来指定整个页面是够可编辑,当页面编辑时,任何支持上文的contentEditable属性的元素都变成可编辑状态。

document.designMode = "on";

    hidden

                        hidden属性类似于input元素中的hidden元素,功能是通知浏览器不渲染该元素,使该元素处于不可见状态。

    spellcheck

                        spellcheck是HTML5针对input(type=text)与textarea这2个文本输入框提供的一个新属性,它对用户输入的文本内容进行拼写和语法检查。  spellcheck属性是一个布尔属性值,特别的是使用这个属性时必须声明属性值为true或false。

                        注意!!! 元素为readOnly属性或disabled属性设为true时,不执行拼写检查。

    tabindex

                        tabindex是开发中的一个基本概念,当不断敲击Tab键让窗口或页面中的控件获得焦点,对窗口或页面中的所有控件进行遍历的时候,每一个控件的tabindex表示该控件是第几个被访问到的。作用二是在默认情况下,只有链接元素与表单元素可以通过按键获得焦点。但是有副作用,脚本中执行focus()语句可以获得焦点,该元素也可以通过按Tab键获得焦点。所以把元素tabindex值设为负数(-1)。

 

参考资料

【中】陆凌牛 著  机械工业出版社《HTML5 与 CSS3 权威指南》

 

转载时请注明:来自w-rain的个人博客

© 著作权归作者所有

w-rain
粉丝 27
博文 54
码字总数 46502
作品 0
成都
程序员
私信 提问
加载中

评论(2)

w-rain
w-rain 博主

引用来自“陈明思”的评论

有两个meta打成meata
0我已修正,谢谢。
陈明思
陈明思
有两个meta打成meata
HTML4 和 HTML5 的10个关键区别

HTML5是HTML标准的下一个版本。越来越多的程序员开始HTML5来构建网站。如果你同时使用HTML4和HTML5的话 ,你会发现用HTML5从头构建,比从HTML4迁移到HTML5要方便很多。虽然HTML5没有完全颠覆...

虫虫
2011/10/13
90.5K
14
W3C 接连推出 7 个 HTML 草案

最近 W3C 一口气推出 7 个 HTML 工作草案,涵盖了 HTML5,HTML RDF,HTML Microdata,HTML Canvas, HTML Bidi 等标准。这些草案多数与 HTML5 有关,虽然 HTML5 标准的真正发布与实现还有很远...

红薯
2010/03/10
441
0
HTML5标签语法变化和使用概念(1)

HTMl5标签与HTML4标签区别 (1)概念的变化: HTML5专注内容与结构,而不专注的表现 (2)声明与标签 HTML5在更多的声明的标签上面做了简化,也对兼容做了详细的规定,废除了部分元素,增加了...

跃跃
2012/07/13
85
0
HTML4和HTML5之间的10个主要不同

本文是从 10 Essential Differences Between HTML4 and HTML5 这篇文章翻译而来。 HTML5是最新的HTML标准,或迟或早,所有的web程序员都会发现需要使用到这个最新的标准,而且,很多人都会感...

红薯
2011/11/17
2.6K
4
十道或许你不熟练的前端HTML5的经典面试题

1.什么是HTML5?  答:HTML5是最新的HTML标准。   注意:讲述HTML5推出的设计目的,以及现在市场的使用情况,浏览器支持情况等。。。。 设计目的   HTML5的设计目的是为了在移动设备上支...

懿左左
2018/06/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

基于CentOS7搭建GitLab

基于CentOS7搭建GitLab 12018.11.02 16:38:51字数 959阅读 3791 本文作者:蓝雄威,叩丁狼高级讲师。原创文章,转载请注明出处。 一、简介 Git Lab GitLab是利用 Ruby on Rails 一个开源的版...

linjin200
10分钟前
2
0
random生成随机数

随机生成0到100之间的10个随机数,然后使用冒泡排序将这10个数按从小到大的顺序排序 生成10个随机数 import randomnum = range(0, 100) # 范围在0到100之间,需要用到range()函数。nums...

彩色泡泡糖
13分钟前
1
0
kubernetes 环境搭建 —— kubeadm

主从节点需要安装的服务 Master 节点 Node 节点 etcd-master Control plane(如:calico,fannel) kube-apiserver kube-proxy kube-controller-manager other apps kube-dns Control plane(如:......

lemos
16分钟前
1
0
php将字符串中的中英文数字分割

$str = "php如何将字 符串中322的字母数字Asf f45d和中文_分割?"; $arr = preg_split("/([a-zA-Z0-9]+)/", $str, 0, PREG_SPLIT_NO_EMPTY | PREG_SPLIT_DELIM_CAPTURE); print_r($arr); Arr......

小小小壮
17分钟前
1
0
茑屋书店理解(一)

说到实体书店,你可能会想到两个字“难做”。一是电子书大为盛行,二是纸书作为标准品,完全可以在网上购买,因此国内许多实体书店的日子是举步维艰。但是在日本有这么一家实体书店,目前已经...

Idea
20分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部