V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
sneezry
V2EX  ›  问与答

HTML5 标签推荐不推荐闭合

  •  
  •   sneezry · 2014-12-04 10:34:30 +08:00 · 4797 次点击
    这是一个创建于 3650 天前的主题,其中的信息可能已经有所发展或是发生改变。
    HTML5标准允许不闭合标签:

    <div>
    <p>This is a text

    <div>
    <p>This is another text

    那些自闭合的标签在HTML5之前就可以不闭合了,但是之前w3c会发警告:

    <br>
    <hr>
    <input type="text">
    <img src="pic.png">

    之前听说HTML5标准推荐不闭合,但是我现在写起来不闭合心里还是不爽,自闭合标签后我都要加上斜线才舒服。
    25 条回复    2014-12-04 14:04:05 +08:00
    herozzm
        1
    herozzm  
       2014-12-04 10:46:08 +08:00   ❤️ 1
    不爽是暂时的,只是心理不适应而已,我觉得不闭合才是对的,为什么要多那个反斜杠啊
    kokdemo
        2
    kokdemo  
       2014-12-04 10:56:44 +08:00   ❤️ 1
    @herozzm 闭合的话比较好在编辑器里观察……
    NemoAlex
        3
    NemoAlex  
       2014-12-04 10:58:12 +08:00   ❤️ 1
    推荐不闭合?那嵌套怎么办?
    jimwoo
        4
    jimwoo  
       2014-12-04 11:01:33 +08:00   ❤️ 1
    我也觉得不闭合会容易读懂一点……
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>

    啊呜~~~~~~~~
    imn1
        5
    imn1  
       2014-12-04 11:01:33 +08:00   ❤️ 2
    闭合是标准,或者说是Markup Language的通用标准
    不闭合是浏览器支持,因为html5是浏览器商自发(逼宫w3c,w3c原本想以xhtml取代html)形成的,其中最重要一点就是xhtml标准不容错,造成大量手误的网页不能显示,间接造成开发成本倍增,所以html5首先加入了容错(不强制完全安标准)
    也因为html5主导者是google为首的浏览器商,所以主流的浏览器基本能容错,别误以为是标准

    像你说的例子,是分不清嵌套还是平行的,这种情况容错解析为平行,但如果本意是嵌套就达不到效果了
    jimwoo
        6
    jimwoo  
       2014-12-04 11:05:21 +08:00   ❤️ 1
    @imn1 貌似不支持空格,自动去掉空格了,所以……变成了所有都是平行了。
    但如果
    <div>
    ····<input>
    ····<p>
    <div>
    ····<button>
    这样就清晰了吧!
    airyland
        7
    airyland  
       2014-12-04 11:10:34 +08:00   ❤️ 1
    不闭合,要解决嵌套问题就得强制缩进了吧,那不是变成jade了。。
    hahastudio
        8
    hahastudio  
       2014-12-04 11:12:23 +08:00   ❤️ 1
    不闭合?
    这样,你用不闭合的方式区分一下
    <div><div></div><div></div></div>
    <div><div><div></div></div></div>
    <div></div><div></div><div></div>

    这个问题就像是一个语言怎么区分嵌套一样,是 begin/end,还是 {},还是强制缩进
    只不过 html 里面这个就像是不同种类的括号一样 ()[]{},在一定程度上能够区分
    imn1
        9
    imn1  
       2014-12-04 11:22:36 +08:00   ❤️ 1
    易读和标准还是有区别的,html标准或者说各ml标准印象中都没缩进的提法

    记忆中很久以前google在介绍html5有一篇文章,里面说了“可以……这样写,可以……这样写……”之类
    但那篇文章更多像是chrome浏览器的功能介绍,说的是能支持html5不闭合
    但我不认为那是对html5的标准解释,不知道是否这篇文章被人奉为圣典,“可以”误读变成“推荐”了
    breeswish
        10
    breeswish  
       2014-12-04 11:36:51 +08:00   ❤️ 1
    Google 推荐不闭合标签

    For file size optimization and scannability purposes, consider omitting optional tags. The HTML5 specification defines what tags can be omitted.

    (This approach may require a grace period to be established as a wider guideline as it’s significantly different from what web developers are typically taught. For consistency and simplicity reasons it’s best served omitting all optional tags, not just a selection.)

    https://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml#Optional_Tags
    FrankFang128
        11
    FrankFang128  
       2014-12-04 11:37:54 +08:00   ❤️ 1
    我推荐不闭合。
    因为它不是 XML!
    FrankFang128
        12
    FrankFang128  
       2014-12-04 11:38:46 +08:00   ❤️ 1
    learnshare
        13
    learnshare  
       2014-12-04 11:39:08 +08:00   ❤️ 2
    @imn1 +1

    成对标签必须按照标准闭合,而且要保证嵌套顺序;非闭合标签可以不闭合。

    这个“可以不闭合”的前提是浏览器提供了 *兼容*,就是浏览器允许你犯错。但并不鼓励你犯错。

    HTML 5 的语法相对于 XHTML 更加宽容,但绝不是 *允许不闭合* 这种东西。
    zzNucker
        14
    zzNucker  
       2014-12-04 11:41:37 +08:00   ❤️ 1
    HTML5只是有很强的兼容性。不是说标准是推荐不闭合的。
    breeswish
        15
    breeswish  
       2014-12-04 11:41:52 +08:00   ❤️ 1
    @airyland @hahastudio @imn1

    HTML5 标准里规定了哪些标签可以不闭合(更精确地说是省略闭合标签),哪些标签可以完全不用写,嵌套会引发问题的标签其实是不允许不闭合的

    https://html.spec.whatwg.org/multipage/syntax.html#syntax-tag-omission
    emric
        16
    emric  
       2014-12-04 11:43:08 +08:00   ❤️ 1
    仅仅是部分标签可以不闭合, 不闭合 DIV 恰好是错示例.

    HTML 5 已经整理了一份运行不闭合的名单:
    https://html.spec.whatwg.org/multipage/syntax.html#syntax-tag-omission
    emric
        17
    emric  
       2014-12-04 11:44:35 +08:00   ❤️ 1
    @breeswish 默契... XD
    ivenvd
        18
    ivenvd  
       2014-12-04 12:02:38 +08:00
    写 haml 或者 slim,管它闭不闭合呢。
    imn1
        19
    imn1  
       2014-12-04 12:09:09 +08:00
    @breeswish
    这篇文章里面指的是“可省略”的标签,不是所有标签
    其实html4/4.01就已经有这类可省略标签,因为省略不会产生歧义,例如
    option,li,dt……
    (上面几个 html4 standard 就说明了是可省略后缀标签了)
    之类不会存在嵌套的标签,而且出发点是file size,这个显然是比较久远的思想(但我不是它说过时)

    xhml 修改这点,xhtml基于xml,所以也按xml标准执行,xml为了保持数据准确性,是不容错的,这点也是业界共识。但xhtml继承这点让各大浏览器厂商无法接受,因为网页漏掉一个</option>就只出现一个报错页面,整个网页都不显示,几乎所有xhtml制作都必须增加校验的工序,尤其对于一些非技术人员自己写网页发布文章造成很大困扰,有点违背互联网精神……所以各大浏览器厂商自发联合,绕开w3c自己制定推行html5,并且各家浏览器都着手进行技术支持开发,最终迫使w3c接受了该协议。
    66beta
        20
    66beta  
       2014-12-04 12:15:23 +08:00
    HTML5可以不闭合,但是“推荐”倒是第一次听说

    开发版本不闭合肯定被揍,生产环境可以用gulp跑一下去掉闭合
    alex321
        21
    alex321  
       2014-12-04 12:16:56 +08:00
    html 标签不是上下闭合,就是自闭和,这是严格的规范和标准。
    不用闭合是浏览器的兼容支持,能够支持 html5 标准的浏览器自然会兼容 html5 中规定的可以省略闭合的标签,对其进行自闭和或者上下闭合处理。
    alex321
        22
    alex321  
       2014-12-04 12:18:15 +08:00
    @alex321 补充一个,在我这里,前端制作 html 过程中没有完成自闭和或者上下闭合的,一旦被我发现就会视为不合格。
    Showfom
        23
    Showfom  
       2014-12-04 12:26:29 +08:00   ❤️ 1
    超级大的网站节省流量可以不闭合,参考百度
    myang
        24
    myang  
       2014-12-04 13:10:13 +08:00   ❤️ 1
    标准规定了可以不闭合的标签,那么不闭合就是符合标准的,而非依靠浏览器的兼容支持,如果浏览器必须要求闭合,那反而是浏览器不符合标准了。对于这类标签,闭合与不闭合是同等地位的,没有什么闭合才是更严格符合规范的说法,推荐闭合或者推荐不闭合都是在各自出发点下合理的说法。自己喜欢闭合就闭合,人家不喜欢闭合也不要歧视,众生平等。阿弥陀佛。
    ven
        25
    ven  
       2014-12-04 14:04:05 +08:00
    技术渣渣疑惑:那么什么情况下是嵌套,什么情况是同级的?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2601 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 06:38 · PVG 14:38 · LAX 22:38 · JFK 01:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.