重学前端

时间  2019-11-12
标签 前端 繁體版
原文   原文链接

先来看个大纲

整个系列包含三个部分，即构建Web应用程序或页面要用的最基本的三部分：HTML、CSS和JavaScript。javascript

HTML部分

  1. HTML语义：只用div和span是否是就够了？
  2. HTML语义：一篇wiki文章究竟会用到哪些语义元素？
  3. 文档元信息：你知道head里一共能写哪几种标签吗？
  4. 连接：除了a标签，还有标签叫连接？
  5. 嵌入型元素：怎么link一个CSS要用href，而引入JS要用src呢？
  6. HTML标签：标签总结
  7. HTML语言：dtd究竟是什么？
  8. ARIA：可访问性不止是给盲人用户的特性

初看了一下提纲中的八个部分。细思了一下，本来自觉得相对了解HTML的我，有几点仍是不敢确定、准确的说出答案。那么从我本身的角度来看这几点。css

HTML语义化

早期的前端开发者都会比较在乎和注重这方面。随着时代的迁移，其实有不少同窗开始不太在乎这方面的细节。所以在不少网站通篇的只能看到div这样的标签元素。但事实上，像div和span这样的标签元素是没有任何语义化的，他们仅仅是只被运用于布局上。并且在任何浏览器中，都没法使用键盘让其得到焦点，另外也可访问性API也没法进行任何通讯。事实上，构建一个具备语义化的页面或应用程序，咱们除了使用具备语义化的HTML标签以外，还须要在结构作一些考量，好比说，header、footer、main、aside、em和strong标签，应该放在什么位置，应该在什么地方使用它们。html

在个人认知里，一个具备语义化的页面是要经得起HTML标记验证服务的验证。另外还有一种更土的方式，那就是当你的Web页面在CSS裸奔的时候，结构清晰，并且不会影响用户对网站的浏览。更为高层次的呢？前端

写出来的HTML结构要让机器能够读懂，也要能让人能够读懂！java

有关于HTML语义化相关的讨论也较多，其中 @E0 大大在知乎上的回答就很详细。有关于其余的讨论和文章，要是感兴趣的话，能够阅读下面的几篇文章：web

  • 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>的信息量是最大的。好比：api

<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标签更详细的介绍能够阅读：xcode

  • 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部分

  1. 媒体、分页、视口：除了属性和选择器，你还要知道这些带@的规则
  2. 选择器：为何只有子元素选择器，没有父元素选择器
  3. 布局正常流：其实从毕升开始，大家就在用正常流
  4. 布局弹性盒：垂直居中为何这么难？
  5. 文本：baseline究竟是啥东西？
  6. 颜色与形状：CSS是如何绘制颜色与形状的？
  7. 动画与交互：为何动画要用贝塞尔曲线这么奇怪的东西？
  8. CSS属性：CSS总结

对于CSS部分而言，本身相对接触的比较多一点，若是要把CSS方面的东西讲全，那足能够讲很久，甚至花一本书的章节来介绍，都不必定难阐述的完。简单的列了一个大纲，差很少有26章节的内容可聊。本身也在根据这个大纲完善内容。相比之下，我在完善的内容是怎么使用CSS，而@winter大大在聊的是为何？好比其中：

  • 选择器：为何只有子元素选择器，没有父元素选择器
  • 布局弹性盒：垂直居中为何这么难？
  • 文本：baseline究竟是啥东西？
  • 颜色与形状：CSS是如何绘制颜色与形状的？
  • 动画与交互：为何动画要用贝塞尔曲线这么奇怪的东西？

上述几个问题？好几个都不知道是为何？正好跟着大大的思路学习一下，大神是如何深刻理解这些。这将为我之后深刻学习CSS将会有很大的帮助。对于贝塞尔曲线和颜色，向你们推荐一篇文章，介绍的很是详细：

  • Bezier Curves from the Ground Up
  • Color: From Hexcodes to Eyeballs

JavaScript

  1. 类型：关于类型，有哪些你忽视的细节
  2. 对象：JavaScript是面向对象仍是基于对象
  3. 对象：JavaScript中，咱们真的须要模拟类吗
  4. 函数：this有什么用？应该怎么用？
  5. 函数：JavaScript里的闭包到底要怎么用？适合用在哪里？
  6. 事件循环与微任务：Promise里的代码为何比setTimeout先执行
  7. 语句：try里面放return，finally还会执行吗
  8. 语句：为何1.toString会报错
  9. 运算符与表达式：新加入的**运算符，好像有哪里不同
  10. 语句，程序与表达式：在script标签里写export为何会抛错
  11. 分号自动补全：到底要不要写分号呢

对于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年仍是花了很多时间在学习，其中仍是有很多的收获，但我想听完这个课以后，再回过头来对比以前学习的笔记，我想也会有较大的收获吧。

前端综合应用

  1. 性能：前端性能到底对业务数据有多大的影响
  2. 工具链：什么样的工具链才能提高团队效率
  3. 持续集成：几十个前端一块儿工做，怎么保证基本质量
  4. 搭建系统：大量的低价值需求如何应付
  5. 架构与基础库： 如何设计基础库

这是专栏的第四部分，我也很感兴趣。期待专栏也早点出来，估计不少同窗都对这一部分很感兴趣的吧。有关于性能方面的，我也推荐几篇文章：

  • Front-End Performance Checklist 2019 [PDF, Apple Pages, MS Word]
  • 前端性能优化の备忘录（2018版）
  • 前端性能优化の备忘录(2017版)

最后说一点

很多同窗在说：

购买，这个课程是在交智商税

就此问题，@winter也针对性的作了阐述。感兴趣的能够点击这里。我只想说，智者见知，仁者见仁。

也有很多同窗在说：

这个专栏的内容太简单了。

对而我言，虽然”很基础“，但我还有不少都不知道，特别是其中的为何？就拿我擅长的CSS来讲吧，大纲中的八个，我就有一大半不知道为何？这就是与大神的差距。

另外，我记得前段时间在Hacker News上提出这样的一个问题”Stop Learning Frameworks“。平时也有同窗问我，应该不该该去学习JS框架。其实就我我的而言，我更强调先把基础学好，若是工做是要用到框架，能够边学边用，但对于基础仍是要扎实一点。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程