path: root/files/zh-cn/conflicting/web/guide/html/html5/index.html

---
title: HTML5 & friends thematic classification
slug: conflicting/Web/Guide/HTML/HTML5
translation_of: Web/Guide/HTML/HTML5
translation_of_original: Web/Guide/HTML/HTML5/HTML5_Thematic_Classification
original_slug: Web/Guide/HTML/HTML5/HTML5_Thematic_Classification
---
<p>这个页面提供了有关HTML5的主题链接，有些链接一般与HTML5关联但实际上并不是HTML标准，为了方便这些内容也被整理到这里。</p>
<h2 id="HTML"><span class="author-g-lqfq0qqpckp8p3co">HTML</span></h2>
<h3 id="Audio_和_video"><span class="author-g-lqfq0qqpckp8p3co">Audio</span><span class="author-g-101xw018h73xu61x"> 和 video</span></h3>
<div class="ace-line">
  Firefox 3.5引入对HTML5&lt;audio&gt;和&lt;video&gt;元素的支持，提供向HTML文档轻松嵌入媒体资源的能力。参考：<span class="author-g-101xw018h73xu61x url"><a href="/en/Using_HTML5_audio_and_video" title="En/Using_audio_and_video_in_Firefox">在 Firefox 中使用audio和video</a></span></div>
<div class="ace-line">
   </div>
<h3 id="Canvas"><span class="author-g-101xw018h73xu61x">Canvas</span></h3>
<p>&lt;Canvas&gt;是HTML新元素，可以用于通过脚本（常用 <a href="../../../../en/JavaScript" rel="internal">JavaScript</a>）绘制图像，例如，它可以用来绘制图表，合成照片甚至实现动画。</p>
<p>参考：</p>
<ul>
  <li><span class="author-g-101xw018h73xu61x url"><a href="/en/HTML/Canvas" title="en/HTML/Canvas">Canvas</a></span> 元素</li>
  <li><a href="/en/Canvas_tutorial" title="en/Canvas tutorial">Canvas 教程</a></li>
</ul>
<h3 id="WebGL_(独立规范)"><span class="author-g-101xw018h73xu61x">WebGL </span>(独立规范)</h3>
<div class="ace-line">
  webGL WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 and can be used in HTML5 {{ HTMLElement("canvas") }} elements.</div>
<div class="ace-line" id="magicdomid483">
  <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/en/WebGL" title="en/WebGL">WebGL</a></span></div>
<h3 id="Inline_SVG_and_MathML"><span class="author-g-101xw018h73xu61x">Inline SVG and MathML</span></h3>
<div class="ace-line">
  HTML5 parsing liberates MathML and SVG from XML and makes them available in the main file format of the Web.</div>
<div class="ace-line" id="magicdomid543">
  <span class="author-g-101xw018h73xu61x">Reference: </span></div>
<ul>
  <li><span class="author-g-101xw018h73xu61x url"><a href="/en/SVG" title="en/SVG">SVG</a></span></li>
  <li><a href="/en/MathML" title="en/MathML">MathML</a></li>
</ul>
<h3 id="New_link_relations"><span class="author-g-101xw018h73xu61x">New link relations</span></h3>
<div class="ace-line" id="magicdomid407">
  Link relations complement the &lt;a&gt; tag and specify why you're pointing to another page.</div>
<div class="ace-line">
  Reference:</div>
<h3 id="Web_forms"><span class="author-g-101xw018h73xu61x">Web forms</span></h3>
<div class="ace-line">
  Form elements and attributes in HTML5 provide a greater degree of semantic mark-up than HTML4 and remove a great deal of the need for tedious scripting and styling that was required in HTML4.</div>
<div class="ace-line" id="magicdomid169">
  <span class="author-g-101xw018h73xu61x">Reference:</span></div>
<ul>
  <li><span class="author-g-101xw018h73xu61x url"><a href="/en/HTML/Forms_in_HTML" title="en/HTML/HTML5/Forms_in_HTML5">Forms in HTML5</a></span></li>
  <li><span class="author-g-101xw018h73xu61x url"><a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">Using files from web applications</a></span></li>
</ul>
<h3 id="Microformats_(separate_specification)"><span class="author-g-101xw018h73xu61x">Microformats (separate specification)</span></h3>
<div class="ace-line" id="magicdomid448">
  Microformats allow web sites to provide semantic data to the browser in order to make it possible to present summaries of the information on a page without having to know how to parse the document itself.</div>
<div class="ace-line">
  Reference: <span class="author-g-101xw018h73xu61x url"><a href="/en/Using_microformats" title="en/Using_microformats">Using microformats</a></span></div>
<div class="ace-line">
  See also: <a class="external" href="http://www.microformats.org" title="http://www.microformats.org">http://www.microformats.org</a></div>
<h3 id="Semantic_tags"><span class="author-g-101xw018h73xu61x">Semantic tags</span></h3>
<div class="ace-line">
  The HTML5 specification brings several new elements to web developers allowing them to describe the structure of a web document with a standard semantics.</div>
<div class="ace-line">
  Reference:</div>
<ul>
  <li><a href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Sections and Outlines of an HTML5 document</a></li>
  <li>{{ HTMLElement("article") }}</li>
  <li>{{ HTMLElement("aside") }}</li>
  <li>{{ HTMLElement("figcaption") }}</li>
  <li>{{ HTMLElement("figure") }}</li>
  <li>{{ HTMLElement("footer") }}</li>
  <li>{{ HTMLElement("header") }}</li>
  <li>{{ HTMLElement("mark") }}</li>
  <li>{{ HTMLElement("nav") }}</li>
  <li>{{ HTMLElement("section") }}</li>
  <li>{{ HTMLElement("time") }}</li>
</ul>
<h2 id="JavaScript_(separate_specifications)"><span class="author-g-lqfq0qqpckp8p3co">JavaScript </span>(separate specifications)</h2>
<h3 id="Client-Side_Storage"><span class="author-g-101xw018h73xu61x">Client-Side Storage</span></h3>
<div class="ace-line">
  Firefox supports the HTML 5 specification for offline caching of web applications' resources and offline storage of data.</div>
<div class="ace-line">
  Reference:</div>
<ul>
  <li><span class="author-g-101xw018h73xu61x url"><a href="/en/Using_the_Application_Cache" title="en/Using_the_Application_Cache">Offline resources in Firefox</a></span></li>
  <li><span class="author-g-101xw018h73xu61x url"><a href="/en/DOM/Storage" title="en/DOM/Storage">DOM Storage</a></span></li>
</ul>
<h3 id="IndexedDB"><span class="author-g-101xw018h73xu61x">IndexedDB</span></h3>
<div class="ace-line" id="magicdomid361">
  <a class="external" href="http://dev.w3.org/2006/webapi/IndexedDB/">IndexedDB</a> is an evolving web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.</div>
<div class="ace-line">
  Reference: <a href="/en/IndexedDB" title="en/IndexedDB">IndexedDB</a></div>
<h3 id="Web_workers_(separate_specification)"><span class="author-g-101xw018h73xu61x">Web workers </span><span class="author-g-101xw018h73xu61x">(separate specification)</span></h3>
<div class="ace-line">
  Workers provide a simple means for web content to run scripts in background threads.  Once created, a worker can send messages to the spawning task by posting messages to an event handler specified by the creator.</div>
<div class="ace-line" id="magicdomid143">
  <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/En/DOM/Using_web_workers" title="En/Using_web_workers">Using web workers</a></span></div>
<h3 id="New_events"><span class="author-g-101xw018h73xu61x">New events</span></h3>
<div class="ace-line">
  In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.</div>
<div class="ace-line" id="magicdomid161">
  <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Online and offline events</a></span></div>
<h3 id="Drag_and_drop"><span class="author-g-101xw018h73xu61x">Drag and drop</span></h3>
<div class="ace-line">
  Firefox and other Mozilla applications support a number of features for handling drag and drop. This allows you the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.</div>
<div class="ace-line">
  Reference: <span class="author-g-101xw018h73xu61x url"><a href="/En/DragDrop/Drag_and_Drop" title="En/DragDrop/Drag_and_Drop">Drag and Drop</a></span></div>
<h3 id="Protocol_handler"><span class="author-g-101xw018h73xu61x">Protocol handler</span></h3>
<div class="ace-line">
  <p>It's fairly common to find web pages link to resources using non-<code>http</code> protocols. You can think of this as a <em>desktop-based</em> protocol handler.</p>
  <p>Reference: <span class="author-g-101xw018h73xu61x url"><a href="/en/Web-based_protocol_handlers" title="en/Web-based_protocol_handlers">Web-based protocol handler</a></span></p>
  <h3 id="Geolocation">Geolocation</h3>
</div>
<div class="ace-line">
  The Geolocation API allows the user to provide their location to web applications if they so desire.  For privacy reasons, the user is asked to confirm permission to report location information.</div>
<div class="ace-line" id="magicdomid294">
  <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/En/Using_geolocation" title="En/Using_geolocation">Using geolocation</a></span></div>
<div class="ace-line">
  <span class="author-g-101xw018h73xu61x url">See also: <a class="external" href="http://dev.w3.org/geo/api/spec-source.html" title="Geolocation Spec">Geolocation Specification</a></span></div>
<div class="ace-line">
  <h3 id="Focus_attributes"><span class="author-g-101xw018h73xu61x">Focus attributes</span></h3>
  <div class="ace-line">
    The focus atributes let a script understand if an element has the focus of the user and then act accordingly.</div>
  <div class="ace-line" id="magicdomid231">
    <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/en/Focus_management_in_HTML" title="en/Focus_management_in_HTML">Focus management in HTML</a></span></div>
  <span class="author-g-101xw018h73xu61x">        </span></div>
<h2 id="CSS_(separate_specifications)"><span class="author-g-lqfq0qqpckp8p3co">CSS</span> (separate specifications)</h2>
<h3 id="New_CSS_selectors"><span class="author-g-101xw018h73xu61x">New CSS selectors</span></h3>
<div class="ace-line">
  The following page shows the CSS3 support in Firefox and the new elements for HTML5.</div>
<div class="ace-line" id="magicdomid759">
  <span class="author-g-101xw018h73xu61x">Ref</span><span class="author-g-101xw018h73xu61x">erence: </span><span class="author-g-101xw018h73xu61x url"><a href="/en/Mozilla_CSS_support_chart" title="en/Mozilla_CSS_support_chart">Mozilla CSS support chart</a></span></div>
<h3 id="Typography">Typography</h3>
<p>The following pages show some of the typography attributes introduced by CSS3.</p>
<div class="ace-line">
  Text wrap:</div>
<ul>
  <li><span class="author-g-101xw018h73xu61x url"><a href="/En/CSS/Word-wrap" title="en/CSS/word-wrap">Word-wrap</a></span></li>
  <li><span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/text-overflow" title="en/CSS/text-overflow">Text-overflow</a></span></li>
  <li><a href="/en/CSS/@font-face" title="En/CSS/@font-face"><span class="author-g-101xw018h73xu61x url">@font-face</span></a></li>
</ul>
<h3 id="Layout"><span class="author-g-101xw018h73xu61x url">Layout</span></h3>
<div class="ace-line" id="magicdomid656">
  <span class="author-g-101xw018h73xu61x">Columns:</span></div>
<ul>
  <li><span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/Using_CSS_multi-column_layouts" title="en/CSS/CSS3_Columns">CSS3 Multi-columns</a></span></li>
  <li><a href="/en/Using_flexbox" title="en/Using_flexbox">Flexbox</a></li>
</ul>
<h3 id="Visual">Visual</h3>
<div class="ace-line">
  The following pages show some of the visual attributes introduced by CSS3.</div>
<ul>
  <li><span class="author-g-101xw018h73xu61x">Opacity:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/opacity" title="en/CSS/opacity">opacity</a></span></li>
  <li><span class="author-g-101xw018h73xu61x">Hue Saturation Color:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/color" title="en/CSS/color">color</a></span></li>
  <li><span class="author-g-101xw018h73xu61x">Rounded Corners:</span> <a href="/en/CSS/border-radius" title="En/CSS/Border-radius">border-radius</a></li>
  <li><span class="author-g-101xw018h73xu61x">Gradients:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/Using_CSS_gradients" title="en/Using_gradients">Using gradients</a></span></li>
  <li><span class="author-g-101xw018h73xu61x">Shadows:</span>
    <ul>
      <li><span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/text-shadow" title="en/CSS/text-shadow">text-shadow</a></span></li>
      <li><span class="author-g-101xw018h73xu61x url"><a href="/En/CSS/Box-shadow" title="En/CSS/Box-shadow">box-shadow</a></span></li>
    </ul>
  </li>
  <li><span class="author-g-101xw018h73xu61x">Background:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/background" title="en/CSS/background">background</a></span></li>
</ul>
<h3 id="Dynamic_effects">Dynamic effects</h3>
<div class="ace-line">
  CSS also introduces dynamic effects:</div>
<ul>
  <li><span class="author-g-101xw018h73xu61x">Transitions:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/CSS_transitions" title="en/CSS/CSS_transitions">CSS transitions</a></span></li>
  <li><span class="author-g-101xw018h73xu61x">Animations:</span> <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS animations</a></li>
  <li><span class="author-g-101xw018h73xu61x">Transforms:</span> <span class="author-g-101xw018h73xu61x url"><a href="/En/CSS/Using_CSS_transforms" title="En/CSS/Using_CSS_transforms">Using CSS transforms</a></span></li>
</ul>
<p>{{ languages( { "ja": "ja/HTML/HTML5/HTML5_Thematic_Classification"} ) }}</p>