HTML是谁发明的？
发明者：Tim Berners-Lee
发明时间：1990年
做了哪些事：
- 自己写了第一个浏览器和服务器；
- 用自己写的浏览器访问了自己写的服务器；
- 发明了WWW，同时发明了HTML、HTTP和URL
获得成就：
- 2004年英女皇为其颁发大英帝国爵级司令勋章；
- 2017年因“发明万维网、第一个浏览器和使万维网得以拓展的基本协议和算法”获得2016年度图灵奖；
补充和致敬：
- 发明HTML，所以被称为“HTML之父”；
- 发明了第一个浏览器和服务器，所以被称为“第一个上网的人”；
- 获得爵级司令勋章，所以被称为“李爵士”；
- 前端祖师爷级别的人物，大佬中的大佬，膜拜、致敬；
HTML起手应该写什么？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
备注：
<!DOCTYPE html> 声明文档类型，告诉浏览器：兄弟，我是html5文档，你按这个模式渲染就完事了；
<html lang="en">告诉浏览器：兄弟，我页面语言是英语；据说 Chrome 里的翻译功能有时也会依据这句代码；
<meta charset="UTF-8"> 文件字符编码，一般放在最前面，防止出现乱码；UTF-8 支持全人类的语言，而 GBK 只支持亚洲人的语言，所以推荐使用 UTF-8 ；
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 管理页面缩放；
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 默认把 ie浏览器 的渲染模式切到最新的 edge 模式；
常用的表示章节、层级的标签
1.h1~h6
标题标签，会给标题字体加大加粗：
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
2.section
3.article
4.p
以上三个通常放在一起用，section表示章节、article表示文章、p表示段落：
<h1>我的小说</h1>
<section>
<h2>第一章</h2>
<p>从前有座山，山上有座庙，庙里有个老和尚，他洗头比较喜欢用飘柔洗发露。</p>
</section>
5.header
6.footer
7.main
8.aside
9.div
以上几个标签通常一起用，header表示头部，footer表示底部，main表示主要内容，aside表示旁支内容，div表示区域划分：
<header>头部内容</header>
<div>
<main>主要内容</main>
<aside>旁支内容</aside>
</div>
<footer>底部内容</footer>
标签全局属性
啥是全局属性：就是每个标签都有的属性；
1. class
给标签分类，当只有一个类时，引号用单引、双引或不加都可以，据说是因为李爵士在HTML发明时借鉴了命令行：
<div class=middle>居中标签</div>
<div class='middle'>居中标签</div>
<div class="middle">居中标签</div>
一个标签可以有多个类,当有多个类时，就要用双引号了：
<div class="middle red-color">居中的、红色的标签</div>
2. contenteditable
使标签里内容可以随便修改，任人摆布：
<p contenteditable>从前有座山，山上有座庙，庙里有个老和尚，他洗头比较喜欢用飘柔洗发露。</p>
3. hidden
隐身术，加上后用户在网页上就看不到这个标签了，但是可以用CSS改回来；
<p hidden>从前有座山，山上有座庙，庙里有个老和尚，他洗头比较喜欢用飘柔洗发露。</p>
4. id
身份证，代表全页面唯一的标签，但是尽量不要用，因为两个标签用同一个 id 也不会报错，属性值要避免很多特定单词：parent、top、self 等，推荐用 class 属性；
5. style
美颜相机，美化标签；补充：JS里改style > 行内style属性改样式 > head标签里的style标签
6. tabindex
用Tab键操作页面内容时，标签的响应顺序；
1、2、3 ...：第一、第二、第三个被访问
0：最后一个被访问
-1：别碰我！哪儿凉快哪儿待着去！
<p tabindex=1>内容1</p>
<p tabindex=2>内容2</p>
<p tabindex=3>内容3</p>
<p tabindex=4>内容4</p>
<p tabindex=0>内容5</p>
<p tabindex=-1>内容6</p>
7. title
与head里的title标签区分开，那个是标签，表示网页标题。这个是标签里的属性，当鼠标悬停在标签上时会显示出属性值内容；
<head>
<title>这里是网页标题</title>
</head>
<body>
<p title="鼠标悬停在上面才能看到的内容">内容</p>
</body>
常用内容标签
1. ol + li
有序列表 + 列表项，ordered list + list item；
<p>我喜欢：</p>
<ol>
<li>唱</li>
<li>跳</li>
<li>rap</li>
<li>篮球</li>
</ol>
2. ul + li
无序列表 + 列表项，unordered list + list item；
<p>我爱吃：</p>
<ul>
<li>苹果</li>
<li>寿司</li>
<li>披萨</li>
</ul>
3. dl + dt + dd
自定义列表 + 描述对象 + 描述，description list + description term + data；
<p>热门网游：</p>
<dl>
<dt>LOL</dt>
<dd>一个很受欢迎的多人在线竞技游戏</dd>
</dl>
4. pre
preview，显示内容中的回车和空格标签；你在其他标签里输入再多的换行和空格，页面上都只会显示一个空格，但是pre标签可以完整的显示；
<p>
第一行
第二行
第三行
</p>
<pre>
第一行
第二行
第三行
</pre>
第一行 第二行 第三行
第一行
第二行
第三行
注意效果对比；
5. hr
水平线；非闭合标签：自闭了；也叫做单标签，<hr> <hr/>两种写法都行
6. br
break，换行；
<p>
第一行<br>
第二行<br>
第三行<br>
</p>
第一行
第二行
第三行
7. a
anchor，锚点，链接，跳转到特定链接；
<a href="">当前网页</a>
<a href="https://www.baidu.com/" target="_self">百度一下</a>
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
href属性里不加内容，就跳转到当前的网页；加了特定网址，那么点击后就会跳到这个网址；
target属性值为_self时，会从当前窗口打开该链接，外国人一般喜欢这种模式；
target属性值为_self时，会开一个新窗口打开该链接，中国人一般喜欢这种模式；
8. em
emphasis，强调，语气上的强调；
9. strong
内容本身很重要；
10. code
用于存放代码，常和pre标签一起用,内容字体默认是等宽的；
<pre>
<code>
var a = "hello,world!";
console.log(a);
</code>
</pre>
11. quote
内联引用
冬泳怪鸽说过：<quote>加油，奥利给！</quote>
冬泳怪鸽说过：我们遇到什么困难，都不要怕，勇敢的面对它。战胜恐惧的最好办法就是微笑着面对它。加油，奥利给！
12. blockquote
块级引用
冬泳怪鸽说过：<blockquote>加油，奥利给！</blockquote>
冬泳怪鸽说过：
我们遇到什么困难，都不要怕，勇敢的面对它。战胜恐惧的最好办法就是微笑着面对它。加油，奥利给！
这里要注意quote和blockquote的比较；
