HTML之父是谁

历史

• 1990年左右诞生
• Tim Berners-Lee,李爵士
• 2004年，英女皇他颁发大英帝国爵级司令勋章
• 2017年，被颁发图灵奖（图灵以后再聊）
• 李爵士做了啥？
• 自己写了第一个浏览器
• 自己写了第一个服务器
• 用自己写的浏览器访问了自己写的服务器
• 发明了 WWW,同时发明了 HTML、HTTP和URL

1990年之前的人类

如何在网上父流

• 电话拨号上网，最高速度不到20kb/s
• 收发电子邮件（一直延续至今）
• 使用IRC聊天（类似中国早期的匿名聊天室）
• 古老的BBS程序（Telnet）
• 没有百度 没有淘宝 没有QQ 没有支付宝

发明这些玩意是为了什么?

• 为了上网冲浪

• 1990年之前，人类不上网

• 让每个人输入网址就能看到网页

• 当时世界上没有网址，李爵士就发明了 URL

• 当时世界上没有网页，李爵士就发明了 HTML

• 为了让这个系统更完善，李爵士发明了 HTTP

对于WWW的直观感受

WWW = URL + HTTP + HTML

• WWW就是万维网world Wide Web
• 中文直译就是：像世界那么大的网

如何使用万维网

• 你输入网址

• 你看到网页

• 你看不见的部分由HTTP搞定

关于.com泡沫

互联网热潮

• 互联网板块及相关领域的快速增长
• 只要你公司有WWW相关业务，就有人投资你（投机）
• 很多公司直接在名字里带上.com,马上就拿投资
• 最终只有少数公司生存下来，如亚马逊、谷歌、雅虎

万维网在美国的火爆

• 1993年，万维网、Mosaic浏览器出现人们视野
• 1996年，对上市公司而言，一个网站已成必需品
• 门户网站崛起，收集内容给人们看
• 网站多了之后，人们就需要搜索内容了，谷歌崛起
• 这一过程在中国几年前的App创业热潮中又一次重现

那时中国在干什么

创业公司

• 1998年11月，腾讯成立，2004年在香港上市
• 1999年阿里巴巴成立，2003年成立淘宝网
• 2000年1月，百度成立，2005年在美国上市

与WWW的关系

• 除了QQ不依赖于WWW外，大部分业务都是WWW 上的。

• QQ依赖的技术是UDP, —种更古老的技术

• 但QQ空间依赖于WWW

• 目前的BAT都极大依赖于WWW

内容共享是互联网的本质

如何制作出网页

• 需要的知识
• 域名知识
• HTTP服务器知识
• HTML知识
• 其他

为什么没有CSS和JS?

• 万维网初期就是没有css和JS
• 1996年底CSS才发布第一个版本
• 1995年底JavaScript才出现
• 也就是说最开始的网页就是HTML在裸奔

HTML

最初构想

假设你有一段文字，想展示在网页上

HTML学习笔记
HTML 的全称是 HyperText Markup Language, 中文翻译为超文本标记语言，更多信息你可以在维基百科上看到。
HTML里最常用的标签有：
hl ~ h6标签，表示标题。
a标签，表示页面跳转。
div标签，表示内容分块。
谢谢你看到最后。

但是怎么让浏览器知道

• 哪里是标题

• 哪里是链接

• 哪里是列表 呢？

• Markdown可以做到

  • 用Markdown表示文章逻辑

• HTML也可以做到

  • 用HTML改写

HTML的历史

诞生于李爵士的一篇文章
HTML Tags

最原始的HTML

很简陋

• —共18个元素
• 除fa标签 其他设计都深受SGMLguid影响
• 这些元素如今还有11个健在

最新版HTML有多少标签?

• 大约110个
• 110个标签 你让我怎么记住?
• 不用记，了解HTML的功能即可

在哪里能找到 HTML权威资料

• Google 搜索 MDN HTML5

HTML 5技术集

HTML 5有两个含义

• 最新版本的HTML语言，含旧标签和32个新标签
• HTML5和它的朋友们（包括CSS3等）

HTML5技术集合

• 新标签、新属性
• 新的通信技术：WebSocketSx WebRTC等
• 离线存储技术：Localstorage、断网检测
• 多媒体技术：视频、音频
• 图像技术：Canvas、SVG、WebGL
• Web增强技术:HistoryAP、全屏
• 设备相关技术：摄像头、触摸屏
• 新的样式技术：CSS 3新的Flex、Grid布局方式

优先学习HTML5标签

需要学110个标签吗？

不需要，学常用的30个标签

HTML 5 全解

语法

• 注释
• DOCTYPE
• 有内容标签
• 无内容标签
• 属性

标签

元数据

• meta

章节

• section
• nav
• artical
• aside
• header
• footer
• main

内容层次

• ol + li
• ul + li
• dl + dt + dd

文字

• a

嵌入内容

• img
• video
• canvas
• svg

表格

• table
• tbody
• thead
• tfoot
• tr
• td
• th

表单

• form
• label
• input
• button
• select
• option
• textarea

正确学习方法

• 步骤
• 把所有标签用嘴巴读一遍，了解其内容
• 全部忘掉，只记住div和span
• 开始学习CSS
• 找一个页面，仿写
• 发现有更合适的标签，就改用更合适的
• 继续写页面

缺乏安全感
这是这种快速学习方法的缺点

觉得自己总在学习新东西
有种不安的感觉
想要有一种「体系感」
就是感觉什么都见过，不是新东西
放弃「体系感」
会学得更快
保证还是会忘
忘了也没事
还记得记忆曲线吗
多通过写代码回顾即可

体系化学习

学一门语言必须学会什么

• 语法（怎么写代码）

• 如何调试（怎么知道自己代码写错了）

• 在哪查资料（其实就是为了抄代码）

  • Google 搜索 MDN HTML5

• 标准制定者是谁

  • W3C

如何学

CRM学习法

• Copy-抄文档、抄老师
• Run -放在自己的机器上运行成功
• Modify -加入一点自己的想法，然后重新运行

HTML的语法是怎样的

标签

• <!DOCTYPEhtml>

  • 文档类型
  • 一旦面试官问一个英文是什么意思，就把它翻译成中文回答
• 内容
  • 例：
• 内容
  • 勾选
  • 勾选
  • 只要有checked就勾选，后面加false也是勾选
  • 学语法不学常态学变态
• 
  *

细节

• 大小写有区别吗？
  • 大写自动纠错，一般是小写
• 要加引号吗？
  • 可加可不加，查考命令行；
  • 例：
• 如何注释？
• 如何组合？

HTML排错

如何知道HTML是否正确

• 看VSCode的颜色提示
• 看WebStorm的颜色提示
• 使用HTML5验证器（在线/npml具）

总结

在哪查资料

Google关键词后面加MDN

标准制定者是谁

• W3C

• 由李爵士创立

• 注意区分它与w3school的区别

• 不要被误导

「资料来源：饥人谷」