Skip to content

HTML 类 ​

Pure\Core\HTML 继承自 Tag 类,专门用于 HTML 标签。

创建 HTML 元素 ​

标准标签来自 Pure\HTML 函数。其他标签名走魔术静态方法,且方法名就是标签名: HTML::myWidget('x') 会创建 <myWidget>x</myWidget>;带连字符的自定义元素使用动态 形式 HTML::{'user-card'}('x')。

1. 函数(标准标签) ​

php
<?php

use function Pure\HTML\{div, p, span};

$div = div('内容');
$p = p('段落');
$span = span('文本')->class('highlight');

函数与标签名一一对应,只有一处例外:与 PHP 关键字同名的标签无法作为函数名,因此 <var> 由 Pure\HTML\htmlVar() 创建。这与 SVG 的 Pure\SVG\svgUse()(<use>) 和 Pure\SVG\svgSwitch()(<switch>)保持一致;魔术静态方法 (HTML::var())同样可以创建该元素。

2. 魔术静态方法(自定义标签) ​

php
<?php

use Pure\Core\HTML;

// 适用于任何标签名:方法名就是标签名
$element = HTML::customTag('内容')->class('custom'); // <customTag class="custom">内容</customTag>
$component = HTML::myWebComponent(HTML::header('Header'));

// 带连字符的自定义元素使用动态形式
$webComponent = HTML::{'user-card'}('内容'); // <user-card>内容</user-card>

使用场景:

  • 自定义 HTML 标签
  • Web 组件
  • 非标准 HTML 元素

保存方法 ​

save(string $path, ?string $header = null): int|false ​

将 HTML 元素保存到文件。省略 $header 时会先写入 <!DOCTYPE html>。

php
<?php

use function Pure\HTML\{html, head, title, body, div};

$page = html(
    head(title('页面标题')),
    body(div('页面内容'))
);

$result = $page->save('output.html');
if ($result !== false) {
    echo "文件保存成功,写入了 {$result} 字节";
}

自闭合标签 ​

HTML 类自动识别以下自闭合标签:

  • area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr
php
<?php

use function Pure\HTML\{img, br, hr};

// 这些标签自动设置为自闭合
img()->src('image.jpg')->alt('图片');
br();
hr();

示例 ​

基本 HTML 结构 ​

php
<?php

use function Pure\HTML\{html, head, meta, title, body, div, h1, p};

$page = html(
    head(
        meta()->charset('UTF-8'),
        meta()->name('viewport')->content('width=device-width, initial-scale=1.0'),
        title('我的页面')
    ),
    body(
        div(
            h1('欢迎'),
            p('这是我的网站。')
        )->class('container')
    )
)->lang('zh-CN');

echo $page;

表单创建 ​

php
<?php

use function Pure\HTML\{form, div, label, input, textarea, button};

$contactForm = form(
    div(
        label('姓名:')->for('name'),
        input()->type('text')->id('name')->name('name')->required(true)
    )->class('form-group'),
    div(
        label('邮箱:')->for('email'),
        input()->type('email')->id('email')->name('email')->required(true)
    )->class('form-group'),
    div(
        label('消息:')->for('message'),
        textarea('')->id('message')->name('message')->rows('5')->required(true)
    )->class('form-group'),
    button('发送消息')->type('submit')
)->method('POST')->action('/contact');

echo $contactForm;

使用魔术方法的自定义组件 ​

php
<?php

use Pure\Core\HTML;

// 创建自定义 Web 组件
$customCard = HTML::cardComponent(
    HTML::cardHeader('卡片标题'),
    HTML::cardBody('卡片内容在这里'),
    HTML::cardFooter('卡片页脚')
)->data_component('card')->class('custom-card');

echo $customCard;

大型列表 ​

php
<?php

use function Pure\HTML\{li, ul};

// 高效生成大型列表
$items = [];
for ($i = 1; $i <= 1000; $i++) {
    $items[] = li("项目 $i");
}

$list = ul($items);
echo $list;

Released under the MIT License