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

直接在 div 里面写文字合适吗?

  •  
  •   hoythan · 2018-01-15 11:47:57 +08:00 · 3880 次点击
    这是一个创建于 2509 天前的主题,其中的信息可能已经有所发展或是发生改变。

    有个朋友一直喜欢直接在 div 里面写文字,从来不用 h 标签 p 标签,遇到有不一样的内容就 div+span 标签实现,我觉得不合适,但是找不到相关不合适言论内容。

    15 条回复    2018-01-15 16:39:12 +08:00
    noea
        1
    noea  
       2018-01-15 11:50:17 +08:00   ❤️ 1
    如果你写的文字不需要排版,也没有什么标题,列表等语义化的标签,那么随意。
    反之 div 里面,嵌套你需要的排版标签。
    zzuieliyaoli
        2
    zzuieliyaoli  
       2018-01-15 11:50:29 +08:00   ❤️ 1
    Jiavan
        3
    Jiavan  
       2018-01-15 11:51:44 +08:00 via Android   ❤️ 1
    语义化不总是最合适的
    fe619742721
        4
    fe619742721  
       2018-01-15 11:53:16 +08:00   ❤️ 1
    这样的代码没有 语义化和 可访问性,维护起来也很蛋疼。

    HTML 语义化 语义化的含义就是用正确的标签做正确的事情,html 语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;在没有样式 CCS 情况下也以一种文档格式显示,并且是容易阅读的。 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

    一般来说要注意一下,不过现在的网络环境,也很少去考虑 css 加载不出来的情况了。
    涉及到兼容性开发的,我一般会用 div 去替代按钮啥的
    hoythan
        5
    hoythan  
    OP
       2018-01-15 11:53:55 +08:00
    @Jiavan 所以你认为 div 里面直接写内容是没问题的吗,确实他不会报错
    hoythan
        6
    hoythan  
    OP
       2018-01-15 11:58:16 +08:00
    我只想反驳他认为的 没有报错就不会有问题 的看法,现在我都怀疑我坚持写 p h 标签的意义了。如果网站不需考虑 seo 的话(企业内部服务)。
    lhx2008
        7
    lhx2008  
       2018-01-15 12:02:54 +08:00 via Android   ❤️ 1
    html 语义化方便阅读,而且 css 选择器更直观。
    像 header section footer 啥的标签本身都是 div,但是还是出了标准。
    hoythan
        8
    hoythan  
    OP
       2018-01-15 12:03:43 +08:00
    @lhx2008 css 样式不是一般都基于 class 吗
    shapl
        9
    shapl  
       2018-01-15 12:04:00 +08:00   ❤️ 1
    小程序写得多,就释怀了。。。
    hoythan
        10
    hoythan  
    OP
       2018-01-15 12:05:14 +08:00
    @shapl 小程序不是也有 text 标签嘛
    Humorce
        11
    Humorce  
       2018-01-15 12:15:04 +08:00 via iPhone   ❤️ 1
    是的,html 80%以上都可以直接用 div 标签解决。

    用双脚可以走遍亚欧大陆大部分地方,但是去不了其他大洲。

    哦,不对,不借外力的情况下且考虑实际情况,还可以从苏伊士运河可以游过去非洲。
    crysislinux
        12
    crysislinux  
       2018-01-15 12:19:45 +08:00 via Android   ❤️ 2
    div 有啥问题么,随便啥都可以放进去,p 就不一样了,只能放很少的几个标签进去,我只有真逻辑上的段落才用 p。
    imn1
        13
    imn1  
       2018-01-15 12:28:43 +08:00   ❤️ 3
    其实在互联网发展过程中,这种相互转变已经发生过多次,并没有最终统一标准,所以两种写法都不能说错

    曾经 html4 时代,当时流行 div 重构,建议取消 p/h 等标签,甚至主张 div/span 替代 table
    当时这种主张的理由是,排版理应交由 css 负责,p/h 等使用 css 不太方便,div 等提供内容就足够了
    第二个理由是,p/h 标签在正文(文章性质)网页还可能有用,但在引导、导航,非文章页没什么用处,而且也不方便在 p 标签内插图,对图文并茂的文章排版困难,而 div 完全可以实现并取代这些标签的作用
    div 的最大作用是更方便后台向前台输出数据

    后来,html5 又重新提出语义化标签,认为简洁的标签更方便一般人,尤其是非程序员撰写文章,更大方便信息交流
    例如很多科学工作者(扩展到各行各业),经常要发布一些发现、理论、观点,但他们未必人人都会 css 排版
    其中很重要的原因是批判 w3c 推行的 xhtml 标准,当时 xhtml 标准非常严格,稍微标签错了一个字符,整个页面都不能显示,但阅读者并不了解 xhtml,只会怪责浏览器或者 ISP,所以浏览器商怒了,绕过 w3c 自行组织制定 html5 标准,后来 w3c 妥协,重新把 google 带头开发的 html5 收编到新标准,舍弃了 xhtml
    gl09025
        14
    gl09025  
       2018-01-15 16:20:13 +08:00
    我觉得语意化其实最大的作用是对 『无障碍阅读』 优化的。很多无障碍阅读软件是根据标签来阅读的,要不然无障碍阅读软件就不认识。
    geelaw
        15
    geelaw  
       2018-01-15 16:39:12 +08:00
    如果想要的话,完全可以用 div 代替 p、h 系列,包括 accessibility 的问题——用 aria 属性解决。

    但是何必这么麻烦呢?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1161 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 19:01 · PVG 03:01 · LAX 11:01 · JFK 14:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.