由 Visualforce 添加或修改的 HTML 标签

默认情况下，Visualforce 自动将所需的 HTML 标记添加到页面，以确保结果是有效的 HTML（和 XML） 公文。您可以放松甚至覆盖此行为。

对于使用此自动行为的页面，Visualforce 会在两个上下文中添加 HTML 标记：更简单的请求上下文（最初加载页面时）和 呈现;和上下文， 当一个是 提交回来，使用标记发出 Ajax 请求，依此类推。GETPOSTBACK<apex:form><apex:actionXXX>

在上下文中，Visualforce 呈现的 HTML 有些宽松。它添加标签来包装页面，标签来包装页面的标题，以及添加到 页面使用 或 和 标记来包装页面的内容。GET<html><head><apex:stylesheet><apex:includeScript><body>

由其他 Visualforce 标记生成的 HTML 将是完整且有效的 HTML，并且您不能使用无效的静态 XML 保存 Visualforce 页面。 但是，HTML 由访问控制器方法、sObject 字段和其他的表达式添加 非 Visualforce 源未经验证 由 Visualforce 在返回之前。它 因此，可以通过请求返回无效的 XML 文档。GET

在上下文中，Visualforce 更加严格。因为 请求的内容可能需要插入到现有的 DOM 中，响应 HTML 是 后处理以确保其有效。这种“整理”修复了缺失和未关闭的标签，删除了 无效的标记或属性，否则会清除无效的 HTML，以便干净地插入 添加到它返回到的任何页面的 DOM 中。此行为旨在确保标记 更新现有 DOM（例如 ）可以可靠地工作。POSTBACK<apex:actionHandler>

HTML5 文档类型的轻松整理

要放宽导致问题的 HTML5 应用程序的默认 HTML 整理，请将 到 “html-5.0” 和 API 版本设置为 28.0 或更高版本。

docType

从 API 版本 28.0 开始，Visualforce 页面的整理行为因上下文而异，因此不会剥离 HTML5 标记和属性 離開。Visualforce 始终验证 XML 保存时每个页面的正确性，并要求页面是格式正确的 XML，但 后处理整理不再删除请求的未知标签或属性。这应该使使用 HTML5 和 JavaScript 变得更加容易 广泛使用 HTML 属性的框架。docType=”html–5.0″POSTBACKPOSTBACK

值得记住的是，虽然现代浏览器非常擅长自己整理， 该行为不如呈现有效标记一致。减少 HTML 整理模式代表较小的安全网，以换取 显著提高灵活性。我们建议您仅在 HTML5 上使用这种轻松整理模式 需要它的页面，并带有 HTML 验证和调试工具。html–5.0

注意

在 API 版本 28.0 或更高版本中，如何确定页面的范围是不同的。将子页面添加到根目录时 页面使用 ，如果 中有任何页面 hierarchy 设置为 并且根页面设置为 API 版本 28.0 或更高版本，则整个页面层次结构为 在模式下渲染。docType<apex:include>docType=”html–5.0″html–5.0

手动覆盖自动 <html> 和 <body> 标记 代

使用标记的 and 属性来禁止自动生成 和标记，以支持添加到页面的静态标记 你自己。

applyHtmlTagapplyBodyTag<apex:page><html><body>下面是一个说明如何操作的示例 这：

<apex:page showHeader="false" sidebar="false" standardStylesheets="false"
    applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">

<html>
    <body>
        <header>
            <h1>Congratulations!</h1>
        </header>
        <article>
            <p>This page looks almost like HTML5!</p>
        </article>
    </body>
</html>

</apex:page>

这些属性彼此独立;您可以以 、 或 unset 的任意组合使用它们。当这两个属性都设置为 时，将保留默认的自动生成 和 标记。当任一设置为 时，您全权负责将相应的标签添加到 标记。在此模式下，Visualforce 不会阻止您创建无意义的标签组合或属性，甚至 现代浏览器适合。truefalsetrue<html><body>false

注意

如果出现以下情况，则始终生成一个部分 必需，而不考虑 和 的值。为 例如，如果使用 OR 标记、设置页面等，则会生成标记。<head>applyHtmlTagapplyBodyTag<head><apex:includeScript><apex:stylesheet>title有一个例外 统治。如果设置为 并且 除 之外的页面，则生成 no。例如， 以下代码会自动添加标记，但不添加节： 行为不应对实际页面造成问题。

applyHtmlTagfalse<apex:includeScript><head><body><head>

<apex:page showHeader="false" applyHtmlTag="false">
<html>
    <apex:includeScript value="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>
</html>
</apex:page>

该属性在设置为 API 的 Visualforce 页面的标记中可用 版本 27.0 或更高版本。该属性在标签上可用 对于设置为 API 的 Visualforce 页面 版本 28.0 或更高版本。它们都有以下附加限制：

applyHtmlTag<apex:page>applyBodyTag<apex:page>

  • 该属性必须设置为页面，例如 .showHeaderfalse<apex:page showHeader=”false”>
  • 该属性必须设置为 “text/html”（默认值）。contentType
  • 使用顶层或最外层标记的值; 并且使用该标记添加的页面上的属性将被忽略。<apex:page>applyHtmlTagapplyBodyTag<apex:include>

创建一个空的 HTML5“容器”页面

当您想要绕过大部分 Visualforce 并添加自己的容器页面时，请使用空容器页面 标记。容器页面对 HTML5 和移动设备特别有用 发展 以及不需要标准 Visualforce 输出的其他 Web 应用。

您使用远程 对象、JavaScript 远程处理或其他 Lightning 平台 API，用于发出服务请求，然后使用 JavaScript 呈现结果。以下代码提供了一个示例容器页以启动 跟。

<apex:page docType="html-5.0" applyHtmlTag="false" applyBodyTag="false"
           showHeader="false" sidebar="false" standardStylesheets="false"
           title="Unused Title">
<html>
    
    <head>
        <title>HTML5 Container Page</title>
    </head>
    
    <body>
        <h1>An Almost Empty Page</h1>
  
        <p>This is a very simple page.</p>
    </body>
    
</html>
</apex:page>

该组件及其属性是 容器页面定义的核心。

<apex:page>

  • docType=”html-5.0″将页面设置为使用 现代 HTML5 文档类型。
  • applyHtmlTag=”false”并告诉 Visualforce 您的标记供应 和标记，这样它就不会生成自己的标记。applyBodyTag=”false”<html><body>注意如果将 或 设置为 false，则组件的属性为 忽视。applyHtmlTagapplyBodyTagtitle<apex:page>
  • 、 和 属性禁止显示标准标题、侧边栏、 以及将 Salesforce 用户界面和视觉设计添加到 Visualforce 的样式表 页面。它还会抑制 JavaScript 资源，例如有助于重定向的脚本 会话超时。showHeader=”false”sidebar=”false”standardStylesheets=”false”

容器页面中不需要该标记，但 包含它是个好主意。如果必须向元素添加值，则必须自行添加标记。在这种情况下，Visualforce 会将其任何必需的值添加到您的 .否则，Visualforce 会自行渲染以添加任何必要的值。<head><head><head><head><head>

您可以使用 Visualforce 组件， 例如 、 和 ，以引用页面上的静态资源。将 和 的输出添加到元素中。如果您没有添加一个，Visualforce 会添加自己的。输出将呈现在您放置的任何位置 页面。<apex:includeScript><apex:stylesheet><apex:image><apex:includeScript><apex:stylesheet><head><apex:image>

注意

“空”的 Visualforce 页面呈现了最少数量的 HTML 标记，但事实并非如此 完全是空的，或者没有你无法控制的资源。必不可少的 JavaScript 代码 仍添加了 Visualforce，例如 instrumentation。Visualforce 还会自动添加 添加标记所需的资源。例如，对 Remote 的引用 对象或 JavaScript 远程处理资源（如果在代码中使用它们）。

使用自定义文档类型

您可以使用标记上的属性为 Visualforce 页面指定不同的“文档类型”（文档类型或 DTD）。这将更改文档类型 声明。如果您使用 HTML5，并且还可能允许您解决浏览器兼容性问题。

docType<apex:page>

默认情况下，Visualforce 页面的文档类型为 HTML 4.01 Transitional。具体说来 页面以以下 DocType 声明开头：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

您可以使用标记上的属性为 Visualforce 页面指定不同的文档类型。docType<apex:page>

该属性采用 一个表示文档类型的字符串。字符串的格式 是：docType

<doctype>-<version>[-<variant>]

哪里

  • doctype是 或htmlxhtml
  • version是十进制版本 对doctype
  • variant，如果包括，则为：
    • strict、 或 对于所有文档类型和文档类型，或者transitionalframesethtmlxhmtl-1.0
    • <空白>或文档类型basicxhmtl-1.1

如果指定了无效的文档类型，则使用默认文档类型。有关的更多信息 有效的 HTML 文档类型，请参阅 W3C 网站上的列表。

注意

在 API 28.0 及更高版本中，如何确定页面的范围取决于整个页面层次结构，而不仅仅是主页。 使用标记将页面添加到主页时，如果层次结构中的任何页面设置为 ，则整个页面 层次结构在该模式下呈现。docType<apex:include>docType=”html-5.0″

自定义文档类型示例

要创建具有 XHTML 1.0 Strict 文档类型的 Visualforce 页面，请使用标记上的属性，并指定 值：docType<apex:page>xhtml-1.0-strict

<apex:page docType="xhtml-1.0-strict" title="Strictly XHTML" 
    showHeader="false" sidebar="false">
    <h1>This is Strict XHTML!</h1>
    <p>
        Remember to close your tags correctly:<br/>
        <apex:image url="/img/icon-person.gif" alt="Person icon"/>
    </p>
</apex:page>

注意

Visualforce 不会更改标记 由组件生成以匹配 doctype，也由标准 Salesforce 元素（如 标题和侧边栏。Salesforce 元素有效 对于大多数文档类型，并且与任何文档类型一起正常运行，但是如果您选择严格 doctype 并希望通过 HTML 验证测试，您可能需要禁止或 替换标准 Salesforce 元素。

使用自定义 ContentType

您可以使用标签上的属性为 Visualforce 页面指定不同的格式。这会将响应的 HTTP 标头设置为 页面的属性。

ContentType<apex:page>Content-TypeContentType该属性采用多用途 Internet 邮件扩展 （MIME） 媒体类型作为值，例如 、 、 或。

ContentTypeapplication/vnd.ms-exceltext/csvimage/gif

注意

浏览器可以行为 如果您设置了无效的 .有关有效 MIME 媒体类型的详细信息，请参阅 http://www.iana.org/assignments/media-types/。ContentType

Microsoft Excel 内容类型示例

要在 Microsoft Excel 电子表格中显示 Visualforce 页面数据，请使用标记上的属性，并指定 的值。contentType<apex:page>application/vnd.ms-excel

例如，以下页面构建了一个简单的联系人列表。这是一个简化的 在页面中构建数据表中所示示例的版本。

<apex:page standardController="Account">

  <!-- This page must be accessed with an Account Id in the URL. For example: 
       https://<salesforceInstance>/apex/myPage?id=001D000000JRBet -->

    <apex:pageBlock title="Contacts">
        <apex:pageBlockTable value="{!account.Contacts}" var="contact">
            <apex:column value="{!contact.Name}"/>
            <apex:column value="{!contact.MailingCity}"/>
            <apex:column value="{!contact.Phone}"/>
        </apex:pageBlockTable>
    </apex:pageBlock>
</apex:page>

若要在 Excel 中显示此页，请将属性添加到标记中，如下所示：contentType<apex:page>

<apex:page standardController="Account" contentType="application/vnd.ms-excel">
    <apex:pageBlock title="Contacts">
        <apex:pageBlockTable value="{!account.Contacts}" var="contact">
            <apex:column value="{!contact.Name}"/>
            <apex:column value="{!contact.MailingCity}"/>
            <apex:column value="{!contact.Phone}"/>
        </apex:pageBlockTable>
    </apex:pageBlock>
</apex:page>

如果页面在 Excel 中无法正确显示，请尝试其他 MIME 类型，如 .text/csv

在 Visualforce 组件上设置自定义 HTML 属性

您可以添加任意属性 到许多 Visualforce 组件 被“传递”到呈现的 HTML。例如，当将 Visualforce 与 JavaScript 一起使用时，这很有用 框架，例如 jQuery Mobile、AngularJS 和 Knockout，它们使用或其他属性作为钩子来激活框架 功能。

data-*传递属性还可用于提高 HTML5 功能（如“幻影”文本、客户端验证和帮助文本属性）的可用性。

placeholderpatterntitle

重要

这 HTML5 功能的行为由用户的浏览器决定，而不是由 Visualforce 决定，并且各不相同 从浏览器到浏览器。如果要使用这些功能，请尽早测试 并且通常在您计划支持的每个浏览器和设备上。要向 for 添加传递属性，请执行以下操作 例如，一个组件， 在属性前面加上“html-”，并将属性值设置为 正常。

<apex:outputPanel>

<apex:page showHeader="false" standardStylesheets="false" doctype="html-5.0">

    <apex:outputPanel layout="block" html-data-role="panel" html-data-id="menu">
        <apex:insert name="menu"/>    
    </apex:outputPanel>

    <apex:outputPanel layout="block" html-data-role="panel" html-data-id="main">
        <apex:insert name="main"/>    
    </apex:outputPanel>

</apex:page>

这将生成以下 HTML 输出。

<!DOCTYPE HTML>
<html>
<head> ... </head>
<div id="..." data-id="menu" data-role="panel">
    <!-- contents of menu -->
</div>

<div id="..." data-id="main" data-role="panel">
    <!-- contents of main -->
</div>
</html>

每 以“html-”开头的属性将传递到生成的 HTML，并使用 “html-”已删除。

注意

与内置属性冲突的直通属性 组件生成编译错误。以下 Visualforce 组件支持直通属性。

  • <apex:column>
  • <apex:commandButton>
  • <apex:commandLink>
  • <apex:component>
  • <apex:dataTable>
  • <apex:form>
  • <apex:iframe>
  • <apex:image>
  • <apex:includeScript>
  • <apex:input>
  • <apex:inputCheckbox>
  • <apex:inputField>
  • <apex:inputHidden>
  • <apex:inputSecret>
  • <apex:inputText>
  • <apex:inputTextarea>
  • <apex:messages>
  • <apex:outputField>
  • <apex:outputLabel>
  • <apex:outputLink>
  • <apex:outputPanel>
  • <apex:outputText>
  • <apex:page>
  • <apex:pageBlock>
  • <apex:pageBlockButtons>
  • <apex:pageBlockSection>
  • <apex:pageBlockSectionItem>
  • <apex:pageBlockTable>
  • <apex:panelBar>
  • <apex:panelBarItem>
  • <apex:panelGrid>
  • <apex:sectionHeader>
  • <apex:selectCheckboxes>
  • <apex:selectList>
  • <apex:selectOption>
  • <apex:selectOptions>
  • <apex:selectRadio>
  • <apex:stylesheet>
  • <apex:tab>
  • <apex:tabPanel>

有关各个组件的其他信息，包括 将传递属性添加到其位置的细节 呈现的 HTML，请参阅标准组件参考。创建无法使用支持传递的组件生成的 HTML 标记 属性，结合 Visualforce 标记替换为静态 HTML。例如，要创建 jQuery Mobile ，请将标记与 HTML 标记组合在一起 需要。

listview<apex:repeat>

<ul data-role="listview" data-inset="true" data-filter="true">
    <apex:repeat value="{! someListOfItems}" var="item">
        <li><a href="#">{! item.Name}</a></li>
    </apex:repeat>
</ul>

动态 Visualforce 不支持直通属性。