学习前端的第九天

今天换了个新软件使用，HBuilder X，要比dw好用多了,还换成了一个喜欢的主题。使用起来方便，看起来也舒服，回到正题上。
今天主要还是补充知识点吧，学习了锚点、透明属性、字幕滚动、以及图片整合技术的使用。

一、锚点

定义： 是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。

作用：在同一页面内的不同位置进行跳转。

语法：

<标记 id="命名"></标记>		给元素定义命名锚记

<a href="#命名"></a>		命名锚记连接

二、透明属性

1、opacity 取值范围0-1 没有单位，IE低版本的浏览器不支持

2、filter:alpha(opacity=value); 取值 1-100 没有单位

3、rgba()   css3新增的一种透明方法

• rgb()表示颜色值，a表示透明度
• 透明度取值范围0-1

4、opacity和rgba方法区别：

• opacity透明度子元素会继承
• rgba方法透明度子元素不能继承
• opacity:0; 设置为0的时候，可以隐藏元素

三、滚动字幕

marquee： 内联块元素

属性：

• behavior:slide（滑动到终点停止） | scroll（滑动到终点后，从起点重新滑动） | alternate（滑动到终点后，从终点返回）
• direction:up（从下向上） | down（从上向下） | left（从右向左，默认值） | right （从左向右）
• scrollamont= “value”;（滚动速度）
• height=“value”;（上下滚动范围）
• width=“value”;（左右滚动范围）

四、css3序列选择器

同级别：

:first-child{}				选中同级别中的第一个标签

:last-child{}				选中同级别中的最后一个标签

:nth-child(n){}				选中同级别中第n个标签

:nth-last-child(n){}		选中同级别中倒数第n个标签

:only-child{}				选中父元素中唯一的标签
						   （例如：有两个标签p，有一个在div里，有一个在其他地方，那么选中的是div里的p）			

同类别：

:first-of-type{}			选中同级别中同类型的第一个标签

:last-of-type{}				选中同级别中同类型的最后一个标签

:nth-of-type(n){}			选中同级别中同类型的第n个标签

:nth-last-of-type(n){}		选中同级别中同类型的倒数第n个标签

:only-of-type{}				选中父元素中唯一类型的标签

{

作用：
可以帮助我们在标记不命名的情况，区分标记选取给其设置样式，直接通过css选中标记，不能被其他类型的标记给隔开

注意：序列选择器最好不要使用在最外层的标记，写网页布局的时候最外层的元素一般建议采用命名形式的，内层元素可以根据不同情况采用一些比较好用的选择器

五、图片整合技术

1、名称：css精灵、css sprite、雪碧图

2、作用：可以把很多张小图整合成一张图，然后使用background-position属性去调整它的位置

• 可以减少对服务器的请求次数，提高网页的加载速度
• 可以减少图片的体积
• 图片整合技术是为了做网页优化存在的

http超文本传输协议：

1、作用：规定了如何去上网

2、http://www.baidu.com 回车可以找到对应的网站

3、访问一个网站的过程：

• 当咱们在浏览器的地址栏输入一个网址的时候并回车 — 向服务器发生了一条请求（发送报文）
• 服务器接收到请求，做一个判断，无论有没有你想要的内容都会给一个回应 ——响应请求
  如果有，就返回你需要的内容
  如果没有，返回一个提示，404路径错误，你的网页走丢了。。。
• 浏览器接收到服务器返回的请求内容
  html（文本、图片、音频、视频）
  css
  js

如果图片越大网页加载速度越慢，图片过多的情况下会向服务器发送多次请求