关于基础构建eb，这些你都知道吗（很全）unique

以下均是参考MDN web docs，总结出来的比较重要的知识点，与君共勉。不妥之处，还望大家及时提出！

是一种告诉浏览器如何组织页面的标记语言。它由一系列元素组成。

1. 开始标签 eg: <p>2. 结束标签 eg: </p>3. 内容 标签中间写的即内容。4. 元素 以上三者相结合就是一个完整的元素。

<p>追寻<strong>梦想</strong>的<em>脚本</em>不<ins>停歇</ins></p>

追寻梦想的脚本不停歇

块级元素：通常用于展示页面上结构化的内容，eg：段落、列表、导航菜单、页脚等。一般会独占一行，其后的内容会挤到下一行显示。内联元素：通常出现在块级元素中并环绕文档内容的一小部分，不会导致换行。eg: <em>首先</em><em>其次</em><em>最后</em> 首先其次最后

<p class="edit-p"></p> 其中class即使p元素的属性，格式：一空格二等于号三引号，其中引号是单引号/双引号都可，看个人习惯。当然，也有一些无值属性，下面的disabled属性使得input框变成灰色，禁止用户输入。eg:<input type="text" disabled/>eg:<input type="text" />

注：使用 ?分隔主URL与参数值，以及使用 &来分隔 mailto:中的各个参数。这是标准URL查询标记方法。

其中，是文档声明。html元素是根元素，包裹着整个完整的页面。head元素是一个容器，内容不在页面显示。meta元素中的charset一般写'UTF-8'就可，它囊括了人类大部分的文字。title元素设置页面标题。body元素包含了你访问页面时所有显示在页面上的内容。

（看下面代码，实质是只相差一个空格，那些空格不起作用，HTML会将连续出现的空白字符当做一个空格符处理。）

一直在路上，故有无限的可能。

一直在路上，故有无限的可能

左家垅

的夏天

左家垅 < p > 的夏天

<!-- <p>用户看不见，但很有用！</p> -->

页面加载完成时，head标签里的内容不会在页面显示，但它的作用是保存页面的一些元数据。<meta charset="UTF-8">如果你将charset设置为GBK（中国大陆国标字符集），则页面将会出现乱码。

注：Chrome浏览器会自动修正错误的编码，你或许看不到。

六个标题元素标签如下，其中h1最好使用一次，这是顶级标题，每页不要超过3个标题：

无序列表

有序列表，可以嵌套

描述列表

其中，描述列表使用 dl 标签 ，每一项用 dt 闭合，每个描述用 dd 闭合。浏览器的默认样式会在描述列表的描述部分和描述术语之间产生缩进。一个术语 dt 可以同时有多个描述 dd。

块引用 用 <blockquote>元素包裹，并在 cite属性里用URL来指向引用的资源。行内引用 用 <q>元素包裹，并在 cite属性里用URL来指向引用的资源。

<p>我们使用 <abbr title="超文本标记语言（Hypertext Markup Language）">HTML</abbr>来组织网页文档。</p>

我们使用 HTML来组织网页文档。

当光标移到HTML上时会出现提示。

<p>咖啡因的化学方程式是C₈H₁₀N₄O₂. 方程式X²=4</p>

咖啡因的化学方程式是C8H10N4O2. 方程式X2=4

无语义元素

<p>少年自由少年狂<span class="editor-note">[编辑批注：此刻舞台灯光应变亮]</span></p>这里，‘编辑批注’仅对舞台剧导演提供额外指引；没有具体语义。

<div>块级无语义元素，eg:一个电子商务网站页面上有一个一直显示的购物车组件，不能用aside/section，因为它既和主内容没多大关联，也不是页面上主内容的一部分，这种情况下要用div。注意：在没有更好的语义方案时才选择它，尽可能少用，否则维护成本太高。