简体   繁体   English

如何重写此HTML以验证XHTML 1.0 Strict?

[英]How do I rewrite this HTML to validate to XHTML 1.0 Strict?

How do I rewrite this HTML to validate to XHTML 1.0 Strict? 如何重写此HTML以验证XHTML 1.0 Strict?

<div>
    <a href="link.html">
        <p>Some text</p>
        <ul>
            <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        </ul>
    </a>
</div>

My intent is to have the entire div serve as a clickable link. 我的意图是将整个div作为可点击链接。 The content within simply describes the contents of the destination page. 其中的内容仅描述目标页面的内容。 W3 Validator says I can't have a block element ( <p> ) inside a span tag ( <a> ). W3 Validator说我不能在span标签( <a> )中有一个块元素( <p> )。

How do I rearrange this so that my DIVs remain block links? 如何重新排列这个以便我的DIV保持阻止链接?

You're not allowed to wrap a block level element in an inline level element so you have a few alternatives. 您不允许在内联级别元素中包含块级元素,因此您有一些替代方法。

  • You can wrap every line that you want linked in the <a href="link.html">...</a> 您可以在<a href="link.html">...</a>打包要链接的每一行

     <div> <p><a href="link.html">Some text</a></p> <ul> <li><a href="link.html">Item 1</a></li> <li><a href="link.html">Item 2</a></li> <li><a href="link.html">Item 3</a></li> </ul> </div>​ 
  • You can add a javascript onclick function to reproduce the same results. 您可以添加javascript onclick函数来重现相同的结果。

      //jQuery ​$('div').click(function() { window.location = 'link.html'; });​​​​​​ //Non jQuery document.getElementById('yourDiv').onclick = function() { window.location = 'link.html'; } 
    • If you use the Javascript, make sure you use CSS to make it apparent that the contents are links. 如果您使用Javascript,请确保使用CSS显示内容是链接。 I'd recommend pseudo classes 我推荐伪类

       div { text-decoration: underline; color: #0000FF;//or whatever your link color is } div li:hover, p:hover { color: #CC00FF; cursor: pointer; } 

You can't rearrange it to make the block a link. 您无法重新排列它以使该块成为链接。 What you could do is to make every single element in the block a link, or you can use javascript. 你可以做的是让块中的每个元素都成为一个链接,或者你可以使用javascript。

<div style="cursor:pointer" onclick="location.href='link.html'">
  <!-- ... -->
</div>

As is, your fragment is valid HTML5. 因此,您的片段是有效的HTML5。 Use that instead and your problem vanishes. 使用它代替你的问题消失。 All you have to do is change the doctype to <!doctype html> . 您所要做的就是将doctype更改为<!doctype html>

Your <UL> is also a block element, so it won't work there either. 您的<UL>也是一个块元素,因此它也不会在那里工作。 How about: 怎么样:

<div onclick="location.href = 'link.html'">
    <p>Some text</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM