html---规范、细节积累-01

最新推荐文章于 2025-01-07 22:07:00 发布

转载最新推荐文章于 2025-01-07 22:07:00 发布 · 53 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/CandyManPing/p/6541395.html

本文介绍了HTML中块级元素与行内元素的正确使用方法，强调了遵循语义化的重要性，并列举了一些常见的错误示例，包括标签嵌套不当、属性设置错误等问题。

语义错误

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

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

/*规范的写法*/

<div>
    <h2>jikexueyuan</h2>
    <p>IT education</p>
</div>

/*不规范的写法*/

<span>
    <div>wrong</div>
</span>

h1、h2、h3、h4、h5、h6、P标签不能包含块级元素如div section等

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
    <title></title>
</head>
<body>
<a href="">
    <button>click</button>
</a>
<p>
    <h3>dsds</h3>
</p>
</body>
</html>

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

如下做法是不推荐的：

给 <div> 标签设置 inline-block 属性
给 <span>标签设置 block 属性

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

/*规范的写法*/

<li>
   <ul>
       <li></li>
       <li></li>
       <li></li>
   </ul>
   <div></div>
</li>

/*不规范的写法*/

<ul>
   <a href="">迷路的a标签</a>
   <li></li>
   <li></li>
   <li></li>
</ul>

使用 disabled=false

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

正常的用法是：

<input type="text" name="lname" />
<input type="text" name="lname" disabled="disabled" />
错误的写法：

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

disabled 属性规定应该禁用 input 元素,即只要出现改属性为禁用。<input type="text" name="name" disabled="" />

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

ID应该是dom元素唯一标示符；

错误的使用 role 属性

role更多的是用来增强语义性，当现有的html标签不能充分表达语义性的时候，就可以借助role来说明。通常它更多的出现在一些自定义的组件上。比如html中没有tree标签，我们就可以把他的role设置为tree，这样可以增强组件的可访问性、可用性和可交互性。

转载于:https://www.cnblogs.com/CandyManPing/p/6541395.html