重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32956 人已学习
课程目录
已完结 58 讲
0/4登录后,你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起,重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一:JavaScript (15讲)
JavaScript类型:关于类型,有哪些你不知道的细节?
JavaScript对象:面向对象还是基于对象?
JavaScript对象:我们真的需要模拟类吗?
JavaScript对象:你知道全部的对象分类吗?
JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?
JavaScript执行(二):闭包和执行上下文到底是怎么回事?
JavaScript执行(三):你知道现在有多少种函数吗?
JavaScript执行(四):try里面放return,finally还会执行吗?
JavaScript词法:为什么12.toString会报错?
(小实验)理解编译原理:一个四则运算的解释器
JavaScript语法(预备篇):到底要不要写分号呢?
JavaScript语法(一):在script标签写export为什么会抛错?
JavaScript语法(二):你知道哪些JavaScript语句?
JavaScript语法(三):什么是表达式语句?
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
模块二:HTML和CSS (16讲)
HTML语义:div和span不是够用了吗?
HTML语义:如何运用语义类标签来呈现Wiki网页?
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
CSS 选择器:如何选中svg里的a元素?
CSS选择器:伪元素是怎么回事儿?
HTML链接:除了a标签,还有哪些标签叫链接?
CSS排版:从毕升开始,我们就开始用正常流了
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
HTML小实验:用代码分析HTML标准
CSS Flex排版:为什么垂直居中这么难?
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
HTML语言:DTD到底是什么?
CSS渲染:CSS是如何绘制颜色的?
CSS小实验:动手做,用代码挖掘CSS属性
HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与API (9讲)
浏览器:一个浏览器是如何工作的?(阶段一)
浏览器:一个浏览器是如何工作的?(阶段二)
浏览器:一个浏览器是如何工作的(阶段三)
浏览器:一个浏览器是如何工作的?(阶段四)
浏览器:一个浏览器是如何工作的?(阶段五)
浏览器DOM:你知道HTML的节点有哪几种吗?
浏览器CSSOM:如何获取一个元素的准确位置
浏览器事件:为什么会有捕获过程和冒泡过程?
浏览器API(小实验):动手整理全部API
模块四:前端综合应用 (5讲)
性能:前端的性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,如何保证工作质量?
搭建系统:大量的低价值需求应该如何应对?
前端架构:前端架构有哪些核心问题?
特别加餐 (9讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑(一):前端代码单元测试怎么做?
期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
加餐 | 一个前端工程师到底需要掌握哪些技能?
尾声 (1讲)
尾声 | 长风破浪会有时,直挂云帆济沧海
重学前端
登录|注册

HTML语义:div和span不是够用了吗?

winter 2019-01-22
你好,我是 winter。
今天这篇是我们正式开篇的第一篇文章,我想和你聊聊 HTML。
我猜屏幕那一边的你估计会说:“HTML 我很熟悉了,每天写,这不是初级程序员才学的内容么,这我还能不会吗?”
其实在我看来,HTML 并不简单,它是典型的“入门容易,精通困难”的一部分知识。深刻理解 HTML 是成为优秀的前端工程师重要的一步。
我们在上一篇文章中讲到了,HTML 的标签可以分为很多种,比如 head 里面的元信息类标签,又比如 img、video、audio 之类的替换型媒体标签。我今天要讲的标签是:语义类标签。

语义类标签是什么,使用它有什么好处?

语义类标签也是大家工作中经常会用到的一类标签,它们的特点是视觉表现上互相都差不多,主要的区别在于它们表示了不同的语义,比如大家会经常见到的 section、nav、p,这些都是语义类的标签。
语义是我们说话表达的意思,多数的语义实际上都是由文字来承载的。语义类标签则是纯文字的补充,比如标题、自然段、章节、列表,这些内容都是纯文字无法表达的,我们需要依靠语义标签代为表达。
在讲语义之前,我们来说说为什么要用语义。
现在我们很多的前端工程师写起代码来,多数都不用复杂的语义标签, 只靠 div 和 span 就能走天下了。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(177)

  • 我写前端时间不长,写的都是小东西,确实觉得div和span够用

    我认为html标签和自然语言的演化肯定会是一种逻辑:

    汉语中「地」「的」「得」的正确用法今天大部分中国人根本不会,都只用「的」字,也不影响表达。另外很多字的读音标准都变了,英语也有类似的历史,都是人民的选择成了标准

    所以我的观点是:html也一样,设计者的初衷有他自己的思考,但最后开发者的习惯会成为标准(微信小程序最基本的标签不就是view和text嘛),除非这些标签会影响人数更广大的普通用户
    2019-01-22
    100
  • 人艰不拆
    老夫写页面就是一把梭,div,div,div,什么都是div,display改一改什么都能写
    2019-01-23
    65
  • Scorpio
    老师也有看炮姐吗?(〃•⊖•〃)

    作者回复: 哈哈哈 不然怎么能从里面挑出ruby

    2019-01-22
    55
  • 👽
    完了...今天文章中的一半标签都不认识......
    2019-01-22
    50
  • 王大可
    咦?根据目录,难道不是该介绍模块一 javascript相关的吗
    2019-01-22
    47
  • 馒头小哥
    其实语义化更重要的是在于规范,渲染出来的网页是给大多数用户看的。还有一小部分用户比如 程序员、机器人、视障用户。

    如果一个页面只有 span 和 div,视障软件如果把这个网页读给用户? 读 “ div 开始 class="tile" 今天天气很好 div 结束” 还是读 “标题:今天天气很好” 那个方式更好呢?

    就好比家里的排插,有做得精致美观的、也有简约朴素的,但是大家都是遵循统一插座规范,所以都能正常插上家电使用。

    无规矩不成方圆,语义化能更好的帮助到这些用户去读取、去认知、去使用,这是我所理解的语义化好处。
    2019-01-22
    1
    43
  • Derrickxyz
    目前开发的是企业应用,也就是更关注于“软件界面”,没有使用语义化标签。使用div,span等就实现了需求。
    企业应用不需要做针对性的SEO,也不需要像文章那样分层,划分章节。
    语义化标签在企业应用中,除了增加可读性外,是否还有其他提升?
    谢谢~
    2019-01-22
    26
  • Artyhacker
    以前学习的时候刻意使用过语义化标签,但工作以后直接用react,组件也直接上ant-design,几乎就只需要div和span了。。
    2019-01-22
    24
  • 北京知府
    我们是做业务系统的,团队中有一个同事(纯前端偏UI)特别喜欢使用语义化标签,但是我们在维护他的代码时总感觉他的代码乱糟糟的不好维护,很多样式就直接写标签来定义;而我们其他人(擅长做后台的)则喜欢用div,然后通过有业务含义的class来定义样式。
    个人觉得做业务系统,特别是团队一起协作开发,还是尽量少用语义化标签,这样能减少后期维护的成本。

    作者回复: 1. 用语义化标签,跟用标签名选择器是两码事。
    2. 给自己贴“做业务系统“的标签,潜台词是给自己找借口。
    3. 不要跟没希望的团队一起工作。

    2019-01-22
    21
  • 雪松
    就拿写一个页面来说,直接div/span,让我更加专注页面布局样式内容等信息,如果去语义化,反而造成困扰,不过这个困扰是建立在自己不熟悉语义化的基础之上的。
    所以我认为应该尽量追求语义化,这不仅是便于浏览器搜索引擎,也是竞争力的一种体现。
    2019-01-22
    20
  • mfist
    1html语义化的优点,有利于人或机器更好的解析语义。
    2日常业务开发中很多时候只用div span,站在应该走出自己舒适区的角度,应该正确的用语义化
    3 我觉得在封装项目通用ui组件更需要考究语义化,这样就帮助使用者获取语义化的优点,屏蔽语义化的缺点
    2019-01-22
    15
  • Mowtwo
    虽然文章确实讲了很多有用的东西,但是对于hgroup的例子我觉得还是可以得到一些指正。
    至少到目前为止,我尝试了一下,hgroup已经不再可以在网页上有人和作用了...而我搜索以后,也找到了一篇关于hgroup已经在HTML5.1标准下被取消的信息。所以文章中所提出的部分内容已经不再有效,希望重视。

    作者回复: 我本人比较倾向于WHATWG的living standard,所以保留了这个标签。

    多数语义标签都不会产生实际效果,hgroup针对outline算法仍然有效。

    2019-01-23
    13
  • Zp
    不是该先讲js?
    2019-01-22
    12
  • Geek_be7add
    例如「地」「的」「得」、「他」「她」「它」的区分,我觉得不应该因为分不清而不再区分,而是因为它有意义而去刻意地区分,而且也未必都不分,至少每年几百几千万的本科毕业生应该分得清。同理,虽然it行业入门是英雄不问出处,但是也大部分都有一定基础,所以有助于梳理页面结构的语义化概念还是应该大力推行的。
    2019-01-24
    10
  • sprinty
    语义化标签适合的场景是不是很有限?

    现实开发中除了文档、博客等类型的项目很少用到,我自己也很少用到语义化标签,因为想到其语义就觉得不适合现在的场景。
    2019-01-22
    10
  • leslee
    感觉只有特别适用的场景才能适用语义化标签。工作中的需求太乱了。
    2019-01-22
    10
  • 无羡
    语义开发确实能很好地提升源码的结构,方便阅读。但前提是团队人员都能正确使用语义化标签,否则就会出现div/span和语义标签各种嵌套,很难受
    2019-01-22
    8
  • ...
    1.什么时候需要用语义化标签
       强SEO需求,需要支持屏幕阅读器,视觉呈现重要程度较低的程序
    2.好处
        1)便于机器和人类阅读
        2)便于搜索引擎搜索
        3)自然语境的补充
        4)结构化文档的分级
     3.常用标签
       header 头部
       footer 尾部
       aside 与主体内容不那么相关的部分
       section 块,里面的标题等呈现为文章的 下一级结构
       nav 导航
       article 文章
       address 作者的联系方式
       date 日期
       hgroup 将标题划分为同一部分内容
    2019-05-07
    6
  • hhk
    我理解的语义化,就是对机器友好对人友好。在富文本这类场景时,我们应该尽量地语义化;写软件界面时,保持整体上的结构化即可
    2019-01-23
    6
  • CC
    运气不错,在工作中一直刻意练习使用语义化标签。在往复阅读文档,修改标签中,能慢慢提升对标签的理解。

    这篇文章再次感受到知识结构「完备性」的重要。

    回头对照了一下文档,所有的语义化标签都能被分入三个场景中。

    反过来,在遇到这三个场景的内容时,就更容易去寻找对应的标签。

    这时再去阅读文档,就有了更深入的理解。

    谢谢 winter 老师。
    2019-01-22
    6
收起评论
99+
返回
顶部