1：创建环境
（1）webstorm的安装：不做过多赘述，与多数软件安装方式一致。
（2）建立project:目前只使用图中第一项，建立完成后在这个project中创建新的html与css格式页面（也可创建文件夹后在文件夹内创建，更便于管理。）
（3）更多的辅助功能：webstorm与其他编译软件类似，在主题栏有多种设置辅助功能，这点可以私下慢慢了解，因为现阶段编译html中并没有设计过多辅助功能，所以在此忽略不提。
2：HTML基础
（1）生成页面：在新的HTML编辑环境中生成的页面可通过在当页打开浏览器查看，查看有多种方法，最简单快捷的是在当前环境中当鼠标悬浮至右上角处时，会出现多种浏览器logo，只需点击你所想要运行的浏览器即可。其他方法后期会一点点补上。
（2）基础标签：当前一些简单的标签足够我们写出一个像样的页面
* 文本标签：<b></b>字体加粗 <i></i>斜体 <sub></sub> 下标（H <sub>2</sub> O） <sup></sup>上标 <pre></pre>预先格式化标签（何种格式写入，何种格式输出显示）
* table（表格）标签：<table ...></table> 建立表格，...可写入修饰样式（borber边框宽度 ，width表格宽度（总）等）， <tbody></tbody>建立表格内容：<rt></tr>(行)中嵌入<th></th>(列 表标题)或<td></td> (列 表数据)，特殊的当需要合并表格时<th roespan="x">从当前位置起向下竖跨x行， <th colspan="x">从当前位置起向右横跨x行。
*表单标签：<input type="...">...代表各种形式表单数据，可查阅书籍得知。
* 列表标签：<ol><li>...</li></ol>有序列表每一元素li前会有序号标识，<li>中使用type="a\A"来改变序列标识 <ul><li>...</li></ul>无序列表 无序号标识，用实心或空心圆点来列行，<li ...>...可加后缀修饰元素内容。
* 样式：样式为修饰html中元素，根据样式设置位置与引入方式的不同又分为行内样式，内嵌样式与外部样式。
** 行内样式：在<body>中的html标签中加后缀设置内容元素的内容，例如上文table中的修饰样式。
**内嵌样式：在<head>下建立<style></style>，利用选择器名称特殊或批量设置框架样式，选择器分为类选择器（同一标签为一类），class, id三种，常用为class与id：用class选择器时格式为.(class名称){...}，class名称可多个区域块选择相同的名称，当所需样式一样时，相同的class名称更方便；用id选择器时格式为#（id名称）{...}，id为唯一名称，只能出现一次，不能重复使用。（样式内容与css特效写法一致，在css中会涉及整理。）
**外部样式：与内嵌样式内容一致，只是需将<style></style>换成<link>将css文件链接至html文件中实现样式编辑。
* 块标签（容器标签）<div></div>框出一个大的架构，可嵌套所有内容，涉及继承问题（会在后续内容中写到） <span></span>行级容器标签，只能包含文字内容，在特殊标记时常用。
3：css基础
*盒子模型：盒子模型可以说是css中最基础最广泛应用的一种模型（自己理解的图）
**盒子中的内容：content: **盒子的边框：border
**边框与内容之间的距离：padding **盒子与其他盒子之间的举例：margin
border:线宽，线的样式 ， 线颜色；
padding与margin可分为：-left,-right,-top,-bottom; 也可：padding：上下值 左右值；
**width,height为内容的宽度与高度； **line-height:字的高度（一行字），撑开内容
**top:离顶部的距离，分为绝对定位与相对定位（与left一样）。
*绝对定位与相对定位：在css样式中，定位决定着最后盒子块的展示效果，影响着各个方面的位置，我针对现在用到的最常用的父子集div与并行div，做了以下总结（更多层的还不能肯定自己的对错，在后续学习中会再次总结）
**父子集：当父集与子集都没有定位时，子集的top与left值不做显示； 当父集相对定位或绝对定位，子集绝对或相对定位时，子集的top与left值以父集为相对目标丈量距离，父集的top与left值以页面边框为相对目标丈量距离； 当父集不做定位，子集绝对定位或相对定位时，父集的top与left值不做显示，子集的top与left值以父集为相对目标丈量距离； 当父集相对或绝对定位，子集不做定位时，子集top与left值不做显示，父集以页面边框为相对目标丈量距离。
***********默认父集与边框之间有一定的间隙，去除间隙用*{ margin:0; padding:0;}或绝对定位**********
**并行div：绝对定位相对于浏览器定位，相对定位相对于上一个div定位（默认在上一个div的下方产生 ）且相对的是上一个div不定位时的位置，绝对定位互不影响。
*页面在Z轴上的层叠：以垂直屏幕向外的直线为Z轴，样式为Z-index: 当要求父集在子集上时，设置子集Z-index的值小于父集即可（Z-index的值可继承）；Z-index的值与绝对定位有关，子集不做定位时，无法实现Z-index的功能。
*样式：css:的样式多种多样，在这里只涉及至今为止比较常用的，更多的样式格式在各类书籍中均可查阅
**list-style:针对li前标识序列的标示，一般以“none”去掉；
**display:inline-block(转换为行级元素)，none（不显示，多用于子集菜单div块），block（显示，与none相对）；
**text-align：center文本对齐， 只用于文本，不能用于div块；
**float: 元素的浮动，常用left与right ，会对定位有影响，使用时应注意；
**hover鼠标悬浮（伪类）：.A:hover{...} ...中设置鼠标悬浮A时A的样式； .A:hover .B{...} ...设置鼠标悬浮A时B的变化，一般...为display:block,即鼠标悬浮A显示B的内容；
**overflow-y:scroll:超出y（高度）加滚动条； overflow:scroll:超出（x与y）加滚动条； overflow:hidden:超出部分隐藏；
**text-decoration:none :去下划线，针对a链接；
**border-radius:设置边框四周圆角，四个值按顺序分别为 左上，右上，右下，左下；
**background:linear-gradient(角度 颜色1 颜色2) ：背景渐变色，角度为0,90deg 180deg 270deg时分别为从下至上，从左至右，从下至上和从右至左的颜色1渐变至颜色2；
**outline:none : 边框（input type中的自带边框）去除。
