技术贴

       前端开发是创建Web页面或app等前端界面呈现给用户的过程。前端开发通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。web标准简单的来说就是结构、样式、行为。其中html就是来构建整个页面的结构的，而css是用来修饰整个页面中的文字图片和各种边框小部件使得页面变得更加好看，最后JavaScript就是用来给整个页面加特效用的，从而让我们的页面看起来更加酷炫，在很大程度上提升用户体验。

html标签

html标签可分为双标签和单标签，双标签种类比单标签多，而单标签种类较少。比如<p> </p>,他是双标签需要有头有尾，把文字内容包住。而单标签常见的几个如下：<br/>,<hr/>,<img>,<base>。用法不一样所呈现出的效果就不一样。

         html里面标签非常多，我们在网页布局里面常用的标签就是列表。列表里面我们常用的就是无序列表和自定义列表。

         1.无序列表

       <ul>

<li>内容</li>

<li>内容</li>

<li>内容</li>

                   </ul>

    无序列表是我们网页最常用的标签，他是行内元素，内容不分先后顺序，属于并列关系。而里面可以添加各种内容，我们就可以给他布局，把整体局面给他有规律的排好，让我们看起来更加的有序。每一个li里面可以包含内容，而他们整体都包含在ul这个大盒子里面，我们可以通过给他设置宽高，调节他的颜色使得他有序排列。

         2.有序列表

         有序列表我们不常用，因为我们的页面布局中经常都是没有顺序的，基本存在的是并列关系。所以我们很多情况下使用无序列表。

         3.自定义列表

       <dl>

<dt>内容</dt>

<dd>内容</dd>

<dd>内容</dd>

                   </dl>

         自定义列表我们常用语首页底部的布局,因为dt、dd是并列的兄弟关系，所以当我们需要对两种内容进行编辑时，用它就再好不过了。里面的字体样式颜色编辑的时候，分别给他们添加就很轻松了。

         Html里面的标签数不甚数，用法各不一样，又存在着或多或少的联系，所以需要我们准确理解的运行作用原理，才能把他运用在页面中得心应手。标签虽多，所以需要我们长期积累和经常使用，才能把它运用得熟练。

Css

         Css就是我们用来给我们刚刚上面html制造出来的房子框架里面的内容装修的，给他上色。里面的内容自然也不少，所以我下面挑出几点来简单讲下。

1.      float 浮动

浮动是我们在css布局里面的一种机制，布局三种机制分别为 标准流，浮动，定位。

我们的网页是平面的，但是我们在css布局里面又可以说是3D立体的，最下面是标准流，中层是浮动，最高层是定位，上面的会覆盖住下面的元素。浮动可以让多个块级元素一行无缝隙显示，布局最为常用。

         一个父盒子中包含了许多子盒子，如果我们给了其中一个子盒子浮动，那么其他的子盒子我们都得给他浮动，要不然就会影响整个页面的布局。浮动漂浮在标准流上面，浮动的盒子不占有位置，浮动元素能改变display属性，类似行内块。

         浮动的目的就是让多个块级元素一行内显示，浮动只有左右没有居中，也就是只存在float left，float right。两种写法。在网页布局时有的时候不方便给父盒子高度，就会存在浮动中常见的问题，这个时候我们就得清楚浮动了，才能不影响后面的盒子。

2.      position 定位

定位就是我们页面中最直接精确的布局了，因为他直接给你一个位置，所以他跟随着父盒子的位置变化而相对变化，里面最经典的就是“子绝父相”。意思就是父盒子相对定位，子盒子绝对定位。

.father {

Height：200px;

Width:200px;

Position:relative；

}

.son {

Height：100px;

Width:100px;

Position:absolute；

}

这就是子觉父相，相对定位占用位置，绝对定位不占用位置。

最后一个就是固定定位，position：fixed；他不随页面的移动而移动。

总结

在前段开发的学习中，前期知识点内容虽多，但不难，但是想要做好并非易事，有的东西你看起来简单，用起来实则不易，所以就是多去亲自敲代码，多敲几遍，每次都有新收获，才能把所学的知识运用得游刃有余。各位来黑马的同学们一起加油，掌握一技之长，成为你想成为那个样子，未来都有好发展!

技术贴

       前端开发是创建Web页面或app等前端界面呈现给用户的过程。前端开发通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。web标准简单的来说就是结构、样式、行为。其中html就是来构建整个页面的结构的，而css是用来修饰整个页面中的文字图片和各种边框小部件使得页面变得更加好看，最后JavaScript就是用来给整个页面加特效用的，从而让我们的页面看起来更加酷炫，在很大程度上提升用户体验。

html标签

html标签可分为双标签和单标签，双标签种类比单标签多，而单标签种类较少。比如<p> </p>,他是双标签需要有头有尾，把文字内容包住。而单标签常见的几个如下：<br/>,<hr/>,<img>,<base>。用法不一样所呈现出的效果就不一样。

         html里面标签非常多，我们在网页布局里面常用的标签就是列表。列表里面我们常用的就是无序列表和自定义列表。

         1.无序列表

       <ul>

<li>内容</li>

<li>内容</li>

<li>内容</li>

                   </ul>

    无序列表是我们网页最常用的标签，他是行内元素，内容不分先后顺序，属于并列关系。而里面可以添加各种内容，我们就可以给他布局，把整体局面给他有规律的排好，让我们看起来更加的有序。每一个li里面可以包含内容，而他们整体都包含在ul这个大盒子里面，我们可以通过给他设置宽高，调节他的颜色使得他有序排列。

         2.有序列表

         有序列表我们不常用，因为我们的页面布局中经常都是没有顺序的，基本存在的是并列关系。所以我们很多情况下使用无序列表。

         3.自定义列表

       <dl>

<dt>内容</dt>

<dd>内容</dd>

<dd>内容</dd>

                   </dl>

         自定义列表我们常用语首页底部的布局,因为dt、dd是并列的兄弟关系，所以当我们需要对两种内容进行编辑时，用它就再好不过了。里面的字体样式颜色编辑的时候，分别给他们添加就很轻松了。

         Html里面的标签数不甚数，用法各不一样，又存在着或多或少的联系，所以需要我们准确理解的运行作用原理，才能把他运用在页面中得心应手。标签虽多，所以需要我们长期积累和经常使用，才能把它运用得熟练。

Css

         Css就是我们用来给我们刚刚上面html制造出来的房子框架里面的内容装修的，给他上色。里面的内容自然也不少，所以我下面挑出几点来简单讲下。

1.      float 浮动

浮动是我们在css布局里面的一种机制，布局三种机制分别为 标准流，浮动，定位。

我们的网页是平面的，但是我们在css布局里面又可以说是3D立体的，最下面是标准流，中层是浮动，最高层是定位，上面的会覆盖住下面的元素。浮动可以让多个块级元素一行无缝隙显示，布局最为常用。

         一个父盒子中包含了许多子盒子，如果我们给了其中一个子盒子浮动，那么其他的子盒子我们都得给他浮动，要不然就会影响整个页面的布局。浮动漂浮在标准流上面，浮动的盒子不占有位置，浮动元素能改变display属性，类似行内块。

         浮动的目的就是让多个块级元素一行内显示，浮动只有左右没有居中，也就是只存在float left，float right。两种写法。在网页布局时有的时候不方便给父盒子高度，就会存在浮动中常见的问题，这个时候我们就得清楚浮动了，才能不影响后面的盒子。

2.      position 定位

定位就是我们页面中最直接精确的布局了，因为他直接给你一个位置，所以他跟随着父盒子的位置变化而相对变化，里面最经典的就是“子绝父相”。意思就是父盒子相对定位，子盒子绝对定位。

.father {

Height：200px;

Width:200px;

Position:relative；

}

.son {

Height：100px;

Width:100px;

Position:absolute；

}

这就是子觉父相，相对定位占用位置，绝对定位不占用位置。

最后一个就是固定定位，position：fixed；他不随页面的移动而移动。

总结

在前段开发的学习中，前期知识点内容虽多，但不难，但是想要做好并非易事，有的东西你看起来简单，用起来实则不易，所以就是多去亲自敲代码，多敲几遍，每次都有新收获，才能把所学的知识运用得游刃有余。各位来黑马的同学们一起加油，掌握一技之长，成为你想成为那个样子，未来都有好发展!