重学前端
程劭非（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语义：如何运用语义类标签来呈现Wiki网页？
winter 2019-01-24
你好，我是 winter，今天我们继续来聊聊 HTML 模块的语义类标签。
在上一篇文章中，我花了大量的篇幅和你解释了正确使用语义类标签的好处和一些场景。那么，哪些场景适合用到语义类标签呢，又如何运用语义类标签呢？
不知道你还记不记得在大学时代，你被导师逼着改毕业论文格式的情景，如果你回想一下，你在论文中使用的那些格式，你会发现其实它们都是可以用 HTML 里的语义标签来表示的。
这正是因为 HTML 最初的设计场景就是“超文本”，早期 HTML 工作组的专家都是出版界书籍排版的专家。
所以，在这一部分，我们找了个跟论文很像的案例：Wikipedia 文章，这种跟论文相似的网站比较适合用来学习语义类标签。通过分析一篇 Wiki 的文章用到的语义类标签，来进一步帮你理解语义的概念。
你可以在电脑上，打开这个页面：
为了防止这个页面被修改，我们保存了一个副本：
这是一篇我们选择的 Wiki 文章，虽然在原本的 Wikipedia 网站中，也是大量使用了 div 和 span 来完成功能。在这里，我们来尝试分析一下，应该如何用语义类标签来呈现这样的一个页面 / 文章。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》，如需阅读全部文章，
请订阅文章所属专栏。
请订阅文章所属专栏。
立即订阅
登录 后留言
精选留言(115)
莲就擅长div span a标签😂2019-01-24 140
鱼膩进入wiki点开控制台，发现很多地方wiki本身并没有严格地按照win大说的来， 大部分也是did, span一把梭，有顺序的nav直接用的ul, 文中说的code, sample这些也都没有用。。是不是可以理解成其实很多时候我们为了实现样式的完全控制，降低了对HTML本身语义化的要求； 或者说在大部分条件下，快速还原设计稿比语义化本身更重要2019-01-26 52
咖飞的白看懂之后，果断敲出一个wiki页面来，才是最好得学习。2019-01-24 44
CC由于项目的关系，大部分时候是制作品牌网站和软件界面的场景，因此我最擅长的语义标签是「作为整体结构」的语义类标签。
在这两个场景中，一般不会有大段的阅读文字（即使是 FAQ，也避免大段文字，毕竟没人喜欢读字）。
深度了解语义类标签使用的一个技巧，就是去了解爬虫是如何理解自己的网站，从而逆向理解标签是否使用得当。
这篇文章最大的收获，就是认识到自己对「自然语言延伸」和「标题摘要」的语义类标签理解不足。比如 pre 和 samp，让我有”居然是这样使用“的感觉。
现在知道，如果遇到内容网站的场景（比如博客），我就应该复习一次「自然语言延伸」和「标题摘要」的语义类标签文档，确保正确使用。
谢谢 winter 老师。2019-01-24 37
段先森瑟瑟发抖2019-01-24 18
77777777为什么很多网站使用i…等标签作为小图标的背景？？2019-01-26 2 15
小烦·张只想说， 好多标签都没见过，更别说用过， 惭愧惭愧2019-01-24 12
木子烁束岸简历上写精通html的，脸疼了2019-01-25 11
Brigand微信小程序的wiki适配性很好，能简单说一下怎么实现的吗？2019-01-24 11
Yancey维基百科毕竟太老，div span一把梭也很正常，看一下苹果的页面，你就会很有收获2019-03-12 9
Sylvia不求多，只求精，除了上一篇的标签，此篇文章的abbr pre code figcaption site time dfn，我能说这些标签我几年前就用过，但后来见几乎没人用，也舍弃了，有些东西还是需要多坚持呀∑(´△｀)？！2019-02-09 9
萧润曦这里的 hgroup标签需要说明一下，早期在HTML5规格尚未发布正式版的时候，当时是有hgroup标签的，但HTML5工作小组在2013年4月2日的一次会议结论中决定从规格中移除hgroup元素，因此请大家不要再用这个hgroup元素。我在使用angular的时候，用hgroup无法正常执行的 ，要执行需要加入NO_ERRORS_SCHEMA到ngModule的schemas中2019-03-19 8
叫我大胖就好了我听哭了，感觉自己啥也不会了2019-01-24 8
Lisongyi曾经做过whatwg文档的中文翻译工作，那里面的语义化在我看来是做到了极致2019-01-25 7
水煮饺我只会div套div。还在努力学习。2019-01-24 7
小妖精果真需要重学前端2019-01-24 6- mfist1通过wiki的例子发现真实的网页中还是有使用语义化的，之前以为现实应用中很少。
2看来有必要优化下我们网页的布局模板了。
3hr标签语义是话题的转向，学习了。之前以为就是一条横线，学习了。2019-01-24 6 
鱼竿涨知识了，虽然在开发中最常用到的还是div和span，但是换一种思路，了解了语义的概念之后，麻麻再也不用担心我的classname造不出名字了，将这些语义化的表达方式融入到样式的命名中，也是提高代码可读性的方法吧
感谢win大2019-02-18 5
小动物很困1.标题+列表 dl>dt>dd
2.普通列表 ul/ol >li
3.header section footer nav等整体布局语义
4.div+span大法
别的不会了....2019-01-28 5
jim我最会用section...2019-01-28 5
收起评论