Html 在不包含 <ul> 标签的情况下使用 <li> 是否危险?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/2031725/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is using <li> without enclosing <ul> tags dangerous?
提问by jball
What are the dangers of inserting <li>...</li>
into a page without enclosing the item(s) in a <ul>
block? For example:
插入<li>...</li>
页面而不将项目包含在<ul>
块中的危险是什么?例如:
<div style="border:solid 1px red;">
<li>Item</li>
<li>Another Item</li>
<li>Yet Another Item</li>
</div>
Validation is the least of my concerns, I'm wondering what this might break in browsers for the end user's ability to view the page as intended.
验证是我最不关心的问题,我想知道这可能会在浏览器中破坏最终用户按预期查看页面的能力。
回答by Gregory Pakosz
It's not valid markup at all.If it gets displayed correctly, it's only a matter of luck.
它根本不是有效的标记。如果它被正确显示,那只是运气问题。
As you seem to define dangerous by "break in browsers for the end user's ability to view the page as intended", then yes it's dangerous.
正如您似乎通过“闯入浏览器以使最终用户能够按预期查看页面的能力”来定义危险,那么是的,这很危险。
Browsers are trying their best to compensate for invalid markup but there is no guarantee at allyour page gets displayed correctly.
浏览器正在尽最大努力弥补无效标记,但不能保证您的页面都能正确显示。
You say validation is the least of your concerns, please reconsider and have a look at Why Validate?. If you care about your page being displayed correctly with no quirks, then validate.
您说验证是您最不关心的问题,请重新考虑并查看为什么要验证?. 如果您关心您的页面是否正确显示而没有怪癖,请验证。
Finally, HTML Tidymay help you fixing existing html.
最后,HTML Tidy可以帮助您修复现有的 html。
EDIT: I submitted your fragment to browsershots.org to see how it gets rendered by different browsers.
回答by NerdStarGamer
Using invalid markup like your example can cause unexpected behavior in different pages. If you use valid markup, browsers will (or should) display your content based on the spec. But if you use invalid markup, the browser will try and interperet the markup and display the page how it thinks you meant it to be. Sometimes they will display it how you want, sometimes not. Here's an example from Firefox 3.5 on a Mac.
像您的示例一样使用无效标记可能会导致不同页面中出现意外行为。如果您使用有效的标记,浏览器将(或应该)根据规范显示您的内容。但是,如果您使用无效的标记,浏览器将尝试解释标记并按照它认为您的意图显示页面。有时他们会以您想要的方式显示它,有时则不会。这是 Mac 上 Firefox 3.5 的示例。
The first list is your code, but with the proper <ul>
tag replacing the <div>
tag. The second list is your code exactly. Notice that the second list is missing the default margins on the left and bullets.
第一个列表是您的代码,但用正确的<ul>
标签替换了该<div>
标签。第二个列表正是您的代码。请注意,第二个列表缺少左侧和项目符号的默认边距。
Basically, nothing will die if you use invalid markup like this, but it's really bad practice since it will lead to unexpected and inconsistent results.
基本上,如果您像这样使用无效标记,一切都不会消失,但这是非常糟糕的做法,因为它会导致意外和不一致的结果。
回答by Tatu Ulmanen
That's the same as using <td>
tags inside <p>
. Sure, it might work somehow on some browsers, but it will definitely be broken. The behaviour of such construct is undefined, there are no guarantees on how it will work on different browsers. Not to speak of accessibility, screen reader programs would be quite perplexed about this kind of structure.
这与<td>
在<p>
. 当然,它可能会在某些浏览器上以某种方式工作,但它肯定会被破坏。这种构造的行为是undefined,无法保证它在不同浏览器上的工作方式。更不用说可访问性,屏幕阅读器程序会对这种结构感到非常困惑。
Why can't you use a proper <ul>
or <ol>
tag? It can be styled and handles the same way as a <div>
.
为什么不能使用适当的<ul>
或<ol>
标签?它的样式和处理方式与<div>
.
回答by JP Silvashy
I can't see why it wouldn't display correctly, while it's not meant to exist on it's own it'll render fine.
我不明白为什么它不能正确显示,虽然它本身并不存在,但它会呈现得很好。
You should probably put it in a <ul>
there are nobenefits to the markup you are using over not doing it properly.
你应该把它放在一个<ul>
有没有给你使用过不能正常做标记的好处。
回答by Dan Rosenstark
This is echoing everybody else's answer, in part: with any markup, there's an empirical question of whether it works or not on the browsers that you are testing it on. You tested it on all your browsers, and your happy. That's cool and is a huge part of the work.
这部分地呼应了其他人的答案:对于任何标记,都有一个经验问题,即它是否在您正在测试的浏览器上有效。你在所有浏览器上测试了它,你很高兴。这很酷,而且是工作的重要组成部分。
But beyond that, there's also the hypothetical question of how well it might work on browser-platform combinations that you haven't tested, either because:
但除此之外,还有一个假设问题,即它在您尚未测试过的浏览器平台组合上的效果如何,要么是因为:
- you didn't include them in the test set
- they don't exist yet or
- they're not available for testing (web-crawlers, for instance)
- 您没有将它们包含在测试集中
- 它们还不存在或
- 它们不可用于测试(例如网络爬虫)
For this set, which always becomes relevant sooner or later, you should follow standards -- when possible -- and use the enclosing UL or OL tags (in this case).
对于这个迟早会变得相关的集合,您应该遵循标准——如果可能的话——并使用封闭的 UL 或 OL 标签(在这种情况下)。
It's also worth mentioning that it makes the LI tags easier to track down if you are doing scripting, or if someone is doing scripting on your page (e.g., Greasemonkey).
还值得一提的是,如果您正在编写脚本,或者有人在您的页面上编写脚本(例如,Greasemonkey),它会使 LI 标签更容易被追踪。
回答by leepowers
As a web designer/developer you know you're way off when you start writing HTML that even Frontpage or Microsoft Word wouldn't generate.
作为一名网页设计师/开发人员,当您开始编写即使是 Frontpage 或 Microsoft Word 也不会生成的 HTML 时,您知道自己已经离题了。
Adhering to standards is a two-way street. If we want browser developers to create fast, reliable and consistent rendering engines we need to meet them half-way by creating consistent, clean and well-formed HTML.
坚持标准是两条路。如果我们希望浏览器开发人员创建快速、可靠和一致的渲染引擎,我们需要通过创建一致、干净和格式良好的 HTML 来满足他们的要求。
回答by uotonyh
Most browsers will probably take that and run with it, butthere are two different list-types avaiable: Unordered <ul> and ordered lists <ol>, where an ordered list has numbers for each item.
大多数浏览器可能会采用并运行它,但有两种不同的列表类型可用:无序 <ul> 和有序列表 <ol>,其中有序列表具有每个项目的编号。
Instead of using <li> tags, you could use a "•" bullet character (•), and then a <br /> at the end of each line.
您可以不使用 <li> 标签,而是使用“•”项目符号字符 (•),然后在每行末尾使用 <br />。
回答by BalusC
I wouldn't rely on unspecified behaviour. Just replace that <div>
by <ul>
and use CSS to style it.
我不会依赖未指明的行为。只需更换是<div>
通过<ul>
和使用CSS样式它。
回答by Bahadir Cambel
Unexpected rendering behaviors on different browsers ? SEO ?
不同浏览器上的意外呈现行为?搜索引擎优化?
回答by Cameron
It would be up to the browser's implementation to decide what to do with it. If you really want to do this, test it out in all the browsers you want to support before using it.
由浏览器的实现来决定如何处理它。如果您真的想这样做,请在使用它之前在您想要支持的所有浏览器中进行测试。
Also note that the browsers' behaviours might change in the future.
另请注意,浏览器的行为将来可能会发生变化。