前端开发基础入门
前端开发基础
- 前端开发基础入门
- 1.概述
- 2 HTML
- 3 CSS
1.概述
1.1前端开发
前端开发最核心的三个技术是：HTML、CSS和JavaScript。
1）HTML，全称Hyper Text Markup Language（超文本标记语言）。HTML是一门描述性语言。
2）CSS，即Cascading Style Sheet（层叠样式表），是用来控制网页外观的一种技术。
3）JavaScript，就是我们通常所说的JS，是一种嵌入到 HTML页面中的脚本语言，由浏览器一边解释一边执行。
三者区别：HTML用于控制网页的结构，CSS用于控制网页的外观，而JavaScript控制着网页的行为。*举个例子：*盖房子的时候，我们都是先把结构建好（HTML）。之后，再给房子装修（CSS），例如给窗户装上窗帘、在地板上铺瓷砖。装修好之后，当夜幕降临之时，我们要开灯（JavaScript）才能把屋子照亮。
1.2后端开发
当你掌握了前端技术，差不多就可以开发一个属于自己的网站了。不过这个时候做出来的是一个静态网站，它的唯一功能是供用户浏览，而不能与服务器进行交互。如果想开发一个用户体验更好、功能更强大的网站，我们就必须学习一些后端技术。下面就给大家介绍几种常见的后端技术：
1）PHP，是世界上最通用的开源脚本语言（之一），其语法吸收了C、Java和Perl语言的特点，易于学习，使用广泛，适用于Web开发领域。
2）JSP，有点类似ASP技术，它是在传统的网页HTML文件中插入Java程序段（Scriptlet）和JSP标记（tag），从而形成JSP文件。用JSP开发的Web应用是跨平台的，既可以在Windows系统下运行，也能在其他操作系统（如Linux）上运行。
网站是前端与后端的结合。
1.3学习路线
下面是一条比较理想的前端开发路线：
HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→Vue.js→webpack→Node.js
除了掌握这些技术，后期我们还需要学习更多辅助性的技能，包括SCSS、Typescript、UI框架等。
1.4前端开发工具
前端开发工具非常多，例如Dreamweaver、Sublime Text、Atom、HBuilder、Vscode等。初学者建议使用HBuilder，因为HBuilder上手最简单。后期的话，推荐Vscode、Sublime Text或Webstorm，这几个更能满足真正的前端开发需要。
2 HTML
2.1 什么是HTML
HTML是网页的标准语言。HTML并不是一门编程语言，而是一门描述性的标记语言。其语法为：
<标签符>内容</标签符>
标签符一般都是成对出现的，包含一个“开始符号”和一个“结束符号”。结束符号只是在开始符号前面多加上了一个斜杠“/”。当浏览器收到HTML文本后，就会解析里面的标签符，然后把标签符对应的功能表达出来。
所以，简单来说，学习HTML就是学习各种标签，来搭建网页的骨架。在HTML中，标签有很多种，如文字标签、图片标签、表单标签等。这就是描述性语言的意思------用标签来说话。例如，如果你要在浏览器显示一段文字，就应该使用“段落标签——p”；如果要在浏览器显示一张图片，就应该使用“图片标签——img”。针对你想显示东西的不同，使用的标签也会不同。
2.2 HTML结构
下图是HTML的基本结构，从中我们可以看出，一个页面是由4个部分组成的：
（1）文档声明：<!DOCTYPE html> //表面这是一个HTML页面
（2）html标签对：<html></html>
（3）head标签对：<head></head>
（4）body标签对：<body></body>
一个完整的HTML页面，其实就是由一对对的标签组成的（当然也有例外）。接下来，我们简单介绍一下这4个部分的作用。
1）HTML标签：HTML标签的作用，是在告诉浏览器，这个页面是从开始，然后到结束的。在实际开发中，我们可能会经常看到这样一行代码：
<html xmlns="http://www.w3.org/1999/xhtml">
这句代码的作用是告诉浏览器，当前页面使用的是W3C的XHTML标准。这里我们了解即可，不用深究。一般情况下，我们不需要加上xmlns="http://www.w3.org/1999/xhtml"这一句。
2）head标签：是网页的“头部”，用于定义一些特殊的内容，如页面标题、定时刷新、外部文件等。
3)body标签：是网页的“身体”。对于一个网页来说，大部分代码都是在这个标签对内部编写的。
2.3 head标签
只有一些特殊的标签才能放在head标签内，其他大部分标签都是放在body标签内的。
在HTML中，一般来说，只有6个标签能放在head标签内。
（1）title标签
（2）meta标签
（3）link标签
（4）style标签
（5）script标签
（6）base标签（该标签一点意义都没有）
2.3.1 title标签
在HTML中，title标签唯一的作用就是定义网页的标题。在实际开发中，要求在每一个页面都写上title。
2.3.2 meta标签
meta标签一般用于定义页面的特殊信息，例如页面关键字、页面描述等。这些信息不是提供给用户看的，而是提供给搜索引擎蜘蛛（如百度蜘蛛、谷歌蜘蛛）看的。简单来说，meta标签就是用来告诉“搜索蜘蛛”这个页面是干嘛的。在HTML中，meta标签有两个重要的属性：name和http-equiv。
1）name属性
我们先来看一个简单示例，代码如下：
<!DOCTYPE html>
<html>
<head>
<!--网页关键字-->
<meta name="keywords" content="绿叶学习网,前端开发,后端开发"/>
<!--网页描述-->
<meta name="description" content="绿叶学习网是一个最富有活力的Web技术学习网站"/>
<!--本页作者-->
<meta name="author" content="helicopter">
<!--版权声明-->
<meta name="copyright" content="本站所有教程均为原创，版权所有，禁止转载。否则必将追究法律责任。"/>
</head>
<body>
</body>
</html>
从上面这个简单例子，我们来总结一下meta标签的name属性的几个取值，如下表所示。
| 属性值 | 说明 |
|---|---|
| keywords | 网页的关键字，可以是多个，而不仅仅是一个 |
| description | 网页的描述 |
| author | 作者 |
| copyright | 版权信息 |
在实际开发中，我们一般只会用到keywords和description。记住这两个就可以了。
2）http-equiv属性
在HTML中，meta标签的http-equiv属性只有两个重要作用：定义网页所使用的编码；定义网页自动刷新跳转。
定义网页所使用的编码：
语法：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
说明：
这段代码告诉浏览器该页面所使用的编码是utf-8。不过在HTML5标准中，上面这句代码可以简写为：
<meta charset="utf-8" />
定义网页自动刷新跳转：
语法：
<meta http-equiv="refresh" content="6;url=http://www.baidu.com"/>
说明：
这段代码表示当前页面在6秒后会自动跳转到http://www.baidu.com这个页面。实际上，很多“小广告”网站就是用这个来实现页面定时跳转的。例如：
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="refresh" content="6;url=http://www.baidu.com"/>
</head>
<body>
<p>这个页面在6秒之后自动跳转到百度首页</p>
</body>
</html>
2.3.3 style标签
在HTML中，style标签用于定义元素的CSS样式，在HTML中不需要深入研究，在CSS中我们再详细介绍。其语法是：
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
/*这里写CSS样式*/
</style>
</head>
<body>
</body>
</html>
2.3.4 script标签
在HTML中，script标签用于定义页面的JavaScript代码，也可以引入外部JavaScript文件。在JavaScript部分中我们会详细介绍，这里不需要深究。其语法为：
<!DOCTYPE html>
<html >
<head>
<script>
/*这里写JavaScript代码*/
</script>
</head>
<body>
</body>
</html>
2.3.5 link标签
在HTML中，link标签用于引入外部样式文件（CSS文件）。这也是属于CSS部分的内容，这里不需要深究。语法为：
<!DOCTYPE html>
<html >
<head>
<link type="text/css" rel="stylesheet" href="css/index.css">
</head>
<body>
</body>
</html>
2.4 body标签
在HTML中，head标签表示页面的“头部”，而body标签表示页面的“身体”。在后面的章节中，我们学习的所有标签都是位于body标签内部的。举个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>body标签</title>
</head>
<body>
<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
</body>
</html>
浏览器预览效果如下图：
分析：
<meta charset="utf-8" />的作用是为了防止页面出现乱码，以后在每一个HTML页面中，我们都要为其添加上。
此外，<meta charset="utf-8" />这一句必须放在title标签以及其他meta标签前面，这一点大家要记住了。
h3标签是一个“第3级标题标签”，一般用于显示“标题内容”
2.5 HTML注释
在实际开发中，我们需要在一些关键的HTML代码旁边标明一下这段代码是干什么，这个时候就要用到“HTML注释”了。其语法为：
<!--注释的内容--> //说明：<!---->又叫注释标签。<!--表示注释的开始，-->表示注释的结束。
2.6 HTML------文本
2.6.1 文本简介
（1）页面组成元素
在HTML中，我们主要学习怎么来做一个静态页面。从我们平常浏览网页的经验中得知，绝大部分静态页面都是由以下4种元素组成的：文本、图片、超链接、音频和视频。
需要注意一点：静态页面和动态页面的区别在于：是否与服务器进行数据交互。下面列出的4种情况都不一定是动态页面：带有音频和视频、带有flash动画、带有CSS动画、带有JavaScript特效。
（2）HTML文本
我们先来看一个纯文本的网页（如下图所示），然后通过分析这个网页，进而得出在这一部分我们究竟要学什么内容。
通过对该网页进行分析，我们可以知道在这一章中至少要学习以下6个方面的内容：标题标签、段落标签、换行标签、文本标签、水平线标签、特殊符号。
2.6.2 标题标签（h1-h6）
在HTML中，共有6个级别的标题标签：h1、h2、h3、h4、h5、h6。其中h是header的缩写。6个标题标签在页面中的重要性是有区别的，其中h1标签的重要性最高，h6标签的重要性最低。
注意：一个页面一般只能有一个h1标签，而h2到h6标签可以有多个。其中，h1表示的是这个页面的大标题。
注意：title标签和h1标签是不一样的。title标签用于显示地址栏的标题，而h1标签用于显示文章的标题。
2.6.3 段落标签与换行标签（p、br）
（1）段落标签
在HTML中，我们可以使用“p标签”来显示一段文字。语法为：
<p>段落内容</p>
段落标签会自动换行，并且段落与段落之间有一定的间距。也就是说有几段文字就用几对标签。
HTML用于控制网页的结构，CSS用于控制网页的外观。文字的颜色和大小属于网页的外观，这些都是与CSS有关的内容。在HTML学习中，只需要关心用什么标签就行了。对于外观的控制，在CSS部分中再给大家详细介绍。
（2）换行标签
从上面我们知道，段落标签是会自动换行的。那么如果想要随意地对文字进行换行处理，该怎么办呢？分析：
如果想对上面的诗句进行换行，有那么两种方法：
要么使用两个p标签；要么使用br标签。
在HTML中，我们可以使用br标签来给文字换行。其中<br/>是自闭合标签，br是break（换行）的缩写。
对于自闭合标签，我们在后面再给大家详细介绍。
举个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>换行标签</title>
</head>
<body>
<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。<br/>举头望明月，低头思故乡。</p>
</body>
</html>
使用p标签会导致段落与段落之间有一定的间隙，而使用br标签则不会。
br标签是用来给文字换行的，而p标签是用来给文字分段的。如果你的内容是两段文字，则不需要使用br标签换行那么麻烦，而是直接用两个p标签就可以了。
2.6.4 文本标签（上sup下sub标、划线(s,u)、粗(stong,b)斜(i,em,cite)体）
在HTML中，我们可以使用“文本标签”来对文字进行修饰，例如粗体、斜体、上标、下标等。常用的有8种文本标签。（后四个可以不用，而在CSS中实现）
（1）粗体标签：strong、b
（2）斜体标签：i、em、cite
（3）上标标签：sup
（4）下标标签：sub
（5）中划线标签：s
（6）下划线标签：u
（7）大字号标签：big
（8）小字号标签：small
（1）粗体标签
在HTML中，我们可以使用“strong标签”或“b标签”来对文本进行加粗。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>粗体标签</title>
</head>
<body>
<p>这是普通文本</p>
<strong>这是粗体文本</strong><br/>
<b>这是粗体文本</b>
</body>
</html>
strong标签和b标签的加粗效果是一样的。不过在实际开发中，如果想要对文本实现加粗效果，尽量使用strong标签。这是因为strong标签比b标签更具有语义性。
如果把上面代码中的<br/>去掉，两行字就会变成一行，说明粗体标签不会引起换行
（2）斜体标签
在HTML中，我们可以使用i标签、em标签和cite标签来实现文本的斜体效果。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>斜体标签</title>
</head>
<body>
<i>斜体文本</i><br/>
<em>斜体文本</em><br/>
<cite>斜体文本</cite>
</body>
</html>
在实际开发中，如果想要实现文本的斜体效果，尽量使用em标签，而不是i标签或cite标签。这也是因为em标签比其他两个标签的语义性更好。
（3）上标标签与下标标签
在HTML中，我们可以使用“sup标签”来实现文本的上标效果。sup，是superscripted（上标）的缩写。在数学函数中常用到。如果你想要将某个数字或某些文字变成上标效果，只要把这个数字或文字放在标签内就可以了。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>上标标签</title>
</head>
<body>
<p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
</body>
</html>
同理，下标标签换成sub。
（4）中划线标签
在HTML中，我们可以使用“s标签”来实现文本的中划线效果。中划线效果一般用于显示那些不正确或者不相关的内容，常用于商品促销的标价中。大家在电商网站购物时肯定经常见到这种效果。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>删除线标签</title>
</head>
<body>
<p>新鲜的新西兰奇异果</p>
<p><s>原价:￥6.50/kg</s></p>
<p><strong>现在仅售：￥4.00/kg</strong></p>
</body>
</html>
不过等学了CSS之后，对于删除线效果，一般用CSS来实现，几乎不会用s标签来实现。
（5）下划线标签
在HTML中，我们可以使用“u标签”来实现文本的下划线效果。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下划线标签</title>
</head>
<body>
<p><u>绿叶学习网</u>是互联网最精品的Web技术学习网站。</p>
</body>
</html>
同样，等学了CSS之后，对于下划线效果，一般用CSS来实现，几乎不会用u标签来实现。
（6）大字号标签和小字号标签
在HTML中，我们可以使用“big标签”来实现字体的变大，还可以使用“small标签”来实现字体的变小。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>big标签和small标签</title>
</head>
<body>
<p>普通字体文本 </p>
<big>大字号文本</big><br/>
<small>小字号文本</small>
</body>
</html>
在实际开发中，对于字体大小的改变，我们几乎不会用big标签和small标签来实现，而是使用CSS来实现，因此只需要简单了解一下即可。
总的来说，就只用记住strong、em、sup、sub就可以。
2.6.5 水平线标签（hr/）
在HTML中，我们可以使用“hr标签”来实现一条水平线。hr，是horizon（水平线）的缩写。语法：
<hr />
举个例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>水平线标签</title>
</head>
<body>
<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
<hr/>
<h3>春晓</h3>
<p>春眠不觉晓，处处闻啼鸟。</p>
<p>夜来风雨声，花落知多少。</p>
</body>
</html>
2.6.6 div标签
在HTML中，我们可以使用“div标签”来划分HTML结构，从而配合CSS来整体控制某一块的样式。对于上一个例子，我们可以用div标签来将两首诗划分成不同的区域，方便CSS针对不同区域进行样式控制。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div标签</title>
</head>
<body>
<!--这是第一首诗-->
<div>
<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
</div>
<hr/>
<!--这是第二首诗-->
<div>
<h3>春晓</h3>
<p>春眠不觉晓，处处闻啼鸟。</p>
<p>夜来风雨声，花落知多少。</p>
</div>
</body>
</html>
2.6.7 自闭和标签(如br hr)
在前面的学习中，我们接触的大部分标签都是成对出现的，这些标签都有一个“开始符号”和一个“结束符号”。不过有些标签是没有结束符号的，例如br 和hr 。
在HTML中，标签分为两种：一般标签和自闭合标签。其中
一般标签：由于有开始符号和结束符号，因此可以在内部插入其他标签或文字。
自闭合标签：由于只有开始符号而没有结束符号，因此不可以在内部插入标签或文字。所谓的“自闭合”，指的是本来要用一个配对的结束符号来关闭，然而它却“自己”关闭了。
在HTML中，常见的自闭合标签如下表所示。
| 标签 | 说明 |
|---|---|
| <meta/ > | 定义网页的信息(供搜索引擎查看) |
| <link/ > | 引入“外部CSS文件” |
| <br/ > | 换行标签 |
| <hr/ > | 水平线标签 |
| <img/ > | 图片标签 |
| <input/ > | 表单标签 |
2.6.8 块元素和行内元素
块元素和行内元素，是HTML中极其重要的概念，同时也是学习CSS的重要基础知识。在之前的学习中，大家可能会发现：在浏览器预览效果，有些元素是独占一行的，其他元素不能跟这个元素位于同一行，如p、div、hr等。而有些元素不是独占一行的，其他元素可以跟这个元素位于同一行，如strong、em等。特别注意一下，这里所谓的“独占一行”，并不是在HTML代码里独占一行，而是在浏览器显示效果中独占一行。
注：标签，也叫“元素”，例如p标签又叫p元素。叫法不同，意思相同。
在HTML中，根据元素的表现形式，一般可以分为两类：块元素（block）、行内元素（inline）
（1）块元素
在HTML中，块元素在浏览器显示状态下将占据整一行，并且排斥其他元素与其位于同一行。此外，一般情况下，块元素内部可以容纳其他块元素和行内元素。常见块元素如下表：
| 块元素 | 说明 |
|---|---|
| h1~h6 | 标题元素 |
| p | 段落元素 |
| div | div元素 |
| hr | 水平线 |
| ol | 有序列表 |
| ul | 无序列表 |
举个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>块元素和行内元素</title>
</head>
<body>
<div>
<h3>绿叶学习网</h3>
<p>“绿叶，给你初恋般的感觉。”</p>
<strong>绿叶学习网</strong>
<em>“绿叶，给你初恋般的感觉。”</em>
</div>
</body>
</html>
输出效果为：
由上可知：
h3和p是块元素，它们的显示效果都是独占一行的，并且排斥任何元素跟它们位于同一行；strong和em是行内元素，即使代码不是位于同一行，它们的显示效果也是位于同一行的（显示效果跟你代码是否位于同一行没有关系）。
h3、p、strong和em元素都是在div元素内部的，也就是说，块元素内部可以容纳其他块元素和行内元素。
（2）行内元素
在HTML中，行内元素跟块元素恰恰相反，行内元素是可以与其他行内元素位于同一行的。此外，行内元素内部（标签内部）只可以容纳其他行内元素，不可以容纳块元素。
2.6.9 特殊符号(空格与特殊符号)
（1）网页中的空格
网页排版中，为了让段落美观一些，我们都会让每一个段落首行缩进两个字的空格。不过在默认情况下，p标签的段落文字“首行”是不会缩进的。在HTML中，空格也是需要用代码来实现的。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 网页中的“空格”</title>
</head>
<body>
<h3>爱莲说</h3>
<p> 水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p> 予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>
</body>
</html>
1 个汉字约等于 3个 。因此如果想要往 p 标签内加入 2 个空格，那么我们需要往 p 标签内加入 6 个 标签。
（2）网页中的特殊符号
在HTML中，如果想要显示一个特殊符号，也是需要通过代码形式来实现的。这些特殊符号对应的代码，都是以“&”开头、并且以“;”（英文分号）结尾的。这些特殊符号，可以分为两类。
| 特殊符号 | 说明 | 代码 |
|---|---|---|
| " | 双引号（英文） | " ; |
| ‘ | 左单引号 | &lsquo ; |
| ’ | 右单引号 | ’ |
| × | 乘号 | × ; |
| ÷ | 除号 | ÷ ; |
| > | 大于号 | > ; |
| < | 小于号 | < ; |
| & | “与”符号 | & ; |
| — | 长破折号 | &mdash ; |
| 竖线 | | ; |
| 特殊符号 | 说明 | 代码 |
|---|---|---|
| § | 分节符 | § ; |
| © | 版权符 | © ; |
| ® | 注册商标 | ® ; |
| ™ | 商标 | &trade ; |
| € | 欧元 | &euro ; |
| £ | 英镑 | £ ; |
| ¥ | 日元 | ¥ ; |
| ° | 度 | ° ; |
2.7 HTML------列表
2.7.1 列表简介（有序、无序、定义列表）
列表是网页中最常用的一种数据排列方式。在HTML中，列表共有3种：有序列表、无序列表和定义列表。
在有序列表中，列表项之间有先后顺序之分。在无序列表中，列表项之间是没有先后顺序之分的。而定义列表是一组带有特殊含义的列表，一个列表项中包含“条件”和“列表”两部分。
2.7.2 有序列表（ol li）
在HTML中，有序列表中的各个列表项是有顺序的。有序列表从< ol >开始，到< /ol >结束。有序列表的列表项是有先后顺序的，一般采用数字或字母作为顺序，默认是采用数字顺序。语法：
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
说明：
ol，即ordered list（有序列表）；li，即list（列表项）。在该语法中，< ol >和< /ol >标志着有序列表的开始和结束，而< li >和< /li >标签表示这是一个列表项。一个有序列表可以包含多个列表项。
ol标签和li标签是配合一起使用，不可以单独使用，而且< ol >标签的子标签只能是li标签，不能是其他标签。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>有序列表</title>
</head>
<body>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ol>
</body>
</html>
结果如下：
分析：默认是数字序列，但如果想要用“a、b、c：等字母，就需要用到type属性。
type属性
在HTML中，我们可以使用type属性来改变列表项符号。默认情况下，有序列表使用数字作为列表项符号。语法：
<ol type="属性值">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
说明：type属性取值如下表
| 属性值 | 列表项符号 |
|---|---|
| 1 | 阿拉伯数字：1、2、3…… |
| a | 小写英文字母：a、b、c…… |
| A | 大写英文字母：A、B、C…… |
| i | 小写罗马数字：i、ii、iii…… |
| I | 大写罗马数字：I、II、III…… |
对于有序列表的列表项符号，等学了CSS之后，我们可以放弃type属性，而使用list-style-type属性。
2.7.3 无序列表（ul li）
无序列表的列表项是没有顺序的。默认情况下，无序列表的列表项符号是●，不过可以通过type属性来改变其样式。语法结构只用将有序列表中的ol换成ul即可（ul即unordered list）
其type类型取值如下表：
| 属性值 | 列表项符号 |
|---|---|
| disc | 实心圆●（默认值） |
| circle | 空心圆○ |
| square | 正方形■ |
在实际的前端开发中，无序列表比有序列表更为实用。更准确点说，我们一般都是使用无序列表，几乎用不到有序列表。凡是需要显示列表数据的地方都用到无序列表，如导航栏、工具栏等。
需要注意两点：
ul元素的子元素只能是li，不能是其他元素（div、hr等）。
ul元素内部的文本，只能在li元素内部添加，不能在li元素外部添加。
2.7.4 定义列表（dl dt dd）
在HTML中，定义列表由两部分组成：名词和描述。语法为：
<dl>
<dt>名词</dt>
<dd>描述</dd>
……
</dl>
说明：dl即definition list（定义列表）；dt即definition term（定义名词）；而dd即definition description（定义描述）。
在实际开发中，定义列表虽然用得比较少，但是在某些高级效果（如自定义表单）中也会用到。在HTML入门阶段，我们了解一下就行。
2.8 HTML------表格
2.8.1 基本结构（table，tr， td）
在HTML中，一个表格一般会由以下3个部分组成。
（1）表格：table标签
（2）行：tr标签
（3）单元格：td标签
语法：
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
说明：tr，指的是table row（表格行）；td，指的是table data cell（表格单元格）。在表格中，有多少组“< tr > < /tr >”，就表示有多少行。
注意：默认情况下，表格是没有边框的。对于表格的边框、颜色、大小等，我们在CSS中会学到。在HTML学习中，我们只需要知道表格用什么标签就行了。记住，学习HTML时，只管结构就行了，学习CSS时，再考虑样式。
2.8.2 完整结构（caption，th）
上一节介绍了表格的“基本结构”，但是一个表格的“完整结构”不仅仅只有table、tr、td，还包括caption、th等。
（1）表格标题：caption
语法：
<table>
<caption>表格标题</caption>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
说明：一个表格只能有一个标题，也就是只能有一个caption标签。在默认情况下，标题都是位于整个表格内的第一行。
（2）表头单元格：th
在HTML中，单元格其实有两种：表头单元格，使用th标签；表行单元格，使用td标签。th和td在本质上都是单元格，但是并不代表两者可以互换。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表头单元格</title>
</head>
<body>
<table>
<caption>考试成绩表</caption>
<tr>
<th>姓名</th>
<th>语文</th>
<th>英语</th>
<th>数学</th>
</tr>
<tr>
<td>小明</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>小红</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
</table>
</body>
</html>
2.8.3 表格语义化（thead、tbody、tfoot）
一个完整的表格包含：table、caption、tr、th、td。为了更深一地对表格进行语义化，HTML引入了thead、tbody和tfoot标签。
thead、tbody和tfoot把表格划分为3部分：表头、表身、表脚。有了这些标签，表格语义更加良好，结构更加清晰，也更具有可读性和可维护性。
表脚（tfoot）往往用于统计数据的。对于thead、tbody和tfoot标签，不一定全部都上。一般情况下，我们都是根据实际需要来使用这些标签。（直接在相应的tr标签外面套上相应的标签即可）
此外，thead、tbody和tfoot除了使得代码更具有语义之外，还有另外一个重要作用：方便分块来控制表格的CSS样式。
2.8.4 合并行：rowspan
在设计表格时，有时我们需要将“横向的N个单元格”或者“纵向的N个单元格”合并成一个单元格（类似word的表格合并），这个时候就需要用到“合并行”或“合并列”。
在HTML中，我们可以使用rowspan属性来合并行。所谓的合并行，指的是将“纵向的N个单元格”合并。
语法：
<td rowspan = "跨越的行数"></td>
举个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>rowspan属性</title>
</head>
<body>
<table>
<tr>
<td>姓名:</td>
<td>小明</td>
</tr>
<tr>
<td rowspan="2">喜欢水果:</td>
<td>苹果</td>
</tr>
<tr>
<td>香蕉</td>
</tr>
</table>
</body>
</html>
2.8.5 合并列：colspan
在HTML中，我们可以使用colspan属性来合并列。所谓的合并列，指的是将“横向的N个单元格”合并。
语法：<td colspan = "跨越的列数"></td>
2.9 HTML------图片
2.9.1 图片标签：img（src、alt、title）
在HTML中，我们可以使用img标签来显示一张图片。对于img标签，只需要掌握它的3个属性：src、alt和title。
<img src="图片路径" alt="提示文字" title="提示文字" />
src属性
src用于指定这个图片所在的路径，这个路径可以是相对路径，也可以是绝对路径。任何一个图片必须指定src属性才可以显示。也就是说，src是img标签必不可少的属性。
alt属性和title属性
alt和title都是用于指定图片的提示文字。一般情况下，alt和title的值是相同的。不过两者也有很大的不同。
下图是只有alt属性，没有title和src（地址）时的显示效果。
下图是有title和src时的显示效果。当我们把鼠标移到图片上时，就会显示title中的提示文字。
在实际开发中，对于img标签，src和alt这两个是必选属性，一定要添加；而title是可选属性，可加可不加。
2.9.2 图片路径
绝对路径就是图片的完整路径，比较简单。
相对路径指的是图片相对当前页面的位置。
对于上图，page1.html想要应用haizei.png这张图片，相对路径是<img src="haizei.png" />
对于上图，page2.html想要应用haizei.png这张图片，相对路径是<img src="img/haizei.png" />
对于上图，page1.html想要应用haizei.png这张图片，相对路径是<img src="haizei.png" />
对于上图，page2.html想要应用haizei.png这张图片，相对路径是<img src="../haizei.png" /> 其中“…/”表示上一级目录
在实际开发中，站内文件不管是图片还是超链接等，我们都是使用相对路径，几乎不会使用绝对路径。这是因为如果采用绝对路径，你网站文件一旦移动，则所有的路径都可能会失效。
在真正的网站开发中，对于图片或者引用文件的路径，我们100%都是使用相对路径的。
2.9.3 图片格式
在网页中，图片格式有两种：一种是“位图”；另外一种是“矢量图”。
1）位图
位图，又叫做“像素图”，它是由像素点组成的图片。对于位图来说，放大图片后，图片会失真；缩小图片后，图片同样也会失真。
在实际开发中，最常见位图的图片格式有3种（可以从图片后缀名看出来）：jpg（或jpeg）、png、gif。深入理解3种图片适合在哪种情况下使用，在前端开发中是非常重要的。
（1）jpg可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。此外，jpg体积较大，并且不支持透明。
（2）png是一种无损格式，可以无损压缩以保证页面打开速度。此外，png体积较小，并且支持透明，不过不适合存储颜色丰富的图片。
（3）gif图片效果最差，不过它适合制作动画。实际上，小伙伴们经常在QQ或微信上发的动图都是gif格式的。
总结一下：如果想要展示色彩丰富而高品质图片，可以使用jpg格式；如果是一般图片，为了减少体积或者想要透明效果，可以使用png格式；如果是动画图片，可以使用gif格式。此外对于位图，我们可以使用Photoshop这个软件来处理。
2）矢量图
矢量图，又叫做“向量图”，它是用计算机图形学中点、直线或多边形等表示出来的几何图像。
矢量图是以一种数学描述的方式来记录内容的图片格式。举个例子，我们可以使用y=kx来绘制一条直线，当k取不同值时就会绘制不同角度的直线，这就是矢量图的构图原理。
矢量图最大的优点是：图片无论放大、缩小或旋转等都不会失真。最大的缺点是：难以表现色彩丰富的图片效果（非常差）。
矢量图常见格式有：“.ai”、“.cdf”、“.fh”、“.swf”。其中“.swf”格式比较常见，它指的是Flash动画，其他几种格式的矢量图比较少见，可以忽略。对于矢量图，我们可以使用illustrator或者CorelDRAW这两款软件来处理。在网页中，很少用到矢量图，除非是一些字体图标（iconfont）。
2.10 HTML------超链接
2.10.1 超链接简介：a标签（href路径）
超链接，英文名是hyperlink。每一个网站都是由非常多的网页组成，而页面之间通常都是通过超链接来相互关联的。超链接能够让我们在各个独立的页面之间方便地跳转。
1）a标签
在HTML中，我们可以使用a标签来实现超链接。语法：<a href="链接地址">文本或图片</a>
说明：
href表示你想要跳转到那个页面的路径（也就是地址），可以是相对路径，也可以是绝对路径。
超链接的范围非常广，我们可以将文本设置为超链接，这个叫做“文本超链接”。也可以将图片设置为超链接，这个叫做“图片超链接”。
文本超链接：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<a href="http://www.lvyestudy.com">绿叶学习网</a>
</body>
</html>
图片超链接：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<a href="http://www.lvyestudy.com"><img src="img/lvye.png" alt="绿叶学习网"/></a>
</body>
</html>
2）target属性
默认情况下，超链接都是在当前浏览器窗口打开新页面的。在HTML中，我们可以使用target属性来定义超链接打开窗口的方式。
语法：<a href="链接地址" target="打开方式"></a>
说明:a标签的target属性取值有4种，如下表所示。
| 属性值 | 说明 |
|---|---|
| _self | 默认值，在原来窗口打开链接 |
| _blank | 在新窗口打开链接 |
| _parent | 在父窗口打开链接 |
| _top | 在顶层窗口打开超链接 |
一般情况下，我们只会用到_blank这一个值，也只要记住这一个就够了，其他三个值不需要去深究。
2.10.2 内部链接
在HTML中，超链接有两种：一种是外部链接；另外一种是内部链接。外部链接指向的是“外部网站的页面”，而内部链接指向的是“自身网站的页面”。上一节我们接触的就是外部链接，这一节我们来学习一下内部链接。
对于图中的3个页面，如果我们在其中page1.html点击超链接跳转到page2.html或者page3.html，其实这就是内部链接。这是因为3个页面都是位于同一个网站根目录下的。内部链接使用的都是相对路径，而不是绝对路径。
2.10.3 锚点链接
有些页面内容比较多，导致页面过长，此时用户需要不停拖动浏览器上的滚动条才可以看到下面的内容。为了方便用户操作，我们可以使用锚点链接来优化用户体验。
在HTML中，锚点链接其实是内部链接的一种，它链接地址（也就是href）指向的是当前页面的某个部分。所谓的锚点链接，简单来说，就是点击某一个超链接，然后它就会跳到当前页面的某一部分。
想要实现锚点链接，需要定义以下参数。
其中，id属性就是元素的名称，这个id名是随便起的（一般是英文）。不过在同一个页面中，id是唯一的，也就是说一个页面不允许出现相同的id。
最后要注意一点，a标签的href属性取值时，需要在id前面加上“#”（井号），以表示这是一个锚点链接。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
<a href="#article">推荐文章</a><br />
<a href="#music">推荐音乐</a><br />
<a href="#movie">推荐电影</a><br />
</div>
……<br />
……<br />
……<br />
<div id="article">
<h3>推荐文章</h3>
<ul>
<li>朱自清-荷塘月色</li>
<li>余光中-乡愁</li>
<li>鲁迅-阿Q正传</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
<div id="music">
<h3>推荐音乐</h3>
<ul>
<li>林俊杰-被风吹过的夏天</li>
<li>曲婉婷-在我的歌声里</li>
<li>许嵩-灰色头像</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
<div id="movie">
<h3>推荐电影</h3>
<ul>
<li>蜘蛛侠系列</li>
<li>钢铁侠系统</li>
<li>复仇者联盟</li>
</ul>
</div>
</body>
</html>
2.11 表单
2.11.1 表单简介：form、input、textarea、select、option
在前面的章节中，我们学习了各种各样的标签。不过使用这些标签做出来的都是静态页面，动态页面是没办法实现的。如果想要做出一个动态页面，我们就需要借助表单来实现。
对于表单，相信小伙伴们接触不少了，像注册登录、话费充值、发表评论等都用到了，如下图所示。其中，文本框、按钮、下拉菜单等就是常见的表单元素。
如果一个页面仅仅供用户浏览，那就是静态页面。如果这个页面还能实现与服务器进行数据交互（像注册登录、话费充值、评论交流），那就是动态页面。
表单是我们接触动态页面的第一步。其中表单最重要的作用就是：在浏览器端收集用户的信息，然后将数据提交给服务器来处理。
表单标签
在HTML中，表单标签有5种：form、input、textarea、select和option。下图所示的这个表单，已经把这5种表单标签都用上了。在这一章的学习中，最基本的要求就是把这个表单做出来。
从外观上来划分，表单可以分为以下8种：单行文本框、密码文本框、单选框、复选框、按钮、文件上传、多行文本框、下拉列表。
2.11.3 form标签
1)form标签简介
在HTML中，我们都知道表格的行（tr）、单元格（th、td）等都必须放在table标签内部。创建一个表单，跟创建一个表格一样，我们也必须要把所有表单标签放在form标签内部。
表单跟表格，这是两个完全不一样的概念，但是有不少初学者分不清。记住，我们常说的表单，指的是文本框、按钮、单选框、复选框、下拉列表等的统称。
表单元素不一定都要放在form标签内。对于要与服务器进行交互的表单元素就必须放在form标签内才有效。如果表单元素不需要跟服务器进行交互，那就没必要放在form标签内。
2）form标签属性
在HTML中，form标签常用属性如下表所示。
| 属性 | 说明 |
|---|---|
| name | 表单名称 |
| method | 提交方式 |
| action | 提交地址 |
| target | 打开方式 |
| enctype | 编码方式 |
（1）name属性
在一个页面中，表单可能不止一个，每一个form标签就是一个表单。为了区分这些表单，我们可以使用name属性来给表单进行命名。
举例：<form name="myForm"></form>
（2）method属性
在form标签中，method属性用于指定表单数据使用哪一种http提交方法。method属性取值有两个：一个是“get”，另外一个是“post”。get的安全性较差，而post的安全性较好。所以在实际开发中，使用post比较多。
（3）action属性
在form标签中，action属性用于指定表单数据提交到哪一个地址进行处理。
（4）target属性
form标签的target属性跟a标签的target属性是一样的，都是用来指定窗口的打开方式。一般情况下，我们只会用到“_blank”这一个属性值。
（5）enctype属性
在form标签中，enctype属性用于指定表单数据提交的编码方式。一般情况下，我们不需要设置，除非你用到上传文件功能。
2.11.4 input标签（属性值：text、password、radio、checkbox、button(submit,reset)、file）
在HTML中，大多数表单都是使用input标签来实现的。
语法：<input type="表单类型" />
说明：input是自闭合标签，它是没有结束符号的。其中type属性取值如下表所示。
在接下来几个小节中，我们仅仅用到input标签，这些表单类型的不同都是由type属性取值的不同决定的。
2.11.5 单行文本框
1）单行文本框简介
在HTML中，单行文本框是使用input标签来实现的，其中type属性取值为“text”。单行文本框常见于注册登录中。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
姓名：<input type="text" />
</form>
</body>
</html>
2)单行文本框属性
| 属性 | 说明 |
|---|---|
| value | 设置文本框的默认值，也就是默认情况下文本框 |
| size | 设置文本框的长度 |
| maxlength | 设置文本框中最多可以输入的字符数 |
说明：
value属性用于设置单行文本框中默认的文本，如果没有设置，就是空白。
size属性可以用来设置单行文本框的长度，不过在实际开发中，我们一般不会用到这个属性，而是使用CSS来控制。
从外观上看不出maxlength加上与不加上有什么区别，不过当我们输入内容后，会发现设置maxlength="5"的单行文本框最多只能输入5个字符。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
姓名：<input type="text" /><br />
姓名：<input type="text" maxlength="5"/><br />
姓名：<input type="text" size="20"/><br />
姓名：<input type="text" size="10"/><br />
姓名：<input type="text" /><br />
姓名：<input type="text" value="helicopter"/><br />
</form>
</body>
</html>
2.11.6 密码文本框
密码文本框在外观上与单行文本框相似，两者拥有相同的属性（value、size、maxlength等）。不过它们是有着本质上的区别的：在单行文本框中输入的字符是可见的，而在密码文本框中输入的字符不可见。
密码文本框仅仅能使得周围的人看不见你输入的内容是什么，实际上它并不能保证数据的安全。为了保证数据安全，我们需要在浏览器与服务器之间建立一个安全连接，不过这属于后端技术，这里了解一下就行。
2.11.7 单选框
1)单选框简介
在HTML中，单选框也是使用input标签来实现的，其中type属性取值为“radio”
语法：<input type="radio" name="组名" value="取值" />
说明：name属性表示单选按钮所在的组名，而value表示单选按钮的取值，这两个属性必须要设置。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
性别:
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
</form>
</body>
</html>
分析：我们可以发现，对于这一组单选按钮，只能选中其中一项，而不能同时选中两项。
如果想要在默认情况下，让第一个单选框选中，该怎么做呢？此时可以使用checked属性来实现。上个例子中，只用修改需要设为默认值的按钮对应的代码行即可，例如
<input type="radio" name="gender" value="男" checked />男
注意：
name属性是判断单选的依据，如果漏了name，或者同一组单选框内用了不同的name，那么就不能实现单选功能（会出选都能选的情况）。
一般情况下，value属性取值跟后面的文本是相同的。之所以加上value属性，是为了方便JavaScript或者服务器操作数据用的。实际上，所有表单元素的value属性的作用都是一样的。
2.11.8 复选框
在HTML中，复选框也是使用input标签来实现的，其中type属性取值为“checkbox”。单选框只能选择一项，而复选框可以选择多项。
其与单选框相似，对比理解即可。
2.11.9 按钮
在HTML中，常见的按钮有3种：普通按钮（button）；提交按钮（submit）；重置按钮（reset）。
1)普通按钮button
在HTML中，普通按钮一般情况下都是配合JavaScript来进行各种操作的。
语法：<input type="button" value="取值" />
说明：value的取值就是按钮上的文字。
2)提交按钮submit
在HTML中，提交按钮一般都是用来给服务器提交数据的。我们可以把提交按钮看成是一种特殊功能的普通按钮。
语法：<input type="submit" value="取值" />
提交按钮与普通按钮从外观上是没有什么不同的，两者的区别在于功能上。
3)重置按钮reset
在HTML中，重置按钮一般用来清除用户在表单中输入的内容。重置按钮也可以看成是具有特殊功能的普通按钮。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
账号：<input type="text" /><br />
密码：<input type="password" /><br />
<input type="reset" value="重置" />
</form>
</body>
</html>
分析：
当我们在文本框中输入内容，然后按下重置按钮，会发现内容被清空了！其实，这就是重置按钮的功能。
不过我们要注意一点：重置按钮只能清空它“所在form标签”内表单中的内容，对于当前所在form标签之外的表单清除是无效的。顺便提一下，提交按钮也是针对当前所在form标签而言的。
总结：
（1）普通按钮一般情况下都是配合JavaScript来进行各种操作的。
（2）提交按钮一般都是用来给服务器提交数据的。
（3）重置按钮一般用来清除用户在表单中输入的内容。
4）button标签
普通按钮、提交按钮以及重置按钮这3种按钮都是使用input标签来实现的。其实还有一种按钮是使用button标签来实现的。
语法：<button></button>
说明：在实际开发中，比较少用到button标签。
2.11.10 文件上传
文件上传功能我们经常用到，例如百度网盘、QQ邮箱等都涉及这个功能。文件上传功能的实现需要用到后端技术，不过在学习HTML时，我们只需要关心把页面效果做出来就行了，功能实现不需要去深究。
在HTML中，文件上传也是使用input标签来实现的，其中type属性取值为file。
语法：<input type="file" />
2.11.11 多行文本框
单行文本框只能输入一行文本，而多行文本框却可以输入多行文本。在HTML中，多行文本框使用的是textarea标签，而不是input标签。
语法：<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>
说明：多行文本框的默认显示文本是在标签对内部设置，而不是在value属性中设置的。一般情况下，不需要设置默认显示文本。
2.11.12 下拉列表（select option）
1）下拉列表简介
在HTML中，下拉列表由select和option这两个标签配合使用来表示的。这一点跟无序列表很像，其中无序列表是由ul和li这两个标签配合使用来表示。为了更好地理解，我们可以把下拉列表看成是一种“特殊的无序列表”。
语法：
<select>
<option>选项内容</option>
……
<option>选项内容</option>
</select>
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
<select>
<option>HTML</option>
<option>CSS</option>
<option>jQuery</option>
<option>JavaScript</option>
<option>Vue.js</option>
</select>
</form>
</body>
</html>
分析：下拉列表是最节省页面空间的一种方式，因为它在默认情况下只显示一个选项，只有点击后才会看到全部选项。当我们点击下拉列表后，全部选项就会显示出来，预览效果如下图所示。
2）select标签属性
在HTML中，select标签常用属性有两个，如下表所示。
| 属性 | 说明 |
|---|---|
| multiple | 设置下拉列表可以选择多项 |
| size | 设置下拉列表显示几个列表项，取值为整数 |
multiple举例：
<select multiple>
...
</select>
分析：默认情况下，下拉列表只能选择一项，我们可以通过multiple属性设置下拉列表可以选择多项。想要选取多项，可以使用“Ctrl+鼠标左键”来选取。下拉列表的multiple属性没有属性值，这是HTML5的最新写法，这个跟单选框中的checked属性是一样的。
size属性举例：
<select size="5">
...
</select>
分析：将size取值为1、2、3时，会发现Chrome浏览器无效。这是因为Chrome浏览器最低是4个选项，我们只能选取4及以上数字。
3)option标签属性
在HTML中，option标签常用属性有两个，如下表所示。
| 属性 | 说明 |
|---|---|
| selected | 是否选中 |
| value | 选项值 |
对于value属性，就不用多说了，几乎所有表单元素都有value属性，这个属性是配合JavaScript以及服务器进行操作的。
selected属性举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
<select size="5">
<option>HTML</option>
<option>CSS</option>
<option selected>jQuery</option>
<option>JavaScript</option>
<option>Vue.js</option>
<option>HTML5</option>
<option>CSS3</option>
</select>
</form>
</body>
</html>
显示效果如下图
如果将size = 5 删除，效果就变为
练习题：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>个人信息表</title>
</head>
<body>
<form>
昵称： <input type = "text"><br/>
密码： <input type = "password"><br/>
邮箱： <input type = "text">
<select multiple size="1">
<option value="qq.com">qq.com</option>
<option value="163.com">163.com</option>
<option value="sjtu.edu.cn" selected>sjtu.edu.cn</option>
<option value="Gmail.com">Gmail.com</option>
<option value="126.com">126.com</option>
</select><br/>
性别： <input type="radio" name="gender" value="男" checked> 男
<input type="radio" name="gender" value="女"> 女 <br/>
爱好： <input type="checkbox" name="hobby" value="旅游"> 旅游
<input type="checkbox" name="hobby" value="摄影"> 摄影
<input type="checkbox" name="hobby" value="运动"> 运动 <br/>
个人简介：<br/>
<textarea rows="10" cols="20" >请输入个人简介</textarea><br/>
上传个人照片：<br/>
<input type="file" value="选择文件">
<hr/>
<input type="button" value="立即注册">
</form>
</body>
</html>
2.12 iframe标签
在HTML中，我们可以使用iframe标签来实现一个内嵌框架。内嵌框架，说白了，就是在当前页面再嵌入另外一个网页。
语法：<iframe src="链接地址" width="数值" height="数值"></iframe>
说明：src是必选的，用于定义链接页面的地址。width和height这两个属性是可选的，分别用于定义框架的宽度和高度。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<iframe src="http://www.lvyestudy.com" width="200" height="150"></iframe>
<iframe src="http://sina.com" width="200" height="150"></iframe>
</body>
</html>
分析：iframe实际上就是在当前页面嵌入了另外一个页面，我们也可以同时嵌入多个页面。
3 CSS
3.1 CSS简介
CSS，指的是Cascading Style Sheet（层叠样式表），是用来控制网页外观的一门技术。
3.1.1 CSS引入方式
想要在一个页面引入CSS，共有以下3种方式。
（1）外部样式表
（2）内部样式表
（3）行内样式表
1）外部样式表
外部样式表是最理想的CSS引入方式。在实际开发中，为了提升网站的性能速度和可维护性，一般都是使用外部样式表。所谓的外部样式表，指的是把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表。
当样式需要被应用到多个页面时，外部样式表是最理想的选择。使用外部样式表，你就可以通过更改一个CSS文件来改变整个网站的外观。
外部样式表在单独文件中定义，然后在HTML文件的标签对中使用link标签来引用。
语法为：<link rel="stylesheet" type="text/css" href="文件路径" />
说明：
rel即relative的缩写，它的取值是固定的，即stylesheet，表示引入的是一个样式表文件（即CSS文件）。
type属性取值也是固定的，即"text/css"，表示这是标准的CSS。
link标签是放在head标签内的。
2)内部样式表
内部样式表，指的是把HTML代码和CSS代码放到同一个HTML文件中。其中，CSS代码放在style标签内，并且style标签是放在head标签内部的。
语法：
<style type="text/css">
……
</style>
说明：type="text/css"是必须添加的，表示这是标准的CSS。
3)行内样式表
行内样式表跟内部样式表类似，也是把HTML代码和CSS代码放到同一个HTML文件。但是两者有着本质的区别：内部样式表的CSS是在“style标签”内定义的，而行内样式表的CSS是在“标签的style属性”中定义的。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<div style="color:red;">绿叶，给你初恋般的感觉。</div>
<div style="color:red;">绿叶，给你初恋般的感觉。</div>
<div style="color:red;">绿叶，给你初恋般的感觉。</div>
</body>
</html>
行内样式冗余代码非常多，并且每次改动CSS的时候，必须到元素中一个个去改，这样会导致网站的可读性和可维护性非常差。
对于这三种样式表，在实际开发中，一般都是使用外部样式表。
3.2 CSS选择器
3.2.1 元素的id和class
在HTML中，id和class是元素最基本的两个属性。一般情况下，id和class都是用来选择元素，以便进行CSS操作或者JavaScript操作。
1）id属性
id属性具有唯一性，也就是说在一个页面中相同的id只能出现一次。如果出现了多个相同的id，那么CSS或者JavaScript就无法识别这个id对应的是哪一个元素。
2）class属性
class，顾名思义，就是“类”。我们可以为同一个页面的相同元素或者不同元素设置相同的class，然后使得相同class的元素具有相同的CSS样式。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<div id="content">存在即合理</div>
<p id="content">存在即合理</p>
<div class="content">存在即合理</div>
<p class="content">存在即合理</p>
</body>
</html>
分析：body标签中，前面两条代码是不正确的，因为同一页面id必须不同。后面两条是正确的，因为在同一个页面中，允许出现两个相同class的元素。这样可以使得我们对具有相同class的多个元素，定义相同的CSS样式。
3.2.2 选择器是什么
举个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<div>绿叶学习网</div>
<div>绿叶学习网</div>
<div>绿叶学习网</div>
</body>
</html>
如果只想把第二个div文本颜色设置为红色，就肯定需要通过一种方式来选中它。这种选中想要的元素的方式就称之为选择器。
在CSS中，有很多方式可以把你想要元素选中，这些不同的方式其实就是不同的选择器。选择器的不同，在于它的选择方式不同，但是它们的最终目的是相同的，那就是把你想要的元素选中，然后才可以定义该元素CSS样式。
3.2.3 CSS选择器
CSS选择器非常多，这里先介绍5种最实用的选择器。
（1）元素选择器
（2）id选择器
（3）class选择器
（4）后代选择器
（5）群组选择器
CSS选择器格式如下：
选择器
{
属性1 : 取值1;
……
属性n : 取值n;
}
1)元素选择器
元素选择器，就是选中相同的元素，然后对相同的元素定义同一个CSS样式。
语法：
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
div{color:red;}
</style>
</head>
<body>
<div>绿叶学习网</div>
<p>绿叶学习网</p>
<span>绿叶学习网</span>
<div>绿叶学习网</div>
</body>
</html>
浏览器预览效果如下：
分析：div{color:red;}表示把页面中所有的div元素选中，然后定义它们文本颜色为红色。元素选择器就是选择指定的相同的元素，而不会选择其他元素。
2）id选择器
为元素设置一个id属性，然后针对设置了这个id的元素定义CSS样式，这就是id选择器。
语法：
说明：对于id选择器，id名前面必须要加上前缀“#”，否则该选择器无法生效。id名前面加上“#”，表示这是一个id选择器。（锚点链接处的id也要加#号）
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#lvye{color:red;}
</style>
</head>
<body>
<div>绿叶学习网</div>
<div id="lvye">绿叶学习网</div>
<div>绿叶学习网</div>
</body>
</html>
3）class选择器
可以对“相同的元素”或者“不同的元素”定义相同的class属性，然后针对拥有同一个class的元素进行CSS样式操作。
语法：
说明：
class名前面必须要加上前缀英句号（.），否则该选择器无法生效。类名前面加上英文句号，表明这是一个class选择器。
4）后代选择器
后代选择器，就是选择元素内部中所有的某一种元素，包括子元素和其他后代元素（如“孙元素”）。
语法为：
说明：父元素与后代元素必须用空格隔开，从而表示选中某个元素的后代元素。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#father1 div {color:red;}
#father2 span{color:blue;}
</style>
</head>
<body>
<div id="father1">
<div>绿叶学习网</div>
<div>绿叶学习网</div>
</div>
<div id="father2">
<p>绿叶学习网</p>
<p>绿叶学习网</p>
<span>绿叶学习网</span>
</div>
</body>
</html>
5)群组选择器
群组选择器，指的是同时对几个选择器进行相同的操作。
语法：
说明：对于群组选择器，两个选择器之间必须要用英文逗号（,）隔开，不然群组选择器就无法生效。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
h3, div, p, span {color:red;}
</style>
</head>
<body>
<h3>绿叶学习网</h3>
<div>绿叶学习网</div>
<p>绿叶学习网</p>
<span>绿叶学习网</span>
</body>
</html>
举个综合性的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#lvye,.lv,span,div p{color:red;}
</style>
</head>
<body>
<div id="lvye">绿叶学习网</div>
<div>
<div>绿叶学习网</div>
<p>绿叶学习网</p>
</div>
<p class="lv">绿叶学习网</p>
<span>绿叶学习网</span>
</body>
</html>
说明：该例子中综合了五种选择器。
3.3 字体样式
3.3.1 字体样式简介
字体相关的CSS属性如下表所示：
| 属性 | 说明 |
|---|---|
| font-family | 字体类型 |
| font-size | 字体大小 |
| font-weight | 字体粗细 |
| font-style | 字体风格 |
| color | 字体颜色 |
除了字体颜色，其他字体属性都是以“font”前缀开头的。其中，font就是“字体”的意思。
3.3.2 字体类型：font-family
语法：font-family: 字体1, 字体2, ... , 字体N;
说明：font-family可以指定多种字体。使用多个字体时，将按从左到右的顺序排列，并且以英文逗号（,）隔开。如果我们不定义font-family，浏览器默认字体类型一般是“宋体”。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#div1{font-family: Arial;}
#div2{font-family: "Times New Roman";}
#div3{font-family: "微软雅黑";}
p{font-family:Arial,Verdana,Georgia;}
</style>
</head>
<body>
<div id="div1">Arial</div>
<div id="div2">Times New Roman</div>
<div id="div3">微软雅黑</div>
<p>Rome was not built in a day.</p>
</body>
</html>
分析：
对于font-family属性，如果字体类型只有一个英文单词，则不需要加上双引号；如果字体类型是多个英文单词或者中文的，则需要加上双引号。
每个人的电脑装的字体都不一样，有些字体有安装，但也有些字体没有安装。p{font-family:Arial,Verdana,Georgia;}这一句的意思是：p元素优先使用“Aria字体”来显示，如果你的电脑没有装“Arial字体”，那就接着考虑“Verdana字体”，以此类推。
3.3.3 字体大小：font-size
语法：font-size: 像素值;
说明：font-size属性取值有两种：一种是“关键字”，如small、medium、large等；另外一种是“像素值”，如10px、16px、21px等。不过在实际开发中，关键字这种方式基本不会用，因此我们只需要掌握像素值方式即可。
1）px是什么？
px，全称pixel（像素），1像素指的是一张图片中最小的点，或者是计算机屏幕最小的点。严格来说，px属于相对单位，因为屏幕分辨率的不同，1px的大小也是不同的。
2）采用px为单位
比较熟悉的网站，如百度、新浪、网易等，大部分都是使用px作为单位。font-size的取值单位不仅仅是px，还有em、百分比等。不过初学CSS时，我们只需要掌握px这一个就可以了。
3.3.4 字体粗细：font-weight
字体粗细（font-weight）跟字体大小（font-size）是不一样的。粗细指的是字体的“肥瘦”，而大小指的是字体的“宽高”。
语法：font-weight: 取值;
说明：font-weight属性取值有两种：一种是“100~900的数值”；另外一种是“关键字”。其中，关键字取值有：normal（默认值）、lighter（较细）、bold（较粗）、bolder（很粗）。对于实际开发来说，一般我们只会用到bold这一个属性值，其他的几乎用不上。在实际开发中，不建议使用使用数值（100-900）作为font-weight的属性取值。
3.3.5 字体风格：font-style
语法：font-style: 取值;
说明：font-size属性取值有:normal（正常)、italic(斜体)、oblique（斜体）
有些字体有斜体italic属性，但有些字体却没有italic属性。oblique是让没有italic属性的字体也能够有斜体效果。
3.3.6 字体颜色：color
语法：color: 颜色值;
说明：color属性取值有两种，一种是“关键字”；另外一种是“16进制RGB值”。除了这两种，其实还有RGBA、HSL等，不过后面那几个都是属于CSS3的内容。
1）关键字
关键字，指的就是颜色的英文名称，如red、blue、green等。在HBuilder中，也会有代码提示，很方便。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1{color:gray;}
#p2{color:orange;}
#p3{color:red;}
</style>
</head>
<body>
<p id="p1">字体颜色为灰色</p>
<p id="p2">字体颜色为橙色</p>
<p id="p3">字体颜色为红色</p>
</body>
</html>
2）进制RGB值
单纯靠“关键字”是满足不了实际开发需求的，因此我们还引入了“16进制RGB值”。所谓的16进制RGB值，指的是类似“#FBF9D0”形式的值。
这种16进制RGB值是怎么获取得来的呢？还有，怎么才能取到我们想要的颜色值？这里推荐一个小工具：Color Picker。
对于16进制颜色值，有两个我们需要知道的：#000000是黑色，#FFFFFF是白色。
3.3.7 CSS注释
语法：/* 注释的内容 */
注意区分CSS和HTML的注释样式，举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*使用元素选择器，定义所有p元素样式*/
p
{
font-family:微软雅黑; /*字体类型为微软雅黑*/
font-size:14px; /*字体大小为14px*/
font-weight:bold; /*字体粗细为bold*/
color:red; /*字体颜色为red*/
}
/*使用id选择器，定义个别样式*/
#p2
{
color:blue; /*字体颜色为blue*/
}
</style>
</head>
<body>
<p id="p1">HTML控制网页的结构</p>
<p id="p2">CSS控制网页的外观</p>
<p id="p3">JavaScript控制网页的行为</p>
</body>
</html>
3.4 文本样式
3.4.1 文本样式简介
字体样式针对的是“文字本身”的型体效果，而文本样式针对的是“整个段落”的排版效果。字体样式注重个体，文本样式注重整体。因此在CSS中，特意使用了“font”和“text”两个前缀来区分这两类样式。
在CSS中，常见的文本样式如下表所示。
| 属性 | 说明 |
|---|---|
| text-indent | 首行缩进 |
| text-align | 水平对齐 |
| text-decoration | 文本修饰 |
| text-transform | 大小写转换 |
| line-height | 行高 |
| letter-spacing | 字母间距 |
| word-spacing | 词间距 |
3.4.2 首行缩进：text-indent
p元素的首行是不会自动缩进的，因此我们在HTML中往往使用6个“ ”来实现首行缩进两个字的空格。在CSS中，我们可以使用text-indent属性来定义p元素的首行缩进。
语法：text-indent: 像素值;
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p
{
font-size:14px;
text-indent:28px;
}
</style>
</head>
<body>
<h3>爱莲说</h3>
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>
</body>
</html>
分析：我们都知道，中文段落首行一般需要缩进两个字的空间。如果想要实现这个效果，text-indent值应该是font-size值的2倍。大家仔细琢磨一下上面这个例子就知道为什么了。这是一个很棒的小技巧，以后会经常用到。
3.4.3 水平对齐：text-align
说明：text-align属性取值有3个，如下表所示。
| 属性值 | 说明 |
|---|---|
| left | 左对齐（默认值） |
| center | 居中对齐 |
| right | 右对齐 |
在实际开发中，我们只会用到居中对齐（center）这一个，其他两个几乎用不上。此外，text-align属性不仅对文本有效，对图片（img元素）也有效。
3.4.4 文本修饰：text-decoration
text-decoration属性取值有4个，如下表所示。
| 属性值 | 说明 |
|---|---|
| none | 去除所有的划线效果（默认值） |
| underline | 下划线 |
| line-through | 中划线 |
| overline | 顶划线 |
在HTML学习中，我们使用s元素实现中划线，用u元素实现下划线。但是有了CSS之后，我们都是用text-decoration属性来实现。记住一点：在前端开发中，对于外观控制一般用CSS来实现，而不是使用标签来实现，这更加符合结构与样式分离的原则，提高可读性和可维护性。
例子：超链接（a元素）默认样式有下划线，可以使用text-decoration:none;来删除下划线。
3.4.5 大小写：text-transform
text-transform属性取值有4个，如下表所示。
| 属性值 | 说明 |
|---|---|
| none | 无转换（默认值） |
| uppercase | 转换为大写 |
| lowercase | 转换为小写 |
| capitalize | 只将每个英文单词首字母转换为大写 |
3.4.6 行高：line-height
在CSS中，我们可以使用line-height属性来控制一行文本的高度。很多书上称line-height为“行间距”，这是非常不严谨的叫法。行高，顾名思义就是“一行的高度”，而行间距指的是“两行文本之间的距离”，两者是完全不一样的概念。
line-height属性涉及的理论知识非常多，也极其重要，这一节只是简单接触一下。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1{line-height:15px;}
#p2{line-height:20px;}
#p3{line-height:25px;}
</style>
</head>
<body>
<p id="p1">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p><hr/>
<p id="p2">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p><hr/>
<p id="p3">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
</body>
</html>
3.4.7 间距：letter-spacing、word-spacing
1）字间距
在CSS中，我们可以使用letter-spacing属性来两个字之间的距离。
letter-spacing，从英文意思上就可以知道这是“字母间距”。注意，每一个中文汉字都被当做一个“字”，而每一个英文字母也当做一个“字”。
2）词间距
在CSS中，我们可以使用word-spacing属性来定义两个单词之间的距离。一般来说，word-spacing只针对英文单词而言。
3.5 边框样式
3.5.1 边框样式简介
几乎所有的元素都可以定义边框。例如，div元素可以定义边框，img元素可以定义边框，table元素可以定义边框，span元素同样也可以定义边框。
定义一个元素的边框样式需要设置3个方面：border-width（边框的宽度）、border-style（边框的外观）、border-color（边框的颜色）
如果要为表格添加边框，我们一般需要同时对table、th、td这几个进行设置
3.5.2 整体样式
1）边框的属性
（1）border-width
border-width属性用于定义边框的宽度，取值是一个像素值。
（2）border-style
border-style属性用于定义边框的外观，常用取值如下表所示。
| 属性值 | 说明 |
|---|---|
| none | 无样式 |
| dashed | 虚线 |
| solid | 实线 |
除了上表列出这几个，还有hidden、dotted、double等取值。不过其他取值几乎用不上，可以直接忽略。
（3）border-color
border-color属性用于定义边框的颜色，取值可以是“关键字”或“16进制RGB值”。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*定义所有div样式*/
div
{
width:100px;
height:30px;
}
/*定义单独div样式*/
#div1
{
border-width:1px;
border-style:dashed;
border-color:red;
}
#div2
{
border-width:1px;
border-style:solid;
border-color:red;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
分析：width属性用于定义元素的宽度，height属性用于定义元素的高度。这两个属性我们在后面会介绍。
2）简写形式
想要为一个元素定义边框，我们需要完整地给出border-width、border-style和border-color。这种写法代码量过多，很费时费力。不过CSS为我们提供了一种简写形式：border: 1px solid red;
上面代码等价于：
border-width: 1px;
border-style: solid;
border-color: red;
3.5.3 局部样式
一个元素其实有4条边（上、下、左、右），上一节我们学习的是4条边的整体样式。那么如果想要对某一条边进行单独设置，这该怎么实现呢？
1）上边框border-top
简写形式为：border-top: 1px solid red;
2）下边框border-bottom
简写形式为：border-bottom: 1px solid red;
3）左边框border-left
简写形式为：border-left: 1px solid red;
4）右边框border-right
简写形式为：border-right: 1px solid red;
注意：border-bottom:0px;、border-bottom:0;和border-bottom:none;是等价的，都是删除相应的边框线。
3.6 列表样式
3.6.1 列表项符号：list-style-type
在HTML中，对于有序列表和无序列表这两个的列表项符号，都是使用type属性来定义的。但是之前说过，结构和样式应该是分离的。那么在CSS中，我们应该怎样定义列表项符号呢？
1）定义列表项符号
在CSS中，不管是有序列表还是无序列表，我们都是使用list-style-type属性来定义列表项符号。
语法：list-style-type: 取值;
说明：list-style-type属性是针对ol或者ul元素的，而不是li元素。其中，list-style-type属性取值如下表所示。
表1 ol的list-style-type属性取值
| 属性值 | 说明 |
|---|---|
| decimal | 阿拉伯数字：1、2、3…（默认值） |
| lower-roman | 小写罗马数字：i、ii、iii… |
| upper-roman | 大写罗马数字：I、II、III… |
| lower-alpha | 小写英文字母：a、b、c… |
| upper-alpha | 大写英文字母：A、B、C… |
表2 ul的list-style-type属性取值
| 属性值 | 说明 |
|---|---|
| disc | 实心圆●（默认值） |
| circle | 空心圆○ |
| square | 正方形■ |
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
ol{list-style-type:lower-roman;}
ul{list-style-type:circle;}
</style>
</head>
<body>
<h3>有序列表</h3>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<h3>无序列表</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
2)去除列表项符号
在CSS中，我们也是使用list-style-type属性来去除有序列表或无序列表的列表项符号的。
语法：list-style-type: none;
由于列表项符号比较丑，因此在实际开发中，大多数情况下我们都需要使用list-style-type:none;去掉。
3.6.2 列表项图片：list-style-image
不管是有序列表还是无序列表，都有它们自身的列表项符号。不过这些列表项符号都比较丑。如果我们想自定义列表项符号，那该怎么实现呢？
在CSS中，我们可以使用list-style-image属性来定义列表项图片，也就是使用图片来代替列表项符号。
语法：list-style-image: url(图片路径);
一般情况下我们都不会用list-style-image属性来实现，而是使用更为高级的iconfont图标技术来实现，这个我们在CSS进阶中再作详细介绍。
习题未做
习题未做
习题未做
3.7 表格样式
3.7.1 表格标题位置：caption-side
默认情况下，表格标题是在表格的上方。如果想要把表格标题放在表格的下方，应该怎么去实现呢？
在CSS中，我们可以使用caption-side属性来定义表格标题的位置。
语法：caption-side: 取值;
说明：caption-side属性取值只有2个，如下表所示。
| 属性值 | 说明 |
|---|---|
| top | 标题在顶部（默认值） |
| bottom | 标题在底部 |
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table,tr, td,th{border:1px solid silver;}
table{caption-side:bottom;}
</style>
</head>
<body>
<table>
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>表行单元格1</td>
<td>表行单元格2</td>
</tr>
<tr>
<td>表行单元格3</td>
<td>表行单元格4</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>表行单元格5</td>
<td>表行单元格6</td>
</tr>
</tfoot>
</table>
</body>
</html>
3.7.2 表格边框合并：border-collapse
从前面的学习中可以知道，表格加入边框后的页面效果中，单元格之间是有一定空隙的。但是在实际开发中，为了让表格更加美观，我们都是要把单元格之间的空隙去除。
在CSS中，我们可以使用border-collapse属性来去除单元格之间的空隙，也就是将两条边框合并为一条。
border-collapse属性取值只有2个，如下表所示 。
| 属性值 | 说明 |
|---|---|
| separate | 边框分开，有空隙（默认值） |
| collapse | 边框合并，无空隙 |
如下两图的边框所示。
3.7.3 表格边框间距：border-spacing
上一节介绍了如何去除表格边框间距，但是在实际开发中，有时候我们却需要定义一下表格边框的间距。
在CSS中，我们可以使用border-spacing属性来定义表格边框间距。
语法：border-spacing: 像素值;
如上图所示。
在CSS中，border-collapse、border-spacing属性也是在table元素中定义的。
3.8 图片样式
3.8.1 图片大小
在前面的学习中，我们接触了width和height这两个属性。其中width属性用于定义元素的宽度，height属性用于定义元素的高度。
在CSS中，我们也是使用width和height这两个属性来定义图片的大小（也就是宽度和高度）。
语法：
width: 像素值;
height: 像素值;
在实际开发中，如果你需要多大的图片，就用Photoshop制作多大的图片。不建议使用一张大图片，然后再借助width和height来改变大小。因为一张大图片体积更大，会使页面加载速度变慢。这是性能优化方面的考虑，以后我们会慢慢接触。
3.8.2 图片边框
对于图片的边框，我们也是使用border属性来定义的。
语法：border: 1px solid red;
3.8.3 图片对齐
1）水平对齐
在CSS中，我们可以使用text-align属性来定义图片水平对齐方式。
语法：text-align: 取值;
说明：text-align属性取值有3个，与文本对齐的相同（参考3.4.3）
注意：很多人以为图片的水平对齐是在img元素中定义，其实这是错的。图片是在父元素中进行水平对齐，因此我们当然是在图片的父元素中定义。
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width: 300px;
height: 80px;
border: 1px solid silver;
}
.div1{ text-align: left; }
.div2{ text-align: center; }
.div3{ text-align: right; }
img{ width: 60px; height: 60px; }
</style>
</head>
<body>
<div class="div1">
<img src="img/girl.gif" alt=""/>
</div>
<div class="div2">
<img src=" img/girl.gif" alt=""/>
</div>
<div class="div3">
<img src=" img/girl.gif" alt=""/>
</div>
</body>
</html>
分析：例子中img的父元素是div，因此想要实现图片的水平对齐，就应该在div中定义text-align属性。
2）垂直对齐
在CSS中，我们可以使用vertical-align来定义图片的垂直对齐方式。
说明：vertical指的是“垂直的”，align指的是“使排整齐”。vertical-align属性取值有4个，如下表所示。
| 属性值 | 说明 |
|---|---|
| top | 顶部对齐 |
| middle | 中部对齐 |
| baseline | 基线对齐 |
| bottom | 底部对齐 |
3.8.4 文字环绕：float
在网页布局中，常常遇到图文混排的效果。所谓的图文混排，指的是文字环绕着图片进行布局。文字环绕图片的方式在实际页面中的应用非常广泛，如果再配合内容、背景等多种手段则可以实现各种绚丽的效果。
在CSS中，我们可以使用float属性来实现文字环绕图片的效果。
语法：float: 取值;
说明：float属性取值只有2个：left（元素向左浮动）、right（元素向右浮动）
3.9 背景样式
3.9.1 背景样式简介
在CSS中，背景样式包括两个方面：背景颜色和背景图片。
定义“背景颜色”使用的是background-color属性，而定义“背景图片”则比较复杂，往往涉及以下属性。
| 属性 | 说明 |
|---|---|
| background-image | 定义背景图片地址 |
| background-repeat | 定义背景图片重复，例如横向重复、纵向重复 |
| background-position | 定义背景图片位置 |
| background-attachment | 定义背景图片固定 |
3.9.2 背景颜色：background-color
语法：background-color: 颜色值;
说明：颜色值有两种，一种是“关键字”，另外一种是“16进制RGB值”。其中关键字指的是颜色的英文名称，如red、green、blue等。而16进制RGB值指的是类似“#FBE9D0”形式的值。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:100px;
height:60px;
}
#div1{color:blue;
background-color: hotpink}
#div2{color:white;
background-color: #87CEFA;}
</style>
</head>
<body>
<div id="div1">背景颜色为：hotpink</div>
<div id="div2">背景颜色为：#87CEFA</div>
</body>
</html>
分析：第1个div文字颜色为蓝色，背景颜色为关键字，取值为hotpink。第2个div文字颜色为白色，背景颜色为16进制RGB值，取值为#87CEFA。
3.9.3 背景图片样式：background-image
语法：background-image: url(图片路径);
说明：跟引入图片（即img标签）一样，引入背景图片也需要给出图片路径才可以显示。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:250px;
height:170px;
background-image: url(img/haizei.png);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
分析：一定要给div元素定义width和height，否则div元素的宽度和高度都为0，背景图片不会显示。
注意：背景图片跟图片是不一样的，背景图片是使用CSS来实现，而图片是使用HTML来实现。两者的使用场合也不一样，大多数情况下都是使用图片来实现，不过某些场合无法使用图片时我们再考虑背景图片形式。
在实际开发中，建议采用不加引号的路径，因为这种方式更加简洁。
3.9.4 背景图片重复：background-repeat
语法：background-repeat: 取值;
说明：background-repeat属性取值有4个，如下表所示。
| 属性值 | 说明 |
|---|---|
| repeat | 在水平方向和垂直方向上同时平铺（默认值） |
| repeat-x | 只在水平方向（x轴）上平铺 |
| repeat-y | 只在垂直方向（y轴）上平铺 |
| no-repeat | 不平铺 |
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:200px;
height:100px;
border: 1px solid silver;
background-image: url(img/flower.png);
}
#div2{background-repeat: repeat-x}
#div3{background-repeat: repeat-y}
#div4{background-repeat: no-repeat}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
对于下面这张图
生成效果如下：
3.9.5 背景图片位置：background-position
语法：background-position: 像素值/关键字;
说明：background-position属性常用取值有两种：一种是“像素值”；另外一种是“关键字”（这里不考虑百分比取值）。
1)像素值
当background-position属性取值为“像素值”时，要同时设置水平方向和垂直方向的数值。例如，“background-position:12px 24px;”表示背景图片距离该元素左上角的水平方向距离为12px，垂直方向距离为24px。
语法：background-position: 水平距离 垂直距离;
说明：水平距离和垂直距离这两个数值之间要用空格隔开，两者取值都是像素值。
2)关键字
当background-position属性取值为“关键字”时，也要同时设置水平方向和垂直方向的值，只不过这两个值使用关键字来代替而已。
background-position属性的关键字取值如下图所示。
3.9.6 背景图片固定：background-attachment
在CSS中，我们可以使用background-attachment属性来定义背景图片是随元素一起滚动还是固定不动。
语法：background-attachment: 取值;
说明：background-attachment属性取值只有2个：scroll（随元素一起滚动（默认值））、fixed（固定不动）
在实际开发中，background-attachment这个属性几乎用不上。
习题未做
习题未做
习题未做
3.10 超链接样式
3.10.1 超链接伪类
在浏览器中，超链接的外观如下图所示。可以看出，超链接在鼠标点击不同时期的样式是不一样的。
（1）默认情况下：字体为蓝色，带有下划线。
（2）鼠标点击时：字体为红色，带有下划线。
（3）鼠标点击后：字体为紫色，带有下划线。
1）超链接伪类介绍
在CSS中，我们可以使用“超链接伪类”来定义超链接在鼠标点击的不同时期的样式。
语法：
a:link{…}
a:visited{…}
a:hover{…}
a:active{…}
说明：定义4个伪类，必须按照“link、visited、hover、active”的顺序进行，不然浏览器可能无法正常显示这4种样式。请记住，这4种样式定义顺序不能改变。
| 伪类 | 说明 |
|---|---|
| a:link | 定义a元素未访问时的样式 |
| a:visited | 定义a元素访问后的样式 |
| a:hover | 定义鼠标经过a元素时的样式 |
| a:active | 定义鼠标点击激活时的样式 |
举个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> </title>
<style type="text/css">
a{text-decoration:none;}
a:link{color:red;}
a:visited{color:purple;}
a:hover{color:yellow;}
a:active{color:blue;}
</style>
</head>
<body>
<a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>
</body>
</html>
注意：a{text-decoration:none;}表示去掉超链接默认样式中的下划线。
2）深入了解超链接伪类
在实际开发中，我们只会用到两种状态：未访问时状态和鼠标经过状态。
语法：
a{…}
a:hover{…}
说明：对于未访问时状态，我们直接针对a元素定义就行了，没必要使用a:link。
3.10.2 深入了解：hover
不仅是初学者，甚至包括接触CSS很久的小伙伴都会以为:hover伪类只限用于a元素，都觉得它唯一的作用就是定义鼠标经过超链接时的样式。
语法：元素:hover{…}
举例：“:hover”用于div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:100px;
height:30px;
line-height:30px;
text-align:center;
color:white;
background-color: lightskyblue;
}
div:hover
{
background-color: hotpink;
}
</style>
</head>
<body>
<div>绿叶学习网</div>
</body>
</html>
分析：在这个例子中，我们使用:hover为div元素定义鼠标经过时就改变背景色。
举例：“:hover”用于img
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
img:hover
{
border:2px solid red;
}
</style>
</head>
<body>
<img src="img/girl.gif" alt="">
</html>
分析：在这个例子中，我们使用:hover为img元素定义鼠标经过时就为其添加一个边框。此外， “:hover伪类”应用非常广泛，任何一个网站都会大量地用到，我们要好好掌握。
3.10.3 鼠标样式
在CSS中，对于鼠标样式的定义，我们有两种方式：浏览器鼠标样式和自定义鼠标样式。
1）浏览器鼠标样式
在CSS中，我们可以使用cursor属性来定义鼠标样式。
语法：cursor: 取值;
说明：cursor属性取值如下表所示。在实际开发中我们一般只会用到3个：default、pointer和text。
2）自定义鼠标样式
除了使用浏览器自带的鼠标样式，我们还可以使用cursor属性来自定义鼠标样式。只不过语法稍微有点不一样。
语法：cursor: url(图片地址), 属性值;
说明：
这个“图片地址”是鼠标图片地址，其中鼠标图片后缀名一般都是.cur，我们可以使用Photoshop来制作。
而这个“属性值”一般为3种：default、pointer和text。
练习题：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> </title>
<style type="text/css">
a{text-decoration:none;}
a:link{color:red;}
a:visited{color:purple;}
a:hover{color:yellow;}
a:active{color:blue;}
p{color:red;}
p:hover{color:blue;
text-decoration:underline}
</style>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度一下</a>
<p>上海交通大学</p>
</body>
</html>
3.11 盒子模型
3.11.1 CSS盒子模型
在HTML中，我们学习了一个很重要的理论：块元素和行内元素。在这一节中，我们介绍CSS中极其重要的一个理论——CSS盒子模型。
在“CSS盒子模型”理论中，页面中的所有元素都可以看成一个盒子，并且占据着一定的页面空间。下图所示为一个CSS盒子模型的具体结构。
一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构（往往是padding）；二是理解多个盒子之间的相互关系（往往是margin）。
从上面我们可以知道，盒子模型的组成部分有4个，如下表所示。
| 属性 | 说明 |
|---|---|
| content | 内容，可以是文本或图片 |
| padding | 内边距，用于定义内容与边框之间的距离 |
| margin | 外边距，用于定义当前元素与其他元素之间的距离 |
| border | 边框，用于定义元素的边框 |
1）内容区
内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他3个部分都是可选的。
内容区有3个属性：width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。在这里注意一点，width和height这两个属性是针对内容区content而言，并不包括padding部分。当内容过多超出width和height时，可以使用overflow属性来指定溢出处理方式。
2）内边距
内边距，指的是内容区和边框之间的空间，可以看成是内容区的背景区域。
关于内边距的属性有5种：padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简写内边距属性padding。使用这5种属性可以指定内容区与各方向边框之间的距离。
3）外边框
外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。外边距使得元素之间不必紧凑地连接在一起，是CSS布局的一个重要手段。
外边距的属性也有5种：margin-top、margin-bottom、margin-left、margin-right以及综合了以上4个方向的简写外边距属性margin。
CSS允许给外边距属性指定负数值，当外边距为负值时，整个盒子将向指定负值的相反方向移动，以此可以产生盒子的重叠效果，这就是传说中的“负margin技术”。
4）边框
在CSS盒子模型中，边框跟我们之前学过的边框是一样的。
边框属性有border-width、border-style、border-color以及综合了3类属性的简写边框属性border。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
display:inline-block; /*将块元素转换为inline-block元素*/
padding:20px;
margin:40px;
border:2px solid red;
background-color:#FFDEAD;
}
</style>
</head>
<body>
<div>绿叶学习网</div>
</body>
</html>
分析：
在这个例子中，我们把div元素看成一个盒子，则“绿叶学习网”这几个字就是内容区（content），文字到边框的距离就是内边距（padding），而边框到其他元素的距离就是（margin）。
在这个例子中，display:inline-block表示将元素转换为行内块元素（即inline-block），其中inline-block元素的宽度是由内容区撑起来的。我们之所以在这个例子中将元素转换为inline-block元素，也是为了让元素的宽度由内容区撑起来，以便更好地观察。
3.11.2 宽高：width、height
CSS盒子模型中我们可以看出，元素的宽度（width）和高度（height）是针对内容区而言的。
语法：
width: 像素值;
height: 像素值;
说明：只有块元素才可以设置width和height，行内元素是无法设置width和height的。（我们这里不考虑inline-block元素）
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div,span
{
width:100px;
height:50px;
}
div{border:1px solid red;}
span{border:1px solid blue;}
</style>
</head>
<body>
<div></div>
<span></span>
</body>
</html>
浏览器预览效果如下图
分析：div是块元素，因此可以设置width和height。span是行内元素，因此不可以设置width和height。
3.11.3 边框：border
在“边框样式”这一章中，我们已经深入学习了边框的属性。在实际开发中，我们只需要注意一点就行：对于border属性，更多使用的是简写形式。
语法：border: 1px solid red;
3.11.4 内边距：padding
内边距padding，又常常被称为“补白”，它指的是内容区到边框之间的那一部分。内边距都是在边框内部的。
1）padding局部样式
从CSS盒子模型中我们可以看出，内边距分为4个方向：padding-top、padding-right、padding-bottom、padding-left。
语法：
padding-top: 像素值;
padding-right: 像素值;
padding-bottom: 像素值;
padding-left: 像素值;
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
display:inline-block; /*将块元素转换为inline-block元素*/
padding-top:20px;
padding-right:40px;
padding-bottom:60px;
padding-left:80px;
border:2px solid red;
background-color:#FFDEAD;
}
</style>
</head>
<body>
<div>绿叶学习网</div>
</body>
</html>
浏览器预览效果如下图所示
2）padding简写形式
跟border属性一样，padding属性也有简写形式。在实际开发中，我们往往使用简写形式，因为这样开发效率更高。padding写法有3种，如下所示。
语法：
padding: 像素值;
padding: 像素值1 像素值2;
padding: 像素值1 像素值2 像素值3 像素值4;
说明：
padding:20px表示4个方向的内边距都是20px。
padding:20px 40px表示top和bottom为20px，right和left为40px。
padding:20px 40px 60px 80px表示top为20px，right为40px，bottom为60px，left为80px。按照顺时针方向记忆就可以了。
3.11.5 外边距：margin
外边距margin，指的是边框到“父元素”或“兄弟元素”之间的那一部分。外边距是在元素边框的外部。
1）margin局部样式
从CSS盒子模型中我们可以看出，外边距分为4个方向：margin-top、margin-right、margin-bottom、margin-left。
语法：
margin-top: 像素值;
margin-right: 像素值;
margin-bottom: 像素值;
margin-left: 像素值;
举例：只有父元素，没有兄弟元素时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#father
{
display: inline-block; /*将块元素转换为inline-block元素*/
border:1px solid blue;
}
#son
{
display:inline-block; /*将块元素转换为inline-block元素*/
padding:20px;
margin-top:20px;
margin-right:40px;
margin-bottom:60px;
margin-left:80px;
border:1px solid red;
background-color:#FFDEAD;
}
</style>
</head>
<body>
<div id="father">
<div id="son">绿叶学习网</div>
</div>
</body>
</html>
举例：有兄弟元素时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#father
{
display: inline-block; /*将块元素转换为inline-block元素*/
border:1px solid blue;
}
#son
{
display:inline-block; /*将块元素转换为inline-block元素*/
padding:20px;
margin-top:20px;
margin-right:40px;
margin-bottom:60px;
margin-left:80px;
border:1px solid red;
background-color:#FFDEAD;
}
.brother
{
height:50px;
background-color:lightskyblue;
}
</style>
</head>
<body>
<div id="father">
<div class="brother"></div>
<div id="son">绿叶学习网</div>
<div class="brother"></div>
</div>
</body>
</html>
分析：
当既有父元素，也有兄弟元素时，该元素会先看看四个方向有没有兄弟元素存在。如果该方向有兄弟元素，则这个方向的margin就是相对于兄弟元素而言。如果该方向没有兄弟元素，则这个方向的margin就是相对于父元素而言。
padding和margin的区别在于：padding体现的是元素的“内部结构”，而margin体现的是元素之间的相互关系。
2）margin简写形式
跟padding一样，margin也有简写形式。在实际开发中，我们往往使用简写形式。其中margin写法也有3种，也与padding一样，对照理解即可。
3）浏览器审查元素
在实际开发中，为了更好地进行布局，我们需要获取某一个元素的盒子模型是怎样的，padding是多少，margin又是多少，然后再进行计算。那怎样才可以快速查看元素的盒子模型信息呢？我们可以通过浏览器自带功能“审查元素”来实现。
绝大多数主流浏览器操作是相似，下面我们以Chrome浏览器为例说明一下。
【第1步】：鼠标移到你想要的元素上面，然后按一下右键，选择“检查”（或者按Ctrl+Shift+I），如下图所示。
【第2步】：在弹出的控制台中，我们可以找到该元素的盒子模型，如下图所示。
浏览器提供的控制台功能非常强大，远不止这一个功能。使用浏览器控制台辅助开发，这是前端开发必备的一项基础技能。
3.12 浮动布局
3.12.1 文档流简介
在学习浮动布局和定位布局之前，我们先来了解“正常文档流”和“脱离文档流”。深入了解这两个概念，是学习浮动布局和定位布局的理论前提。
1）正常文档流
什么叫“文档流”？简单来说，就是指元素在页面中出现的先后顺序。那什么叫“正常文档流”呢？
正常文档流，又称为“普通文档流”或“普通流”，也就是W3C标准所说的“normal flow”。正常文档流的简单定义：“正常文档流，将一个页面从上到下分为一行一行，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。”也就是说，正常文档流指的就是默认情况下页面元素的布局情况。
2）脱离文档流
脱离文档流，指的是脱离正常文档流。正常文档流就是我们没有使用浮动或者定位去改变的默认情况下的HTML文档结构。换一句话说，如果我们想要改变正常文档流，可以使用有两种方法：浮动和定位。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*定义父元素样式*/
#father
{
width:300px;
background-color:#0C6A9D;
border:1px solid silver;
}
/*定义子元素样式*/
#father div
{
padding:10px;
margin:15px;
border:2px dashed red;
background-color:#FCD568;
}
</style>
</head>
<body>
<div id="father">
<div id="son1">box1</div>
<div id="son2">box2</div>
<div id="son3">box3</div>
</div>
</body>
</html>
分析：上面定义了3个div元素。对于这个HTML来说，正常文档流指的就是从上到下依次显示这3个div元素。由于div是块元素，因此每个div元素独占一行。注意该例子中的内边距。
1）设置浮动
当我们为第2、3个div元素设置左浮动时，在浏览器预览效果如下图所示。
正常文档流情况下，div是块元素会独占一行。但是由于设置了浮动，第2、3个div元素却是并列一行，并且跑到父元素之外，跟正常文档流不一样。也就是说，设置浮动使得元素脱离了正常文档流。
2）设置定位
当我们为第3个div元素设置绝对定位的时候，浏览器预览效果如下图所示。
由于设置了定位，第3个div元素跑到父元素的上面去了。也就是说，设置了定位使得元素脱离了文档流。
3.12.2 浮动
在文字环绕float这一节中，我们已经知道浮动（即float属性）是怎样一回事了。在传统的印刷布局中，文本可以按照实际需要来围绕图片）。我们一般把这种方式称为“文本环绕”。在前端开发中，使用了浮动的页面元素其实就像在印刷布局里被文字包围的图片一样。这样对比，就很好理解了。
浮动是CSS布局的最佳利器，我们可以通过浮动来灵活地定位页面元素，以达到布局网页的目的。例如我们可以通过设置float属性让元素向左浮动或者向右浮动，以便让周围的元素或文本环绕着这个元素。
语法：float: 取值;
说明：float属性取值只有2个：left（元素向左浮动）、right（元素向右浮动）
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*定义父元素样式*/
#father
{
width:300px;
background-color:#0C6A9D;
border:1px solid silver;
}
/*定义子元素样式*/
#father div
{
padding:10px;
margin:15px;
}
#son1
{
background-color:hotpink;
/*这里设置son1的浮动方式*/
}
#son2
{
background-color:#FCD568;
/*这里设置son2的浮动方式*/
}
</style>
</head>
<body>
<div id="father">
<div id="son1">box1</div>
<div id="son2">box2</div>
</div>
</body>
</html>
在这一个例子中，初始预览效果如下图所示。
分析：该代码中一共定义了三个div块：一个父块（蓝色背景）、两个它的子块（红黄背景）。
（1）设置第一个div浮动：
#son1
{
background-color:hotpink;
float:left;
}
效果如下图所示
分析：由于box1设置为左浮动，box1变成了浮动元素，因此此时box1的宽度不再延伸，而是由内容宽度决定其宽度。接着相邻的下一个div元素（box2）就会紧贴着box1，这是由于浮动引起的效果。
（2）设置第2个div浮动
#son2
{
background-color:#FCD568;
float:left;
}
效果如下图
分析：
由于box2变成了浮动元素，因此box2也跟box1一样，宽度不再延伸，而是由内容确定宽度。如果box2后面还有其他元素，则其他元素也会紧贴着box2。
此外，此时父元素变成一条线了。原因下一节介绍。
浮动最常用于实现水平方向上的并排布局，例如两列布局、多列布局。
3.12.3 清除浮动
从上一节我们可以看到，浮动会影响周围元素，并且还会引发很多预想不到的问题。在CSS中，我们可以使用clear属性来清除浮动带来的影响。
语法：clear: 取值;
说明：
clear属性取值有：left、right、both
在实际开发中，我们几乎不会使用clear:left或clear:right来单独清除左浮动或右浮动，往往都是直截了当地使用clear:both来把所有浮动清除。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*定义父元素样式*/
#father
{
width:300px;
background-color:#0C6A9D;
border:1px solid silver;
}
/*定义子元素样式*/
#father div
{
padding:10px;
margin:15px;
}
#son1
{
background-color:hotpink;
float:left; /*左浮动*/
}
#son2
{
background-color:#FCD568;
float:right; /*右浮动*/
}
.clear{clear:both;}
</style>
</head>
<body>
<div id="father">
<div id="son1">box1</div>
<div id="son2">box2</div>
<div class="clear"></div>
</div>
</body>
</html>
预览效果如下
分析：
一般都是在浮动元素后面再增加一个空元素，然后为这个空元素定义clear:both来清除浮动。防止因浮动造成父元素变成一条线（因为父元素中的所有子元素都浮动了，父元素的高就没有东西定义了，然后只能变成一条线）。通过增加一个空div，并且不让它浮动，保证父元素中还有子元素。上图中的边距如何解释我还不确定。
事实上，清除浮动不仅仅只有clear:both，还有overflow:hidden，以及更为常用的伪元素。
float属性很简单，只有2个属性：left和right。但是浮动涉及的理论知识极其复杂，其中包括：块元素和行内元素、CSS盒子模型、脱离文档流、BFC、层叠上下文。
习题未做
习题未做
习题未做
习题未做
习题未做
3.13 定位布局
3.13.1 定位布局简介
在此之前，我们学习了浮动布局。浮动布局比较灵活，但是不容易控制。而定位布局的出现，使得用户精准定位页面中的任意元素成为可能，此时页面布局操作也变得更加随心所欲。当然了，由于定位布局缺乏灵活性，也给空间大小和位置不确定的版面布局带来困惑。因此在实际开发中，大家应该灵活使用这两种布局方式，这样才可以更好地满足开发需求。
CSS定位使你可以将一个元素精确地放在页面上你指定的地方。联合使用定位和浮动，能够创建多种高级而精确地布局。其中，定位布局共有4种方式。
这4种方式都是通过position属性来实现的，其中position属性取值如下表所示。
| 属性值 | 说明 |
|---|---|
| fixed | 固定定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| static | 静态定位（默认值） |
3.13.2 固定定位：fixed
在CSS中，我们可以使用“position:fixed;”来实现固定定位。所谓的固定定位，指的是被固定的元素不会随着滚动条的拖动而改变位置。
语法：
position: fixed;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;
说明：
position:fixed;是结合top、bottom、left和right这4个属性一起使用的。其中，position:fixed使得元素成为固定定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。
top、bottom、left和right这4个属性不一定全部都用到，一般只会用到其中两个。注意，这4个值的参考对象是浏览器的4条边。
固定定位最常用于实现“回顶部特效”，这个效果非常经典。为了更好的用户体验，绝大多数网站都用上。
3.13.3 相对定位：relative
在CSS中，我们可以使用“position:relative;”来实现相对定位。所谓的相对定位，指的是该元素的位置是相对于它的原始位置计算而来的。
语法：
position: relative;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;
说明：语法含义与固定定位的相同。在默认情况下，固定定位元素的位置是相对浏览器而言，而相对定位元素的位置是相对于原始位置而言。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#father
{
margin-top:30px;
margin-left:30px;
border:1px solid silver;
background-color: lightskyblue;
}
#father div
{
width:100px;
height:60px;
margin:10px;
background-color:hotpink;
color:white;
border:1px solid white;
}
#son2
{
/*这里设置son2的定位方式*/
}
</style>
</head>
<body>
<div id="father">
<div id="son1">第1个无定位的div元素</div>
<div id="son2">相对定位的div元素</div>
<div id="son3">第2个无定位的div元素</div>
</div>
</body>
</html>
原始代码如上，预览效果如下图所示
现在为第2个div元素加入相对定位，CSS代码如下：
#son2
{
position:relative;
top:20px;
left:40px;
}
此时浏览效果如下
分析：以上过程就是相对定位的作用过程。
3.13.4 绝对定位：absolute
在CSS中，我们可以使用“position:absolute;”来实现绝对定位。绝对定位在几种定位方式中使用最为广泛，因为它能够很精确地把元素定位到任意你想要的位置。
一个元素变成了绝对定位元素，这个元素就完全脱离文档流了，绝对定位元素的前面或后面的元素会认为这个元素并不存在，此时这个元素浮于其他元素上面，已经完全独立出来了。
语法：
position: absolute;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;
说明：绝对定位的语法含义与前两个时一样的。默认情况下，绝对定位四个值的参考对象是浏览器的四条边。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#father
{
padding:15px;
background-color:#0C6A9D;
border:1px solid silver;
}
#father div{padding:10px;}
#son1{background-color:#FCD568;}
#son2
{
background-color: hotpink;
/*在这里添加son2的定位方式*/
}
#son3{background-color: lightskyblue;}
</style>
</head>
<body>
<div id="father">
<div id="son1">box1</div>
<div id="son2">box2</div>
<div id="son3">box3</div>
</div>
</body>
</html>
浏览效果如下
为第2个div元素加入绝对定位，CSS代码如下：
#son2
{
position:absolute;
top:20px;
right:40px;
}
此时浏览器中的效果如下
分析：
注意区别固定定位和绝对定位：固定定位是不会随着滚动条而动，绝对定位会随着滚动条滚动。虽然两者都是以浏览器的边来定位的。
3.13.5 静态定位：static
在默认情况下，元素没有指定position属性时，这个元素就是静态定位的。也就是说，元素position属性的默认值是static。
一般情况下我们使用不到position:static的，不过在使用JavaScript来控制元素定位时，如果想要使得元素从其他定位方式变成静态定位，就需要使用position:static来实现。
练习题：
1、仿照百度首页，自己动手还原出来。PS：仿站是初学者最佳实践方式，而百度首页往往是最适合初学者练习的第一个页面。
2、打造一个属于自己的博客网站。
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
