前端HTML与CSS基础

第一章/第二章：初识HTML5

1.标签的基本分类：

2. HTML5文档头部相关标签

3.标题标记

4.段落标签

5.水平线标签

6.换行标签

7.文本样式标记

8.文本格式化标签

9.mark标签

10.cite标签

11.特殊字符标签

12.图像标签

13.相对路径和绝对路径

第三章初识css

一.css核心基础

1.Css样式规则

2.引入css样式表

3.Css基础选择器

二、文本控制标签

1、Css字体样式属性

2、Css文本外观属性

三、高级特性

1、Css复合选择器

2、Css层叠性和继承性

3、Css优先级

4、属性选择器·

5、关系选择器

第四章 CSS4选择器

1.属性选择器

2.关系选择器

3.结构伪类化选择器

4.伪元素选择器

第五章盒子模型

1.边框

2.内边距

3.外边距

4.水平居中

5.背景

6.平铺

7.图像属性

8.阴影

9.块元素和行内元素

第六章列表与超链接

一．无序链表ui 2有序链表ol 3定义链表dl 4链表的嵌套应用

1.无序链表tybe属性值

2.有序链表相关属性

3.自定义列表的基本语法格式

4.列表嵌套示例

二．CSS控制列表样式

1.list-style-type属性

2.list-style-image属性

3.list-style-position属性

三．超链接标签

1.超链接标签

2.标签实例

四．链接伪类控制超链接

第七章表格与表单

1.表格

2.表格table属性

3.tr标签属性

4.td标签属性

5.CSS控制表格样式

6.表单

7.input控件

8.textarea控件

9.select控件

第八章：浮动

1.什么是浮动：

2.如何清除浮动：

第一章/第二章：初识HTML5

认识了基本标签，以及标签的基本作用（以下附基本用法）

第一部分：

<hr/>

<hr/>

<p>这是段落标签</p>

<s>我没有后悔</s>

<del>你后悔了嘛</del>

<audio src="./CMJ - 所念皆星河.mp3" controls>所念皆星河</audio><br>

第二部分：

具体内容包括：

1.标签的基本分类：

双标签也称体标签，是指由开始和结束两个标签符组成的标签。

<标签名>内容</标签名>

单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。

< 标签名 />

2. HTML5文档头部相关标签

<title>标签用于定义HTML页面的标题，即给网页取一个名字，必须位于<head>标签之内。

3.标题标记

HTML提供了6个等级的标题，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，从<h1>到<h6>标题的重要性依次递减。

4.段落标签

在网页中使用<p>标签来定义段落。<p>标签是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

5.水平线标签

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。水平线可以通过<hr />标签来定义。

6.换行标签

在word中，按【Enter】键可以将一段文字换行显示，但在网页中，如果想要将某段文本强制换行显示，就需要使用换行标签<br />。

7.文本样式标记

8.文本格式化标签

9.mark标签

mark标签的主要功能是在文本中高亮显示某些字符，该元素的用法与em标签和strong标签有相似之处，但是使用mark标签在突出显示样式时更随意灵活。

10.cite标签

cite标签可以创建一个引用，用于对文档引用参考文献的说明，一旦在文档中使用了该标签，被标注的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。

11.特殊字符标签

12.图像标签<img/>

alt：图像的替换文本属性，在图像无法显示时告诉用户该图片的内容。

Width height:用来定义图片的宽度和高度，通常我们只设置其中的一个，另一个会按原图等比例显示。

Border:为图像添加边框、设置边框的宽度。但边框颜色的调整仅仅通过HTML属性是不能够实现的。

Vspace/hspace:HTML中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。

Align:图像的对齐属性align。用于调整图像的位置

13.相对路径和绝对路径

绝对路径：绝对路径一般是指带有盘符的路径，例如“D:\HTML+CSS网页制作\chapter02\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。

相对路径：相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。

第三章初识css

一.css核心基础

1.Css样式规则

*2.引入css**样式表*

（1）行内式：

也称内联样式，通过标签style属性设置元素样式。以下为基本语法：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

（2）内嵌式：

将css代码集中写在HTML文档的<head>头部标签中，并且用<style>标签定义，基本语法如下：

<head>

选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

</style>

</head>

（3）链入式：

将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标签将外部样式表文件链接到HTML文档中，基本语法如下：

<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名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

//标签选择器
div{
    width:300px;
    height:300px;
}

//类选择器
.p{
    width:300px;
    height:200px;
}

//id选择器
#p1{
    width:200px;
    height:200px;
}

二、文本控制标签

1、Css字体样式属性

（1）font-size设置字号

（2）font-family设置字体

（3）font-weight定义字体粗细

（4）font-style定义字体风格

（5）font综合属性用于综合设置字体样式

（6）@font-face用于定义服务器字体

（7）word-wrap用于实现长单词和url地址的自动换行

2、Css文本外观属性

（1）color

用于定义文本的颜色，其取值方式有如下3种：

预定义的颜色值，如red，green，blue等。

十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。

RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

div{
    color:#0000ffff;
}

（2）letter-spacing

用于定义字间距，所谓字间距就是字符与字符之间的空白. 其属性值可为不同单位的数值，允许使用负值，默认为normal。

div{
    letter-spacing:300px;
}

（3）word-spacing

用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。

div{
    word-spacing:300px;
}

（4）line-height

用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。

div{
    line-height:20px;
}

（5）text-align

用于设置文本内容水平对齐，相当于html中的align对齐属性其.可用属性值如下：

left：左对齐（默认值）

right：右对齐。

center：居中对齐。

div{
    text-align:center;
}

（6）text-decoration

用于设置文本的下划线，上划线，删除线等装饰效果。其可用属性值如下：

none：没有装饰（正常文本默认值）。

underline：下划线。

overline：上划线。

line-through：删除线。

div{
    text-decoration:none;
}

（7）text-transform

用于控制英文字符的大小写。其可用属性值如下：

none：不转换（默认值）。

capitalize：首字母大写。

uppercase：全部字符转换为大写。

lowercase：全部字符转换为小写。

div{
    text-transform:none;
}

（8）text-indent

用于设置首行文本的缩进. 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

div{
    text-indent:30px;
}

（9）white-space

可设置空白符的处理方式。其属性值如下：

normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。

pre：预格式化，按文档的书写格式保留空格、空行原样显示。

nowrap：空格空行无效，强制文本不能换行，除非遇到换行标签<br />。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。

div{
    white-space:normal;
}

（10）text-shadow

可以为页面中的文本添加阴影效果。h-shadow用于设置水平阴影的距离，v-shadow用于设置垂直阴影的距离，blur用于设置模糊半径，color用于设置阴影颜色。 text-shadow: red 2px 5px 1px;

div{
    text-shadow:none;
}

（11）text-overflow

用于处理溢出的文本。

div{
    text--overflow:clip;
}

(12)word-wrap

用于实现长单词和URL地址的自动换行。属性如下：

normal：只在允许的断字点换行（浏览器保持默认处理）。

break-word：在长单词或 URL 地址内部进行换。

div{
    word-wrap:normal;
}

三、高级特性

1、Css复合选择器

（1）标签指定式选择器

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

//标签指定选择器
p.p1{
    font-family:楷体;
}
p#zs{
    color:#ffff0000;
}

（2）后代选择器

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

//后代选择器
body font{
    font-famiily:楷体;
    color:#ffff0000;
}

（3）并集选择器

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

//并集选择器
.p1,.p2{
    color:red;
}

2、Css层叠性和继承性

（1）、层叠性：多种CSS样式的叠加。

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

3、Css优先级

Eg.

<strong class="blue">文本的颜色</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*/

注：在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

（1）继承样式的权重为0。

（2）行内样式优先。

（3）权重相同时，CSS遵循就近原则。

（4）CSS定义了一个!important命令，该命令被赋予最大的优先级。

//优先级 id选择器权重最高，所以只显示red颜色
p{
    color:blue;
}
.p1{
    color:green;
}
#zs{
    color:red;
}

4、属性选择器·

（1）E[att^=value] 属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。^插入符

（2）E[att$=value] 属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的子字符串。与E[att^=value]选择器一样，E元素可以省略，如果省略则表示可以匹配满足条件的任意元素。

（3）E[att*=value]选择器用于选择名称为E的标记，且该标记定义了att属性，att属性值包含value子字符串。该选择器与前两个选择器一样，E元素也可以省略，如果省略则表示可以匹配满足条件的任意元素。

// 属性选择器  ^:开头含什么的修改
p[name^=w]{
    color:red;
}

// $:结尾含什么的修改
p[name$=x]{
    color:red;
}

// *:里面含什么的全部修改
p[id*=ax]{
    color:red;
}

5、关系选择器

关系选择器和前面讲的复合选择器类似，但关系选择器可以更精确的控制元素样式。CSS3中的关系选择器主要包括子元素选择器和相邻兄弟选择器，其中子元素择器由符号“>”连接，兄弟选择器由符号“+”和“~”连接

（1）子元素选择器：

主要用来选择某个元素的第一级子元素。

（2）相邻兄弟选择器

用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。

①邻近兄弟选择器：

该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。

②普通兄弟选择器：

使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。

// 父与子，只能拿到父元素下的第一个子元素
p>span{
    font-family:楷体;
    color:blue;
}

// 兄弟，只能拿第一个元素
p+h1{
    font-family:楷体;
    color:blue;
}

// 普通兄弟
p~span{
    font-family:楷体;
    color:blue;
}

第四章 CSS4选择器

1.属性选择器

E[att^=value] 选择前面为att的标签的选择器

E[att$=value] 选择后面为att的标签的选择器

E[att*=value] 选择含有att的标签的选择器

2.关系选择器

子元素选择器：>

兄弟选择器：+

普通兄弟选择器：~

3.结构伪类化选择器

root选择器：对页面所以元素都生效

not选择器：排除某个元素下面的子元素结构

only-child选择器：选择某个父元素只有一个子元素的选择器

first-child选择器：选择父元素的第一个元素

last-child选择器：选择父元素的最后一个元素

not-child（n)选择器：选择某父元素下第几个子元素

not-child（n)选择器：选择某父元素下倒数第几个子元素

nth-of-type（n）选择器：选择父元素特定类型的第几个元素

nth-last-of-type（n）选择器：选择父元素特定类型的倒数第几个元素

：empty选择器：选择没有子元素或文本的元素

4.伪元素选择器

：bedore选择器：在被选元素前插入内容，必须配合content使用

：affte选择器：在被选元素后插入内容，必须配合content使用

第五章盒子模型

1.边框

边框样式 border-style: none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线

边框宽度 border-width:

边框颜色 border-color:

圆角边框 border-radius:

图片边框 border-images：

边框综合属性 border:宽度,样式,颜色;

2.内边距

内边距 padding 四边内边距不允许使用负值

padding-top:上边距;

padding-right:右边距;

padding-bottom:下边距;

padding-left:左边距;

3.外边距

外边距 margin 四边外边距允许使用负值

margin-top:上外边距;

margin-right:右外边距;

margin-bottom:下外边距;

margin-left:左外边距;

4.水平居中

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

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

*{
    margin:0;   //清除页面内边距
    padding:0;  //清楚页面外边距
}

5.背景

背景颜色属性 background-color:

背景图片属性 background-image :

6.平铺

图像平铺属性 background-repeat

repeat 沿水平和竖直方向平铺

no-repaet 不平铺

repeat-x 只沿水平方向平铺

repeat-y 只沿竖直方向平铺

7.图像属性

图像位置属性 background-position

图像固定属性 background-attachment

Srcoll 图像随页面元素一起滚动（默认值）

Fixed 图像固定在屏幕上，不随页面元素滚动。

对背景与图片设置不透明度 rgba(r,g,b,alpha);

opacity：opacityValue;

0 完全透明

0.5 半透明

1 完全不透明

8.阴影

添加阴影效果 box-shadow属性

线性渐变效果 “background-image:linear-gradient（参数值）;”

在CSS3中，通过“background-image:repeating-linear-gradient（参数值）;”样式可以实现重复线性渐变的效果。

在CSS3中，通过“background-image:repeating-radial-gradient（参数值）;”样式可以实现重复线性渐变的效果。

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

9.块元素和行内元素

块元素

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

行内元素

不占有独立的区域。
仅仅靠自身的字体大小和图像尺寸来支撑结构。
一般不可以设置宽度、高度、对齐等属性。

disply-inile 块元素转换为行内元素

disply-block 行内元素转换为块元素

第六章列表与超链接

一．无序链表ui 2有序链表ol 3定义链表dl 4链表的嵌套应用

1.无序链表tybe属性值

disc（默认值）实心圆 circle 空心圆 square 实心方块

2.有序链表相关属性

属性type

属性值 1 （项目符号显示为123…） a或A （项目符号显示为英文字母a b c d…或A B C…

） i或I (项目符号显示为罗马数字i ii iii…或I II III…)

属性 start

属性值数字（规定项目符号的起始值）

属性value

属性值数字（规定项目符号的数字）

3.自定义列表的基本语法格式

<dl></dl>标签用于指定定义列表

<dt></dt>标签用于指定术语名词

<dd></dd>标签用于对名词进行解释和描述

4.列表嵌套示例

<ul>
// 子列表项中嵌套有序列表
    <li>咖啡
        <ol>
            <li>拿铁咖啡</li>
            <li>摩卡咖啡</li>
        </ol>
    </li>
// 子列表项中嵌套无序列表
    <li>茶
        <ul>
            <li>龙井</li>
            <li>铁观音</li>
        </ul>
    </li>
</ul>

二．CSS控制列表样式

1.list-style-type属性

list-style-type属性用于控制无序和有序列表的项目符号。

2.list-style-image属性

list-style-image属性可以为各个列表项设置项目图像，使列表的样式更加美观。基本格式 ul{list-style-image:url(图片路径);}

3.list-style-position属性

list-style-position属性用于控制列表项目符号的位置。

三．超链接标签

1.超链接标签

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

2.标签实例

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

四．链接伪类控制超链接

超链接标签<a>的伪类	含义
a:link{ CSS样式规则; }	未访问时超链接的状态
a:visited{ CSS样式规则; }	访问后超链接的状态
a:hover{ CSS样式规则; }	鼠标经过、悬停时超链接的状态
a:active{ CSS样式规则; }	鼠标点击不动时超链接的状态

第七章表格与表单

1.表格

<table> //定义表格
        <tr> //定义行
            <td></td> //定义单元格
        </tr>
</table>

2.表格table属性

属性	描述	常用属性值
border	设置表格的边框（默认border="0"为无边框）	像素值
cellspacing	设置单元格与单元格边框之间的空白间距	像素值（默认为2像素）
cellpadding	设置单元格内容与单元格边框之间的空白间距	像素值（默认为1像素）
width	设置表格的宽度	像素值
height	设置表格的高度	像素值
align	设置表格在网页中的水平对齐方式	left、center、right
bgcolor	设置表格的背景颜色	预定义的颜色值、十六进制#RGB、rgb(r,g,b)
background	设置表格的背景图像	url地址

3.tr标签属性

PS:

1<tr>标签无宽度属性width，其宽度取决于表格标签<table>。

.2. 对<tr>标签应用valign属性，用于设置一行内容的垂直对齐方式。

3. 虽然可以对<tr>标签应用background属性，但是在<tr>标签中此属性兼容问题严重。

4.td标签属性

PS:

1. 在<td>标签的属性中，重点掌握colspan和rolspan，其他的属性了解即可，不建议使用，均可用CSS样式属性替代。

2. 当对某一个<td>标签应用width属性设置宽度时，该列中的所有单元格均会以设置的宽度显示。

3. 当对某一个<td>标签应用height属性设置高度时，该行中的所有单元格均会以设置的高度显示。

表格结构

5.CSS控制表格样式

（1）绘制表格边框

table{
    width:280px;
    height:280px;
    border:1px solid #F00; //设置table的边框
}
td.th{
    border:1px solid #F00;  //为单元格单独设置边框
}

PS：

1. border-collapse属性的属性值除了collapse（合并）之外，还可以为separate（分离），默认为separate。

2. 当表格的border-collapse属性设置为collapse时， HTML中设置的cellspacing属性值无效。

3. 行标签<tr>无border样式属性，本书不再做具体的演示，初学者可以自己测试加深理解。

（2）绘制单元格边框

PS:

1. 行标签<tr>无内边距属性padding和外边距属性margin。

2. 外边距属性margin对单元格无效，要想设置相邻单元格边框之间的距离，只能对<table>标签应用HTML标签属性cellspacing。

6.表单

表单控件

7.input控件

<form action="url地址" method="提交方式" name="表单名称">
<!-- autofocus获取焦点 -->    
    <input type="text">文本框
    <input type="password">密码框
    <input type="radio" name="sex">单选框
    <input type="radio" name="sex">
    <input type="checkbox">复选框
    <input type="checkbox">
    <input type="checkbox">
    <input type="button" value="普通按钮">普通按钮
    <input type="submit"><br>提交按钮
    <input type="reset"><br>重置按钮
    <input type="file"><br>选取文件
    <input type="email">邮箱
    <input type="url">网址
    <!-- placeholder提示内容 -->
    请输入电话：<input type="tel" name="telephone" placeholder="请输入11位数字">
    请输入搜索：<input type="search">
    请输入颜色：<input type="color">
    请输入数值：<input type="number" name="number1" value="0" min="1" max="20" step="4">
    请输入年份：<input type="date">

    请输入一个浏览器：<input type="text" list="wangzhi">
    <datalist id="wangzhi">
        <option value="Chrome"></option>
        <option value="Edge"></option>
        <option value="Opera"></option>
    </datalist>
    <!-- required提示未输入 -->
     姓名：<input type="text" required>
          <input type="submit">
</form>

8.textarea控件

<textarea name="" id="" cols="30" rows="10"></textarea>可以自行调整的框

9.select控件

<form action="">
    <select name="" id="">下拉菜单
        <option value="">下拉1</option>
        <option value="">下拉2</option>
         <option value="">下拉3</option>
    </select>
</form>

第八章：浮动

1.什么是浮动：

浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。

浮动的基本语法格式是：选择器{float:属性值;}

属性有：left：元素向左浮动

Right：元素向右浮动

None：元素不浮动（默认值）

2.如何清除浮动：

基本语法格式是：选择器{clear:属性值;}

属性有：left：不允许左侧有浮动元素（清除左侧浮动的影响）

Right：不允许右侧有浮动元素（清除右侧浮动的影响）

Both：同时清除左右两侧浮动的影响

前端HTML与CSS基础

第一章/第二章：初识HTML5

1.标签的基本分类：

2. HTML5文档头部相关标签

3.标题标记

4.段落标签

5.水平线标签

6.换行标签

7.文本样式标记

8.文本格式化标签

9.mark标签

10.cite标签

11.特殊字符标签

12.图像标签<img/>

13.相对路径和绝对路径

第三章 初识css

一.css核心基础

1.Css样式规则

2.引入css样式表

3.Css基础选择器

二、文本控制标签

1、Css字体样式属性

2、Css文本外观属性

三、高级特性

1、Css复合选择器

2、Css层叠性和继承性

3、Css优先级

4、属性选择器·

5、关系选择器

第四章 CSS4选择器

1.属性选择器

2.关系选择器

3.结构伪类化选择器

4.伪元素选择器

第五章 盒子模型

1.边框

2.内边距

3.外边距

4.水平居中

5.背景

6.平铺

7.图像属性

8.阴影

9.块元素和行内元素

第六章 列表与超链接

一．无序链表ui 2有序链表ol 3定义链表dl 4链表的嵌套应用

1.无序链表tybe属性值

2.有序链表相关属性

3.自定义列表的基本语法格式

4.列表嵌套示例

二．CSS控制列表样式

1.list-style-type属性

2.list-style-image属性

3.list-style-position属性

三．超链接标签

1.超链接标签

2.标签实例

四．链接伪类控制超链接

第七章 表格与表单

1.表格

2.表格table属性

3.tr标签属性

4.td标签属性

5.CSS控制表格样式

6.表单

7.input控件

8.textarea控件

9.select控件

第八章：浮动

1.什么是浮动：

2.如何清除浮动：

第三章初识css

*2.引入css**样式表*

*3.Css**基础选择器*

第五章盒子模型

第六章列表与超链接

第七章表格与表单