HTML：HyperText Markup Language，超文本标记语言。
注意
很多人想学会 HTML、CSS、JS 再做网页，最后却发现看完书之后什么页面都写不出来！这是错误的学习方法，先用再学 才是选编程的不二法门！
不要购买任何 HTML 的相关书籍！只需要在实战中慢慢记忆即可！
历史
1. HTML 的版本（w3c 组织指定规范）
- HTML 4.01
- XHTML
- HTML5
- HTML 5.3
以上版本之间的区别： HTML 4.01 标签非常少XHTML，XML + HTML，基于xml语言的，它的特点是所有标签必须闭合。
例如 XML中的写法<input />,HTML5 中的写法<input>不需要闭合HTML5 兼容前面两种。容错率很高。是最通用的版本标签是不一样的，例如 template、nav、main 标签都是H5标签⚠️ HTML5 和 H5 没有关系，能够运行在微信上的网页，统称 H5。H5跟技术没有关系，你可以用 HTML4，HTML5，只要你能运行在微信上。
谷歌搜索 html spc，可以查到 html 最新的内容
2. 规范文档（Specifications）
- 由 W3C 写文档（Tim Berners-Lee，李爵士）
- W3C 根据浏览器的实际情况总结文档，并不是凭空想象
3.DOCTYPE
- 用来选择文档类型
- 除了 HTML 5 的 DOCTYPE，其它的都很难记 www.w3.org/QA/2002/04/…
- 如果你没写 DOCTYPE，那你会遇到各种奇奇怪怪的 bug
4. html / head / body
标准说 html / head / body 可以省略，是合法的。如果浏览器发现用户没有写 html / head / body ，就会帮忙补上 html / head / body ，建议自己实践一下，可以加强理解和记忆，一般情况下，我们是不省略写。
谷歌搜索 w3c 验证器，这个验证器可以检测写的页面是否合法
这里我们也可以🤔思考一下：哪些标签是必须要写的？
答案是：<title>页面的标题</title>
5.常见标签
😄 学 html 就是学英文
a：anchor，锚点点缩写
form：表单
input：输入框
button：按钮
h1：标题
p：paragraph，段落
ul：un-ordered list，无序列表
ol：ordered list，有序列表
li：list-item,列表项
dl：description list，描述列表
dt：description term，描述项
dd：description definition，描述定义
hr：horizontal rule，水平分割线
small：比较不重要的标签
strong：重要的标签
div：divide，划分的意思，没有任何特殊含义，只是用来区块划分，一般一定要配上一个class
span：横向划分，没有任何特殊含义，只是用来区块划分，一般一定要配上一个class
kbd：keyboard，键盘
video：视频
audio：音频
svg：不规则的图形
nav：navigation，导航
基本上，你知道标签对应单词的意思，就知道这个标签怎么用了（语义化）
⚠️ 另外，除了 div 和 span，其他标签都有默认样式
MDN 上有所有标签的文档
写 HTML
学习前端最大的问题，就是谣言太多
⚠️ HTML 标签是没有块级元素和内联元素区别的，在 CSS 中才有。
⚠️ HTML 只做一件事情：定义这是什么东西。HTML 是不操心样式的，它只管内容。
小试牛刀 👇
1、 HTML 规范是由哪个组织制定的？
答案：w3c
2、 W3C 的创始人是谁？
答案：Sir Timothy John Berners-Lee
3、命令行 whois 是做什么用的？
答案：查看某个域名拥有者的身份
4、 Dribbble.com 这个网站是做什么用的？
- 查看优秀的设计作品
- 设计师的社交网络
- 如果不知道做什么项目，可以去 Dribbble.com 上仿制几个作品
- 中文名称追波网，逼格很高
5、HTML 中 <b> 标签和 <strong> 标签有什么区别？
答案：b 表示样式上的加粗，strong 表示内容重要。
6、p 标签的全称是什么？
答案：paragraph
7、a 标签的全称是什么？
答案：anchor
8、（多选）下面哪些标签里面不能有内容（即空元素）。不会就各个标签依次看 MDN
A. a
B. strong
C. img
D. input
E. button
F. meta
G. link
H. hr
I. br
J. col
K. colgroup
答案是：C D F G H I J K
建议：在 jsbin.com/ 中各个标签自己写一下
补充：<input type="button" value="Hi">和 标签 <button>hello</button> 的区别?
答案是： button 不是一个空元素，它里面可以有内容。input 的 type 为 button 时是一个按 钮，但它里面不能有内容，它是一个空元素。
9、下面哪种写法是 HTML5 推荐的写法？
A. <input type="text">
B. <input type="text" />
答案：A
10、（多选）哪些元素可以出现在 head 元素内？
A. base
B. title
C. meta
D. link
E. script
F. noscript
G. div
H. span
答案：A B C D E F
参看 github.com/joshbuchea/…
11、noscript 标签是干什么用的？（查 MDN）
答案：如果用户浏览器不支持 script，则会显示 noscript 中的内容
测试方法：Chrome 按 F12--》打开开发者工具--》找到右侧的 ... --》Settings --> Debugger --》勾选 Disable JavaScript，然后再刷新。
12、（多选）关于 iframe 描述正确的是？
A. iframe 可以拥有一个 name，a 标签的 target 可以通过 name 指向这个 iframe
B. 现代前端开发中，iframe 很少用
C. iframe 用于在当前页面里嵌入一个页面
答案：A B C
13、（多选）如何用 meta 声明当前页面的 charset？
A. <meta charset="utf-8">
B. <meta http-equiv="content-type" content="text/html; charset=utf-8" >
答案：A B
如果后端在 http 响应里没有写 content-type，前端可以通过 meta 来补救。http-equiv 表示 http 等价物，http-equiv = “content-type” 相当于在设置 http 的 content-type。HTML5更新后，直接用 A 选项写法即可。
14、body 标签的默认 margin 是多少像素？
A. 5
B. 8
C. 10
D.16
答案：B
方法：随便找一个页面，Chrome 按 F12 查看样式即可
15、下面哪些元素的默认 display 为 block？
A. span
B. div
C. img
D.ul
E. h1
答案：B D E
Chrome 按 F12 查看 style，如果没有，点 computed ，搜索 display。
img 是特殊的 inline
16、下面哪些元素是 可替换元素？
A. img
B. input
C. video
D. span
可替换元素：它会被替换，它的展现不是由 CSS 来控制的。可替换元素特殊一些，自带宽高，可以用属性来覆盖它的宽高，也可以用 CSS 来覆盖属性的样式
<style>
img { height:300px;}
</style>
<img width=100 height=200 src='demo.png' alt=''> // css 的优先级比属性 height 优先级高
拓展
W3C 简介（查维基百科）
MDN 简介（查维基百科）
学习完 HTML 知识后，建议前往 w3cSchool 的 HTML 测试题，如果链接打不开，
请前点这里。
