奔着学习的目标来到了黑马,在这里接触了之前从未接触过的东西,也体验了一下生活充实而又紧张的日子,从以前的轻松自由到现在争分夺秒,来到黑马的时候我在想自己适不适合学前端,前端难不难,到底能不能学会,这几个问题一直是困扰我的,后来下定决心之后来到了这边学习,进入了我的学习之路,刚到黑马之际.老师先是安排我们上了三天的预科班,所谓的预科班就是讲解一下前端的发展和学习前端的过程,让我们提前适应一下学习环境和学习方法,和交给了我们一些前端的基础知识,刚开始接触的时候,完全记不住这个东西,感觉一个头两个大,这些东西为什么会是这样,这里有哪里不对了,为什么没有出现我想要的效果,经常一个东西自己思考到很久,学习前端需要记很多的单词,一起接触到的英语水平到了现在也都全部的忘记,所以在写代码的时候,经常有搞混的单词,弄错了单词,或者是写反了,效果肯定是出不来的,后来自己想不明白的时候,问下老师,老师总是一眼就可以看出问题出现在哪里.     下面分享一下在黑马学习前端的一些内容.
     常见的浏览器内核：

IE（Trident）

Firefox（Gecko）

safari（webkiit）

chrome（chromium/Blink）

Opera（blink）

所以说渲染引擎不同就会导致存在相应的兼容性问题

我们一般学习用的就是chrome浏览器,可以很快的打开,来实现我们写代码带来的效果.
主要学习的是html和css,这两个是比较重要的,布局的地方也是需要用来他布局.
这些事html需要用到的一些主要的布局

html

H1标签只能用一次，一般用于logo

<p>标签会在上下自动生成空白行，块元素。

粗体：<strong>和<b>=>文本倾斜标签：<em>和 <i>

删除线： <del> 和 <s>=>下划线：<ing>和<u>

优化a标签的小技巧：在head中添加 <basetarget="_blank">，决定了当前页面所有的a标签打开方式。空链接有两种：一种 # 二种 javascript:

锚链接：设置标签id属性后，href="#id值"即可

表格：bgColor是表格背景颜色，align属性则是水平对齐方式

表格结构：这个我们写的内容都是在这个里面,很重要,

<table>

<caption>标题</caption>

<thead>

<tr>

<th></th>

</tr>

</thead>

<tbody>

<tr>

<td></td>

</tr>

</tbody>

</table>

Css的作用

Cascading StyleSheets，简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化；

文字控制属性

文字颜色   color

Color取值

a、直接写英文单词yellow，red等等

b、16进制表示#aabbcc或者#abc

c、rgb（）如rgb（0，0，0）

d、rgb（）如rgba（0,0,0,0.5）a为透明度

常用测试颜色16进制：

黑色系列：#000； #333；  #666； #999；

灰色系列：#ccc； #eee； #ddd； #dedede；

红色：#f00；

文字大小   font-size

文字字体    font-family

取值可以取一个或者多个，如果取多个值要用英文的逗号隔开，表示先找第一个字体如果没有就往后面查找，依次类推；

我认为比较难以控制的就是浮动,因为写了一个浮动,没有把握好的话,下面的东西继续写的话,很会浮到上面,往往出错在这.

浮动布局的注意事项

01、利用浮动布局的时候，建议给浮动的元素嵌套一个父级元素，然后给父级最好设置固定的高度，就减少出现兼容问题；

02、如果要用浮动布局做修改，所有的父级盒子都必须浮动，不然不符合规范；

下图问题：新闻列表用的是h3标签，是块级元素，默认的宽度是100%，尽管下面的更多a右浮动了也上去

定位：

静态定位：position:static;

相对定位：position:relative;自己本身原来的位置，进行位置的偏移；

绝对定位：position:absolute;默认情况下是自己的父级盒子，但是如果绝对定位的父级盒子没有任何定位属性，参照物就以浏览器为参照去进行定位；

固定定位：position:fixed;绝对定位的参照物默认以父级为主，如果父级没有定位一层一层往上找，如果找不到定位的祖先盒子就以浏览器为参照物；

一般在实际过程中我们采用子绝父相的方法进行定位.

小白（默认） cursor:default;
小手： cursor:pointer;  常用一般是用在一些提示要点击的样式，不能跳转的时候；
移动： cursor:move;
文本： cursor:text;
禁止： cursor:not-allowed;
取消表单默认的蓝色交互框（记住）

有时候图片也需要我们自行处理,这时候精灵技术就比较重要了

CSS精灵技术

好处

• 使用css精灵技术可以减少对服务器的请求次数；
• 可以将多个小图标合并成一张图片，成为css精灵图或者css雪碧图；
Css精灵图的技术核心：

利用北京图片定位设置X轴（水平方向）和Y轴（垂直方向）的位置；
background-position: X轴   Y轴;
复合写法：background:背景颜色 url（背景图片路径） 是否平铺 X轴 Y轴；
使用精灵图的重要步骤：

第一步，精确测量盒子的宽高和在X轴，Y轴的位置
第二步，然后设置图片定位的X轴和Y轴的位置；

     奔着学习的目标来到了黑马,在这里接触了之前从未接触过的东西,也体验了一下生活充实而又紧张的日子,从以前的轻松自由到现在争分夺秒,来到黑马的时候我在想自己适不适合学前端,前端难不难,到底能不能学会,这几个问题一直是困扰我的,后来下定决心之后来到了这边学习,进入了我的学习之路,刚到黑马之际.老师先是安排我们上了三天的预科班,所谓的预科班就是讲解一下前端的发展和学习前端的过程,让我们提前适应一下学习环境和学习方法,和交给了我们一些前端的基础知识,刚开始接触的时候,完全记不住这个东西,感觉一个头两个大,这些东西为什么会是这样,这里有哪里不对了,为什么没有出现我想要的效果,经常一个东西自己思考到很久,学习前端需要记很多的单词,一起接触到的英语水平到了现在也都全部的忘记,所以在写代码的时候,经常有搞混的单词,弄错了单词,或者是写反了,效果肯定是出不来的,后来自己想不明白的时候,问下老师,老师总是一眼就可以看出问题出现在哪里.     下面分享一下在黑马学习前端的一些内容.
     常见的浏览器内核：

IE（Trident）

Firefox（Gecko）

safari（webkiit）

chrome（chromium/Blink）

Opera（blink）

所以说渲染引擎不同就会导致存在相应的兼容性问题

我们一般学习用的就是chrome浏览器,可以很快的打开,来实现我们写代码带来的效果.
主要学习的是html和css,这两个是比较重要的,布局的地方也是需要用来他布局.
这些事html需要用到的一些主要的布局

html

H1标签只能用一次，一般用于logo

<p>标签会在上下自动生成空白行，块元素。

粗体：<strong>和<b>=>文本倾斜标签：<em>和 <i>

删除线： <del> 和 <s>=>下划线：<ing>和<u>

优化a标签的小技巧：在head中添加 <basetarget="_blank">，决定了当前页面所有的a标签打开方式。空链接有两种：一种 # 二种 javascript:

锚链接：设置标签id属性后，href="#id值"即可

表格：bgColor是表格背景颜色，align属性则是水平对齐方式

表格结构：这个我们写的内容都是在这个里面,很重要,

<table>

<caption>标题</caption>

<thead>

<tr>

<th></th>

</tr>

</thead>

<tbody>

<tr>

<td></td>

</tr>

</tbody>

</table>

Css的作用

Cascading StyleSheets，简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化；

文字控制属性

文字颜色   color

Color取值

a、直接写英文单词yellow，red等等

b、16进制表示#aabbcc或者#abc

c、rgb（）如rgb（0，0，0）

d、rgb（）如rgba（0,0,0,0.5）a为透明度

常用测试颜色16进制：

黑色系列：#000； #333；  #666； #999；

灰色系列：#ccc； #eee； #ddd； #dedede；

红色：#f00；

文字大小   font-size

文字字体    font-family

取值可以取一个或者多个，如果取多个值要用英文的逗号隔开，表示先找第一个字体如果没有就往后面查找，依次类推；

我认为比较难以控制的就是浮动,因为写了一个浮动,没有把握好的话,下面的东西继续写的话,很会浮到上面,往往出错在这.

浮动布局的注意事项

01、利用浮动布局的时候，建议给浮动的元素嵌套一个父级元素，然后给父级最好设置固定的高度，就减少出现兼容问题；

02、如果要用浮动布局做修改，所有的父级盒子都必须浮动，不然不符合规范；

下图问题：新闻列表用的是h3标签，是块级元素，默认的宽度是100%，尽管下面的更多a右浮动了也上去

定位：

静态定位：position:static;

相对定位：position:relative;自己本身原来的位置，进行位置的偏移；

绝对定位：position:absolute;默认情况下是自己的父级盒子，但是如果绝对定位的父级盒子没有任何定位属性，参照物就以浏览器为参照去进行定位；

固定定位：position:fixed;绝对定位的参照物默认以父级为主，如果父级没有定位一层一层往上找，如果找不到定位的祖先盒子就以浏览器为参照物；

一般在实际过程中我们采用子绝父相的方法进行定位.

小白（默认） cursor:default;
小手： cursor:pointer;  常用一般是用在一些提示要点击的样式，不能跳转的时候；
移动： cursor:move;
文本： cursor:text;
禁止： cursor:not-allowed;
取消表单默认的蓝色交互框（记住）

有时候图片也需要我们自行处理,这时候精灵技术就比较重要了

CSS精灵技术

好处

• 使用css精灵技术可以减少对服务器的请求次数；
• 可以将多个小图标合并成一张图片，成为css精灵图或者css雪碧图；
Css精灵图的技术核心：

利用北京图片定位设置X轴（水平方向）和Y轴（垂直方向）的位置；
background-position: X轴   Y轴;
复合写法：background:背景颜色 url（背景图片路径） 是否平铺 X轴 Y轴；
使用精灵图的重要步骤：

第一步，精确测量盒子的宽高和在X轴，Y轴的位置
第二步，然后设置图片定位的X轴和Y轴的位置；