重学前端
程劭非（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- mfist1html语义化的优点，有利于人或机器更好的解析语义。
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
收起评论