我一直在搜索可用的标签列表,<li> 但找不到任何参考.
是否可以在其中允许任何符合标准的HTML 4+块元素？
我正在标记一系列知识库,如何输入具有一系列步骤和相关屏幕截图的文章.在过去,我总是在段落标签中的列表项中包装文本,但我想知道在这种情况下这是否在语义上是正确的,或者我是否应该使用标题标签(甚至没有).我很想把它标记如下:
<ol class="kbarticle">
<li>
<p>Download the Windows client software <a href="">here</a>.</p>
<a href="#screenshot1"><img src="screen1.jpg" alt="Step 1" /></a>
</li>
<li>
<p>Double click the downloaded file and click "Next" to continue.</p>
<a href="#screenshot2"><img src="screen2.jpg" alt="Step 2" /></a>
</li>
<ol>
另外,如果有任何HTML5元素在语义上更正确,我很想知道.
为什么我们永远不会将ul元素作为ap元素的子元素？我用以下代码制作了一个网页
<p> some text
<ul>
<li>...</li>
<li>...</li>
.
.
.
</ul>
</p>
这里,ul元素是p元素的子元素.但是,在所有主流浏览器(Chrome,Firefox,Internet Explorer)(所有最新版本)中,它的解释如下
<p> some text</p>
<ul>
<li>...</li>
<li>...</li>
.
.
.
</ul>
<p></p>
我通过右键单击ul元素(在chrome中)并选择inspect元素选项来检查它.我在chrome中看到了它,但其他2个浏览器也表现得相同(css selecter'p ul'并不能很好地工作).
为什么会这样？任何人都可以告诉浏览器发生此类更改的一般情况吗？
显然,如果元素中的</p>结束标记没有匹配的开始标记body,则大多数(如果不是所有)浏览器都会在其位置生成空段落:
<!DOCTYPE html>
<title></title>
<body>
</p>
</body>
即使在结束标记周围存在任何文本,它们也不会成为此p元素的一部分- 它将始终为空,文本节点将始终存在于自己:
<!DOCTYPE html>
<title></title>
<body>
some text</p>more text
</body>
如果以上内容body被包装<p>并</p>标记......我会告诉你猜测会发生什么:
<!DOCTYPE html>
<title></title>
<body>
<p>some text</p>more text</p>
</body>
有趣的是,如果</p>标签前面没有<body>或者</body>标签,除了IE9和更旧的浏览器之外的所有浏览器都不会生成空段(另一方面IE≤9将始终创建一个,而IE10和更高版本的行为与所有其他浏览器相同) :
<!DOCTYPE html>
<title></title>
</p>
<!DOCTYPE html>
<title></title>
</p><body>
<!DOCTYPE html>
<title></title>
</p></body>
我找不到任何引用规定没有相应的开始标记的结束标记应该生成一个空元素,但考虑到它首先不是有效的HTML,这不应该是令人惊讶的.实际上,我只发现浏览器使用p元素执行此操作(在某种程度上也是br元素!),但没有任何解释为什么.
不过,在使用传统HTML解析器和HTML5解析器的浏览器中,它是相当一致的,在quirks模式和标准模式下应用.因此,推断这是为了向后兼容早期规范或遗留行为,这可能是公平的.
事实上,我确实在一个相关问题的答案中找到了这个评论,这基本上证实了这一点:
<p>标签有效未封闭的原因是原来<p>被定义为"新段落"标记,而不是p是容器元素.相当于<br>是一个"新行"标记.您可以在这个文件中看到这样定义从1992年:http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html而这一次从1993年:HTTP://www.w3. org/MarkUp/draft-ietf-iiir-html-01.txt因为有网页预先确定了更改,并且浏览器解析器始终与现有Web内容尽可能向后兼容,所以始终可以使用<p>那样.
但它并没有完全解释为什么解析器将显式</p>结束标记(带斜杠)视为简单的标记,并在DOM中生成空元素.从回来的路上有些解析器错误处理公约的这一部分时,语法是不是严格定义,因为它是 …
更新:似乎Angular.js不喜欢<p>中的<ul>.因此,正如有用的评论者所说,用<div>替换<p>可以解决问题.
很抱歉,如果这可能是Angular.js上的新手问题,但我似乎无法在此代码中找到错误.请考虑以下HTML:
<div ng-app ng-controller="BlocksCtrl">
<div ng-repeat="block in blocks">
<div id="{{block.id}}" class="{{block.classes}}">
<div>
<h1>{{block.title}}, {{block.dates}}
<br/>
<small>
<a href="{{block.place.link}}" target="_blank">
{{block.place.title}}</a>
({{block.place.city_country}})
</small>
</h1>
</div>
<div>
<div>
<p><i class="{{block.icon_classes}}"></i></p>
</div>
<div>
<p>
{{block.description.text}}
</p>
<p ng-repeat="item in block.description.items">
<b>{{item.title}}</b>: {{item.points.length}} - {{item.points[2].text}}
<ul class="fa-ul">
<li>
<i class="fa-li fa fa-check"></i>{{item.points[2].text}}
</li>
<li ng-repeat="point in item.points">
<i class="fa-li fa fa-check"></i>{{point.text}}
</li>
</ul>
</p>
</div>
</div>
</div>
</div>
</div>
这是Javascript位:
function BlocksCtrl($scope) {
$scope.blocks = [
{
id: 'my-id',
classes: 'class1 …根据HTML规范和这个问题的答案,一个ol不能包含在内p.但为什么不呢？
我正在写APA风格的论文,我想在段落形式中使用有序列表.(有关列表有序和无序的APA格式的实现,请参阅OWL和编辑 - 编写.)
有时,以段落形式显示列表是有意义的,为什么该列表在语义上不能成为段落的一部分？例如,在我的论文中,我有:
...一个问题集,包括(a)在科学计数法和标准十进制表格之间转换0到1之间的数字,(b)计算大于0的数字的位置值,(c)将正数和负数与幅度小于1进行比较,以及(d)用科学记数法加上和减去数字.见附件......
如果您不相信此列表在语义上是段落的一部分,请说明您为什么这么认为,因为我对您的意见感兴趣.
我真的很想知道我可以写使用HTML标签这个名单<ol>和<li>,但让他们显示的,好像他们是该段的一部分.原因在于语义上,这些项目是有序列表的一部分,并将它们包含在正确的元素中对SEO有好处,但我很好奇如何保持列表以段落形式编写.
从我的 PyCharm检查代码之后。它警告我，因为
Closing 标签与 最后一个</p>标签不匹配
但我没有发现我的代码有任何错误。p 标签已正确关闭。
<p v-if="files.length">
<ul>
<li v-for="file in files">
{{file.name}} <span v-if="file.success"> - success. </span><span v-if="file.error"> - fail. </span>
<span v-if="file.success || file.error">{{file.xhr.responseText}}</span>
</li>
</ul>
</p>
如何正确解决此警告？
我注意到浏览器如何解释以下代码的奇怪行为:
<h2>Maecenas aliquet lorem id urna vehicula</h2>
<p>
<ul class="liststyle">
<li>Curabitur</li>
<li>Pharetra</li>
<li>Convallis</li>
</ul>
</p>
当我尝试给这个样式时,我尝试了以下选择器:
p li {
font-family: Verdana, sans-serif;
font-size: 14px;
}
我知道更好的选择是"ul li",但我的选择器(p li)应该可以工作而不是,所以在Chrome和Firefox中查看开发人员工具,这就是他们解释代码的方式:
<p>
</p>
<ul class="liststyle">
<li>Curabitur</li>
<li>Pharetra</li>
<li>Convallis</li>
</ul>
<p></p>
唯一的区别是Chrome还会显示我尝试解决问题的实体( ),但仍会创建两个段落.我正在寻找这种现象的解释.谢谢.
我发现了一些奇怪的事 在角度2组件中,这样的东西不起作用:
<p>
AAA
<ul>
<li>BBB</li>
</ul>
</p>
为什么？(我相信这是有效的HTML)
(如果我</p>在<ul>一切都会好的情况下搬家)
我得到奇怪的错误:
errors.js:64 Uncaught TypeError:无法在assignAll(http://)的SyntaxError.set [as stack](http:// localhost:4200/vendor.bundle.js:66369:61)中设置undefined属性'stack' localhost:4200/vendor.bundle.js:100568:29)在SyntaxError.ZoneAwareError(http:// localhost:4200/vendor.bundle.js:100639:16)处于SyntaxError.BaseError [作为构造函数](http:// localhost:4200/vendor.bundle.js:66331:16)在新的SyntaxError(http:// localhost:4200/vendor.bundle.js:6861:16)处于DirectiveNormalizer.normalizeLoadedTemplate(http:// localhost:4200/vendor) .bundle.js:17962:19)在DirectiveNormalizer.normalizeTemplateSync(HTTP://本地主机:4200/vendor.bundle.js:17939:21)在DirectiveNormalizer.normalizeTemplate(HTTP://本地主机:4200/vendor.bundle.js:17916:43)在CompileMetadataResolver._loadDirectiveMetadata(HTTP:// localhost:4200/vendor.bundle.js:19158:75)位于http:// localhost:4200/vendor.bundle.js:19334:54 位于CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata的Array.forEach(native)(http:// localhost: 4200/vendor.bundle.js:19333:41)在http:// localhost:4200/vendor.bundle.js:47800:58 at Array.forEach(native)at JitCompiler._loadModules(http:// localhost:4200/vendor.bundle.js:47799:43)
额外的问题:有没有办法定义此消息中的错误在哪里？
我发现jQuery并不总是从HTML字符串中创建正确的DOM.这是一个小示例代码:
var x = "<div><p><ul><li>1</li></ul></p></div>";
console.log('x = ' + x);
console.log('jQuery(x) = ' + jQuery(x).html());
var y = "<div><div><ul><li>1</li></ul></div></div>";
console.log('y = ' + y);
console.log('jQuery(y) = ' + jQuery(y).html());
这是我用jQuery 1.7.1运行它的输出:
x = <div><p><ul><li>1</li></ul></p></div>
jQuery(x) = <p></p><ul><li>1</li></ul><p></p>
y = <div><div><ul><li>1</li></ul></div></div>
jQuery(y) = <div><ul><li>1</li></ul></div>
如您所见,第二个示例创建了正确的DOM,第一个示例没有.唯一的区别是<p>标签而不是标签<div>.这是jQuery的错误或功能吗？
我正在为我的考试进行修改,在没有标记的情况下回答过去的一些问题,我对此感到困惑:
对于以下规则,请说明影响以及影响哪些元素:
p ul li {
color:blue;
}
我在JSFiddle上写了一些html:http://jsfiddle.net/2nkmzgv2/
无论如何它在这里:
<p>
<ul>
<li>Should this be blue?</li>
</ul>
</p>
所以没有任何事情发生在文本中,我会认为它会改变蓝色,但实际上没有任何意义发生,问题的目的是抛弃你,或者我的语法/方法在html中是错误的？
html ×9
css ×2
dom ×2
html-lists ×2
javascript ×2
angular ×1
angularjs ×1
html-parsing ×1
html5 ×1
jquery ×1
pycharm ×1
seo ×1
syntax ×1
vue.js ×1