第一次做分享会，我觉得应该先理解，什么是前端。
前端是指 B/S 结构 软件中通过浏览器呈现给客户的部分 —— 网页。 你所看到的网页页面：布局、色调、字体、控件响应等，都属于前端。技术层面上，最基本的前端 = HTML + CSS + JavaScript (最新版本是指CSS3 + HTML5 以及 SVG)
HTML 元素是 HTML 文件的一个基本组成单元。HTML 文件采用树形结构安排HTML 元素，一个HTML 元素是一个满足一项或多项DTD要求的元素。HTML 元素可以拥有属性和内容，可以是标题、段落、链接、嵌入媒体或者其他的任何匹配DTD要求的格式
一个段落由 p 元素所代表被写为
<p> 在HTML 中大多数元素编写… </p>
HTML 并不识别字母的大小写，所以元素（和属性）名字可以是大写或者小写，在XHTML 中必须是小写 但在HTML 规范中也 要求元素使用小写。
- 在所有的 HTML document 中，基础元素都是骨干。
- Doctype 表明了该页面正在使用哪种版本的(X)HTML
- 网页内容元素都是放在 之间 元素也成为根元素 所以其他元素都是此元素的后代
- 元数据(Metadata) 含有页面的相关信息。包括了样式，脚本及数据能帮助软件更好的运用以及渲染页面
<!doctype html>
<html>
<head>
{# 所有无头尾的模板都应该继承这个布局模板 #}
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="" name="keywords" />
<meta content="" name="description" />
<link rel="shortcut icon" href="/favicon.ico" />
<link href="/img/30/57.png" sizes="57x57" rel="apple-touch-icon">
<link href="/72.png" sizes="72x72" rel="apple-touch-icon">
<link href="/114.png" sizes="114x114" rel="apple-touch-icon">
<title>{{title}}</title>
{# 继承页可替换样式 #}
{% block css %}
{% endblock %}
</head>
<body id="{{id}}">
{# 继承页内容块 #}
{% block content %}
{% endblock %}
{# 继承页可替换脚本 #}
{% block js %}
{% endblock %}
</body>
</html>
文本为nunjucks可被继承文本
例如:
<!doctype html>
指示 Web 浏览器关于页面使用哪个 html 版本进行编写指令
提示:请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。
<html></html>
指 根元素 是其他所有元素都是此元素的后代
<meta charset="utf-8" />
提供有关页面的元信息， 位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对， 标签永远位于 head 元素内部。
<link rel="shortcut icon" href="/favicon.ico" />
<title>
<title>元素可定义文档的标题
文本素材来源于 MDN-HTML元素参考
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
-
普通流：简单点来说就是元素按照HTML 中的位置顺序决定排列的过程，并且这种过程遵循标准的描述，这种过程包括了 块格式化， 行内格式化， 相对定位
-
浮动：浮动的框可以左右移动，直到外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于普通流，等一个元素浮动以后，不会影响到块级框的布局，只会影响内联框的排列。包含框不会自适应浮动元素("高度塌陷"现象,及漂浮于普通流之上，但只能左右浮动).浮动能实现横向多列布局。 一般通过float 属性实现
-
绝对定位：绝对定位是元素的位置和文档流无关，因此不占据空间。而相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置
{
postion: absolute;
left: 0;
top: 0;
}
绝对定位的元素位置相对于最近的已定位祖先元素，如果没有已定位的祖先元素，那么它的位置相对于最初的包含块
因为绝对定位于文档流无关，所以它们可以覆盖在其他元素上。可以通过设置z-index 属性来控制这些框的堆放次序
文本素材来源于 w3school