V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
FaiChou
V2EX  ›  前端开发

h5 的语义标签使用频率多么?

  •  
  •   FaiChou ·
    FaiChou · 2019-02-22 10:05:48 +08:00 · 2914 次点击
    这是一个创建于 1861 天前的主题,其中的信息可能已经有所发展或是发生改变。

    做前端开发有段时间了 (react), 平时写页面大致就是:

    <div className={styles.container}>
    	<div className={styles.top}>
        	<div className={styles.wrapper}>
        		<div>TITLE</div>
        	</div>
        </div>
        <div className={styles.content}>
        	{data.map(item =>
            	<div key={item.id} className={styles.item}>
                	     <img src={item.icon} />
                        <div>{item.title}</div>
                    </div>
            )}
        </div>
        <div className={styles.bottom}>
        	<div>BOTTOM THINGS</div>
        </div>
    </div>
    

    用 div 一把梭, 平时每次看到语义标签就会在心中许下以后写页面多用语义标签, 可是每次写代码时候又会使用 div 把所有布局实现.

    从来不用 header, footer, section, article, h1~h6 来分区内容, 只用 div. 文字分区也是 div, p, pre, span, 从没用过 main, strong, b, i, u 等.

    大家常用的语义标签有哪些? 如何锻炼使用语义标签?

    demo

    比如这样的一个布局, 哪些地方可以用语义标签?

    16 条回复    2019-02-23 03:15:17 +08:00
    lwbjing
        1
    lwbjing  
       2019-02-22 10:08:06 +08:00   ❤️ 1
    一般在面试的时候用的比较多。。
    Pastsong
        2
    Pastsong  
       2019-02-22 10:10:58 +08:00
    strong, b, i, u 不是语义标签,基于 markup 和样式分离的原则也不建议使用
    Mutoo
        3
    Mutoo  
       2019-02-22 10:14:17 +08:00
    国内开发者的字典上是不是没有 accessibility 这个词?
    licript
        4
    licript  
       2019-02-22 10:16:19 +08:00
    基本没用过,review 同事的代码 也发现大家基本都是 div 一把梭
    FaiChou
        5
    FaiChou  
    OP
       2019-02-22 10:16:22 +08:00
    @Mutoo a11y 的意识挺差的, 顶多在 img 加 alt , a 加 title, 再多就是 eslint 警告的一些会去 fix..
    IsaacYoung
        6
    IsaacYoung  
       2019-02-22 10:17:14 +08:00 via iPhone
    全程 div
    ChefIsAwesome
        7
    ChefIsAwesome  
       2019-02-22 10:19:27 +08:00
    html 是文档格式,也是做 web app 规定使用的标签。当你拿来做文档的时候,它可能在浏览器里以简化模式显示,可能在其它软件里显示,可能被转换成 pdf,word 等其它格式。这种情况下,你就应该写语义化的标签。
    Tokin
        8
    Tokin  
       2019-02-22 11:48:59 +08:00
    看了下下面那个 card,如果按照我平时的习惯写,我大概会这样:
    `
    <section class="card card-available">
    <header>
    <div class="description">
    <div class="left">
    <h2>测试-3.8 大促销</h2>
    <span>全场通用</span>
    </div>
    <div class="right">
    <span><b>50</b>元</span>
    <span>不限制金额</span>
    </div>
    </div>
    <div class="get">
    <a href="javascript:void(0);">立即领取</a>
    </div>
    </header>
    <footer>
    <a href="javascript:void(0);">优惠券详情描述 <i class="icon"></i></a>
    </footer>
    </section>
    `
    hirasawayui
        9
    hirasawayui  
       2019-02-22 13:31:33 +08:00
    大家都是 div 一把梭,我就比较优秀了,我还会用一些 span。
    shintendo
        10
    shintendo  
       2019-02-22 13:45:39 +08:00
    @Pastsong
    在 HTML5 里这些都是语义标签,没有不建议使用
    DOLLOR
        11
    DOLLOR  
       2019-02-22 14:24:45 +08:00 via Android
    实践起来还是觉得 div+span 方便。首先那些语义标签,会担心有隐式样式、规则,另一方面,div 容易移植到其他的平台或框架(比如小程序)。
    FaiChou
        12
    FaiChou  
    OP
       2019-02-22 14:25:50 +08:00
    tanranran
        13
    tanranran  
       2019-02-22 14:27:10 +08:00
    面试的时候多
    FaiChou
        14
    FaiChou  
    OP
       2019-02-22 14:27:48 +08:00
    (cmd+enter 会直接发送回复啊.. 忽略上条)

    @Tokin 谢谢


    @DOLLOR 在 h5 世界里, 一直用 div+span 会有“愧疚感”, 听你这么说好多了😂
    a4854857
        15
    a4854857  
       2019-02-22 17:15:54 +08:00
    最常用 div h2 span p strong header.剩下基本就没了.
    rob001
        16
    rob001  
       2019-02-23 03:15:17 +08:00 via iPhone
    点击的地方可以用 button
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3151 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 14:27 · PVG 22:27 · LAX 07:27 · JFK 10:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.