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的区别
-
不要被误导
「资料来源:饥人谷」