前端三剑客！桃园结义~-优快云博客

这篇文章是我初略学习完前端三剑客之后的所记录，所想

加油打气
天将降大任于是人也

必先苦其心志

劳其筋骨

饿其体肤

空乏其身

行拂乱其所为.

所以动心忍性

曾益其所不能

ok进入正题

1.简介
HTML：(英文Hyper Text Markup Language的缩写)中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

CSS：通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

JavaScript：是网页中的一种脚本语言，其前身叫做LiveScript，由Netscape(网景)公司开发。后来在Sun公司推出著名的Java语言之后，Netscape公司和Sun公司于1995年一起重新设计了LiveScript，并把它改名为JavaScript。

2.构建HTML页面
1.html文档基本格式

2.标签的分类

html注释标签

3.标签的关系
（1）嵌套关系

（2）并列关系

4.页面格式化标签
HTML提供了相应的页面格式化标签，如标题标签、段落标签、水平线标签和换行标签

（1）标题标签

（2）段落标签

p标签相当于是重新开启了一个段落，是块元素，不是行内元素

（3）水平线标签

<hr>标签有很多的属性可以设置.

5.标签的属性

（1）文本样式标签
<font 属性="属性值">文本内容</font>

常用的属性

（2）文本格式化标签

6.图像标签<img />
<img src="图像URL" />

属性

常用的几个属性

7.特殊字符
例如空格符，大于小于等等

3.使用CSS美化网页
本章将对CSS的基本语法、引入方式、选择器、高级特性及常用的文本样式设置进行详细讲解

1.CSS样式规则
选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

2.引入CSS样式表
（1）行内式
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;">

内容

</标签名>

（2）内嵌式
<head>

选择器 {

属性1:属性值1;

属性2:属性值2;

属性3:属性值3;

}

</style>

</head>

（3）链入式
这个方式也是前端开发的主要方式

CSS文件中写好CSS代码

<head>

</head>

3.CSS基础选择器
要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器

（1）标签选择器
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

标签名{

属性1:属性值1;

属性2:属性值2;

属性3:属性值3;

}

（2）类选择器
注意：类名之前有一个 " . "号

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下

. 类名{

属性1:属性值1;

属性2:属性值2;

属性3:属性值3;

}

（3）id选择器
注意：类名之前有一个 " # "号

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

#id名{

属性1:属性值1;

属性2:属性值2;

属性3:属性值3;

}

（4）通配符选择器
通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

* {

属性1:属性值1;

属性2:属性值2;

属性3:属性值3;

}

4.CSS字体样式属性

（1）font-size属性
font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位，具体如下表所示：

（2）font-family属性
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。

例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：

font-family:"微软雅黑";

}

（3）font-weight属性
font-weight属性用于定义字体的粗细，其可用属性值如下表所示：

（4）font-style属性
font-style属性用于定义字体风格，如设置斜体或正常字体，其可用属性值如下：

（5）font综合属性
font属性用于对字体样式进行综合设置，其基本语法格式如下：

选择器{

font: font-style font-weight font-size/line-height font-family;

}

5.CSS文本外观属性
（1）color
color属性用于定义文本的颜色，其取值方式有如下3种：

• 预定义的颜色值，如 red ， green ， blue 等。
• 十六进制，如 #FF0000 ， #FF6600 ， #29D794 等。实际工作中，十六进制是最常用的定义颜色的方式。
• RGB 代码，如红色可以表示为 rgb (255,0,0) 或 rgb (100%,0%,0%) 。
（2）line-height
line-height属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。

一般将这个属性用于和行高相同即可是它至于垂直方向上的中心点

（3）text-align
text-align属性用于设置文本内容水平对齐，相当于html中的align对齐属性。

其可用属性值如下：

left：左对齐（默认值）

right：右对齐。

center：居中对齐。

常用于将其水平内容居中

6.CSS复合选择器
（1）标签指定式选择器（交集选择器）
标签指定式选择器

又称交集选择器，由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如

h3.special

p#one。

（2）后代选择器
后代选择器用

来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

（3）并集选择器
并集选择器

是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。若某些选择器定义的样式完全或部分相同，可利用并集选择器为它们定义相同的样式。

7.CSS层叠性和继承性
（1）层叠性
所谓层叠性是指多种CSS样式的叠加。

（2）继承性
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号

但是！并不是所有的CSS属性都可以继承

例如下面的就不可以

8.CSS优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题

文本的颜色

</strong>

</p>

p strong{ color:black} /*权重为:1+1*/

strong.blue{ color:green;} /*权重为:1+10*/

.father strong{ color:yellow} /*权重为:10+1*/

p.father strong{ color:orange;} /*权重为:1+10+1*/

p.father .blue{ color:gold;} /*权重为:1+10+10*/

#header strong{ color:pink;} /*权重为:100+1*/

#header strong.blue{ color:red;} /*权重为:100+1+10*/

4.运用盒子模型划分网页模块
盒子模型是网页布局的基础，只有掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素所呈现的效果。

1.认识盒子模型
所谓的盒子模型在HTML中就是一个盛装元素内容的容器

每一个盒子模型都是由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成

记住这几个元素，很重要

2.<div>标签

1.<div>标签最大的意义在于和浮动属性float配合，实现网页的布局，这就是常说的DIV+CSS网页布局。
2.<div>可以替代块级元素如<h>、<p>等，但是它们在语义上有一定的区别。例如<div>和<h2>的不同在于<h2>具有特殊的含义，语义较重，代表着标题，而<div>是一个通用的块级元素，主要用于布局。
3.边框属性（border）

为了分割页面中不同的盒子，常常需要给元素设置边框效果。

右，下，左同上

这里border复合属性都是

一个元素：四边

两个元素：上下左右

三个元素：上左右下

（1）border-style

（2）border-width
在设置边框宽度时，必须同时设置边框样式，如果未设置样式或设置为none，则不论宽度设置为多少都无效。

注意：常用取值单位为像素。

例如：1 px

（3）border-color

（4）边框综合属性
border:宽度,样式,颜色

4.内边距属性padding
为了调整内容在盒子中的显示位置，常常需要给元素设置内边距，所谓内边距指的是元素内容与边框之间的距离，也常常称为内填充

padding复合属性是

一个元素：四个方向

两个元素：上下左右

三个元素：上左右下

四个元素：上右下左

padding取值可为：auto自动（默认值）、不同单位的数值、相对于父元素（或浏览器）宽度的百分比%，实际工作中最常用的是像素值px。

例如

padding:5% /*段落内边距为父元素宽度的5%*/

5.外边距margin
网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合理地布局网页，就需要为盒子设置外边距，所谓外边距指的是元素边框与相邻元素之间的距离

注意：和内边距不同，外边距margin允许使用负值

margin复合属性是

一个元素：四个方向

两个元素：上下左右

三个元素：上左右下

技巧：块级元素水平居中

当对块级元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中，实际工作中常用这种方式进行网页布局。

例如

margin:0 auto /* 利用margin实现块元素水平居中*/

margin:5px auto /* 利用margin实现块元素水平居中，并且上下拉开5像素边距*/

6.设置背景颜色、背景图像
background-color:背景颜色属性

对于插入背景图片来说，background-image：url( ) , url之中放入图像的路径

background-image :背景图像属性

background-image: url(images/1.jpg);

7.设置背景图像平铺
默认情况下，背景图像会自动向水平和竖直两个方向平铺。如果不希望背景图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制

background-repeat ：图像平铺属性

8.元素的类型
（1）初识
块元素：

Ø 在页面中以区域块的形式出现。
Ø 每个块元素通常都会独自占据一整行或多整行。
Ø 可以对其设置宽度、高度、对齐等属性。
行内元素：

Ø 不占有独立的区域。
Ø 仅仅靠自身的字体大小和图像尺寸来支撑结构。
Ø 一般不可以设置宽度、高度、对齐等属性。
其中<div>是典型的块元素

其中<span>是典型的行内元素

（2）span标签

（3）元素类型的转换（display）
display: inline;

9.颜色透明度
通过引入RGBA模式和opacity属性，对背景与图片设置不透明度

10.阴影box-shadow
在网页制作中，经常需要对盒子添加阴影效果。使用CSS3中的box-shadow属性可以轻松实现阴影的添加。

box-shadow属性也可以改变阴影的投射方向。

11.圆角border-radius

12.多背景图像
在CSS3中，通过background-image、background-repeat、background-position和background-size等属性提供多个属性值可以实现多重背景图像效果，各属性值之间用逗号隔开。

例如

background-image:

url(images/caodi.png),

url(images/taiyang.png),

例如

.part1{
width: 604px;
height: 227px;
background-image: url(../images/01.jpg),
url(../images/02.jpg),
url(../images/03.jpg);
background-repeat: no-repeat;
background-position: left, center, right;
border-radius: 30px 30px 0px 0px;
}

5.为网页添加列表和超链接
本章将对列表标记、超链接标记以及CSS控制列表和超链接的样式进行详细地讲解。

1.无序列表
无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间为并列关系，没有顺序级别之分。

<ul>

......

</ul>

这里就是在ul 里面嵌套 li

注意：

1.不赞成使用无序列表的type属性，一般通过CSS样式属性替代。
2.<li>与</li>之间相当于一个容器，可以容纳所有的元素。但是<ul></ul>中只能嵌套 <li></li>，直接在<ul></ul>标记中输入文字的做法是不被允许的。
2.有序列表
有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列。

<ol>

......

</ol>

例如

3.超链接
在HTML中创建超链接非常简单，只需用<a></a>标记环绕需要被链接的对象即可。

<a href="跳转目标"

target="目标窗口的弹出方式">

文本或图像

</a>

属性解释如下

直接上例子

<!doctype html>
<html>
   <head>
       <meta charset="utf-8">
       <title>超链接</title>
   </head>
   <body>
       
       <a href="http://www.zcool.com.cn/" target="_self">
           站酷
       </a>
       <br />=>"_self"原窗口打开<br />
       
       <a href="http://www.baidu.com/" target="_blank">
           百度
       </a>
       <br />=>"_blank"新窗口打开

   </body>
</html>