页面内容

Html

class Cake\View\Helper\HtmlHelper(View $view, array $config = [])

CakePHP 中 HtmlHelper 的作用是使 HTML 相关选项更容易、更快、更能抵抗变化。使用此助手将使您的应用程序更加轻便，并且在与域根目录相关的放置位置方面更加灵活。

许多 HtmlHelper 方法包括 $attributes 参数，允许您在标签上附加任何额外的属性。以下是一些使用 $attributes 参数的示例

Desired attributes: <tag class="someClass" />
Array parameter: ['class' => 'someClass']

Desired attributes: <tag name="foo" value="bar" />
Array parameter:  ['name' => 'foo', 'value' => 'bar']

插入格式良好的元素

HtmlHelper 完成的最重要的任务是创建格式良好的标记。本节将介绍 HtmlHelper 的一些方法以及如何使用它们。

创建字符集标签

Cake\View\Helper\HtmlHelper::charset($charset=null)

用于创建一个元标签，指定文档的字符集。默认值为 UTF-8。一个示例用法

echo $this->Html->charset();

将输出

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

或者，

echo $this->Html->charset('ISO-8859-1');

将输出

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

链接到 CSS 文件

Cake\View\Helper\HtmlHelper::css(mixed $path, array $options = [])

创建指向 CSS 样式表的链接。如果 block 选项设置为 true，则链接标签将添加到 css 块中，您可以在文档的 head 标签内打印该块。

您可以使用 block 选项来控制链接元素将被附加到哪个块。默认情况下，它将附加到 css 块。

如果 $options 数组中的键 ‘rel’ 设置为 ‘import’，则样式表将被导入。

此 CSS 包含方法假设指定的 CSS 文件位于 webroot/css 目录中，如果路径不以 ‘/’ 开头。

echo $this->Html->css('forms');

将输出

<link rel="stylesheet" href="/css/forms.css" />

第一个参数可以是一个数组，用于包含多个文件。

echo $this->Html->css(['forms', 'tables', 'menu']);

将输出

<link rel="stylesheet" href="/css/forms.css" />
<link rel="stylesheet" href="/css/tables.css" />
<link rel="stylesheet" href="/css/menu.css" />

您可以使用 插件语法 包含来自任何已加载插件的 CSS 文件。要包含 plugins/DebugKit/webroot/css/toolbar.css，您可以使用以下方法

echo $this->Html->css('DebugKit.toolbar.css');

如果要包含与已加载插件同名的 CSS 文件，您可以执行以下操作。例如，如果您有一个名为 Blog 的插件，并且还想要包含 webroot/css/Blog.common.css，您可以

echo $this->Html->css('Blog.common.css', ['plugin' => false]);

以编程方式创建 CSS

Cake\View\Helper\HtmlHelper::style(array $data, boolean $oneline = true)

根据传递给该方法的数组的键和值构建 CSS 样式定义。尤其适用于 CSS 文件是动态的情况。

echo $this->Html->style([
    'background' => '#633',
    'border-bottom' => '1px solid #000',
    'padding' => '10px'
]);

将输出

background:#633; border-bottom:1px solid #000; padding:10px;

创建元标签

Cake\View\Helper\HtmlHelper::meta(string|array $type, string $url = null, array $options = [])

此方法对于链接到外部资源（如 RSS/Atom 提要和 favicons）很有用。与 css() 一样，您可以通过将 $attributes 参数中的 ‘block’ 键设置为 true（即 - ['block' => true]）来指定是否希望此标签出现在内联或附加到 meta 块中。

如果您使用 $attributes 参数设置“type”属性，CakePHP 包含一些快捷方式

类型

翻译后的值

html

text/html

rss

application/rss+xml

atom

application/atom+xml

icon

image/x-icon

csrfToken

当前的 CSRF 令牌

 
echo $this->Html->meta(
    'favicon.ico',
    '/favicon.ico',
    ['type' => 'icon']
);
// Output (line breaks added)
// Note: The helper code makes two meta tags to  ensure the
// icon is downloaded by both newer and older browsers
// which require different rel attribute values.
<link
    href="/subdir/favicon.ico"
    type="image/x-icon"
    rel="icon"
/>
<link
    href="/subdir/favicon.ico"
    type="image/x-icon"
    rel="shortcut icon"
/>

echo $this->Html->meta(
    'Comments',
    '/comments/index.rss',
    ['type' => 'rss']
);
// Output (line breaks added)
<link
    href="http://example.com/comments/index.rss"
    title="Comments"
    type="application/rss+xml"
    rel="alternate"
/>

此方法还可以用于添加元关键字和描述。示例

echo $this->Html->meta(
    'keywords',
    'enter any meta keyword here'
);
// Output
<meta name="keywords" content="enter any meta keyword here" />

echo $this->Html->meta(
    'description',
    'enter any meta description here'
);
// Output
<meta name="description" content="enter any meta description here" />

echo $this->Html->meta('csrfToken');
// The CsrfProtection middleware must be loaded for your application
<meta name="csrf-token" content="CSRF token here" />

除了创建预定义的元标签之外，您还可以创建链接元素

<?= $this->Html->meta([
    'link' => 'http://example.com/manifest',
    'rel' => 'manifest'
]);
?>
// Output
<link href="http://example.com/manifest" rel="manifest"/>

以这种方式调用 meta() 时提供的任何属性都将添加到生成的链接标签中。

Changed in version 5.1.0: 添加了 csrfToken 类型。

链接到图片

Cake\View\Helper\HtmlHelper::image(string $path, array $options = [])

创建一个格式化的图片标签。提供的路径应相对于 webroot/img/。

echo $this->Html->image('cake_logo.png', ['alt' => 'CakePHP']);

将输出

<img src="/img/cake_logo.png" alt="CakePHP" />

要创建图片链接，请使用 $attributes 中的 url 选项指定链接目标。

echo $this->Html->image("recipes/6.jpg", [
    "alt" => "Brownies",
    'url' => ['controller' => 'Recipes', 'action' => 'view', 6]
]);

将输出

<a href="/recipes/view/6">
    <img src="/img/recipes/6.jpg" alt="Brownies" />
</a>

如果您在电子邮件中创建图片，或者想要图片的绝对路径，您可以使用 fullBase 选项

echo $this->Html->image("logo.png", ['fullBase' => true]);

将输出

<img src="http://example.com/img/logo.jpg" alt="" />

您可以使用 插件语法 包含来自任何已加载插件的图片文件。要包含 plugins/DebugKit/webroot/img/icon.png，您可以使用以下方法

echo $this->Html->image('DebugKit.icon.png');

如果要包含与已加载插件同名的图片文件，您可以执行以下操作。例如，如果您有一个名为 Blog 的插件，并且还想要包含 webroot/img/Blog.icon.png，您可以

echo $this->Html->image('Blog.icon.png', ['plugin' => false]);

如果您希望 URL 的前缀不是 /img，您可以通过在 $options 数组中指定前缀来覆盖此设置

echo $this->Html->image("logo.png", ['pathPrefix' => '']);

将输出

<img src="logo.jpg" alt="" />

链接到视频和音频文件

Cake\View\Helper\HtmlHelper::media(string|array $path, array $options)

选项

  • type 要生成的媒体元素类型，有效值为“audio”或“video”。如果未提供类型，则会根据文件的 MIME 类型猜测媒体类型。

  • text 要包含在视频标签中的文本。

  • pathPrefix 用于相对 URL 的路径前缀，默认为“files/”。

  • fullBase 如果提供，则 src 属性将获得一个完整的地址，包括域名。

返回格式化的音频/视频标签。

 <?= $this->Html->media('audio.mp3') ?>

 // Output
 <audio src="/files/audio.mp3"></audio>

 <?= $this->Html->media('video.mp4', [
     'fullBase' => true,
     'text' => 'Fallback text'
 ]) ?>

 // Output
 <video src="http://www.somehost.com/files/video.mp4">Fallback text</video>

<?= $this->Html->media(
     ['video.mp4', ['src' => 'video.ogg', 'type' => "video/ogg; codecs='theora, vorbis'"]],
     ['autoplay']
 ) ?>

 // Output
 <video autoplay="autoplay">
     <source src="/files/video.mp4" type="video/mp4"/>
     <source src="/files/video.ogg" type="video/ogg;
         codecs='theora, vorbis'"/>
 </video>

链接到 Javascript 文件

Cake\View\Helper\HtmlHelper::script(mixed $url, mixed $options)

包含本地或远程 URL 中包含的脚本文件。

默认情况下，脚本标签会添加到文档中。如果通过将 $options['block'] 设置为 true 来覆盖此设置，则脚本标签将改为添加到 script 块中，你可以在文档中的其他位置打印该块。如果你希望覆盖使用的块名称，可以通过设置 $options['block'] 来实现。

$options['once'] 控制是否要对每个请求包含此脚本一次或多次。默认值为 true。

可以使用 $options 为生成的脚本标签设置其他属性。如果使用脚本标签数组，则属性将应用于所有生成的脚本标签。

这种 JavaScript 文件包含方法假设指定的 JavaScript 文件位于 **webroot/js** 目录中。

echo $this->Html->script('scripts');

将输出

<script src="/js/scripts.js"></script>

也可以链接到具有绝对路径的文件，以链接不在 **webroot/js** 中的文件。

echo $this->Html->script('/otherdir/script_file');

还可以链接到远程 URL。

echo $this->Html->script('https://code.jquery.com/jquery.min.js');

将输出

<script src="https://code.jquery.com/jquery.min.js"></script>

第一个参数可以是一个数组，用于包含多个文件。

echo $this->Html->script(['jquery', 'wysiwyg', 'scripts']);

将输出

<script src="/js/jquery.js"></script>
<script src="/js/wysiwyg.js"></script>
<script src="/js/scripts.js"></script>

可以使用 block 选项将脚本标签追加到特定块。

$this->Html->script('wysiwyg', ['block' => 'scriptBottom']);

在布局中，可以输出添加到“scriptBottom”的所有脚本标签。

echo $this->fetch('scriptBottom');

可以使用 插件语法 从任何加载的插件中包含脚本文件。要包含 **plugins/DebugKit/webroot/js/toolbar.js**，可以使用以下方法。

echo $this->Html->script('DebugKit.toolbar.js');

如果你想包含一个与加载的插件同名的脚本文件，可以执行以下操作。例如，如果你有一个 Blog 插件，并且还想要包含 **webroot/js/Blog.plugins.js**，则可以使用以下方法。

echo $this->Html->script('Blog.plugins.js', ['plugin' => false]);

创建内联 Javascript 块

Cake\View\Helper\HtmlHelper::scriptBlock($code, $options = [])

要从 PHP 视图代码中生成 Javascript 块，可以使用脚本块方法之一。脚本可以就地输出，也可以缓冲到块中。

// Define a script block all at once, with the defer attribute.
$this->Html->scriptBlock('alert("hi")', ['defer' => true]);

// Buffer a script block to be output later.
$this->Html->scriptBlock('alert("hi")', ['block' => true]);
Cake\View\Helper\HtmlHelper::scriptStart($options = [])
Cake\View\Helper\HtmlHelper::scriptEnd()

可以使用 scriptStart() 方法创建一个捕获块，该块将输出到 <script> 标签中。捕获的脚本片段可以内联输出，也可以缓冲到块中。

// Append into the 'script' block.
$this->Html->scriptStart(['block' => true]);
echo "alert('I am in the JavaScript');";
$this->Html->scriptEnd();

缓冲 Javascript 后，可以像处理其他 视图块 一样输出它。

// In your layout
echo $this->fetch('script');

创建嵌套列表

Cake\View\Helper\HtmlHelper::nestedList(array $list, array $options = [], array $itemOptions = [])

从关联数组构建嵌套列表（UL/OL）。

$list = [
    'Languages' => [
        'English' => [
            'American',
            'Canadian',
            'British',
        ],
        'Spanish',
        'German',
    ]
];
echo $this->Html->nestedList($list);

输出

// Output (minus the whitespace)
<ul>
    <li>Languages
        <ul>
            <li>English
                <ul>
                    <li>American</li>
                    <li>Canadian</li>
                    <li>British</li>
                </ul>
            </li>
            <li>Spanish</li>
            <li>German</li>
        </ul>
    </li>
</ul>

创建表标题

Cake\View\Helper\HtmlHelper::tableHeaders(array $names, array $trOptions = null, array $thOptions = null)

创建一行表头单元格，放置在 <table> 标签中。

echo $this->Html->tableHeaders(['Date', 'Title', 'Active']);

输出

<tr>
    <th>Date</th>
    <th>Title</th>
    <th>Active</th>
</tr>

echo $this->Html->tableHeaders(
    ['Date', 'Title','Active'],
    ['class' => 'status'],
    ['class' => 'product_table']
);

输出

<tr class="status">
     <th class="product_table">Date</th>
     <th class="product_table">Title</th>
     <th class="product_table">Active</th>
</tr>

可以为每列设置属性，这些属性将用于代替 $thOptions 中提供的默认属性。

echo $this->Html->tableHeaders([
    'id',
    ['Name' => ['class' => 'highlight']],
    ['Date' => ['class' => 'sortable']]
]);

输出

<tr>
    <th>id</th>
    <th class="highlight">Name</th>
    <th class="sortable">Date</th>
</tr>

创建表单元格

Cake\View\Helper\HtmlHelper::tableCells(array $data, array $oddTrOptions = null, array $evenTrOptions = null, $useCount = false, $continueOddEven = true)

创建表单元格，按行排列，为奇数行和偶数行分配不同的 <tr> 属性。将单个表单元格括在 [] 中以获得特定的 <td> 属性。

echo $this->Html->tableCells([
    ['Jul 7th, 2007', 'Best Brownies', 'Yes'],
    ['Jun 21st, 2007', 'Smart Cookies', 'Yes'],
    ['Aug 1st, 2006', 'Anti-Java Cake', 'No'],
]);

输出

<tr><td>Jul 7th, 2007</td><td>Best Brownies</td><td>Yes</td></tr>
<tr><td>Jun 21st, 2007</td><td>Smart Cookies</td><td>Yes</td></tr>
<tr><td>Aug 1st, 2006</td><td>Anti-Java Cake</td><td>No</td></tr>

echo $this->Html->tableCells([
    ['Jul 7th, 2007', ['Best Brownies', ['class' => 'highlight']] , 'Yes'],
    ['Jun 21st, 2007', 'Smart Cookies', 'Yes'],
    ['Aug 1st, 2006', 'Anti-Java Cake', ['No', ['id' => 'special']]],
]);

输出

<tr>
    <td>
        Jul 7th, 2007
    </td>
    <td class="highlight">
        Best Brownies
    </td>
    <td>
        Yes
    </td>
</tr>
<tr>
    <td>
        Jun 21st, 2007
    </td>
    <td>
        Smart Cookies
    </td>
    <td>
        Yes
    </td>
</tr>
<tr>
    <td>
        Aug 1st, 2006
    </td>
    <td>
        Anti-Java Cake
    </td>
    <td id="special">
        No
    </td>
</tr>

echo $this->Html->tableCells(
    [
        ['Red', 'Apple'],
        ['Orange', 'Orange'],
        ['Yellow', 'Banana'],
    ],
    ['class' => 'darker']
);

输出

<tr class="darker"><td>Red</td><td>Apple</td></tr>
<tr><td>Orange</td><td>Orange</td></tr>
<tr class="darker"><td>Yellow</td><td>Banana</td></tr>

更改 HtmlHelper 输出的标签

Cake\View\Helper\HtmlHelper::setTemplates(array $templates)

加载模板数组以添加/替换模板。

// Load specific templates.
$this->Html->setTemplates([
    'javascriptlink' => '<script src="{{url}}" type="text/javascript"{{attrs}}></script>'
]);

可以使用模板器直接加载包含模板的配置文件。

// Load a configuration file with templates.
$this->Html->templater()->load('my_tags');

加载模板文件时，文件应如下所示。

<?php
return [
    'javascriptlink' => '<script src="{{url}}" type="text/javascript"{{attrs}}></script>'
];

警告

包含百分号 (%) 的模板字符串需要特别注意，你应该在该字符前添加另一个百分号，使它看起来像 %%。原因是模板在内部被编译成使用 sprintf()。例如：<div style="width:{{size}}%%">{{content}}</div>