起源
1990年一个叫Tim Berners-Lee的人利用业余时间做了三件事情：1、做了一个浏览器。2、搭了一个服务器。3、用自己做的浏览器去访问自己搭的服务器。这三件事情让他成为了世界上第一个在网上冲浪的人。同时，这三件事也让我们现在打开一个网址的时候要先敲三下W。这三个W的全称是World Wide Web，即万维网。Lee理所当然的成为了万维网之父，享受着万维网带来的红利。
万维网由三个部分组成：URL+HTML+HTTP。因此，我们的主角HTML就是伴随着万维网的诞生一起出生的，也是Lee的孩子之一，如今的前端工程师都可以说是站在巨人的肩膀上，全靠祖师爷赏饭（下面附上祖师爷帅照以示尊敬）。
起手式
万事开头难，我们如何开始写HTML呢？以我本人写代码的程序IDEA为例，首先新建一个空的项目，然后在项目中新建一个文件，名字叫index.html，然后在index.html中打一个感叹号 “!”，注意必须是英文的感叹号，然后按一下Tab键，就会有如下的代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>其中第一行代表的是文档类型；第二行lang后面的en表示的是使用的语言为英文，可以改成“zh-CN”代表中文；第四行charset后面的UTF-8是文件的字符编码；第五行和第六行的内容表示禁用缩放兼容手机；第七行是告诉IE使用最新内核；第八行title是页面的标题。
章节标签
HTML在刚刚诞生的时候一共有18个标签，发展到现在标签已经增长到110多个，在我们平时写HTML的时候不可能把这110多个标签全部用到，这里我先介绍一下常用的章节标签。
- 标题 h1~h6
- 章节 section
- 文章 article
- 段落 p
- 头部 header
- 脚部 footer
- 主要内容 main
- 旁支内容 aside
- 划分 div
这九个标签很好理解，只需要在需要的地方使用相应的标签即可。
全局属性
全局属性是所有标签都会带有的属性，一共有如下这些：
class
class表示给标签分类，但很多时候都是做一个标记，然后根据该标记修改标签的样式。
示例：
<div class="demo">demo</div>想要将demo的字体颜色变成红色，在style中写
[class=demo]{
color: red;
}可以简写成
.demo{
color: red;
}.demo表示只要class中带有demo都能匹配到。
contenteditable
在标签中加该属性能使该标签可以被编辑。
示例：
有一个标题
<h1>一个标题</h1>这个标题在页面中展示的时候只能做展示的作用，无法修改。但如果在该标题的h1标签中加contenteditable的话，用户可以在页面中修改标题的内容。
<h1 contenteditable>一个标题</h1>hidden
hidden属性很好理解，就和他所表达的意思一样，只要在标签中加上这个属性，该标签就会被隐藏,需要注意的是hidden是可以用css将其挽回的。
id
id和class在用的时候功能差不多，比如上面class的例子中，使用id的话可以表示为：
<div id="demo">demo</div>在style中简写成
#demo{
color: red;
}JS可以直接调用id，比如：
demo.style.color='red';那么什么时候用id什么时候用class呢？
建议是不到万不得已不要用id，因为理论上如果这个元素是全页面唯一的就使用id，不然使用class，但是id如果在一个页面上重复了，他不会报错，这会导致产生一些很难找到的bug，其次如果id的名字和window已经有的全局属性同名的话会失效。
style
每个元素中可以加一个style属性，style后面的内容和在style标签中写的css内容效果是完全一样的，但是style属性的优先级比css的要高，可以覆盖css中的。该style属性也可以使用js来设置，js设置的样式优先级比style属性的样式更高。
tabindex
该属性可以设置在页面上使用Tab按键切换可交互组件的切换顺序。比如：
<div tabindex=1>一号组件</div>
<div tabindex=2>二号组件</div>
<div tabindex=3>三号组件</div>当用户在页面中按Tab时，会先选中一号组件，再按一下选中二号组件，再按一下选中三号组件。需要注意的是当tabindex等于0和负数的情况。如下：
<div tabindex=0>零号组件</div>
<div tabindex=1>一号组件</div>
<div tabindex=2>二号组件</div>
<div tabindex=3>三号组件</div>
<div tabindex=-1>负一号组件</div> 当用户按下Tab键的时候第一个选中的组件并不是零号组件，而是一号组件，其次是二号三号组件，最后才是零号组件，零号组件后再按Tab也不是切换到负一号组件，而是重新切回一号组件，也就是说当tabindex=0时，他的优先度是最低的，最后才会切换到他，当tabindex为负数时永远都切换不到。
title
当一个组件中有两行内容时，可以使用下面的css将其变成一行，多余的内容用省略号显示
white-space: nowrap; //不换行
over-flow: hidden; //隐藏多余部分
text-overflow: ellipsis; //隐藏的部分用省略号显示可以把省略号省略的内容写在title属性中，使鼠标附上去显示省略的内容。
内容标签
ol+li
<ol>
<li></li>
<li></li>
......
</ol>顺序列表：
1、
2、
.......
ul+li
<ul>
<li></li>
<li></li>
......
</ul>无序列表：
●
●
......
dl+dt+dd
<dl>
<dt></dt>
<dd></dd>
</dl>描述列表：
dt： 描述对象
dd：描述内容
pre
保留空格、回车、tab；
code
里面的字是等宽的
hr
分割线
br
换行
a
超链接 target 在新窗口打开 target:"_blank"
em
强调
strong
加粗
quote
引用 内联
blockquote
换行 块
补充
HTML5权威资料：搜MDN HTML5 语言切成简体中文
标签里面的Boolean属性，写了一般就是true，不写一般就是false
tag大小写无所谓，一般小写
一般不写自闭合的斜杠
HTML这些标签自带的默认样式一般都很丑，要学会写css reset来覆盖默认样式
7580
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
