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

---
title: HTML（超文本标记语言）
slug: Web/HTML
tags:
  - HTML
  - HTML5
  - HTML教程
  - HTML课程
  - Web
  - 主页
  - 参考
  - 学习
translation_of: Web/HTML
---
<p>{{HTMLSidebar}}</p>

<p class="summary"><span class="seoSummary"><strong>HTML</strong>（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 <a href="/zh-CN/docs/Web/CSS">CSS</a>），或功能与行为（如 <a href="/zh-CN/docs/Web/JavaScript">JavaScript</a>）。</span></p>

<p>“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。</p>

<p>HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。HTML 标记包含一些特殊“元素”如 {{HTMLElement("head")}}，{{HTMLElement("title")}}，{{HTMLElement("body")}}，{{HTMLElement("header")}}，{{HTMLElement("footer")}}，{{HTMLElement("article")}}，{{HTMLElement("section")}}，{{HTMLElement("p")}}，{{HTMLElement("div")}}，{{HTMLElement("span")}}，{{HTMLElement("img")}}，{{HTMLElement("aside")}}，{{HTMLElement("audio")}}，{{HTMLElement("canvas")}}，{{HTMLElement("datalist")}}，{{HTMLElement("details")}}，{{HTMLElement("embed")}}，{{HTMLElement("nav")}}，{{HTMLElement("output")}}，{{HTMLElement("progress")}}，{{HTMLElement("video")}} 等等等等。</p>

<p>HTML 元素通过“标签”（tag）将文本从文档中引出，标签由在“<code>&lt;</code>”和“<code>&gt;</code>”中包裹的元素名组成，HTML 标签里的元素名不区分大小写。也就是说，它们可以用大写，小写或混合形式书写。例如，<code>&lt;title&gt;</code> 标签可以写成 <code>&lt;Title&gt;</code>，<code>&lt;TITLE&gt;</code> 或以任何其他方式。</p>

<p>下面的文章会帮助你更好地了解 HTML：</p>

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

  <p>如果您是 Web 开发新手，请务必阅读我们的 <a href="/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML 基础</a> 文章来了解什么是 HTML 以及如何使用它。</p>
 </li>
 <li><span>HTML 教程</span>
  <p>关于如何使用 HTML 的文章，教程和完整的示例，查看我们的 <a href="/zh-CN/docs/Learn/HTML">HTML 学习区</a>。</p>
 </li>
 <li><span>HTML 参考</span>
  <p>在我们丰富的 <a href="/zh-CN/docs/Web/HTML/Reference">HTML 参考</a> 部分中，你可以找到在 HTML 中每一个元素和属性的详细信息。</p>
 </li>
</ul>

<div class="row topicpage-table">
<div class="section">
<h2 class="Tools" id="Tools" name="Tools">初学者教程</h2>

<p>我们的 <a href="/zh-CN/docs/Learn/HTML">HTML 学习区</a> 含有许多富有特色的模块，学习者可以在没有任何先前经验的情况下从零开始，掌握 HTML。</p>

<dl>
 <dt><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML 介绍</a></dt>
 <dd>这一模块将为你打下基础，并为进一步的学习铺平道路。在这里，你将掌握一些重要的概念和语法，学习如何将 HTML 用于文本、如何创建超链接以及运用 HTML 去构建一个网页。</dd>
 <dt><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding">多媒体与嵌入内容</a></dt>
 <dd>这个模块将带领你探索如何使用 HTML 在你的网页中包含多媒体内容，包括通过许多不同的方式嵌入图片，以及如何嵌入视频、音频甚至整个其他网页。</dd>
 <dt><a href="/zh-CN/docs/Learn/HTML/Tables">HTML 表格</a></dt>
 <dd>如何用可理解并易于访问的形式在网页中展示表格化数据一向都是个不小的挑战。这个模块涵盖了基本的表格标记，以及一些更复杂的特性，比如实现标题和总结等。</dd>
 <dt><a href="/zh-CN/docs/Learn/HTML/Forms">HTML 表单</a></dt>
 <dd>表单是构成 Web 世界的重要组成部分——它们提供了大量你所需要用来与网站进行交互所需的功能。比如注册、登录、发送评论反馈、购买商品等等。这个模块将引导你建立一个客户端／前端部分的表单。</dd>
 <dt><a href="/zh-CN/docs/Learn/HTML/Howto">用 HTML 解决常见问题</a></dt>
 <dd>该部分提供了一些链接，它们指向那些你在构建 Web 页面的过程中最常见的问题的解决方法：如何处理网页标题、添加图片或视频、强调某些内容、建立基本的表单等。</dd>
</dl>

<h2 id="高级主题">高级主题</h2>

<dl>
 <dt class="landingPageList"><a href="/zh-CN/docs/Web/HTML/CORS_enabled_image">CORS 处理跨域图片</a></dt>
 <dd class="landingPageList">通过搭配 {{htmlattrxref("crossorigin", "img")}} 属性和适当的 {{glossary("CORS")}} 标头，在 {{HTMLElement("img")}} 元素中定义的图片可以从外部来源加载并在 {{HTMLElement("canvas")}} 元素中使用，就像是从本地源加载一样。</dd>
 <dt class="landingPageList"><a href="/zh-CN/docs/Web/HTML/CORS_settings_attributes">CORS 设置属性</a></dt>
 <dd class="landingPageList">一些提供了对 <a href="/zh-CN/docs/Web/HTTP/Access_control_CORS">CORS</a> 的支持的 HTML 元素，比如 {{HTMLElement("img")}} 或 {{HTMLElement("video")}} ，具有 <code>crossorigin</code> 元素属性／attribute （<code>crossOrigin</code> 对象属性／property），该属性能使你配置其跨域获取资源的请求。</dd>
 <dt class="landingPageList"><a href="/zh-CN/docs/Web/HTML/Focus_management_in_HTML">HTML 中的焦点管理</a></dt>
 <dd class="landingPageList">DOM 属性 <code><a href="/zh-CN/docs/Web/API/Document/activeElement">activeElement</a></code> 以及 DOM 方法 <code><a href="/zh-CN/docs/Web/API/Document/hasFocus">hasFocus()</a></code> 可以帮助你跟踪并控制用户在网页中与各种元素的交互行为。</dd>
 <dt class="landingPageList"><a href="/zh-CN/docs/Web/HTML/Preloading_content">使用 rel="preload" 预加载页面内容</a></dt>
 <dd class="landingPageList">{{htmlelement("link")}} 元素的 {{htmlattrxref("rel", "link")}} 属性的值 <code>preload</code> 允许你在 HTML 的 {{htmlelement("head")}} 部分声明一些（资源）获取请求，以指定那些在页面加载后即刻需要的资源。因此在浏览器的主渲染机制介入前，这些资源会在页面加载生命周期的早期阶段进行预加载。这样可以保证这些资源可被更早使用并减少阻塞页面初次渲染的可能性，从而提升性能。这篇文章提供了关于 <code>preload</code> 作用机制的基本指导。</dd>
</dl>
</div>

<div class="section">
<h2 class="Documentation" id="Documentation" name="Documentation">参考</h2>

<dl>
 <dt class="landingPageList"><a href="/zh-CN/docs/Web/HTML/Reference">HTML 参考</a></dt>
 <dd class="landingPageList">HTML 由<strong>元素</strong>组成，每个元素都可以被多个<strong>属性</strong>修饰。HTML 文档通过<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types">链接</a>相互连接。</dd>
 <dt class="landingPageList"><a href="/zh-CN/docs/Web/HTML/Element">HTML 元素参考</a></dt>
 <dd class="landingPageList">浏览完整的 <a class="glossaryLink" href="/zh-CN/docs/Glossary/HTML">HTML</a> <a class="glossaryLink" href="/zh-CN/docs/Glossary/元素">元素</a>列表。</dd>
 <dt class="landingPageList"><a href="/zh-CN/docs/Web/HTML/Attributes">HTML 属性参考</a></dt>
 <dd class="landingPageList">HTML 元素都含有<strong>元素属性</strong>。这些额外的属性值可以通过各种途径对元素进行配置或调整其行为。</dd>
 <dt class="landingPageList"><a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a></dt>
 <dd class="landingPageList">全局属性可以在所有 <a href="/zh-CN/docs/Web/HTML/Element">HTML 元素</a>上进行设置<em>，包括那些没有在相关标准中出现的元素</em>。这意味着即使这些元素使得文档并不符合 HTML5 标准，它们也必须允许这些属性。</dd>
 <dt class="landingPageList"><a href="/zh-CN/docs/Web/HTML/Inline_elements">内联元素</a>和<a href="/zh-CN/docs/Web/HTML/Block-level_elements">块级元素</a></dt>
 <dd class="landingPageList">HTML 元素通常是"内联"或"块级"元素。一个内联元素仅会占用由定义它的标签所包裹起来的空间。而一个块级元素将会占用其父元素（容器）的全部空间，也就是创建一个“块”。</dd>
 <dt class="landingPageList"><a href="/zh-CN/docs/Web/HTML/Link_types">链接类型</a></dt>
 <dd class="landingPageList">在 HTML 中，各种各样的链接类型被用来确立和定义两个文档之间的关系。可以设置链接类型的链接元素包括 <a href="/zh-CN/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>，<a href="/zh-CN/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>，和 <a href="/zh-CN/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a> 。</dd>
 <dt class="landingPageList"><a href="/zh-CN/docs/Web/HTML/Supported_media_formats">HTML 的 audio 与 video 元素所支持的媒体格式</a></dt>
 <dd class="landingPageList"><a href="/zh-CN/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a> 和 <a href="/zh-CN/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a> 元素允许你播放音频和视频媒体。这些元素提供了一个浏览器原生的对于 Adobe Flash 和其他插件的替代品。</dd>
 <dt class="landingPageList"><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories"> HTML 内容种类</a></dt>
 <dd class="landingPageList">HTML 包含了几种内容，每种内容在特定的情景上下文中有效，而在其他上下文中无效。每种内容也指定了可以被它们包含的类别，以及可以或不可以在其中使用的元素。这里提供了一个关于这些类别的说明。</dd>
 <dt><a href="/zh-CN/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">怪异模式和标准模式</a></dt>
 <dd>关于怪异模式和标准模式的历史信息。</dd>
</dl>

<h2 class="landingPageList" id="相关主题">相关主题</h2>

<dl>
 <dt><a href="/zh-CN/docs/Web/HTML/Applying_color">使用 CSS 为 HTML 元素应用颜色</a></dt>
 <dd>这篇文章涵盖了大多数使用 CSS 为 HTML 内容增加颜色的方式，并列举了 HTML 文档里哪些部分可以进行上色以及这一操作需要使用哪些 CSS 属性。它包含了一些示例，配色建构工具的链接，以及其他内容。</dd>
</dl>
</div>
</div>
</section>