前端杂谈

不是教程，不是鸡汤，一派胡言，不要轻易相信

HTML

HTML算是前端最基础，也是最简单的部分。蛋事，展开梳理，依旧蛮复杂。

历史概要：

  • 1995年，HTML 2.0 (古董)
  • 1997年1月，HTML 3.2 (W3C REC)
  • 1997年12月，HTML 4.0 (W3C REC)
  • 1999年12月，HTML 4.01 (W3C REC)
  • 2014年12月，HTML 5 (W3C REC)

插个题外话，万维网技术标准成熟过程分为工作草案（WD）、候选推荐标准（CR）、提案推荐标准（PR）、推荐标准（REC）。一般来说，当标准进入REC阶段时，意味着已经历了理论上和实际上的评审和测试，可以甩开膀子用了。若有兼容旧版浏览器需求，当我没说。

文档类型声明（DTD）

DTD实际上是通用标记语言的规范，用于声明文档类型。

在HTML4时代，我们在蛤.html文件中需要写冗长的DTD，然而我也并不太清楚以下三个古董的区别：

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

它们既不像写给人看的，也不像写给机器看的…纯粹是编码噪音。

HTML5规范对DTD做了简化：<!DOCTYPE html>。整个世界清净了。

头部中包含的标记一般为页面的标题、序言、说明等内容。它本身不作为内容来显示，但影响网页显示的效果。

  • <title> 文档标题
  • <link> 外部资源
  • <meta> 元数据
  • <script> 脚本
  • <style> 样式

比较常用的标记：

移动端页面设置视口宽高

<meta name="viewport" content="width=device-width, initial-scale=1.0">

启用360浏览器高速内核（欺负非码农用户，其实就是chromium内核）

<meta name="renderer" content="webkit">

SEO设置页面关键字和描述

<meta name="keywords" content="A,B,C">
<meta name="descripton" content="desc">

资源预加载

<link rel="preload" href="/styles/other.css" as="style">
jams-talk