WordPress中文开发手册

WordPress主题开发 — HTML编码标准

#HTML编码标准

验证

所有HTML页面都应该针对W3C验证器进行验证,以确保标记格式正确。这本身并不直接表示良好的代码,但它有助于消除能够通过自动化测试的问题。它不能替代手动代码审查。 (对于其他验证者,请参阅食典中的HTML验证。)

自闭元素

所有标签必须正确关闭。对于可以包装节点(如文本或其他元素)的标签,终止是一项琐碎的任务。对于自动关闭的标签,正斜杠应该有一个空格:

<br />

不正确:

<br/>

W3C指定单个空格应位于自动关闭斜杠(源)之前。

属性和标签

所有标签和属性必须用小写字母写。另外,当其中的文本的目的仅由机器解释时,属性值应该是小写的。对于数据需要人为可读的情况,应遵循适当的标题大写。

对于机器:

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

对于人类:

<a href="http://example.com/" title="Description Here">Example.com</a>

属性值

根据XHTML的W3C规范,所有属性必须具有值,并且必须使用双引号或单引号(源)。以下是引号和属性/值对的适当和不正确使用的示例。

正确:

<input type="text" name="email" disabled="disabled" />
<input type='text' name='email' disabled='disabled' />

不正确:

<input type=text name=email disabled>

在HTML中,属性并不都必须具有值,并且属性值并不总是被引用。虽然上述所有示例都是有效的HTML,但无法引用属性可能会导致安全漏洞。始终引用属性。

缩进

与PHP一样,HTML缩进应始终反映逻辑结构。使用标签,而不是空格。

将PHP和HTML混合在一起时,缩进PHP块以匹配周围的HTML代码。关闭PHP块应该与打开块相同的缩进级别。

正确:

<?php if ( ! have_posts() ) : ?>
    <div id="post-1" class="post">
        <h1 class="entry-title">Not Found</h1>
        <div class="entry-content">
            <p>Apologies, but no results were found.</p>
            <?php get_search_form(); ?>
        </div>
    </div>
<?php endif; ?>

不正确:

        <?php if ( ! have_posts() ) : ?>
        <div id="post-0" class="post error404 not-found">
            <h1 class="entry-title">Not Found</h1>
            <div class="entry-content">
            <p>Apologies, but no results were found.</p>
<?php get_search_form(); ?>
            </div>
        </div>
<?php endif; ?>