HTML - Hypertext Markup Language
1980年，物理学家蒂姆·伯纳斯-李在欧洲核子研究中心（CERN）在承包工程期间，为使CERN的研究人员使用并共享文档，他提出并创建原型系统ENQUIRE。1989年，伯纳斯-李在一份备忘录中提出一个基于互联网的超文本系统[5]。他规定HTML并在1990年底写出浏览器和服务器软件。(from wikipedia)
HTML 骨架
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"> <!-- 规定编码为 UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 禁用缩放，兼容手机-->
<meta http-equiv="X-UA-Compatible" content="ie-edge"> <!-- IE使用Edge内核-->
<title>Test</title>
</head>
<body>
</body>
charset="GBK"， 汉字内码扩展规范，仅适用中文
HTML Elements
HTML元素可被分为两类，普通元素和语义(Semantics)元素
普通元素构建出HTML骨架，语义元素具有和部分普通元素一样的格式效果，并方便搜索引擎爬虫的扫描，可用于SEO。
普通元素：
<head>：头元素，用来放置各种需要第一步加载的内容。包括基础的css，需要加载的一些框架内容。
h1-h6：标题，1为最大，6最小。
<div>：division，分割网页区域。
内容标签：
<a>：anchor，锚元素，主要用于创建超链接，也可以指向同一页面中的位置，指向电子邮件地址。
<a href="#" target="_blank">Test</a> target="_blank"可以让链接在新标签页打开。
<p>：paragraph，段落，放置自然段文字。
<strong> and <em>：两个元素都表强调，重要性上strong > em，strong显示为粗体，全局强调，表重要性。em显示为斜体 ，局部强调，改变句子内的语义。
<img>：image，图片，src属性内填写文件路径，alt属性填写图片无法显示时显示的替代内容。
<ul> and <li>：unordered list，无序列表，type属性包含circle（空心圆点），disc（实心圆点），square（实心方点）。
<ol> and <li>：ordered list，有序列表
type属性包含：
- a 表示小写英文字母编号
- A 表示大写英文字母编号
- i 表示小写罗马数字编号
- I 表示大写罗马数字编号
- 1 表示数字编号（默认）
start属性：控制列表起始值，接受数字，罗马数字，大小写英文字母。
<dl><dt><dd>：description list, description term, description details. 描述列表
dt：术语
dd：该术语的描述
<pre>：预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。
<code>：呈现一段计算机代码. 默认情况下, 它以浏览器的默认等宽字体显示.
< hr >：分割线
< br >：空格，等同
<quote>：引用，无自带特殊样式，默认内联，不换行。
<blockquote>：块引用，可换行。
语义元素：（参考MDN Semantic）
<header>：多用于网页头部，展示标题或介绍内容，网页标题，导航，搜索框多放置于header。
<footer>：多用于页脚，通常包含该章节作者、版权数据或者与文档相关的链接等信息。一般来说需要延后加载的文件也会放在这里，多为js。
<nav>：navigation，导航栏，由菜单，目录和索引构成。
<main> ：网页主体，任何同时存在于任意一系列文档中的相同、重复内容，比如侧边栏、导航栏链接、版权信息、网站 Logo，搜索框（除非搜索框为文档的主要功能），都不应当被包含在其内。
<aside>：可理解为侧边栏，独立于main之外的部分。
<section>：可用于划分区域，近似于div，但是具有语义。
<article>：原意是文字，应有多个部分组成，可包含标题和内容，可成为可独立分配的或可复用的结构。
<figure>：表一段独立的内容, 经常与说明 <figcaption> 配合使用, 并且作为一个独立的引用单元。这个标签经常是在主文中引用的图片，插图，表格，代码段等等。
<mark>：表示为引用或符号目的而标记或突出显示的文本，这是由于标记的段落在封闭上下文中的相关性或重要性造成的。 这个 HTML mark 标签代表突出显示的文字,例如可以为了标记特定上下文中的文本而使用这个标签. 举个例子，它可以用来显示搜索引擎搜索后关键词
<time>：利用datetime属性标注时间，此元素意在以机器可读的格式表示日期和时间。 有安排日程表功能的应用可以利用这一点。
全局属性
class
全局类名，拥有class的元素可以被类选择器识别，可被用于css, js, DOM，识别和访问特定元素。理论上class不可重复，每个class都是全局唯一的，如有重复类名会报错。
css写法：
# 只匹配完全符合的class值，例如class="a b"，选择器只有a，则不识别
[class="theClassName"] {...}
# 适用于所有包含这一类名的class
.theClassName {...}
id
（理论上）全局唯一的id，但出现重复ID时不会报错，可用于css, js, DOM.
[id="theIdName"] {... }
#theIdName {...}
倘若ID与window已有的属性重名，则js无法找到拥有该ID的元素。但仍然可以使用getElementById()方法找到元素。
contenteditable
带有这一属性的元素可被用户编辑，但不会上传。
tips:
可将<style>从head移进body，将style本身作为元素放入stylesheet并显示，加上contenteditable，则style可显示在网页头部，编辑效果立即显示，但被编辑的部分不会影响源文件，且不可新增，只可编辑。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<style contenteditable> /* 加上contenteditable，使style可在页面上编辑 */
style {display: block;} /* 添加display属性使style显示*/
.test {
border: 10px solid blue;
background: green;
}
</style>
<div class="test">
<p>The concert starts at <time>20:00</time>.</p>
</div>
</body>
</html>
hidden
令元素不显示在页面上，但css里面的display: block有优先级，可令其重新显示
style
style属性的优先级高于css style。可以通过js修改。
一般情况下，优先级如下：
（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style
有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
tabindex
给tab选择加上顺序，以index值从小到大选择。
特异值：
0 ：最后一个被选中
-1 ：永远不被选中
title
包含了表示咨询信息文本，和它属于的元素相关。这个信息通常存在，但绝不必要，作为提示信息展示给用户。一些典型用例：
- 链接：被链接文档的标题或描述
- 媒体元素，例如图像：描述或关联信息
- 段落：脚注或者相关的评论
- 引用：作者信息，以及其他
css tips：怎样换行不溢出且显示为省略号
.theExample {
white-space: norap;
overflow: hidden;
text-overflow: ellipsis
}
剩余内容可以放进title
默认样式
HTML元素有自己的默认初始样式，但style可以覆盖默认样式。
css reset
动手写css之前清除默认样式。
