[html] W3C--span is a nested element.

本文探讨了在W3C验证过程中遇到的错误,特别是关于<form>和<div>元素放置的问题,并提供了正确的使用示例。

When testing in W3C, we got some errors such as:

 

ContractedBlock.gifExpandedBlockStart.gif代码
Line 42, Column 98: document type does not allow element "form" here; missing one of "object", "applet", "map", "iframe", "ins", "del" start-tag

…earch_form" action="/index.php/" method="get">

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "
<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").




Line 155, Column 43: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
<div class="clear"><!-- DON'T DELETE --></div>

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "
<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Why?

 

 

Because in the code, i do as below:

 

<span class="left">
<form action="XXX" method="XXX">
//Other codes
</form>
</span>


<span class="right">
<div class="clear"><!-- DON'T DELETE --></div>
</span>

 

But that, put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>") is not allowed in W3C, the form element must be contained within only certain elements, but many more types of elements can be contained within the form element. For example: <p><form></form></p> that will not validate. However, this will: <form><p></p></form>

 

转载于:https://www.cnblogs.com/davidhhuan/archive/2010/05/25/1743406.html

<div class="ait-drawer-content-wrapper" style="width: 416px;"><div class="ait-drawer-content" aria-modal="true" role="dialog"><div class="ait-drawer-wrapper-body"><div class="ait-drawer-header"><div class="ait-drawer-header-title"><div class="ait-drawer-title"><div class="drawer-title">海关监管属性</div></div><button type="button" aria-label="Close" class="ait-drawer-close"><span role="img" class="anticon aiticon aiticon-close"><svg viewBox="64 64 896 896" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M797.44 226.56c13.952 13.888 14.08 36.352 0.448 50.496l-0.448 0.384L562.88 512l234.56 234.56a36.032 36.032 0 0 1-50.496 51.328l-0.384-0.448L512 562.88 277.44 797.44a36.032 36.032 0 0 1-51.328-50.496l0.448-0.384L461.12 512 226.56 277.44a35.968 35.968 0 0 1 50.496-51.328l0.384 0.448L512 461.12l234.56-234.56c14.08-14.08 36.864-14.08 50.88 0z"></path></svg></span></button></div></div><div class="ait-drawer-body"><div class="hscode-content"><div class="ait-spin-nested-loading"><div class="ait-spin-container"><div data-show="true" class="ait-alert ait-alert-info ait-alert-with-description notice" role="alert"><span role="img" class="anticon ait-alert-icon aiticon aiticon-notice-circle-filled"><svg viewBox="64 64 896 896" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 960A448 448 0 1 1 512 64a448 448 0 0 1 0 896z m0-584a48 48 0 1 0 0-96 48 48 0 0 0 0 96z m0 366.976c19.84 0 36.032-16.064 36.032-35.968V481.408a36.032 36.032 0 0 0-72 0.64v225.536A36.032 36.032 0 0 0 512 743.04z"></path></svg></span><div class="ait-alert-content"><div class="ait-alert-description"><div>您的商品将基于您填写的海关监管属性(请参考美国海关监管属性规范)进行美国海关进口申报,因此 请务必如实填写,否则您将承担因此导致的清关失败后果及相关责任。</div></div></div><button type="button" class="ait-alert-close-icon" tabindex="0"><span role="img" class="anticon aiticon aiticon-close"><svg viewBox="64 64 896 896" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M797.44 226.56c13.952 13.888 14.08 36.352 0.448 50.496l-0.448 0.384L562.88 512l234.56 234.56a36.032 36.032 0 0 1-50.496 51.328l-0.384-0.448L512 562.88 277.44 797.44a36.032 36.032 0 0 1-51.328-50.496l0.448-0.384L461.12 512 226.56 277.44a35.968 35.968 0 0 1 50.496-51.328l0.384 0.448L512 461.12l234.56-234.56c14.08-14.08 36.864-14.08 50.88 0z"></path></svg></span></button></div><form autocomplete="off" class="ait-form ait-form-vertical hscode-form" data-spm-anchor-id="a2g3i.%2Fproduct-publish-v2%2Fpop.0.i16.69fe23f1CPjif0"><div class="ait-form-item"><div class="ait-row ait-form-item-row"><div class="ait-col ait-form-item-label"><label for="731" class="ait-form-item-required" title="">品名(Product name)<span class="edit-btn">修改</span></label></div><div class="ait-col ait-form-item-control"><div class="ait-form-item-control-input"><div class="ait-form-item-control-input-content"><div class="ait-select ait-select-in-form-item ait-select-single ait-select-show-arrow ait-select-show-search" aria-required="true"><div class="ait-select-selector"><span class="ait-select-selection-search"><input type="search" id="731" autocomplete="off" class="ait-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="731_list" aria-autocomplete="list" aria-controls="731_list" aria-activedescendant="731_list_0" aria-required="true" value=""></span><span class="ait-select-selection-placeholder">请选择</span></div><span class="ait-select-arrow" unselectable="on" aria-hidden="true" style="user-select: none;"><span role="img" class="anticon ait-select-suffix aiticon aiticon-chevron-down"><svg viewBox="64 64 896 896" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M739.712 355.712a40 40 0 0 1 57.024 56.128l-0.448 0.448-256 256a40 40 0 0 1-56.128 0.448l-0.448-0.448-256-256a40 40 0 0 1 56.128-57.024l0.448 0.448L512 583.424l227.712-227.712z"></path></svg></span></span></div></div></div></div></div></div></form><div class="ait-flex ait-flex-justify-flex-end" style="gap: 12px;"><button type="button" class="ait-btn ait-btn-default"><span>取 消</span></button><button type="submit" class="ait-btn ait-btn-primary"><span>确 定</span></button></div></div></div></div></div></div></div></div>。这个是完整的HTML。 <div class="ait-drawer-wrapper-body"><div class="ait-drawer-header"><div class="ait-drawer-header-title"><div class="ait-drawer-title"><div class="drawer-title">海关监管属性</div></div><button type="button" aria-label="Close" class="ait-drawer-close"><span role="img" class="anticon aiticon aiticon-close"><svg viewBox="64 64 896 896" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M797.44 226.56c13.952 13.888 14.08 36.352 0.448 50.496l-0.448 0.384L562.88 512l234.56 234.56a36.032 36.032 0 0 1-50.496 51.328l-0.384-0.448L512 562.88 277.44 797.44a36.032 36.032 0 0 1-51.328-50.496l0.448-0.384L461.12 512 226.56 277.44a35.968 35.968 0 0 1 50.496-51.328l0.384 0.448L512 461.12l234.56-234.56c14.08-14.08 36.864-14.08 50.88 0z"></path></svg></span></button></div></div><div class="ait-drawer-body"><div class="hscode-content"><div class="ait-spin-nested-loading"><div class="ait-spin-container"><div data-show="true" class="ait-alert ait-alert-info ait-alert-with-description notice" role="alert"><span role="img" class="anticon ait-alert-icon aiticon aiticon-notice-circle-filled"><svg viewBox="64 64 896 896" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 960A448 448 0 1 1 512 64a448 448 0 0 1 0 896z m0-584a48 48 0 1 0 0-96 48 48 0 0 0 0 96z m0 366.976c19.84 0 36.032-16.064 36.032-35.968V481.408a36.032 36.032 0 0 0-72 0.64v225.536A36.032 36.032 0 0 0 512 743.04z"></path></svg></span><div class="ait-alert-content"><div class="ait-alert-description"><div>您的商品将基于您填写的海关监管属性(请参考美国海关监管属性规范)进行美国海关进口申报,因此 请务必如实填写,否则您将承担因此导致的清关失败后果及相关责任。</div></div></div><button type="button" class="ait-alert-close-icon" tabindex="0"><span role="img" class="anticon aiticon aiticon-close"><svg viewBox="64 64 896 896" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M797.44 226.56c13.952 13.888 14.08 36.352 0.448 50.496l-0.448 0.384L562.88 512l234.56 234.56a36.032 36.032 0 0 1-50.496 51.328l-0.384-0.448L512 562.88 277.44 797.44a36.032 36.032 0 0 1-51.328-50.496l0.448-0.384L461.12 512 226.56 277.44a35.968 35.968 0 0 1 50.496-51.328l0.384 0.448L512 461.12l234.56-234.56c14.08-14.08 36.864-14.08 50.88 0z"></path></svg></span></button></div><form autocomplete="off" class="ait-form ait-form-vertical hscode-form" data-spm-anchor-id="a2g3i.%2Fproduct-publish-v2%2Fpop.0.i16.69fe23f1CPjif0"><div class="ait-form-item ait-form-item-has-success"><div class="ait-row ait-form-item-row"><div class="ait-col ait-form-item-label"><label for="731" class="ait-form-item-required" title="">品名(Product name)<span class="edit-btn">修改</span></label></div><div class="ait-col ait-form-item-control"><div class="ait-form-item-control-input"><div class="ait-form-item-control-input-content"><div class="ait-select ait-select-in-form-item ait-select-status-success ait-select-single ait-select-show-arrow ait-select-show-search" aria-required="true"><div class="ait-select-selector"><span class="ait-select-selection-search"><input type="search" id="731" autocomplete="off" class="ait-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="731_list" aria-autocomplete="list" aria-controls="731_list" aria-activedescendant="731_list_0" aria-required="true" value="" aria-expanded="false" data-spm-anchor-id="a2g3i.%2Fproduct-publish-v2%2Fpop.0.i18.69fe23f1CPjif0"></span><span class="ait-select-selection-item"><div title="墙板支架盖(wall plate bracket cover)">墙板支架盖(wall plate bracket cover)</div></span></div><span class="ait-select-arrow" unselectable="on" aria-hidden="true" style="user-select: none;"><span role="img" class="anticon ait-select-suffix aiticon aiticon-chevron-down"><svg viewBox="64 64 896 896" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M739.712 355.712a40 40 0 0 1 57.024 56.128l-0.448 0.448-256 256a40 40 0 0 1-56.128 0.448l-0.448-0.448-256-256a40 40 0 0 1 56.128-57.024l0.448 0.448L512 583.424l227.712-227.712z"></path></svg></span></span></div></div></div></div></div></div><div class="ait-form-item ait-form-item-has-success"><div class="ait-row ait-form-item-row"><div class="ait-col ait-form-item-label" data-spm-anchor-id="a2g3i.%2Fproduct-publish-v2%2Fpop.0.i20.69fe23f1CPjif0"><label for="732" class="ait-form-item-required" title="">材质(Material)</label></div><div class="ait-col ait-form-item-control"><div class="ait-form-item-control-input"><div class="ait-form-item-control-input-content"><div class="ait-select ait-select-in-form-item ait-select-status-success ait-select-single ait-select-show-arrow ait-select-show-search" aria-required="true"><div class="ait-select-selector"><span class="ait-select-selection-search"><input type="search" id="732" autocomplete="off" class="ait-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="732_list" aria-autocomplete="list" aria-controls="732_list" aria-activedescendant="732_list_0" aria-required="true" value="" aria-expanded="false" data-spm-anchor-id="a2g3i.%2Fproduct-publish-v2%2Fpop.0.i21.69fe23f1CPjif0"></span><span class="ait-select-selection-item"><div title="象牙海岸榄仁木(framiré)">象牙海岸榄仁木(framiré)</div></span></div><span class="ait-select-arrow" unselectable="on" aria-hidden="true" style="user-select: none;"><span role="img" class="anticon ait-select-suffix aiticon aiticon-chevron-down"><svg viewBox="64 64 896 896" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M739.712 355.712a40 40 0 0 1 57.024 56.128l-0.448 0.448-256 256a40 40 0 0 1-56.128 0.448l-0.448-0.448-256-256a40 40 0 0 1 56.128-57.024l0.448 0.448L512 583.424l227.712-227.712z"></path></svg></span></span></div></div></div></div></div></div><div class="ait-form-item ait-form-item-has-success"><div class="ait-row ait-form-item-row"><div class="ait-col ait-form-item-label"><label for="798" class="ait-form-item-required" title="">适用对象(Applicable objects)</label></div><div class="ait-col ait-form-item-control"><div class="ait-form-item-control-input"><div class="ait-form-item-control-input-content"><div class="ait-select ait-select-in-form-item ait-select-status-success ait-select-single ait-select-show-arrow ait-select-show-search" aria-required="true"><div class="ait-select-selector"><span class="ait-select-selection-search"><input type="search" id="798" autocomplete="off" class="ait-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="798_list" aria-autocomplete="list" aria-controls="798_list" aria-activedescendant="798_list_0" aria-required="true" value="" aria-expanded="false" data-spm-anchor-id="a2g3i.%2Fproduct-publish-v2%2Fpop.0.i23.69fe23f1CPjif0"></span><span class="ait-select-selection-item"><div title="园区观光车(park tour vehicle)">园区观光车(park tour vehicle)</div></span></div><span class="ait-select-arrow" unselectable="on" aria-hidden="true" style="user-select: none;"><span role="img" class="anticon ait-select-suffix aiticon aiticon-chevron-down"><svg viewBox="64 64 896 896" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M739.712 355.712a40 40 0 0 1 57.024 56.128l-0.448 0.448-256 256a40 40 0 0 1-56.128 0.448l-0.448-0.448-256-256a40 40 0 0 1 56.128-57.024l0.448 0.448L512 583.424l227.712-227.712z"></path></svg></span></span></div></div></div></div></div></div><div class="ait-form-item ait-form-item-has-success"><div class="ait-row ait-form-item-row"><div class="ait-col ait-form-item-label"><label for="957" class="ait-form-item-required" title="">制造工艺(Manufacturing Process)</label></div><div class="ait-col ait-form-item-control"><div class="ait-form-item-control-input"><div class="ait-form-item-control-input-content"><div class="ait-select ait-select-in-form-item ait-select-status-success ait-select-single ait-select-show-arrow ait-select-show-search" aria-required="true"><div class="ait-select-selector"><span class="ait-select-selection-search"><input type="search" id="957" autocomplete="off" class="ait-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="957_list" aria-autocomplete="list" aria-controls="957_list" aria-activedescendant="957_list_0" aria-required="true" value="" aria-expanded="false" data-spm-anchor-id="a2g3i.%2Fproduct-publish-v2%2Fpop.0.i25.69fe23f1CPjif0"></span><span class="ait-select-selection-item"><div title="铸件(casting)">铸件(casting)</div></span></div><span class="ait-select-arrow" unselectable="on" aria-hidden="true" style="user-select: none;"><span role="img" class="anticon ait-select-suffix aiticon aiticon-chevron-down"><svg viewBox="64 64 896 896" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M739.712 355.712a40 40 0 0 1 57.024 56.128l-0.448 0.448-256 256a40 40 0 0 1-56.128 0.448l-0.448-0.448-256-256a40 40 0 0 1 56.128-57.024l0.448 0.448L512 583.424l227.712-227.712z"></path></svg></span></span></div></div></div></div></div></div></form><div class="ait-flex ait-flex-justify-flex-end" style="gap: 12px;"><button type="button" class="ait-btn ait-btn-default"><span>取 消</span></button><button type="submit" class="ait-btn ait-btn-primary"><span>确 定</span></button></div></div></div></div></div></div>这个是全部选完成的html
最新发布
08-10
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值