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

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

  •  
  •   FaiChou · 94 天前 · 860 次点击
    这是一个创建于 94 天前的主题,其中的信息可能已经有所发展或是发生改变。

    做前端开发有段时间了 (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
        1
    lwbjing   94 天前   ♥ 1
    一般在面试的时候用的比较多。。
        2
    Pastsong   94 天前
    strong, b, i, u 不是语义标签,基于 markup 和样式分离的原则也不建议使用
        3
    Mutoo   94 天前
    国内开发者的字典上是不是没有 accessibility 这个词?
        4
    licript   94 天前
    基本没用过,review 同事的代码 也发现大家基本都是 div 一把梭
        5
    FaiChou   94 天前
    @Mutoo a11y 的意识挺差的, 顶多在 img 加 alt , a 加 title, 再多就是 eslint 警告的一些会去 fix..
        6
    IsaacYoung   94 天前 via iPhone
    全程 div
        7
    ChefIsAwesome   94 天前
    html 是文档格式,也是做 web app 规定使用的标签。当你拿来做文档的时候,它可能在浏览器里以简化模式显示,可能在其它软件里显示,可能被转换成 pdf,word 等其它格式。这种情况下,你就应该写语义化的标签。
        8
    Tokin   94 天前
    看了下下面那个 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>
    `
        9
    hirasawayui   93 天前
    大家都是 div 一把梭,我就比较优秀了,我还会用一些 span。
        10
    shintendo   93 天前
    @Pastsong
    在 HTML5 里这些都是语义标签,没有不建议使用
        11
    DOLLOR   93 天前 via Android
    实践起来还是觉得 div+span 方便。首先那些语义标签,会担心有隐式样式、规则,另一方面,div 容易移植到其他的平台或框架(比如小程序)。
        12
    FaiChou   93 天前
        13
    tanranran   93 天前
    面试的时候多
        14
    FaiChou   93 天前
    (cmd+enter 会直接发送回复啊.. 忽略上条)

    @Tokin 谢谢


    @DOLLOR 在 h5 世界里, 一直用 div+span 会有“愧疚感”, 听你这么说好多了😂
        15
    a4854857   93 天前
    最常用 div h2 span p strong header.剩下基本就没了.
        16
    rob001   93 天前 via iPhone
    点击的地方可以用 button
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3295 人在线   最高记录 5043   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 19ms · UTC 05:23 · PVG 13:23 · LAX 22:23 · JFK 01:23
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1