到杭州黑马已经有半个月了，除了接触到的新朋友，最为开心的是打开我了的前端大门。没有来学习之前就是个纯小白，HTML是什么？CSS是干嘛的？JS又是什么？我一无所知...经过半个月系统的学习，我对前端有了新的认识。

众所周知，网页是由图片文字超链接等元素构成，而我们的工作就是将这些元素用代码写出来，通过浏览器的渲染，转为用户所见的页面。由于浏览器以及他的内核不同，页面显示的排版会有差异，因此，我们写代码也需要遵循一定的规则，即为：Web标准!Web标准主要包括结构表现以及行为三个方面。结构可理解为网页元素由HTML描述，表现则由CSS来完成，行为离不开JS。

HTML指的是超文本标记语言，我们通过HTML标签来描述这些网页元素，标签只有两种关系即：嵌套关系和并列关系。常用的标签有<h>、<p>、<div>、<span>、<table>、<td>、<ul>、<li>、<img>、<input>、<dl><dd><hr>等等，不同的标签有不同的作用，可以通过改变他们的属性来改变里面包裹的元素。

CSS通常称为CSS样式表或层叠样式表，用来设置网页中的文字美容、图片以及版面的布局和外观显示样式，它的书写样式有三种：行内式、内部样式表以及外部样式表。

如何让CSS作用于指定的HTML标签呢？那么就离不开选择器了。CSS选择器分为基础选择器和复合选择器。基础选择器包括标签选择器、类选择器、id选择器以及通配符选择器；复合选择器包括后代选择器、子元素选择器、交集选择器、并集选择器以及链接伪类选择器。此外，CSS还有字体文本样式用来设置字体的大小颜色风格。

CSS有三大特性：层叠性——指多种CSS样式的叠加；继承性——子标签会继承父标签的某些样式；优先级——多种规则应用在用一个元素。

在网页中，标签有三种显示模式：块级元素、行内元素以及行内块元素，这三种显示模式可以相互转换，来达到我们想要的布局效果。

网页布局的核心是用CSS来摆放盒子。CSS布局的三种机制是普通流、浮动和定位。一个完整的网页是由标准流+浮动+定位一起完成的。

标准流是块级元素会独占一行，从上向下顺序排列，行内元素会按照顺序从左到右顺序排列，碰到父元素边缘则自动换行。

设置了浮动的元素会脱离标准流移动到指定的位置，实现了多个盒子水平排列成一行。浮动有三种特性：浮——盒子漂浮在普通流之上；漏——把自己的位置漏给下面的标准流盒子；特——改变了盒子的display属性。当然，浮动的特性，若父级盒子没有高度，就会影响下面的标准流盒子，此时，我们就要清楚浮动了。在CSS里，有四种清楚浮动的方法：1、额外标签法2、给父级添加overflow属性方法3、使用after伪元素清楚浮动4、使用双伪元素清除浮动。

定位可以将盒子定在某一位置，自由的漂浮在其他盒子的上面，定位有四种模式：静态定位、相对定位、绝对定位和固定定位。应用最多的就是绝对定位，但是因为它是以父级元素的位置来移动，因此就有了——子绝父相，即子盒子使用绝对定位，父盒子不能移动位置就使用相对定位。固定定位是绝对定位的特殊形式，它是以浏览器的可是窗口为基准点偏移的。

虽然只有短短半个月的时间，却学习了很多知识点，以上就是我这半个月学习的大体概括。

到杭州黑马已经有半个月了，除了接触到的新朋友，最为开心的是打开我了的前端大门。没有来学习之前就是个纯小白，HTML是什么？CSS是干嘛的？JS又是什么？我一无所知...经过半个月系统的学习，我对前端有了新的认识。

众所周知，网页是由图片文字超链接等元素构成，而我们的工作就是将这些元素用代码写出来，通过浏览器的渲染，转为用户所见的页面。由于浏览器以及他的内核不同，页面显示的排版会有差异，因此，我们写代码也需要遵循一定的规则，即为：Web标准!Web标准主要包括结构表现以及行为三个方面。结构可理解为网页元素由HTML描述，表现则由CSS来完成，行为离不开JS。

HTML指的是超文本标记语言，我们通过HTML标签来描述这些网页元素，标签只有两种关系即：嵌套关系和并列关系。常用的标签有<h>、<p>、<div>、<span>、<table>、<td>、<ul>、<li>、<img>、<input>、<dl><dd><hr>等等，不同的标签有不同的作用，可以通过改变他们的属性来改变里面包裹的元素。

CSS通常称为CSS样式表或层叠样式表，用来设置网页中的文字美容、图片以及版面的布局和外观显示样式，它的书写样式有三种：行内式、内部样式表以及外部样式表。

如何让CSS作用于指定的HTML标签呢？那么就离不开选择器了。CSS选择器分为基础选择器和复合选择器。基础选择器包括标签选择器、类选择器、id选择器以及通配符选择器；复合选择器包括后代选择器、子元素选择器、交集选择器、并集选择器以及链接伪类选择器。此外，CSS还有字体文本样式用来设置字体的大小颜色风格。

CSS有三大特性：层叠性——指多种CSS样式的叠加；继承性——子标签会继承父标签的某些样式；优先级——多种规则应用在用一个元素。

在网页中，标签有三种显示模式：块级元素、行内元素以及行内块元素，这三种显示模式可以相互转换，来达到我们想要的布局效果。

网页布局的核心是用CSS来摆放盒子。CSS布局的三种机制是普通流、浮动和定位。一个完整的网页是由标准流+浮动+定位一起完成的。

标准流是块级元素会独占一行，从上向下顺序排列，行内元素会按照顺序从左到右顺序排列，碰到父元素边缘则自动换行。

设置了浮动的元素会脱离标准流移动到指定的位置，实现了多个盒子水平排列成一行。浮动有三种特性：浮——盒子漂浮在普通流之上；漏——把自己的位置漏给下面的标准流盒子；特——改变了盒子的display属性。当然，浮动的特性，若父级盒子没有高度，就会影响下面的标准流盒子，此时，我们就要清楚浮动了。在CSS里，有四种清楚浮动的方法：1、额外标签法2、给父级添加overflow属性方法3、使用after伪元素清楚浮动4、使用双伪元素清除浮动。

定位可以将盒子定在某一位置，自由的漂浮在其他盒子的上面，定位有四种模式：静态定位、相对定位、绝对定位和固定定位。应用最多的就是绝对定位，但是因为它是以父级元素的位置来移动，因此就有了——子绝父相，即子盒子使用绝对定位，父盒子不能移动位置就使用相对定位。固定定位是绝对定位的特殊形式，它是以浏览器的可是窗口为基准点偏移的。

虽然只有短短半个月的时间，却学习了很多知识点，以上就是我这半个月学习的大体概括。