HTML kann so nicht geschrieben werden, hast du es gemacht?

目录  

a标签不可以嵌套交互式元素

块级元素可以包含内联元素和某些块级元素，内联元素不能包含块级元素，只能包含内联元素

p标签不能包含块级元素

不可包含块级元素的标签

li标签可以包含div以及ul，ul的子元素应该只有li

元素并排（块级和块级并列，内联和内联并列)

字符实体引发的错误

错误的使用 role 属性

行内元素强制转成块级元素，块级元素强制转成行内元素

使用 disabled=false

页面中同一个ID出现两次及以上

内嵌的 3f1c4e4b6b16bbbd69b2ee476dc4f83a 标签含有 src 属性

标签错误嵌套

语法错误

* a标签不可以嵌套交互式元素[a， audio（如果设置了controls属性）， button， details， embed， iframe， img（如果设置了usemap属性）， input（如果type属性不为hidden状态）， keygen， label， menu（如果type属性为toolbar状态），object（如果设置了usemap属性）， select， textarea， video（如果设置了controls属性）]

下面这些写法浏览器是不能够正常解析的

<a href="">  <a href="">click</a> </a> 
 <a href="">  <button>click</button> </a> 
 <a href="">  <input type="text"> </a> 
 <a href="">  <textarea name="" id="" cols="10" rows="5"></textarea> </a> 
 
 <a href="">  <a href="">click</a> </a> <a href="">  
 <button>click</button> 
 </a> <a href="">  <input type="text"> </a> 
 <a href="">  
 <textarea name="" id="" cols="30" rows="10"></textarea> 
 </a>

有的虽然解析正常，但却达不到预想的目的

语义错误

页面可能正常解析，但不符合语义。这是因为浏览器自带容错机制，对于不规范的写法也能够正确的解析，各浏览器的容错机制不同，所以尽量按规范来写。

* 块级元素可以包含内联元素和某些块级元素，内联元素不能包含块级元素，只能包含内联元素

/*规范的写法*/ 
 <div>  <h2>jikexueyuan</h2>  <p>IT education</p> </div> 
 /*不规范的写法*/ 
 <span>  <div>wrong</div> </span>

* p标签不能包含块级元素

/*不规范的写法*/  <p>  <h1></h1> </p> 
 <p>  <div></div> </p>

* 如下的标签不可包含块级元素

h1、h2、h3、h4、h5、h6、p

* li标签可以包含div以及ul(这个是不是很牛，可以包含父级元素)

 /*规范的写法*/ 
 <li>  <ul>  <li>  </li>   <li>  </li>   <li>  <li>   </ul>  <div> </div> </li> 
 /*不规范的写法*/ 
 <ul>  <a href="">迷路的a标签</a>    <li></li>       <li></li>  <li></li> </ul>

* 元素并排（块级和块级并列，内联和内联并列)

/*规范的写法*/ 
 <div>  <h2></h2>  <p></p> </div>  <div>  <img src="" alt="">  <a href=""></a>   <span></span> </div> 
 
 /*不规范的写法*/ <div>  <span>我是内联元素</span>  <p>我是块级元素</p> </div>

字符实体引发的错误

有些字符是 html 预留的，不能够直接书写，但是可以通过字符实体来显示。 如：  

空格 -

大于符号 - >

& - &

......

但如果稍不注意，在如下的情况下就会引发错误：

<a href="?art&copy">Art and Copy</a>

这里的 © 会被转换为 符号，从而得不到预期的效果

正确的做法是所有的保留字符全部用实体字符替代。

 <a href="?art&amp;copy">Art and Copy</a>

错误的使用 role 属性

role 属性使用来增强标签的语义的，但如果使用不当，反而得到负面的效果，所以使用的时候一定要注意。

<input type=radio role=progressbar>

这里的是一个 input标签，但是却通过 role 指定了进度条的语义，但是 input是不能够作为进度条的，所以这里反而模糊了语义。

行内元素强制转成块级元素，块级元素强制转成行内元素

如下做法是不推荐的：  

给 dc6dce4a544fdca2df29d5ac0ea9906b 标签设置 inline-block 属性

给 45a2772a6b6107b401db3c9b82c049c2标签设置 block 属性

使用 disabled=false

disabled 属性是用来禁用标签的，一般用于 input 、button等，表示不可点击。

正常的用法是：

<input type="text" name="lname" /> <input type="text" name="lname" disabled="disabled" />

错误的写法：

<input type="text" name="name" disabled="false" />

这里虽然 disabled="false" 语义也代表不禁用，但实际上是被禁用的。

页面中同一个 ID 出现两次及更多

ID重复会引起元素选择错误，从而引发 Javascript 隐藏问题，因此需要注意。

注：每一个ID会在浏览器中生成一个同名的全局变量

内嵌的 3f1c4e4b6b16bbbd69b2ee476dc4f83a 标签含有 src 属性

当 3f1c4e4b6b16bbbd69b2ee476dc4f83a 标签包含 src 属性时，其包含的 Javascript 脚本是不会执行的。

Das obige ist der detaillierte Inhalt vonHTML kann so nicht geschrieben werden, hast du es gemacht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!