赵工的个人空间


专业技术部分转网页计算转业余爱好部分


  网站建设

首页 > 专业技术 > 网站建设 > HTML5修改的主要内容
HTML5的新特性

HTML5于2010年正式推出就受到广泛关注,并以很快的速度推广。HTML5被认为是HTML、CSS和JavaScript结合的产物,在规范下组成一个整体,HTML负责结构,CSS负责呈现,而JavaScript则负责其余一些仍极为重要的工作。 HTML5涉及的内容比较多,需要有一个详细的列表,具体使用时再查询详细内容。

一、标记方法:

1.内容类型:

文件扩展名与内容类型不变,文件扩展名仍为.html或.htm,内容类型仍为text/html。

2.DOCTYPE声明:

不使用版本声明,声明方法不区分大小写,为:
<!DOCTYPE html>

这行代码必须是文件的第一行,前面不能有任何空格或空行,这是激活标准模式的一种方式。如果浏览器支持HTML5,它会强制要求浏览器解释HTML5,如果浏览器不支持HTML5则忽略。

当使用工具时,加入system识别符:
<!DOCTYPE html SYSTEM "about:legacy-compat">

字母不区分大小写,引号不区分单引号或双引号。

3.<html>:

声明文档类型后,必须建立HTML树结构。树的根元素是<html>元素,所有的HTML代码都要放在这个元素中。其中,<html lang="en">表示代码的开始,而</html>则表示结束,所有代码都需要插入这两个标记之间。
<html>标记中的lang属性,只有在HTML5中才需要指定,此属性定义了创建文档内容的人类语言。<html>标记之间的HTML代码主要分成两部分,第一部分是文档头,而第二部分是文档正文。

4.指定字符编码:

可以meta元素直接追加charset属性方式指定字符编码:
<meta charset="UTF-8">

也可以使用HTML4的方法:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

推荐使用UTF-8字符编码。

5.<head>:

在<head>标记内,可以定义网页的标题,声明字符编码方式,提供一些关于文档的信息,以及加入一些外部文件,包括用于显示页面的样式表、脚本或者图像。除了标题与图像外,文档中位于<head>标记之间的其他信息通常都是不可见的。

6.<body>:

正文是文档的可见部分,位于<body>标记之间,是HTML文档的主要组成部分。 HTML提供了多种创建和组织文档正文信息的方法,主要是<table>和<div>。HTML5增加了一些新元素,可以帮助确定文档各部分的作用和主体组织。

7.<meta>:

Meta标记规定文字在屏幕上的显示方式,是文档头的一部分。这个标记有一些简化。
<meta charset="utf-8" />
<meta name="description" content="This is an HTML5 example" />
<meta name="keywords" content="HTML5, CSS3, JavaScript" />
其中,charset属性定义文档字符编码,name属性规定了元数据类型,而content则声明它的值。
文档可能会用到几种用于声明一般信息的meta标记,这些信息不会显示在浏览器的可见窗口中,仅供搜索引擎和设备使用,可能需要预览或汇总文档的相关数据。
在HTML5中,自动闭合标记不一定需要在末尾添加斜线,但是考虑到兼容性,推荐添加自动闭合符号。

8.<title>:

<title>标记可用于指定文档标题。<title>标记之间的文字是整个文档的标题,通常这些文字显示在浏览器的窗口顶部。

9.<link>:

这个元素一般用于添加文档中外部文件的样式、脚本、图像或图标等文件。最常见用途是插入外部CSS文件的样式。
<link rel="stylesheet" href="mystyles.css">
其中,属性rel表示关系,即文档与所添加文件的关系。
在HTML5中,不需要指定所插入样式表的类型,因此不需要添加type属性,只需要指定rel和href属性就能够添加样式文件。

二、标记兼容性:

HTML5语法为了保证与以前的HTML语法兼容,分几种情况处理。

1.不允许写结束标记的元素:

包括area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr,只允许使用<br />这种形式书写,也可以使用<br>。

2.可以省略结束标记的元素:

包括li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th,即</li>这类结束标记可以省略。

3.可以省略全部标记的元素:

包括html、head、body、colgroup、tbody,这些元素可以完全省略,但是以隐式方式存在。比如省略body元素,仍可以使用document.body访问。

4.具有boolean值的属性:

对于disabled与readonly等具有boolean值的属性,当只写属性而不指定属性值时表示为true,不使用该属性表示属性值为false。而将属性名设定为属性值,或将空字符串设定为属性值,也表示属性值设定为true。示例:
<input type="checkbox" checked="checked">
<input type="checkbox" checked="">

5.省略引号:

指定属性值时,两边可以加双引号,也可以加单引号,而且在属性值不包括空格、<、>、=、单引号、双引号等字符时,属性值两边的引号可以省略。示例:
<input type=text>

三、新增的元素和废除的元素:

1.新增结构元素或改变使用功能的元素:

1)section元素:

表示一个页面的一个内容区块,包含文档中最重要的信息,这些信息可能有不同的表现形式,例如划分为几个块或几列,包括章节、页眉、页脚或页面中的其他部分,可以与h1、h2、h3、h4、h5、h6等元素结合使用,标识文档结构。

2)article元素:

表示页面中的一块与上下文不相关的独立内容,一般位于<section>标记之间,可以包含的内容如一个论文帖、一篇杂志文章、一篇博客文章、用户评论等。

作为文档的独立部分,每一个<article>元素的内容都具有独立的结构。为了定义这个结构,可以利用<header>和<footer>标记的丰富功能,这些标记是可移植的,不仅仅能够用于正文中,也能够用于文档的各个节中。

3)aside元素:

表示article元素的内容之外的、与article元素的内容相关的辅助信息, 通常是主信息栏旁边有一个边栏,是一个列或节。

<aside>元素可以位于页面的左边或右边,并没有预定义的位置。<aside>元素可位于布局的任意部分,用于表示任何非文档主要内容的部分,可以在<section>元素中加入一个<aside>元素。

4)header元素:

表示页面中的一个内容区块或整个页面的标题,只用于正文或正文的节。插入<header>元素,表示文档正文和可见内容的开始。

5)footer元素:

表示整个页面或页面中一个内容区块的脚注,表示文档正文的结尾或多个节的结尾,一般会包含作者的姓名、创作日期以及联系信息等。

6)nav元素:

表示页面中导航链接的部分。 可以插入<header>元素中,也可以插入正文的其他节之中。

<nav>可以包含一些导航元素,如主菜单或主导航块,而且是其正确的用法。 <nav>标记之间,通过使用<ul>和<li>元素来创建列表。<ul>元素定义一个列表,其中可以嵌套多个<li>标记,加入不同的文字表示菜单选项。

7)figure元素:

表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元,以更具体地声明文档的内容。比如在正文之后插入了一幅图像,<figure>可以实现可视化补充,以区分它们与其他重要信息的关系。<figure>元素中还有一个<figcaption>元素,用以显示与<figure>相关的标题,并且在元素及其内容之间建立关系。示例:
<figure>
<figcaption>PRC</figcaption>
<p>The People's Republic of China was born in 1949...</p>
</figure>

8)main元素:

表示网页中的主要内容,指与网页标题或应用程序中本页面主要功能直接相关或进行扩展的内容。

9)hgroup元素:

可以使用H标记创建页面标题,<h1>、<h2>、<h3>、<h4>、<h5>和<h6>,但出于内部处理的考虑,以及避免在文档解析时产生多个节或子节,这些标记必须分组,这时使用<hgroup>元素。
H标记必须保持层次结构,这意味着必须先使用<h1>标记声明标题,然后使用<h2>声明副标题,依次类推。HTML5允许重用H标签,在文档各个节重复创建这种层次关系。如果有标题和副标题,或者在同一个<header>元素中加入多个H标题,那么就需要使用<hgroup>元素。

2.新增的其他元素:

除了结构元素,HTML5还新增了其他元素:

1)video元素:

用于定义视频,比如电影片段或其他视频流。

2)audio元素:

用于定义音频,比如音乐或其他音频流。

3)embed元素:

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

4)canvas元素:

表示图形,比如图表和其他图像。仅提供一块画布,需要JavaScript使用绘图API展现给客户端。

5)mark元素:

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

类似功能的元素:<em>应该用于表示强调(替代以前的<i>标记),<strong>用于表示重要性,<mark>用于根据情况突出显示重要的文字,<b>应该只用于其他的情况。<small>元素过去表示小字体文字,HTML5中表示附属细则,如法律细则、负责声明等。

6)progress元素:

表示运行中的进程,可以使用progress元素来显示JavaScript中消耗时间的函数进程。

7)meter元素:

表示度量衡,仅用于已知最大值和最小值的度量。必须定义度量的范围,既可以在元素的文本中,也可以在min/max属性中定义。

8)time元素:

用于表示日期或时间,也可以同时表示日期和时间。

9)ruby元素:

表示ruby注释,中文注音或字符。示例:
<ruby>汉<rt><rp>(</rp>han<rp>)</rp></rt></ruby>

10)rt元素:

表示字符的解释或发音。

11)rp元素:

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

12)wbr元素:

表示软换行。在浏览器窗口或父级元素的宽度足够宽时不进行换行,而当宽度不够时主动在此处进行换行。对字母型语言用处比较大。

13)command元素:

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

14)details元素:

表示用户要求得到并且可以得到的细节信息,可以与summary元素配合使用。summary元素提供标题或图例,标题是可见的,用户点击标题时会显示细节信息。summary元素应为details元素的第一个子元素。示例:
<details>
<summary>HTML5</summary>
This document teaches you everything you have to learn about HTML5.
</details>

15)datalist元素:

表示可选数据的列表,与input元素配合使用,可以制作出输入值的下拉列表。

16)datagrid元素:

表示可选数据的列表,以树形列表的形式显示。

17)keygen元素:

表示生成密钥。 当提交表单时,此私钥存储在本地,公钥发送到服务器。

18)output元素:

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

19)source元素:

为媒介元素(如video、audio)定义媒介资源。

20)menu元素:

表示菜单列表。当希望列出表单控件时使用该标记。示例:
<menu>
<li><input type="ckeckbox"/>Red</li>
<li><input type="ckeckbox"/>Blued</li>
</menu>

21)dialog元素:

表示对话框。

22)cite元素:

<cite>标记可用于显示作品的标题,如图书、电影、歌曲等。

23)address元素:

转变为一个表示地址的结构元素,不仅包括实际地址,也包括网络地址。

3.新增的input元素类型:

包括email、url、number、range、date、month、week、time、datatime、datetime-local等输入文本框类型。

4.废除的元素:

1)能使用CSS替代的元素:

包括basefont、big、center、font、s、strike、tt、u等元素,纯粹表示页面呈现方式,可以使用CSS替代,所以被废除。

2)不再使用frame框架:

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

3)部分浏览器支持的元素:

元素applet、bgsound、blink、marquee元素,因为只有部分浏览器支持,所以被废除。

5.其他被废除的元素及替代方法:

1)废除rb元素,被ruby元素替代。

2)废除acronym元素,使用abbr元素替代。

3)废除dir元素,使用ul元素替代。

4)废除isindex元素,使用form元素与input元素结合来替代。

5)废除listing元素,使用pre元素替代。

6)废除xmp元素,使用code元素替代。

7)废除nextid元素,使用guids替代。

8)废除plaintext元素,使用MIME类型text/plain替代。

四、新增属性和废除的属性:

1.新增的表单相关属性:

1)可以对input(type=text)、select、textarea与button元素指定autofocus属性,让元素在页面打开时自动获得焦点。

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

3)可以对input、output、select、textarea、button、fieldset指定form属性,声明属于哪个表单,然后将其任意放置在页面上任何位置,而不是表单之内。

4)可以对input(type=text)、extarea元素指定required属性,表示在用户提交的时候检查元素内一定要有输入内容。

5)为input元素增加autocomplete、min、max、multiple、pattern、step属性,还有list元素与datalist元素配合使用。其中,multiple允许一次上传多个文件。

6)为input元素新增formaction、formenctype、formmethod、formnovalidate、target属性,可以重载form元素的action、enctype、method、novalidate、target属性。并为fieldset元素增加了disabled属性,用于把其子元素设为无效状态。

7)为input、button、form元素增加了novalidate属性,取消提交时进行有效性检查,可以无条件提交。

8)为所有可使用label的表单元素定义一个labels属性,属性值为一个NodeList对象,代表该元素所绑定的标签元素所构成的集合。

9)可在label元素内部放置一个表单元素,并且通过该label的control属性访问该表单元素。

10)对input、textarea元素,增加SelectionDirection属性,在使用鼠标选取部分文字时获取选取方向。当用户正向选取文字时属性值为forward,当用户反向选取文字时属性值为backward,当用户没有选取任何文字时属性值为forward。

11)对checkbox元素添加indeterminate属性,说明复选框处于尚未明确是否选取的状态。

12)对类型为image的input元素添加指定图片高度和宽度的height和width属性

13)对textarea元素新增用于限定可输入文字个数的maxlength属性,还有指定表单提交时是否在文字换行处添加换行符的wrap属性。

2.新增的链接相关属性:

1)为a、area元素增加media、download、ping属性。media规定目标URL用于优化媒介/设备的类型,download让用户下载目标链接所指向的资源而不是直接打开该目标链接,这些属性只能在href属性存在时使用。

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

3)为link元素增加了sizes属性,可以与icon元素结合使用,指定关联图标的大小。

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

3.新增的其他属性:

1)为ol元素增加start、reversed属性,其中start定义列表的开始编号,reversed指定列表倒序显示。

2)为meta元素增加charset属性,为文档字符编码提供一种良好的方式。

3)为menu元素增加type、label属性,其中label为菜单定义一个可见的标注,type让菜单可以以上下文菜单、工具条、列表菜单三种形式出现。

4)为style元素增加scoped属性,规定样式的作用范围,如只对页面上某个树起作用。

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

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

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

4.废除的属性:

1)废除link、a元素的rev属性,用rel替代。

2)废除link、a元素的charset属性,被链接资源使用Content-type头元素。

3)废除a元素的shape、coords属性,使用area元素替代a元素。

4)废除img、iframe元素的longdesc属性,使用a元素链接到较长描述。

5)废除link元素的target属性,area元素的nohref属性、head元素profile属性、html元素的version属性。都属于多余的属性。

6)废除img元素的name属性,使用id属性替代。

7)废除object元素的archive、classid、codebase、codetype、declare、standby属性,使用data、type属性调用插件,需要设置参数时使用param属性。

8)废除param元素的valuetype、type属性,使用name、value属性替代。

9)废除td、th元素的axis、abbr属性,使用以明确简洁的文字开头后跟详述文字的形式,可以使用title属性使单元格内容变得简短。

10)废除td元素的scope属性,被链接的资源使用Content-type头元素。

11)废除input、div、h1、p等元素的align属性,使用CSS替代。

12)废除body元素的alink、link、text、vlink、background、bgcolor属性,使用CSS替代。

13)废除table元素的align、bgcolor、border、cellpadding、cellspacing、frame、rules、width属性,使用CSS替代。

14)废除tbody、thead、tfoot元素的align、char、charoff、height、nowrap、valign属性,使用CSS替代。

15)废除td、th元素的align、bgcolor、char、charoff、height、nowrap、valign、width属性,使用CSS替代。

16)废除tr元素的align、bgcolor、char、charoff、valign属性,使用CSS替代。

17)废除col、colgroup元素的align、char、charoff、valign、width属性,使用CSS替代。

18)废除object元素的align、border、hspace、vspace属性,使用CSS替代。

19)废除br元素的clear属性,使用CSS替代。

20)废除ol、ul、li元素的compact、type属性,使用CSS替代。

21)废除dl元素的compact属性,使用CSS替代。

22)废除menu元素的compact属性,使用CSS替代。

23)废除pre元素的width属性,使用CSS替代。

24)废除img元素的align、hspace、vspace属性,使用CSS替代。

25)废除hr元素的align、noshade、size、width属性,使用CSS替代。

26)废除iframe元素的align、frameborder、acrolling、marginheight、marginwidth属性,使用CSS替代。

27)废除menu元素的autosubmit属性。

五、全局属性:

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

1.contentEditable属性:

主要功能是允许用户编辑元素中的内容,属性值是是一个布尔值,可以被指定为true或false。使用该元素的属性因此必须是可以获得鼠标焦点的,而且在点击鼠标后要向用户提供一个插入符号,提示用户该元素中的内容允许编辑。
该属性还有一个隐藏的inherit状态,当未指定ture或false时由inherit状态来决定是否可编辑,如果父元素是可编辑的,则该元素就是可编辑的。
该元素同时还具有一个isContentEditable属性,当元素可编辑时,该属性为true;当元素不可编辑时,该属性为false。
支持contentEditable属性的元素包括:defaults、a、abbr、acronym、address、b、bdo、big、blockquote、body、button、center、cite、code、custom、dd、del、dfn、dir、div、dl、dt、em、fieldset、font、form、hn、i、input(button、password、radio、reset、submit、text)、ins、isindex、kbd、label。

2.designMode属性:

用来指定整个页面是否可编辑。当页面可编辑时,页面中任何支持contentEditable属性的元素都变成可编辑状态。designMode属性只能在JavaScript脚本中被编辑修改,该属性有on和off两个值。当该属性为on时页面可编辑;当该属性为off时,页面不可编辑。而使用JavaScript脚本指定designMode属性的方法为:
document.designMode="on";

3.hidden属性:

所有的元素都允许使用hidden属性,以通知浏览器不渲染该元素,从而变为不可见状态。但是元素中的内容还是被浏览器创建的,也就是页面装载后允许使用JavaScript脚本将该属性取消,取消后就变为可见状态,同时元素中的内容也显示出来。hidden属性的值是布尔值,设为true为不可见,设为false为可见。

4.spellcheck属性:

针对input(type=text)、textarea这个两个文本输入框提供的新属性,对用户输入的文本内容进行拼写和语法检查。spellcheck属性的值是一个布尔值,必须明确声明属性值为true或false,但如果元素的readOnly属性或disabled属性设为true,则不执行拼写检查。示例:
<textarea spellcheck="true">

5.tabindex属性:

当不断敲击Tab键可以让窗口或页面中的控件获得焦点。当对窗口或页面中的所有控件遍历时,每一个控件的tabindex表示该控件是第几个被访问到的。如今控件遍历顺序是由元素在页面上的位置决定的。
默认情况下,只有链接元素与表单元素可以通过按键获取焦点,其他元素如果使用tabindex属性后也能获取焦点,这样当脚本中执行focus()语句时就可以让该元素获得焦点,但当使用Tab时使这种元素获得焦点或者并不是设计者希望的。
可以把元素的tabindex值设为负数,通常为-1,这样仍然可以通过编程方式让元素获得焦点,但按下Tab键时该元素就不能获得焦点了。

六、新增的事件:

HTML5对页面、表单、键盘新增了各种事件。

1.对windows对象body元素新增的事件:

1)beforeprint事件:

即将打印之前触发。示例:
<body onbeforeprint="alert('即将打印');">

2)afterprint事件:

打印完毕时触发。

3)resize事件:

浏览器窗口大小发生改变时触发。

4)error事件:

页面加载出错时触发。

5)offline事件:

页面变为离线状态时触发。

6)online事件:

页面变为在线状态时触发。

7)pageshow事件:

页面加载时触发,类似load,但load事件在页面第一次加载时触发,而pageshow是在每次加载时触发,从网页缓存中读取页面时只触发pageshow事件。

8)beforeunload事件:

当前页面被关闭时触发,通知浏览器显示一个用于询问用户是否确实离开本页面的确认窗口,可以设置该窗口中的提示文字。有些浏览器只能显示默认的询问信息,开发者不能修改。示例:
<body onbeforeprint="return '是否确实要离开本页面?';">

9)hashchange事件:

当页面URL地址字符串中的hash部分(#后面的部分)发生改变时触发。比如对下面的链接:
<a href="#a">测试链接</a>

2.mousewheel事件:

是对任何元素都新增的事件,当用户鼠标指针悬停在元素上并滚动鼠标滚轮时触发。

3.scroll事件:

对任何容器元素新增的事件,当元素滚动条被滚动时触发。

4.input事件:

对input、textarea元素新增的事件,当用户修改文本框中内容时触发。input事件与change事件的区别是,input事件在元素尚未失去焦点时已触发,change事件只在元素失去焦点时触发。

5.reset事件:

form元素新增的事件,当用户按下表单元素中的type类型为reset的input元素或JavaScript脚本代码中执行表单对象的reset方法时触发。

七、一个HTML5结构实例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="description" content="This is an HTML5 example">
  <meta name="keywords" content="HTML5, CSS3, JavaScript">
  <title>This text is the title of the document</title>
  <link rel="stylesheet" href="mystyles.css">
</head>
<body>
  <header>
    <h1>This is the main title of the website</h1>
  </header>
  <nav>
    <ul>
      <li>home</li>
      <li>photos</li>
      <li>videos</li>
      <li>contact</li>
    </ul>
  </nav>
  <section>
    <article>
      <header>
        <hgroup>
          <h1>Title of post One</h1>
          <h2>subtitle of the post One</h2>
        </hgroup>
        <time datetime="2016-06-16" pubdate>posted 16-06-2016</time>
      </header>
      This is the text of my first post
      <figure>
        <img src="http://minkbooks.com/content/myimage.jpg">
        <figcaption>
          This is the image of the first post
        </figcaption>
      </figure>
      <footer>
        <p>comments (0)</p>
      </footer>
    </article>
    <article>
      <header>
        <hgroup>
          <h1>Title of post Two</h1>
          <h2>subtitle of the post Two</h2>
        </hgroup>
        <time datetime="2016-06-16" pubdate>posted 16-06-2016</time>
      </header>
      This is the text of my first post
      <footer>
        <p>comments (0)</p>
      </footer>
    </article>
  </section>
  <aside>
    <blockquote>Article number one</blockquote>
    <blockquote>Article number two</blockquote>
  </aside>
  <footer>
    <small>Copyright © 2000-2016 MinkBooks</small>
    <address><a href="http://www.dwenzhao.cn">MySite</a></address>
  </footer>
</body>
<html>

Copyright@dwenzhao.cn All Rights Reserved   备案号:粤ICP备15026949号
联系邮箱:dwenzhao@163.com  QQ:1608288659