ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLはこんな風には書けません、あなたが作ったのですか?

HTMLはこんな風には書けません、あなたが作ったのですか?

黄舟
黄舟オリジナル
2017-05-26 15:29:501613ブラウズ

目录  

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 脚本是不会执行的。

以上がHTMLはこんな風には書けません、あなたが作ったのですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。