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

语义错误

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
/*规范的写法*/
 
<div>
    <h2>jikexueyuan</h2>
    <p>IT education</p>
</div>
 
/*不规范的写法*/
 
<span>
    <div>wrong</div>
</span>

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*规范的写法*/
 
<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" />
错误的写法：

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

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

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

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

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

 

错误的使用 role 属性

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


如果您觉得阅读本文对您有帮助，请点一下推荐按钮，您的推荐将是我最大的写作动力，欢迎各位转载！
posted @   风吹De麦浪  阅读(273)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示