前端工程师的祖师爷

李爵士Tim Berners-Lee基于互联网,发明万维网,实现输入地址,即可浏览网页,而www.历史遗留,实际并不需要加也可浏览网页

万维网的本质:内容共享;

输入网址就能看到网页

面试题:请问从输入网址到看到网页,发生了啥?

前端: WWW=URL+HTTP+HTML

  • URL:网址 输入
  • HTML:网页 可见
  • HTTP:协议 完善细节 搞定看不见的部分

如何制作网页?

  • URL 域名
  • HTTP 服务器
  • HTML(1993) 裸奔?JavaScript(95)CSS(96)

markdown VS HTML

文章逻辑(标题列表链接)

两种表现形式

普通用户看 VS 程序员编辑

该用哪个标签(哪些进行配合使用)?

  • 以后学

HTML小时候

HTML 最新(18 October 2018)版本: HTML 5.3

HTML 5.2 IS DONE, HTML 5.3 IS COMING

9 New HTML5 and CSS3 Features You Should Try in 2018


怎么记那么多HTML标签?

怎么查问题?了解技术细节

  • 用google 搜 xxx MDN社区式维护文档

google: HTML5 mdn

  • 别看W3Schoole 不更新;菜鸟教程 更新机制决定 更新不及时

eg. google ruby mdn

HTML5技术集

狭义:标签 CSS3等

广义:

  • 新标签 新属性
  • 通信:WebSockets、WebTRC(纯前端直播)等
  • 离线存储:LocalStorage、断网检测
  • 多媒体:音频、视频
  • 图像:Canvas、SVG、*WebGL
  • Web增强:History API、全屏
  • 设备相关:摄像头、触摸屏
  • 新样式:CSS3 新Flex、Grid布局

程序员的底线

不允许非技术人员指导技术名词H5(手机页面),别被带到沟里,五彩斑斓的黑

HTML5标签非全解

记住常用的标签30个左右,化学元素周期表也不用全记吧

开发工具

  • VSCode
  • WebStorm
  • Chrome
  • MDN文档

语法

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

标签

  • 元数据(5)
    • title
    • base
    • link
    • meta
    • style
  • 章节(9)
    • section
    • nav
    • artical
    • aside
    • h1~h6
    • header
    • footer
    • address
    • main
  • 内容层次(8)
    • p
    • hr
    • pre
    • blockquote(q)
    • ol + li
    • ul + li
    • dl + dt + dd
    • figure + figcaption
  • 文字(11)
    • a
    • span
    • em/strong
    • q(blockquote)
    • time
    • code
    • kdb
    • sub/sup
    • mark
    • br/wbr
    • ins/del
  • 嵌入内容(6)
    • img
    • iframe
    • video
    • audio
    • svg
  • 表格(7)
    • table
    • tbody
    • thead
    • tfoot
    • tr
    • td
    • th
  • 表单(8)
    • form
    • label
    • input
    • button
    • select
    • option
    • textarea
    • progress
  • 可交互元素(2)
    • summary + details
    • menu + menuitem

其他的标签要么用的几率少,要么过时了

标签的正确学习法

  • 用嘴读一遍,了解内容
  • 忘掉,只记div span几乎所有需求都可搞定
  • 开始学CSS
  • 找个适合现阶段水平的页面仿写:

PSDRepo.com 精选

  • 发现有更合适的标签,改用它
  • 继续写页面,兴趣导向

仿写:引起兴趣而页面bilibili 输密码 长按三联 fontFace Ninja

缺乏安全感

  • 放弃「体系感依赖」

快速学习法的缺点?遇到问题再看语法

  • 总在学新东西 VS 什么都见过
  • 记住变态写法——面试
  • 和公司同事统一标准
  • 通过代码回顾,遗忘曲线

体系化学习

必须会什么?

  • 语法(咋写代码)
  • 如何调试(代码报错,具体到哪一行错了)
  • 哪里查资料(为了抄)
  • 标准制定者W3C万维网委员会(by李爵士)

如何学?

  • Copy 抄文档示例 抄上课代码
  • Run 浏览器上运行ok实现效果
  • Modify 加入想法,reRun

HTML语法 标签

  • <!DOCTYPE html>

DOCTYPE是什么?答:文档类型

  • xxx(一段英文)是什么?

答:翻译中文解释 (文档类型有哪几种?是完全另一个问题了)


标签属性值上该加单引号/双引号/不加/皆可?

  • <tag attr=value>内容</tag>

答:HTML参考命令行的一些语法实现的,没有特殊字符的话(比如空格),那加不加引号都一样,像mkdir 'a b c'一样


标签的布尔属性(没有值的属性):

  • <tag attr>内容</tag> 即使设置属性值false,依然生效:

    1
    2
    3
    4
    5
    6
    7
    
    <input type="checkbox" checked="false">
    <!-- 新版HTML的语法,写了就是勾上,不支持添加属性值,没写就没有 -->
    <input type="text" name="name" disabled="false" />
    <!--
    这里虽然属性disabled="false" 语义也代表不禁用,
    但实际上是被禁用的。
    -->

学语法,不学常态学变态,理解记住特殊使用情况:也并不是所有布尔属性都是这样,也存在false关闭属性的情况,面试专问这个


直接闭合(自闭合):

  • <tag attr=value />是旧的XML写法,也对,自动纠错,不报错,兼容 比如Void elements: area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

新版规范写法:

  • <tag attr=value>

HTML 文档写得很清楚,属性有四种写法(突然有茴香豆既视感 /(ㄒoㄒ)/~~)

1
2
3
4
1 <input disabled>
2 <input value=yes>
3 <input type='checkbox'>
4 <input name="be evil">

无内容元素(Void elements): 无内容元素是一种不能包含任何内容的特殊元素。

无内容元素推荐写法:<tag>,标签并非必须闭合,


在没有注释的前提下,HTML 5 文档里 <html><head><body>这三个标签都是可不写的。

具体看规范文档。下面这段 HTML 是合法的 HTML 5:

1
2
3
4
5
6
<!DOCTYPE html>
<title>这是一个合法的 HTML 5 文档</title>
<meta charset="UTF-8">
<p>这是一个合法的 HTML 5 文档
<p> 你好,
<p> 我是某方

参考:

那些前端程序员深信不疑的谣言(HTML篇)By 方应杭

HTML 5 规范文档

W3C


代码演示:JSBin

部分HTML:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<head>
    <title>一个合法的 HTML 5 文档</title>
    <meta charset="UTF-8">
  <!-- 旧的XML写法 也对,,自动纠错,不报错,兼容 -->
    <link rel="stylesheet" href="xxx.css"/>
  <!-- 新版规范写法 -->
    <link rel="stylesheet" href="xxx.css">
</head>
<body>
    <div id="xxx xx">
        <div>hi</div>
    </div>
    <input type="checkbox" checked="false">
    <!-- 新版HTML的语法,写了就是勾上,不支持添加属性值,没写就没有 -->
    <p>这是一个合法的 HTML 5 文档
    <p>你好,
    <p>我是某方</p>
</body>

JS:

1
2
var div = document.getElementById("xxx xx")
console.log(div);//可取到,id可能是有空格
  • 而团队规范是另一维度的事了
细节
  • 大小写有区别?没
  • 要加引号?
  • 如何注释?Crtl + / 和 Cmd + /
  • 如何组合搭配?后面讲

如何调试

HTML排错,代码报错,快速定位到哪一行错了

  • VSCode装插件LintHTML 显示波浪线 颜色 提示
  • 用WebStorm,性能要求高
  • 使用HTML5验证器(在线/npm工具):

用法

标准制定者

W3C 由李爵士创立 非w3school

问答

问:node-w3c-validator 运行失败怎么办?

答:失败就跳过,这个软件有 bug,不要再来问我了,我只是随便找了个 node 工具演示一下用法而已。出错了找其他工具代替这个工具即可。请不要在这里浪费时间,直接跳过!

参考链接:

HTML 5 规范文档

HTML 5 规范文档 grouping-content

W3C

2020版前端体系课【方方】


·未完待续·

参考文章

相关文章