web前端开发课程建设基础
随着互联网的发展，前端开发已成为当下热门职业之一。许多人选择学习前端开发课程，以期在这个领域找到自己的职业出路。然而，在建设前端开发课程之前，我们需要清楚的了解一些基础理论。
第一步：HTML与CSS的基础
在学习前端开发的过程中，首先需要了解的是HTML与CSS的基础。HTML是网页的骨架，负责网页结构的搭建，CSS则是网页的皮肤，负责网页样式的设计。掌握HTML和CSS的基础知识对于学习和理解后续课程非常重要。
第二步：JavaScript基础
JavaScript是目前应用最广泛的脚本语言之一，它可以为网站带来动态、交互式的功能，比如表单验证、动画效果、页面交互等等。在学习JavaScript之前，需要了解变量、函数、条件语句、循环语句等基础概念。
第三步：工具的使用
在前端开发中，工具非常重要。掌握常用的前端开发工具可以提高开发效率。像Sublime、WebStorm、Visual Studio Code等都是非常常用的文本编辑器。在前端开发中，必须要会使用Chrome或Firefox等主流浏览器的开发者工具，方便我们调试JavaScript代码、排查错误等等。
第四步：框架的使用
框架是一种用于简化开发过程的工具。学习前端开发中必须要掌握至少一种框架。目前较为流行的前端框架有jQuery、Vue、React等等。通过掌握框架的使用，可以大幅度提高开发效率，减少重复性工作。
总之，前端开发课程建设基础非常重要。在学习过程中，需要有循序渐进的学习步骤，以了解前端开发的基础理论、工具的使用、框架的使用等等，通过不断的实践和积累，深入理解前端开发的概念和技能，最终成为一名优秀的前端开发者。
Web前端开发入门指南
随着互联网的普及，Web前端开发也变得越来越重要。前端开发涉及的内容包括Web页面的设计、开发和维护等。这是一个需要掌握技术和艺术的领域，因此需要学习和实践的时间和精力。
本文为Web前端开发新手提供一个入门指南，帮助新手了解Web前端的基础知识和技术要点，以及如何学习和实践。
第一部分：Web前端开发基础
Web页面的开发需要掌握HTML、CSS和JavaScript等基础技术。以下是这些技术的简介。
1. HTML
HTML是一种标准化的标记语言，用于创建和组织Web页面中显示的内容。HTML中的标记（tag）可以描述文本、图片、链接等，使Web浏览器能够正确显示内容。
HTML5是最常用的版本，具有更多的标记和更强的语义化，使内容易于理解和格式化。
2. CSS
CSS是一种样式表语言，用于设置Web页面的外观和样式。可以通过CSS来设置文本、背景、边框、宽度、高度等的样式。
CSS3可以提供更多的样式功能，如动画、背景图像、渐变、阴影等。
3. JavaScript
JavaScript是一种脚本语言，用于处理Web页面的交互和动态效果。可以通过JavaScript编写脚本语言来处理表单验证、页面交互、动态效果等。
JavaScript还可以与服务器交互，获取和更新数据等。
第二部分：Web前端应用开发
除了掌握基本的HTML、CSS和JavaScript技术外，还需要了解Web前端意义下的应用开发，包括以下几个方面。
1. 响应式Web设计
随着移动设备使用量的增加，越来越多的用户使用手机和平板电脑访问Web页面。响应式Web设计可以自动适应不同的设备和屏幕大小，提供更好的用户体验。
2. Web框架
Web框架可以帮助开发人员快速构建Web应用程序，并提供更好的可维护性和扩展性。
常见的Web框架包括AngularJS、React、Vue.js等。
3. Web访问性能优化
htmlcss基础篇——DOM中关于脱离⽂档流的⼏种情况分析
所谓的⽂档流，指的是元素排版布局过程中，元素会⾃动从左往右，从上往下的流式排列。并最终窗体⾃上⽽下分成⼀⾏⾏, 并在每⾏中按从左⾄右的顺序排放元素。脱离⽂
档流即是元素打乱了这个排列，或是从排版中拿⾛。
当前所知的脱离⽂档流的⽅式有两种：浮动和定位。
a.定位属性positon
先看⼀下定位。看⼀段对定位各个字段的描述，有助于理解
值描述
absolute⽣成绝对定位的元素，相对于 static 定位以外的第⼀个⽗元素进⾏定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进⾏规定。
fixed⽣成绝对定位的元素，相对于浏览器窗⼝进⾏定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进⾏规定。
relative⽣成相对定位的元素，相对于其正常位置进⾏定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit规定应该从⽗元素继承 position 属性的值。
position的值为absolute、fixed的元素脱离⽂档流，static、relative没有脱离⽂档流
position定位测试例⼦（为了不影响定位效果，⽂字都放在了最后）
整体效果截图
结论：
1.static定位不脱离⽂档流，设置left/top/right/bottom没有作⽤，对margin/padding敏感。
【证据：#bigest定位left没有其作⽤】
2.⽗⼦节点都是没有脱离⽂档的两种定位（static、relative）的外边距（margin）会合并，显⽰效果以最⼤的那个外边距为准。
一.html基础
结构 表现 行为
html css javascript
1.行内元素：等
会在一行内连续排列，超出父框部分自动换行
2.块元素
等
a.独占一行
b.默认高、宽为auto，不设定高度值，高度为内部内容
c.p标签内不可放块元素
3.行内块元素
img、表单
a.元素按照块属性正确嵌套（a标签内可以包含块元素）
b.行内元素、行内块元素可以通过设置display属性，变为块元素（单向转行，不可逆向）
4.表格
table 表
caption 表名称
thead 表头部
tbody 表主体（可多个）
tfoot 表底部
tr 行
th 表头
td 单元格
colgroup
col
二.css基本
1.css保存位置
a.行内样式、页内样式表、外部样式表
b.行内样式表>页内样式表>外部样式表（外部样式表的link，要书写在页内样式表之前）
2.css权重
a.权重值：
element：1
class：10
id：100
b.编写低权重样式
c.权重决定最终应结果（不论是外部样式表还是内部样式表）
d.最高权重：！important（慎用！）
3.css选择器
a、直接选择：
*
#id（id选取）
.class（类）
div（标签）
（id class 命名不能以数字开头、大小写）
b.层级选择
#id .class div{„„}（层级选择）
c.并列多选
#id, #id, .class{„„}（多选）
4.class可组合使用
注意：
class组合使用，注意样式表中的先后顺序
三.CSS---文字、文本相关属性
文字：
font-size:12px 文字大小（px、pt、in、cm、mm、pc、ex、em、%）
color：#000000 文字颜色
font-family:"微软雅黑","Arial","sans-serif" 字体
font-style:italic 斜体
