前端工程师的祖师爷

李爵士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
3

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

如何调试

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

  • VSCode装插件LintHTML 显示波浪线 颜色 提示
  • 用WebStorm，性能要求高
  • 使用HTML5验证器（在线/npm工具）： 
1

yarn global add node-w3c-validator

用法

标准制定者

W3C 由李爵士创立 非w3school

问答

问：node-w3c-validator 运行失败怎么办？

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

参考链接：

HTML 5 规范文档

HTML 5 规范文档 grouping-content

W3C

2020版前端体系课【方方】

参考文章

  • 无

相关文章

  • 无
  • 作者： Joel
  • 文章链接：
  • 版权声明
  • 非自由转载-非商用-非衍生-保持署名
  • 河 掘 思 知 简