0

0

HTML不能这么写,你造吗?

黄舟

黄舟

发布时间:2017-05-26 15:29:50

|

1752人浏览过

|

来源于php中文网

原创

目录  

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

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

p标签不能包含块级元素

不可包含块级元素的标签

立即学习前端免费学习笔记(深入)”;

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

元素并排(块级和块级并列,内联和内联并列)

字符实体引发的错误

错误的使用 role 属性

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

使用 disabled=false

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

内嵌的

标签错误嵌套

语法错误

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

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

  click  
     
     
     
 
   click    
  
      
   
  
 

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

语义错误

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

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

/*规范的写法*/ 
 

jikexueyuan

IT education

/*不规范的写法*/
wrong

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

/*不规范的写法*/  

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

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

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

 /*规范的写法*/ 
 
  • /*不规范的写法*/

    * 元素并排(块级和块级并列,内联和内联并列)

    易优cms摄影科技传媒网站源码1.7.0
    易优cms摄影科技传媒网站源码1.7.0

    易优cms摄影科技传媒网站源码是基于易优cms开发,非常适合写真摄影企业通过网络拓展业务、程序内核为Thinkphp5.0开发,后台简洁,为企业网站而生。这是一套安装就能建站的程序,不定期更新程序BUG,更新网站功能。我们提供的不仅是模板这么简单,我们还提供程序相关咨询、协助安装等服务。默认不包含小程序插件,需要另外单独购买插件。模板安装步骤1、请将安装包ZIP上传到你的网站根目录,在线解压2、安

    下载
    /*规范的写法*/ 
     

    @@##@@
    /*不规范的写法*/
    我是内联元素

    我是块级元素

    字符实体引发的错误

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

    空格 -  

    大于符号 - youjiankuohaophpcn

    & - &

    ......

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

    Art and Copy

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

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

     Art and Copy

    错误的使用 role 属性

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

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

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

    如下做法是不推荐的:  

    标签设置 inline-block 属性

    标签设置 block 属性

    使用 disabled=false

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

    正常的用法是:

     

    错误的写法:

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

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

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

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

    内嵌的

    HTML不能这么写,你造吗?

    相关文章

    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载

    相关标签:

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    通义千问
    通义千问

    阿里巴巴推出的全能AI助手

    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    即梦AI
    即梦AI

    一站式AI创作平台,免费AI图片和视频生成。

    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    java入门学习合集
    java入门学习合集

    本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

    2

    2026.01.29

    java配置环境变量教程合集
    java配置环境变量教程合集

    本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

    2

    2026.01.29

    java成品学习网站推荐大全
    java成品学习网站推荐大全

    本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

    0

    2026.01.29

    Java字符串处理使用教程合集
    Java字符串处理使用教程合集

    本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

    0

    2026.01.29

    Java空对象相关教程合集
    Java空对象相关教程合集

    本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

    3

    2026.01.29

    clawdbot ai使用教程 保姆级clawdbot部署安装手册
    clawdbot ai使用教程 保姆级clawdbot部署安装手册

    Clawdbot是一个“有灵魂”的AI助手,可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等,并且可以接入用户常用的任何聊天APP,所有的操作均可通过WhatsApp、Telegram等平台完成,用户只需通过对话,就能操控设备自动执行各类任务。

    25

    2026.01.29

    clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址
    clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址

    clawdbot龙虾机器人官网入口:https://clawd.bot/,clawdbot ai是一个“有灵魂”的AI助手,可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等,并且可以接入用户常用的任何聊天APP,所有的操作均可通过WhatsApp、Telegram等平台完成,用户只需通过对话,就能操控设备自动执行各类任务。

    16

    2026.01.29

    Golang 网络安全与加密实战
    Golang 网络安全与加密实战

    本专题系统讲解 Golang 在网络安全与加密技术中的应用,包括对称加密与非对称加密(AES、RSA)、哈希与数字签名、JWT身份认证、SSL/TLS 安全通信、常见网络攻击防范(如SQL注入、XSS、CSRF)及其防护措施。通过实战案例,帮助学习者掌握 如何使用 Go 语言保障网络通信的安全性,保护用户数据与隐私。

    8

    2026.01.29

    俄罗斯Yandex引擎入口
    俄罗斯Yandex引擎入口

    2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

    622

    2026.01.28

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    Bootstrap 5教程
    Bootstrap 5教程

    共46课时 | 3.1万人学习

    AngularJS教程
    AngularJS教程

    共24课时 | 3.1万人学习

    CSS教程
    CSS教程

    共754课时 | 24.9万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号