首页 - 互联网

html5，html5教程

作者: 五速梦信息网
时间: 2026年04月04日 13:40

html5，html5教程

1.向后兼容

bigplaintext

text/html

下面是一个能够说明HTML语法的示例文档：

<!doctype html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>Example document</title>

  </head>

  <body>

    <p>Example paragraph</p>

  </body>

</html>

application/xhtml+xmlapplication/xmlhttp://www.w3.org/1999/xhtml

<?xml version="1.0" encoding="UTF-8"?>

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <title>Example document</title>

  </head>

  <body>

    <p>Example paragraph</p>

  </body>

</html>

2.1 符号编码

HTML标准中要求开发声明编码方式，有这些方式可以做到：

Content-Type

XML语法中，开发需要按照XML标准来设置编码。

2.2 Doctype

2.3 MathML和SVG

HTML语法允许文档内嵌MathML和SVG元素。

mathsvgxmlns="http://www.w3.org/2000/svg"mtextforeignObjectmathsvg

一个使用了svg功能的例子如下：

<!doctype html>

<title>SVG in text/html</title>

<p>

 A green circle:

 <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>

</p>

2.4 其它方面

⟨⟩U+27E8U+27E9U+2329U+232Abr&optgroupcolgroup

3. 语言

3.1 新标签

以下标签的引入是为了用于更好的文档结构：

sectionh1h6articlemainasideheaderfooternavfigurefigcaptiontemplatetextareascript type="text/html"script type="text/template"

其它的新标签：

audiovideosourcetrackaudioembedmarkprogressmetertimerubyrtrpbdiwbrcanvasdatalistinputlist

<input list="browsers">

<datalist id="browsers">

 <option value="Safari">

 <option value="Internet Explorer">

 <option value="Opera">

 <option value="Firefox">

</datalist>

keygenoutput

3.2 新属性

表单元素：

inputtypetelsearchurlemaildatetimenumberrangecolorforminputoutputselecttextareabuttonlabelobjectfieldset

<table>

 <tr>

  <th>Key

  <th>Value

  <th>Action

 <tr>

  <td><form id=a><input name=a-key></form>

  <td><input form=a name=a-value>

  <td><button form=a name=a-action value=save>✓</button>

      <button form=a name=a-action value=delete>✗</button>

 ...

</table>

inputtextareaplaceholdertype="hidden"inputselecttextareabuttonautofocusinputselecttextarearequiredselect

<label>Color: <select name=color required>

 <option value="">Choose one

 <option>Red

 <option>Green

 <option>Blue

</select></label>

fieldsetdisablednameinputautocompleteminmaxmultiplepatternstepinput type="image"widthheightinputtextareadirnametextareamaxlengthminlengthwrapformnovalidateinputbuttonformactionformenctypeformmethodformnovalidateformtargetactionenctypemethodnovalidatetargetinputminlengthmaxlength

非表单元素的新属性：

areaalinkhreflangtyperelbaseatargetmetacharsetscriptasynchtmlmanifestlinksizesolreversediframesandboxsrcdocobjecttypemustmatchimgcrossorigin

accesskeyclassdiridlangstyletabindextitlexml:space

contenteditabledata-*hiddenrolearia-*spellchecktranslate

3.3 修改的标签

bemissmallstronguaddressarticlebodyscriptblockquotefootercitedlhrnoscript

3.4. 修改的属性

（译注：大部分是限制放宽，略）

3.5. 废弃的元素

开发不应当使用这些废弃的元素了，但是UA仍应当支持他们。

basefontbigcenterfontstrikett

frameframesetnoframes

这些元素被废弃，因为他们罕有人使用、有其他元素替代或造成了迷惑：

acronymabbrappletobjectisindexdirul

noscriptnoscriptnoscript

3.6. 废弃的属性

这些属性被废弃，你可以在这里找到你能够用以替代的属性或标签。

ashapecoordsrevcharsetareanohrefformacceptheadprofilehtmlversioniframelongdescimgnameinputusemaplinktargetrevcharsetmetaschemeobjectarchiveclassidcodebasecodetypedeclarestandbyparamvaluetypetypetablesummarytdaxisabbrscopethaxis

此外，HTML不再包含纯用于表现的属性，它们应当被CSS替代：

captioniframeimginputobjectlegendtablehrdivh1h2h3h4h5h6pcolcolgrouptbodytdtfootththeadtralignbodyalinklinktextbackgroundtabletrtdthbodybgcolorobjectbordertablecellpaddingcellspacingcolcolgrouptbodytdtfootththeadtrcharcharoffbrcleardlolulcompacttableframeiframeframebordertdthheightimgobjecthspacevspaceiframemarginheightmarginwidthhrnoshadetdthnowraptablerulesiframescrollinghrsizeliultypecolcolgrouptbodytdtfootththeadtrvalignhrtabletdthcolcolgroupprewidth

下列属性允许使用，但不鼓励被使用：

imgborderscriptlanguageJavaScripttypeanameid

4. 内容模型

内容模型即元素的嵌套规则。

内容模型层面，HTML4有这些混乱的规则：

pbodydivtabledlpdisplay

HTML5的内容模型不再使用"inline"和"block-level"的方式区分元素，为避免与CSS类似概念的混淆。然而，比起HTML4，它增加了更多类别，一个元素可以属于任意个数的类别。

HTML5中划分出来的类别如下：

linkscriptspandivasidesectionh1spanimgimgiframesvgabuttonlabel

body

更多变化包括：

addressheaderfooteraddressobjectheadnoscripttabletheadtbodytfoottroluldltabletfootcaptiontablethheaderfooteraaadivinsdelobjectparamobjectembedmapmapareaareamaplegendfieldset

5. API

HTML5引进、修改、扩展、废弃了很多API。

5.1 新增接口

HTML5为了帮助创建Web App，引入了一些新的接口：

videoaudiosetCustomValidityregisterProtocolHandlerregisterContentHandlercontenteditableHistoryatob()btoa()AddSearchProvider()IsSearchProviderInstalled()Externalprint()

（译注：下列接口是很早就有，属于BOM中的共识部分，直到HTML5才加入标准）

LocationsetTimeout()setInterval()alert()confirm()prompt()WindowNavigator

5.2 修改的接口

如下DOM 2的接口已被改动：

document.titledocument.domaindocument.open()window.open()document.close()document.write()document.writeln()document.open()document.getElementsByName()nameHTMLFormElementelementsHTMLFormControlsCollectionbuttonfieldsetinputkeygenobjectoutputselecttextareaHTMLSelectElementadd()HTMLSelectElementremove()click()focus()blur()aareahrefHTMLAnchorElementHTMLAreaElementtoString

5.3 Document扩展

HTMLDocumentDocumentDocumentDocument

Document

locationlastModifiedreadyStatedirheadembedspluginsscriptsactiveElementhasFocusdesignModeexecCommand()queryCommandEnabled()queryCommandIndeterm()queryCommandState()queryCommandSupported()queryCommandValue()onreadystatechangeDocument

HTMLDocumentwindow.HTMLDocumentDocument

5.4 HTMLElement扩展

HTMLElement

data-*datasetclick()focus()blur()accessKeyLabelaccesskeyisContentEditabletranslatehiddentabIndexaccessKeycontentEditablespellcheckstyleHTMLElementElementidclassNameclassListgetElementsByClassName()

5.5 其它接口扩展

DOM Level 2中的其它接口也得到了扩展。

HTMLOptionsCollectionadd()remove()selectedIndexHTMLFormElementcheckValidity()HTMLSelectElementitem()namedItem()labelsselectedOptionsHTMLOptionElementnew Option()HTMLInputElementfilesheightindeterminatelistvalueAsDatevalueAsNumberwidthstepUp()stepDown()labelsHTMLTextAreaElementtextLengthlabelsHTMLButtonElementlabelsHTMLLabelElementcontrolHTMLFieldSetElementtypeelementsHTMLAnchorElementrelListtextHTMLLinkElementrelListHTMLAreaElementrelListHTMLImageElementnew Image()naturalWidthnaturalHeightcompleteHTMLObjectElementcontentWindowHTMLMapElementimagesHTMLTableElementcreateTBody()HTMLIFrameElementcontentWindow

此外：

HTMLLinkElementHTMLStyleElementLinkStyleHTMLAnchorElementHTMLLinkElementHTMLAreaElementURLUtils

5.6 废弃接口

bgColorHTMLBodyElementbgcolorHTMLAppletElementHTMLFrameSetElementHTMLFrameElementHTMLDirectoryElementHTMLFontElementHTMLBaseFontElementisindexHTMLIsIndexElementHTMLDocumentDocumentHTMLDocumentanchorsapplets