内容简介：这两天票圈被@Winter大大在极客时间平台推出的《整个系列包含三个部分，即构建Web应用程序或页面要用的最基本的三部分：初看了一下提纲中的八个部分。细思了一下，原本自以为相对了解HTML的我，有几点还是不敢肯定、准确的说出答案。那么从我自己的角度来看这几点。
这两天票圈被@Winter大大在极客时间平台推出的《 重学前端 》刷屏了，而且在微信群和 知乎 上都有相关讨论。讨论中各种声音都有，可算是热闹了。今天我也凑个热闹，来聊聊我对这个课程的看法。
先来看个大纲
整个系列包含三个部分，即构建Web应用程序或页面要用的最基本的三部分： HTML 、 CSS 和 JavaScript 。
HTML部分
- HTML语义：只用
div和span是不是就够了？ - HTML语义：一篇wiki文章究竟会用到哪些语义元素？
- 文档元信息：你知道
head里一共能写哪几种标签吗？ - 链接：除了
a标签，还有标签叫链接？ - 嵌入型元素：怎么
link一个CSS要用href，而引入JS要用src呢？ - HTML标签：标签总结
- HTML语言：
dtd到底是什么？ - ARIA：可访问性不止是给盲人用户的特性
初看了一下提纲中的八个部分。细思了一下，原本自以为相对了解HTML的我，有几点还是不敢肯定、准确的说出答案。那么从我自己的角度来看这几点。
HTML语义化
早期的前端开发者都会比较在意和注重这方面。随着时代的迁移，其实有很多同学开始不太在意这方面的细节。因此在很多网站通篇的只能看到 div 这样的标签元素。但事实上，像 div 和 span 这样的标签元素是没有任何语义化的，他们仅仅是只被运用于布局上。而且在任何浏览器中，都无法使用键盘让其获得焦点，另外也可访问性API也无法进行任何通信。事实上，构建一个具有语义化的页面或应用程序，我们除了使用具有语义化的HTML标签之外，还需要在结构做一些考量，比如说， header 、 footer 、 main 、 aside 、 em 和 strong 标签，应该放在什么位置，应该在什么地方使用它们。
在我的认知里，一个具有语义化的页面是要经得起 HTML标记验证服务 的验证。另外还有一种更土的方式，那就是当你的Web页面在CSS裸奔的时候，结构清晰，而且不会影响用户对网站的浏览。更为高层次的呢？
写出来的HTML结构要让机器可以读懂，也要能让人可以读懂！
有关于HTML语义化相关的讨论也较多，其中 @E0 大大在 知乎上的回答就很详细 。有关于其他的讨论和文章，要是感兴趣的话，可以阅读下面的几篇文章：
- The practical value of semantic HTML
- Semantics in HTML 5
- semantic html
- Semantic HTML
- Accessibility Through Semantic HTML
- Let’s Talk about Semantics
<head> 能放些什么标签
<head> 标签是所有文档元素的容器，它包含了文档的全部信息。常见的信息主要包括： <meta> 、 <title> 、 <base> 、 <style> 、 <link> 、 <script> 和 <noscript> 等标签。而其中 <meta> 的信息量是最大的。比如：
<meta charset="UTF-8"> <meta http-equiv="refresh" content="5;url=" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="150 words" /> <meta name="keywords" content="your tags" /> <meta name="robots" content="index,follow" /> <meta name="author" content="author name" /> <meta name="google" content="index,follow" /> <meta name="googlebot" content="index,follow" /> <meta name="verify" content="index,follow" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="apple-mobile-web-app-title" content="标题"> <meta content="telephone=no" name="format-detection" /> <meta content="email=no" name="format-detection" /> <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" /> <meta name="HandheldFriendly" content="true"> <meta name="MobileOptimized" content="320"> <meta name="screen-orientation" content="portrait"> <meta name="x5-orientation" content="portrait"> <meta name="full-screen" content="yes"> <meta name="x5-fullscreen" content="true"> <meta name="browsermode" content="application"> <meta name="x5-page-mode" content="app"> <meta name="msapplication-tap-highlight" content="no">
有关于 meta 标签更详细的介绍可以阅读：
- Meta 标签与搜索引擎优化
- meta 标签大全
- HTML Meta标签知多少
- HTML Tags for SEO: to use or not to use?
- Complete list of html meta tags/
链接：除了 a 标签，还有标签叫链接？
这个话题我比较期待。在HTML中除了 <a> 标签，还有什么标签叫链接？在我的印象中， <area> 标签有点类似于 <a> 标签，可以做链接跳转。但是不是这个答案，我将期待着。
怎么 link 一个CSS要用 href ，而引入JS要用 src 呢？
这个问题真没有细想过。前段时间刚好在哪翻到过这方面的讨论，可以找不到答案了。不过在 stackoverflow网站上也有一个类似的问题 。看了一个点赞较高的答案：
简单点说，使用 src 表达的是该无事的内容可以被替换，比如 img 、 script 、 iframe 元素； href 表达的是超链接，与引用文档或外部资源建立关系，比如 a ， link 等元素。
其他
另外几条，相对而言接触的比较多。特别是ARIA相关的方面。有关于ARIA相关的东西，在 24 Accessibility网站 有很多话题。另外在 Web内容无障碍指南 2.0 是ARIA方面最新的规范指南。
CSS部分
@ baseline
对于CSS部分而言，自己相对接触的比较多一点，如果要把CSS方面的东西讲全，那足可以讲好久，甚至花一本书的章节来介绍，都不一定难阐述的完。简单的 列了一个大纲，差不多有26章节的内容可聊 。自己也在根据这个大纲完善内容。相比之下，我在完善的内容是怎么使用CSS，而@winter大大在聊的是为什么？比如其中：
baseline
上述几个问题？好几个都不知道是为什么？正好跟着大大的思路学习一下，大神是如何深入理解这些。这将为我以后深入学习CSS将会有很大的帮助。对于贝塞尔曲线和颜色，向大家推荐一篇文章，介绍的非常详细：
JavaScript
- 类型：关于类型，有哪些你忽视的细节
- 对象：JavaScript是面向对象还是基于对象
- 对象：JavaScript中，我们真的需要模拟类吗
- 函数：
this有什么用？应该怎么用？ - 函数：JavaScript里的闭包到底要怎么用？适合用在哪里？
- 事件循环与微任务：
Promise里的代码为什么比setTimeout先执行 - 语句：
try里面放return，finally还会执行吗 - 语句：为什么
1.toString会报错 - 运算符与表达式：新加入的
**运算符，好像有哪里不一样 - 语句，程序与表达式：在
script标签里写export为什么会抛错 - 分号自动补全：到底要不要写分号呢
对于JavaScript部分，一直是我的弱项，今年立个flag，希望能跟着把这方面的知识增强一些。
浏览器实现原与API
很早温大就跟我说，要好好把浏览器的原理方面的知识理解透，这将有益学习和理解一些深层次的东西。但一直以来没有进展。这次专栏中提到了：
- 浏览器的工作原理：你最熟悉的浏览器，是怎么写出来的（上）
- 浏览器的工作原理：你最熟悉的浏览器，是怎么写出来的（中）
- 浏览器的工作原理：你最熟悉的浏览器，是怎么写出来的（下）
- DOM：如何用JS操作文档
- CSSOM：如何获取一个元素的准确位置
- 事件：捕获模型和冒泡模型到底是怎么来的
- 其它一些API：API总集合
有关于浏览器原理相关的文章，在互联网上也相当的多，其中有几篇文章我觉得还是不错的，值得推荐给大家：
要Google开发者网站上，2018年@Mariko Kosaka也推出了四篇文章，深入的介绍了浏览器的工作原理：
- Inside look at modern web browser (part 1) 【 译文 】
- Inside look at modern web browser (part 2) 【 译文 】
- Inside look at modern web browser (part 3) 【 译文 】
- Inside look at modern web browser (part 4)
对于 DOM 和CSSOM，在18年还是花了不少时间在学习，其中还是有不少的收获，但我想听完这个课之后，再回过头来对比之前学习的笔记，我想也会有较大的收获吧。
前端综合应用
- 性能：前端性能到底对业务数据有多大的影响
- 工具链：什么样的 工具 链才能提升团队效率
- 持续集成：几十个前端一起工作，怎么保证基本质量
- 搭建系统：大量的低价值需求如何应付
- 架构与基础库： 如何设计基础库
这是专栏的第四部分，我也很感兴趣。期待专栏也早点出来，估计很多同学都对这一部分很感兴趣的吧。有关于性能方面的，我也推荐几篇文章：
- Front-End Performance Checklist 2019 [PDF, Apple Pages, MS Word]
- 前端性能优化の备忘录（2018版）
- 前端性能优化の备忘录(2017版)
最后说一点
不少同学在说：
购买，这个课程是在交智商税
就此问题，@winter也针对性的做了阐述。 感兴趣的可以点击这里 。我只想说， 智者见知，仁者见仁 。
也有不少同学在说：
这个专栏的内容太简单了。
对而我言，虽然” 很基础 “，但我还有很多都不知道，特别是其中的为什么？就拿我擅长的CSS来说吧，大纲中的八个，我就有一大半不知道为什么？这就是与大神的差距。
另外，我记得前段时间在Hacker News上提出这样的一个问题” Stop Learning Frameworks “。平时也有同学问我，应该不应该去学习JS框架。其实就我个人而言，我更强调先把基础学好，如果工作是要用到框架，可以边学边用，但对于基础还是要扎实一点。
不扯了，如果大家觉得这个课程不错，可以入手：
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
树莓派学习指南
[英]Peter Membrey、[澳]David Hows / 张志博、孙峻文 / 人民邮电出版社 / 2014-4 / 49.00元
树莓派(Raspberry Pi)是一款基于Linux系统的、只有一张信用卡大小的卡片式计算机。由于功能强大、性能出色、价格便宜等特点，树莓派得到了计算机硬件爱好者以及教育界的欢迎，风靡一时。 《树莓派学习指南(基于Linux)》是学习在树莓派上基于Linux进行开发的一本实践指南。全书共3个部分11章，第一部分是前两章，讲述如何设置和运行图形用户界面(GUI)。第二部分是第3章到第7章，讲......一起来看看 《树莓派学习指南》 这本书的介绍吧!
