Revision 1092109 of HTML（超文本标记语言）

<p>{{HTMLSidebar()}}</p>

<p>超文本标记语言HTML，即HyperText Markup Language，是构成网页的最基础的内容，用来创造并以可视化的方式来呈现网页。它决定了一个网页的内容而非功能。</p>

<p>HTML给标准英文文本加上了"标记"。"超文本"指将一个个网页联系起来的链接，它造就了今天万维网的模样。通过在Internet上创建和提交网页，一旦你的网站是联网的，你就是万维网的积极参与者。HTML也支持图片和其他媒体类型。借助HTML，每个人都能创建静态或动态的网站。HTML是一种描述网页文档结构和语义的语言。网页中的内容通过HTML元素标记，如{{HTMLElement("head")}}、{{HTMLElement("title")}}、{{HTMLElement("body")}}、{{HTMLElement("article")}}、{{HTMLElement("section")}}、{{HTMLElement("p")}}、{{HTMLElement("div")}}、{{HTMLElement("span")}}、{{HTMLElement("img")}}、{{HTMLElement("picture")}} 等等，这些元素构成了搭建网站的基础。</p>

<p><span class="seoSummary">此处提供了Web 开发的参考资料。</span></p>

<section class="cleared" id="sect1">
<ul class="card-grid">
 <li><span>HTML 参考</span>

  <p>在我们的<a href="/zh-CN/docs/Web/HTML/Reference">详细参考</a>中，您可以找到所有构建 HTML 的元素和属性的详细信息。</p>
 </li>
 <li><span>HTML 指南</span>
  <p>查看我们的<a href="/zh-CN/docs/Web/Guide/HTML">HTML 开发者指南</a>来了解如何使用 HTML，以及教程和完整的示例。</p>
 </li>
 <li><span>HTML 介绍</span>
  <p>如果您是 Web 开发新手，务必阅读我们的<a href="/zh-CN/docs/Web/HTML/Introduction">介绍</a>了解什么是 HTML 和如何使用它。</p>
 </li>
</ul>

<div class="row topicpage-table">
<div class="section">
<h2 class="Documentation" id="Documentation" name="Documentation">参考</h2>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements">块级元素</a></p>

<p>HTML（超文本标记语言）元素通常分为块级元素或<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements">内联元素</a>。块级元素占据其父级元素（容器）的全部空间，因而创造出一个"块"。这篇文章主要解释块级元素的含义。</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image">跨域图片资源权限</a></p>

<p class="syntaxbox">HTML规范为图片引入了<code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin">crossorigin</a></code>&nbsp;属性，通过适当设置<a href="https://developer.mozilla.org/en-US/docs/Glossary/CORS" title="CORS: It is insecure to allow a webpage to request any resources from any other domains without limitation. CORS (Cross-Origin Resource Sharing) is a system that determines whether to block or fulfill these requests.">CORS</a>头，以&lt;img&gt;元素标签从其他站点引入的图片，可以像本地站点加载的图片一样运用于canvas。</p>

<p class="syntaxbox"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes">跨域设置属性</a></p>

<p class="syntaxbox">在HTML5中，某些提供对<a href="https://developer.mozilla.org/en-US/docs/Glossary/CORS" title="CORS: It is insecure to allow a webpage to request any resources from any other domains without limitation. CORS (Cross-Origin Resource Sharing) is a system that determines whether to block or fulfill these requests.">CORS</a>支持的元素，如&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img" title="The HTML Image Element (&lt;img&gt;) represents an image of the document."><code>&lt;img&gt;</code></a>&nbsp;和<code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" title="The HTML &lt;video&gt; element is used to embed video content. It may contain several video sources, represented using the src attribute or the &lt;source&gt; element; the browser will choose the most suitable one.">&lt;video&gt;</a>，有一个跨域属性（crossOrigin<font face="Open Sans, Arial, sans-serif">属性</font>），该属性允许你设置该元素获取数据时的跨域请求。</code></p>

<p class="syntaxbox"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Controlling_spell_checking_in_HTML_forms">HTML表单中的拼写检查控制</a></p>

<p class="syntaxbox">Firefox 2支持web表单中文本区域（HTML&nbsp;<code>&lt;</code>textarea<code>&gt;</code>&nbsp;元素）和文本字段（HTML&nbsp;<code>&lt;</code>input<code>&gt;</code>&nbsp;元素）的拼写检查。用户可以指定有关属性设置拼写检查是否有效，以及对文本区域和文本字段都进行检查还是只检查文本区域。</p>

<p class="syntaxbox"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video">HTML5视频动态自适应HTTP流</a></p>

<p class="syntaxbox">动态自适应HTTP流（DASH）是自适应流媒体传输协议的一种。协议允许视频流根据网络性能改变比特率，以保证视频正常播放。</p>

<p class="syntaxbox"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Focus_management_in_HTML">HTML中的焦点管理</a></p>

<p class="syntaxbox">在HTML5的工作草案中，DOM节点<a href="https://developer.mozilla.org/en/DOM/document.activeElement" title="en/DOM/document.activeElement">activeElement</a>的属性和<a href="https://developer.mozilla.org/en/DOM/document.hasFocus" title="en/DOM/document.hasFocus">hasFocus()</a>方法使得开发者能根据用户行为，更好地处理网页交互。例如，这两者都可以用来做数据统计，统计某一网页上特定链接的点击数，计算某个元素聚焦的时间，等等。另外，当和AJAX技术结合的时候，根据用户操作和网页布局，它们可以把服务端请求次数减至最少。</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">全局属性</a></p>

<p>全局属性可以在所有<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">HTML元素</a>中被指定，甚至是在标准中没有定义的元素中。这说明任何非标准元素仍需要支持全局属性，尽管使用这些元素意味着这个文档不符合HTML5标准。例如，符合HTML5标准的浏览器会隐藏&lt;foo hidden&gt; ...&lt;foo&gt;标签之间的内容，尽管第二个标签&lt;foo&gt;不是一个有效的HTML元素。</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes">HTML属性参考</a></p>

<p>HTML元素有很多<strong>属性</strong>，这些附加值能对元素进行配置或是以各种方式调整它们的行为，以符合用户的标准。</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">HTML元素参考</a></p>

<p>该网页列出了所有HTML元素。</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference">HTML参考</a></p>

<p>HTML是一种描述结构和Web文档语义内容的语言，它由多个<strong>元素</strong>组成，每个元素都可以被多个<strong>属性</strong>修饰。</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements">内联元素</a></p>

<p>HTML（超文本标记语言）元素通常分为”内联”元素和<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements">”块级”元素</a>。内联元素只占据定义内联元素的标签中的空间。以下内容展示了内联元素的影响：</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types">链接类型</a></p>

<p>在HTML中，以下链接类型标识出两个文档间的关系，即一个文档通过使用<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a" title="The HTML &lt;a&gt; Element (or the HTML Anchor Element) defines a hyperlink, the named target destination for a hyperlink, or both."><code>&lt;a&gt;</code></a>,&nbsp;<code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area" title="The HTML &lt;area&gt; element defines a hot-spot region on an image, and optionally associates it with a hypertext link. This element is used only within a &lt;map&gt; element.">&lt;area&gt;</a>或是</code>&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link" title="The HTML Link Element (&lt;link&gt;) specifies relationships between the current document and an external resource. Possible uses for this element include defining a relational framework for navigation. This Element is most used to link to style sheets."><code>&lt;link&gt;</code></a>标签链接到另一个文档。</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats">支持媒体格式的HTML音频和视频元素</a></p>

<p>&lt;audio&gt;和&lt;video&gt;元素支持无插件播放音频和视频媒体内容。</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/microformats">微格式</a></p>

<p><dfn><a href="https://microformats.org/">微格式</a></dfn>&nbsp;（有时缩写为<strong>μF</strong>）是HTML标记某些实体的小模式，这些实体包括人、组织、事件、地点、博客、产品、评论、简历、食谱等。它们是在HTML中嵌套语义的简单协议，且能迅速地提供一套可被搜索引擎，聚合器等其他工具使用的API。</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing">优化页面的预解析</a></p>

<p>传统浏览器中HTML解析器运行在主线程上，并且阻塞在&lt;/script&gt;标签之后，直到script脚本从网络中下载并执行完成。Firefox 4及更新版本中的HTML解析器支持脱离主线程的预解析。在脚本下载和执行的时候，HTML将提前解析。在Firefox 3.5和3.6中，HTML解析器开始优先加载在文档流中识别的脚本，样式表和和图片。然而，在Firefox 4及更新版本中，HTML解析器也预先执行HTML树结构算法。这一做法的优点是当预解析成功时，就不需要重新解析已经扫描过的脚本，样式表和图片。缺点是当预解析失败，就做了许多无用的工作。</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache">使用应用程序缓存</a></p>

<p><a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5">HTML5</a>提供了一个<em>应用缓存</em>机制使得web应用可以离线运行。开发者可以使用<strong>应用缓存</strong>（<em>AppCache</em>）接口指定浏览器需要缓存并提供给离线用户的资源。即使用户在离线时点击刷新按钮，缓存的应用可以也正常加载和工作。</p>

<p><span class="alllinks"><a href="/zh-CN/docs/tag/HTML" title="Article tagged: HTML">查看全部...</a></span></p>
</div>

<div class="section">
<h2 class="Tools" id="Tools" name="Tools">指南和教程</h2>

<dl>
 <dt><a href="/zh-CN/docs/Web/Guide/HTML">HTML 开发者指南</a></dt>
 <dd>MDN 文章介绍了用于构建网页的特定 HTML 技巧，还有教程和其他资料。</dd>
</dl>
</div>
</div>

<p>{{CommunityBox("Web layout", "dev-tech-layout", "mozilla.dev.tech.layout", "", "Stack Overflow|https://stackoverflow.com/questions/tagged/html|HTML topics|Visit Stack Overflow, a collaboratively built and maintained Q&amp;A site. See if you can find an answer; if not, you can ask your question there.")}}</p>
</section>