HTML+CSS个人笔记
时间：2023-06-24 17:06:01 | 来源：网站运营
时间：2023-06-24 17:06:01 来源：网站运营
HTML+CSS个人笔记：
一．HTML入门
HTML文档基本格式
一、使用Dreamweaver新建默认文档时会自带一些源代码，代码如下所示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8" /><title>无标题文档</title></head><body></body></html> 这些源代码构成了HTML文档的基本格式，其中主要包括<!DOCTYPE>文档类型声明、<html>根标记、<head>头部标记、<body>主体标记。
结构说明：
1.<!DOCTYPE> 标记位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范。
2.<html>标记标志着HTML文档的开始，</html>标记标志着HTML文档的结束。
3.<head>标记用于定义HTML文档的头部信息，也称为头部标记。
4.<body>标记用于定义HTML文档所要显示的内容，也称为主体标记。
二、语法规范：
1.在HTML页面中，带有“< >”符号的元素被称为HTML标记。HTML标记可以分为单标记、双标记、注释标记。
单标记
单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：
< 标记名/>
例如代码：
<hr />
双标记
双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：
<标记名>内容</标记名>
例如代码：
<h2>传智播客网页平面设计免费公开课</h2> 注释标记
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标记。其基本语法格式如下：
<!-- 注释语句 -->
HTML标记及其属性、头部标记
一、HTML标记及其属性
1.在HTML页面中，带有“< >”符号的元素被称为HTML标记。HTML标记可以分为单标记、双标记、注释标记。
单标记
单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：
< 标记名/>
例如代码：
<hr /> 双标记
双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：
<标记名>内容</标记名>
例如代码：
<h2>传智播客网页平面设计免费公开课</h2> 注释标记
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标记。其基本语法格式如下：
<!-- 注释语句 -->
二、 头部标记
制作网页时，经常需要设置页面的基本信息，如页面的标题、作者、和其他文档的关系等。为此HTML提供了一系列的标记，这些标记通常都写在head标记内，因此被称为头部相关标记。
设置页面标题标记<title>
<title>标记用于定义HTML页面的标题，即给网页取一个名字，必须位于<head>标记之内。一个HTML文档只能含有一对<title></title>标记，<title></title>之间的内容将显示在浏览器窗口的标题栏中。其基本语法格式如下：
<title>网页标题名称</title> 定义页面元信息标记<meta />
<meta />标记用于定义页面的元信息，可重复出现在<head>头部标记中，在HTML中是一个单标记。<meta />标记本身不包含任何内容，通过“名称/值”的形式成对的使用其属性可定义页面的相关参数，例如为搜索引擎提供网页的关键字、作者姓名、内容描述，以及定义网页的刷新时间等。
下面介绍<meta/>标记常用的几组设置，具体如下：
<meta name="名称" content="值"/> 在<meta>标记中使用name/content属性可以为搜索引擎提供信息，其中name属性提供搜索内容名称，content属性提供对应的搜索内容值。
<meta http-equiv="名称" content="值" /> 在<meta>标记中使用http-equiv/content属性可以设置服务器发送给浏览器的HTTP头部信息，为浏览器显示该页面提供相关的参数。其中，http-equiv属性提供参数类型，content属性提供对应的参数值。
其中http-equiv属性的值为refresh，content属性的值为数值和url地址，中间用“;”隔开，用于指定在特定的时间后跳转至目标页面，该时间默认以秒为单位。
引用外部文件标记<link>
一个页面往往需要多个外部文件的配合，在<head>中使用<link>标记可引用外部文件，一个页面允许使用多个<link>标记引用多个外部文件。其基本语法格式如下：
<link 属性="属性值"/> 例如，使用<link>标记引用外部CSS样式表：
<link rel="stylesheet"type="text/css" href="style.css" /> 上面的代码，表示引用当前HTML页面所在文件夹中，文件名为“style.css”的CSS样式表文件。
内嵌样式标记<style>
<style>标记用于为HTML文档定义样式信息，位于<head>头部标记中，其基本语法格式如下：
<style 属性=”属性值”>样式内容</style> 在HTML中使用style标记时，常常定义其属性为type，相应的属性值为text/css，表示使用内嵌式的CSS样式。
标题段落标记 、文本样式标记
一、标题段落标记
一篇结构清晰的文章通常都有标题和段落，HTML网页也不例外，为了使网页中的文字有条理地显示出来，HTML提供了相应的标记。
标题标记
为了使网页更具有语义化，我们经常会在页面中用到标题标记，HTML提供了6个等级的标题，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，从<h1>到<h6>重要性递减。其基本语法格式如下：
<hn align="对齐方式">标题文本</hn> 该语法中n的取值为1到6，align属性为可选属性，用于指定标题的对齐方式。接下来通过一个简单的案例说明标题标记的使用，主体代码如下所示。
<body><h1>1级标题</h1><h2>2级标题</h2><h3>3级标题</h3><h4>4级标题</h4><h5>5级标题</h5><h6>6级标题</h6></body>二、段落标记
在网页中要把文字有条理地显示出来，离不开段落标记，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标记就是<p>。其基本语法格式如下：
<p align="对齐方式">段落文本</p>
该语法中align属性为<p>标记的可选属性，和标题标记<h1>~<h6>一样，同样可以使用align属性设置段落文本的对齐方式。
<p>是HTML文档中最常见的标记，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
了解了段落标记之后，接下来通过一个案例来演示段落标记<p>的用法和其对齐方式，主体代码如下所示。
<body> <p>专业于Java、.Net、PHP、C/C++、网页设计、平面设计、UI设计、iOS培训</p> <p>JAVA学院</p> <p>网页平面设计学院</p> <p>PHP学院</p> </body> 从上面例子容易看出，通过使用<p>标记，每个段落都会单独显示，并在段落之间设置了一定的间隔距离。
三、 水平线标记<hr />
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标记来完成，<hr />就是创建横跨网页水平线的标记。其基本语法格式如下：
<hr 属性="属性值"/>
四、 换行标记<br />
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标记<br />，这时如果还像在word中直接敲回车键换行就不起作用了。
五、 文本样式标记
多种多样的文字效果可以使网页变得更加绚丽，为此HTML提供了文本样式标记<font>，用来控制网页中文本的字体、字号和颜色。其基本语法格式如下：
<font 属性="属性值">文本内容</font> 该语法中<font>标记常用的属性有3个，分别是face、color和size。
了解了<font>标记的基本语法和常用属性，接下来通过一个案例来演示<font>标记的用法和效果，主体代码如下所示。
<body><h2>使用font标记设置文本样式</h2><p>我是默认样式的文本</p><p><font size="2"color="blue">我是2号蓝色文本</font></p><p><font size="5"color="red">我是5号红色文本</font></p><p><font face="微软雅黑" size="7"color="green">我是7号绿色文本，我的字体是微软雅黑哦</font></p></body>二．HTML常用标记
HTML标记
一、HTML标记及其属性
在HTML页面中，带有“< >”符号的元素被称为HTML标记。HTML标记可以分为单标记、双标记、注释标记。
单标记
单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：
< 标记名/>
例如代码：
<hr />
双标记
双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：
<标记名>内容</标记名>
例如代码：
<h2>传智播客网页平面设计免费公开课</h2> 注释标记
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标记。其基本语法格式如下：
<!-- 注释语句 -->
标题标记
标题段落标记
一篇结构清晰的文章通常都有标题和段落，HTML网页也不例外，为了使网页中的文字有条理地显示出来，HTML提供了相应的标记。
标题标记
为了使网页更具有语义化，我们经常会在页面中用到标题标记，HTML提供了6个等级的标题，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，从<h1>到<h6>重要性递减。其基本语法格式如下：
<hn align="对齐方式">标题文本</hn> 该语法中n的取值为1到6，align属性为可选属性，用于指定标题的对齐方式。接下来通过一个简单的案例说明标题标记的使用，主体代码如下所示。
<body><h1>1级标题</h1><h2>2级标题</h2><h3>3级标题</h3><h4>4级标题</h4><h5>5级标题</h5><h6>6级标题</h6></body>默认情况下标题文字是加粗左对齐的，并且从<h1>到<h6>字号递减。
段落标记
段落标记
在网页中要把文字有条理地显示出来，离不开段落标记，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标记就是<p>。其基本语法格式如下：
<p align="对齐方式">段落文本</p>
该语法中align属性为<p>标记的可选属性，和标题标记<h1>~<h6>一样，同样可以使用align属性设置段落文本的对齐方式。
<p>是HTML文档中最常见的标记，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
了解了段落标记之后，接下来通过一个案例来演示段落标记<p>的用法和其对齐方式，主体代码如下所示。
<body><p>传智播客专业于Java、.Net、PHP、C/C++、网页设计、平面设计、UI设计、iOS培训——最专业的培训机构，花一份钱掌握多种技能。传智播客为你提升职场核心竞争力，从菜鸟到职场达人的转变就在这里，你还等什么？</p><p>JAVA学院</p><p>网页平面设计学院</p><p>PHP学院</p></body>水平线标记
水平线标记<hr />
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标记来完成，<hr />就是创建横跨网页水平线的标记。其基本语法格式如下：
<hr属性="属性值" />
换行标记
换行标记<br />
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标记<br />，这时如果还像在word中直接敲回车键换行就不起作用了。
文本样式标记
文本样式标记
多种多样的文字效果可以使网页变得更加绚丽，为此HTML提供了文本样式标记<font>，用来控制网页中文本的字体、字号和颜色。其基本语法格式如下：
<font 属性="属性值">文本内容</font>
该语法中<font>标记常用的属性有3个，分别是face、color和size。
了解了<font>标记的基本语法和常用属性，接下来通过一个案例来演示<font>标记的用法和效果，主体代码如下所示。
<body><h2>使用font标记设置文本样式</h2><p>我是默认样式的文本</p><p><font size="2"color="blue">我是2号蓝色文本</font></p><p><font size="5"color="red">我是5号红色文本</font></p><p><font face="微软雅黑" size="7"color="green">我是7号绿色文本，我的字体是微软雅黑哦</font></p></body>文本格式化标记
文本格式化标记
在网页中，有时需要为文字设置粗体、斜体或下划线效果，为此HTML准备了专门的文本格式化标记，使文字以特殊的方式显示。常用的文本格式化标记如下表所示。
| 标记 | 显示效果 |
| <b></b><strong></strong> | 文字以粗体方式显示（XHTML推荐使用strong） |
| <i></i><em></em> | 文字以斜体方式示（XHTML推荐使用em） |
| <s></s>和<del></del> | 文字以加删除线方式显示（XHTML推荐使用del） |
| <u></u>和<ins></ins> | 文字以加下划线方式显示（XHTML不赞成使用u） |
了解了常用的文本格式化标记，接下来通过一个案例来演示其中某些标记的效果，主体代码如下所示。
<body><p>我是正常显示的文本</p><p><b>我是使用b标记加粗的文本</b>，<strong>推荐使用strong加粗</strong></p><p><i>我是使用i标记倾斜的文本</i>，<em>推荐使用em斜体文本</em></p><p><u>我是u带下划线文本</u>，不建议使用</p><p><s>我是s带删除线文本</s>，<del>推荐使用del带删除线文本</del></p></body> 常用图像格式
网页中图像太大会造成载入速度缓慢，太小又会影响图像的质量，所以选择合适的图像格式应用于网页很重要。
目前网页上常用的图像格式主要有GIF、JPG和PNG三种。
图像标记
HTML网页中任何元素的实现都要依靠HTML标记，要想在网页中显示图像就需要使用图像标记，接下来将详细介绍图像标记<img />以及和他相关的属性。其基本语法格式如下：
<img src="图像URL" />
该语法中src属性用于指定图像文件的路径和文件名，他是img标记的必需属性。
为了使初学者更好地理解和应用这些属性，接下来对他们进行详细地讲解，具体如下：
图像的替换文本属性alt
由于一些原因图像可能无法正常显示，比如网速太慢，浏览器版本过低等。因此为页面上的图像加上替换文本 是个很好的习惯，在图像无法显示时告诉用户该图片的内容。
图像的宽度、高度属性width、height
通常情况下，如果不给<img/>标记设置宽和高，图片就会按照他的原始尺寸显示，当然也可以手动更改图片的大小。width和height属性用来定义图片的宽度和高度，通常我们只设置其中的一个，另一个会按原图等比例显示。如果同时设置两个属性，且其比例和原图大小的比例不一致，显示的图像就会变形或失真。
图像的边框属性border
默认情况下图像是没有边框的，通过border属性可以为图像添加边框、设置边框的宽度，但边框颜色的调整仅仅通过HTML属性是不能够实现的。
了解了图像的宽度、高度以及边框属性，接下来使用这些属性对图像进行一些修饰，主体代码如下所示。
<body><img src="logo.gif" alt="传智播客-专业的java培训,.net培训,php培训,网页培训,平面培训,iOS培训机构" border="2" /><img src="logo.gif" alt="传智播客-专业的java培训,.net培训,php培训,网页培训,平面培训,iOS培训机构" width="120" /><img src="logo.gif" alt="传智播客-专业的java培训,.net培训,php培训,网页培训,平面培训,iOS培训机构" width="120" height="100" /></body>图像标记
图像的边距属性vspace和 hspace
在网页中，由于排版需要，有时候还需要调整图像的边距。HTML中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。
图像的对齐属性align
图文混排是网页中很常见的效果，默认情况下图像的底部会相对于文本的第一行文字对齐，但是在制作网页时经常需要实现其他的图像和文字环绕效果，例如图像居左文字居右等，这就需要使用图像的对齐属性align。
相对路径和绝对路径
实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。
绝对路径
绝对路径一般是指带有盘符的路径或完整的网络地址，
例如“D:/HTML+CSS网页制作/chapter02/img/logo.gif”
或者“
http://www.itcast.cn/images/logo.gif”
网页中不推荐使用绝对路径，因为网页制作完成之后我们需要将所有的文件上传到服务器，这时图像文件可能在服务器的C盘，也有可能在D盘、E盘，可能在aa文件夹中，也有可能在bb文件夹中。也就是说，很有可能不存在“D:/HTML+CSS网页制作/chapter02/img/logo.gif”这样一个路径。
相对路径
相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。
常用图像格式
1.GIF：连续色调的无损压缩格式。其压缩率一般在50%左右，目前几乎所有相关软件都支持它，GIF格式文件中可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。
2.JPG：jpg全名是JPEG，图片以 24 位颜色存储单个位图。JPEG支持最高级别的压缩，不过，这种压缩是有损耗的，不支持透明。
3.PNG:存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据，常用于网页中是因为它压缩比高，生成文件容量小，支持透明。
特殊字符标记
无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
例1：
<ul type="disc"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li></ul> 例2：
<ultype="circle"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li></ul> 例3：
<ultype="square"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li></ul> 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于<ol> 标签。每个列表项始于 <li> 标签。
例1：数字列表
<ol> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li></ol> 例2：字母列表
<oltype="A"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li></ol> 例3：小写字母列表
<oltype="a"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li></ol> 例4：罗马字母列表
<oltype="I"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li></ol> 例5：小写罗马字母列表
<oltype="i"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li></ol> 嵌套列表
嵌套列表
例1：
<ul> <li>咖啡</li> <li>茶 <ul> <li>红茶</li> <li>绿茶</li> </ul> </li> <li>牛奶</li></ul>例2：
<ul> <li>咖啡</li> <li>茶 <ul> <li>红茶</li> <li>绿茶 <ul> <li>中国茶</li> <li>非洲茶</li> </ul> </li> </ul> </li> <li>牛奶</li></ul>自定义列表
自定义列表是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
例1：一个定义列表
<dl> <dt>计算机</dt> <dd>用来计算的仪器 ......</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置... ...</dd></dl>超级链接
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
1) 我们通过使用 <a> 标签在 HTML 中创建链接。
2) 有两种使用 <a> 标签的方式：
√ 通过使用 href 属性 - 创建指向另一个文档的链接
√ 通过使用 name 属性 - 创建文档内的书签。
3）HTML 链接语法
链接的 HTML 代码很简单。它类似这样：
<a href="url">Link text</a>
4）href 属性规定链接的目标。
开始标签和结束标签之间的文字被作为超级链接来显示。
三．HTML5标签
detailes标签
<details> 标签
1.作用：
1）用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。
2）与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
summary标签
<summary> 标签
1.作用：
<summary> 元素应该是 <details> 元素的第一个子元素。为 <details> 元素定义一个可见的标题。 当用户点击标题时会显示出详细信息。
2.举例：
meter标签
<meter> 标签
1.作用
定义度量衡。仅用于已知最大和最小值的度量。比如：磁盘使用情况，查询结果的相关性等。
2.注意：
<meter> 不能作为一个进度条来使用。
3.属性：
4.举例
5.meter度量衡如何改变颜色：
在meter中要想改变颜色，需要用到五个值，分别是：
min（最小值）、max（最大值）、low、high、value和optimum，其中前四个值会把整个进度划分成3区间，
绿色：当value和optimum值在一个区间时，它就会呈现出绿色。
黄色：当optimum在high和max之间的时候，value在low和high之间，它就会呈现出黄 色
当optimum在low和high之间的时候，value值在min和low之间，在high和max 之间的时候就会呈现出黄色。
当optimum在min和low之间的时候，value值在low和high之间会呈现出黄色。
红色：当optimum在high和max之间的时候，value值在min和low之间时就会呈现出红 色。
当optimum在min和low之间的时候，value在high和max之间就会呈现出红色。
当optimum在绿色区域的时候，value也在绿色区域的时候，整个就会呈现出绿色
当optimum在绿色区域的时候，value值在黄色区域的时候，整个就会呈现出黄色
当optimum在绿色区域的时候，value值在红色区域的时候，整个就会呈现出红色
当optimum在绿色区域的时候，valu值在中间绿色区域是为绿色
当optimum在绿色区域的时候，value值在min和low之间和在high和max之间时都呈现出黄色
当optimum在绿色区域的时候，value也在绿色区域的时候，整个就会呈现出绿色
当optimum在绿色区域的时候，value值在黄色区域的时候，整个就会呈现出黄色
当optimum在绿色区域的时候，value值在红色区域的时候，整个就会呈现出红色
progress 标签
<progress> 标签
1.作用：
标签定义运行中的任务进度（进程）
2.属性：
3.注意：
1）请将 <progress> 标签与 JavaScript 一起使用来显示任务的进度。
2）<progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或相关的查询结果）。
3）如果要表示度量衡，请使用 <meter> 标签代替。
4.举例：
全局属性:contenteditable 属性
contenteditable 属性
- 作用：contenteditable 属性指定元素内容是否可编辑。
- 属性：
3.注意： 当元素中没有设置 contenteditable 属性时，元素将从父元素继承。
4.举例：
四．CSS入门
CSS介绍
层叠样式表----CascadingStyle Sheets
层叠样式表定义如何显示HTML元素，样式通常存储在样式表中,把样式添加到 HTML中，是为了解决
内容与表现分离的问题
外部样式表可以极大提高工作效率,外部样式表通常存储在CSS文件中，多个样式定义可层叠为一个。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
css语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
说明：
1）选择器通常是您需要改变样式的 HTML 元素。
2）属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
3）每条声明由一个属性和一个值组成。
CSS注释
CSS注释以 "/*" 开始, 以 "*/" 结束, 注释是用来解释你的代码，浏览器会忽略它。
CSS选择器
开发中经常需要找到网页中的特定元素设置样式，如何找到元素---选择器
1）什么是CSS选择器：按照一定的规则选出符合条件的元素，为之添加CSS样式
2）选择器的分类： 通用选择器
元素选择器
类选择器
ID选择器
属性选择器
组合选择器
伪类选择器
伪元素选择器
我们将重点介绍使用通用选择器、元素选择器、类选择器、ID选择器、伪类选择器
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器。（id属性值在同一页面文件中不要重复出现）
CSS 中 id 选择器以 "#" 来定义。
class 选择器
class 选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示,
在 CSS 中，类选择器以一个点"."号来定义。通用选择器
通用选择器可以选择页面上的所有元素，并对它们应用样式，
用 * 来表示。
五．文本样式属性
font-family
font-family 属性设置文本的字体系列。
注意：
1） 若有中文字体样式设置和英文字体样式设置，首先将英文字体写在前面，中文字体写在后面。
2） 防止设置字体不存在，一般会设置多个字体。
3） 英文字体只适用于英文，中文字体适用于中文也适用于英文。
font-style
font-style 用于指定斜体文字的字体样式属性。
这个属性有三个值：
- 1）normal 正常 - 正常显示文本
- 2）italic 斜体 - 以斜体字显示的文字
- 3）oblique 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
font-size
font-size 属性设置文本的大小。
字体大小的值可以是绝对或相对的大小。
1）绝对大小：具体数值+单位
2）相对大小：
相对于周围的元素来设置大小
如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。
（1）em（基于父元素的倍数关系）
em的尺寸单位由W3C建议。1em和当前字体大小相等。在浏览器中默认的文字大小是16px，因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
举例：
（2）百分比（基于父元素的百分比）
举例：
能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。请务必使用正确的HTML标签，就<h1> - <h6>表示标题和
font-weight
font-weight加粗
属性值：
注意：
1）100-900，一个数字表示一个重量
2）normal=400
3）bold=700
font-variant
font-variant
设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小
属性：
font
font缩写属性的使用
font可以设置的属性有：
font-style
font-variant
font-weight
font-size/line-height
font-family
注意：
1）style,variant,weight可以任意调换顺序，也可以省略
2） /line-height也可以省略，不省略则必须写在font-size后面
3） font-size,font-family不可以调换位置，不可以省略
六．CSS文本属性
超级链接---target属性
使用 target 属性，可以定义被链接的文档在何处显示
属性取值：
_self:在当前窗口打开并显示
_blank：打开一个新的窗口并显示
后面三个属性值需要和iframe标记一起使用，以指定在特定窗口打开
_parent：父窗口打开
_top：顶层窗口打开
_name：具体指定name窗口打开
电子邮件链接
电子邮件链接：
href后使用mailto:
举例：
<a href="mailto:289719@qq.com?Subject=Hello"target="_top">
color
color：文本颜色属性，用来设置文字的颜色。可以使用的设置方法：
十六进制值 - 如:
＃FF0000 一个RGB值 - 如:
RGB(255,0,0) 颜色的名称 - 如:
red、blue..... 举例
还可以使用rgba(255,0,0,0.5)
最后一个参数用来指定颜色透明度
text-align
text-align: 文本的对齐方式,用来设置文本的水平对齐方式。 center :文本可居中
left/right :对齐到左或右
justify :两端对齐
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
举例：
text-decoration
text-decoration:文本修饰,用来设置或删除文本的装饰。从设计的角度看 text-decoration属性主要是用来删除链接的下划线：
none：无装饰
underline：下划线
overline：上划线
line-through：删除线
text-transform
text-transform：文本转换，用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
uppercase ：将每个单词的所有字符变大写
Lowercase：将每个单词的所有字符变小写
capitalize：每个单词的首字母大写
text-indent
text-indent：文本缩进文本缩进属性是用来指定文本的第一行的缩进。
单词/字母间距
单词/字母间距word-spacing：单词之间间距
letter-spacing:字母之间间距
text-shadow
text-shadow：文本阴影效果：
属性：
举例：
<style>h1{text-shadow: 5px 5px 5px #FF0000;}</style><body><h1>文本阴影效果！</h1></body>也可以两个颜色效果叠加 h1{ text-shadow: 10px 10px 5px #de8,20px 20px 20px #f00; }white-space
white-space：建立布局过程中如何处理元素中的空白符属性：overflow
overflow:规定当内容溢出元素框时发生的事情。属性：text-overflow
规定当文本溢出包含元素时发生的事情。
属性：
display
属性规定元素应该生成的框的类型。
属性：
文本溢出框处理方法
处理方法一：
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;样式说明：
1）overflow:hidden；---样式隐藏溢出文本；
2）text-overflow:ellipsis；可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本
3）white-space:nowrap;样式强制文本不能换行；
处理方法二：
overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;样式说明：
1）-webkit-line-clamp：用来限制在一个块元素显示的文本的行数。这个属性是webkit的私有属性，是一个不规范的属性，它没有出现在 CSS 规范草案中。为了实现该效果，它需要组合其他的WebKit属性，常见结合属性：
display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 。
这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。
CSS继承性与层叠性
1）继承性
这边先举一个例子来说（只取了关键部分）
<style type="text/css"> div{ color:blue; border:2px solid red; } </style></head><body> <div> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> </div>那么我们看得到结果CSS中是对div进行样式修改，div的后代同时也被CSS所修改这里就看得到继承性。
但不是所有的标签都有继承性这边先介绍几种最主要的，其他之后往后学的时候会遇见就知道。
具有继承性属性标签：color，text-开头，line-开头，font-开头的。
继承性从大贯穿到到小
不具有继承性的属性：
边框属性
外边距属性
内边距属性
背景属性
定位属性
布局属性
2）层叠性
我们对样式进行操作时，当CSS中有多个选择器选中一个标签并且修改了他的相同属性时这时候被修改的元素应该听谁的，这里就涉及到了继承性的问题。
CSS权重
CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。
可以把样式的应用方式分为几个等级，按照等级来计算权重：
！important,加在样式属性后，权重值为10000
内联样式，如：style=””，权重值为1000
ID选择器，如：#content，权重值为100
类，伪类和属性选择器，如： content、:hover 权重值为10
标签选择器和伪元素选择器，如：div、p、:before 权重值为1
通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
权重的计算实例：实例一：
<style type="text/css"> div{ color:red !important; } </style>......<div style="color:blue">这是一个div元素</div><!-- 两条样式同时作用一个div，上面的样式权重值为10000+1，下面的行间式的权重值为1000，所以文字的最终颜色为red -->实例二：
<style type="text/css"> #content div.main_content h2{ color:red; } #content .main_content h2{ color:blue; }</style>......<div id="content"> <div class="main_content"> <h2>这是一个h2标题</h2> </div></div><!--第一条样式的权重计算： 100+1+10+1，结果为112；第二条样式的权重计算： 100+10+1，结果为111；h2标题的最终颜色为red-->当遇到冲突时进行比较，先比较id，id权重100，class权重10，标签权重1。
七．浮动与定位
伪类
伪类伪类并不是真正意义上的类，它的名称是由系统定义的，通常由标记名、类名或id名加“：”构成。
1）为什么要使用链接伪类为了提高用户体验，需要为超链接指定不同的状态，使得超链接在
点击前、点击后和鼠标悬停时、超链接访问后的样式不同。在CSS中，通过链接伪类可以实现不同的链接状态，
2）四种常用的链接伪类 a:link{ CSS样式规则; }：未访问时超链接的状态
a:visited{ CSS样式规则; }：访问后超链接的状态
a:hover{ CSS样式规则; }：鼠标经过、悬停时超链接的状态
a: active{ CSS样式规则; }：鼠标点击不动时超链接的状态
举例：
使用链接伪类来制作一个网页导航，具体实现步骤如下：
搭建HTML结构，具体代码如下所示。
<a href="#">公司首页</a><a href="#">公司简介</a><a href="#">产品介绍</a><a href="#">联系我们</a> 定义CSS样式，具体代码如下所示：
<style type="text/css">a:link,a:visited{ /*未访问和访问后*/ color:#FC0; text-decoration:none; /*清除超链接默认的下划线*/ margin-right:20px;}a:hover{ /*鼠标悬停*/ color:#0F0; text-decoration:underline; /*鼠标悬停时出现下划线*/}a:active{color:#F00;} /*鼠标点击不动*/</style>效果如下图所示。
需要注意的是，同时使用链接的4种伪类时，通常按照
a:link、a:visited、a:hover和a:active的顺序书写，否则定义的样式可能不起作用。元素的浮动属性
定义浮动在CSS中，通过float属性来定义浮动，其基本语法格式如下：
选择器{float:属性值;}
在上面的语法中，常用的float属性值有三个，分别表示不同的含义，具体如下：
left：元素向左浮动
right:元素向右浮动
none:元素不浮动（默认值）
1）不设置浮动
当对页面中的所有元素均不应用float属性，也就是说元素的float属性值都为其默认值none。页面效果如下图所示。
可见如果不对元素设置浮动，则该元素及其内部的子元素将按照标准文档流的样式显示，即块元素占页面整行。
2）box01左浮动
以box01为设置对象，对其应用左浮动样式，具体CSS代码如下：
.box01{ /*定义box01左浮动*/
float:left;
}
保存HTML文件，刷新页面，效果如下图所示。
通过上图容易看出，设置左浮动的box01漂浮到了box02的左侧，也就是说box01不再受文档流控制，出现在一个新的层次上。
3）box02左浮动
在上述案例的基础上，继续为box02设置左浮动，具体CSS代码如下：
.box01,.box02{ /*定义box01、box02左浮动*/
float:left;
}
保存HTML文件，刷新页面，效果如下图所示。
在上图中，box01、box02、box03三个盒子整齐地排列在同一行，可见通过应用“float:left;”样式可以使box01和box02同时脱离标准文档流的控制向左漂浮。
4）box03左浮动
在上述案例的基础上，继续为box03设置左浮动，具体CSS代码如下：
.box01,.box02,.box03{ /*定义box01、box02、box03左浮动*/
float:left;
}
保存HTML文件，刷新页面，效果如下图所示。
在上图中，box01、box02、box03三个盒子排列在同一行，同时，周围的段落文本将环绕盒子，出现了图文混排的网页效果。
float的另一个属性值“right”在网页布局时也会经常用到，他与“left”属性值的用法相同但方向相反。
注意：
对元素同时定义float和margin-left或margin-right属性时，在IE6浏览器中，出现的左外边距或右外边距将是所设置的margin-left或margin-right值的两倍。这就是网页制作中经常出现的IE6双倍边距问题。
清除浮动
1.清除浮动属性clear由于浮动元素不再占用原文档流的位置，所以他会对页面中其他元素的排版产生影响。在CSS中，clear属性用于清除浮动，其基本语法格式如下：
选择器{clear:属性值;}
在上面的语法中，clear属性的常用值有三个，分别表示不同的含义，具体如下：
left：不允许左侧有浮动元素（清除左侧浮动的影响）
right：不允许右侧有浮动元素（清除右侧浮动的影响）
both：同时清除左右两侧浮动的影响
接下来对上面案例中的<p>标记应用clear属性，来清除周围浮动元素对段落文本的影响。在<p>标记的CSS样式中添加如下代码：
clear:left; /*清除左浮动*/
添加该样式后，保存HTML文件，刷新页面，效果如下图所示。
2.常用的几种清除浮动的方法clear属性只能清除元素左右两侧浮动的影响。然而在制作网页时，经常会遇到一些特殊的浮动影响，例如，对子元素设置浮动时，如果不对其父元素定义高度，则子元素的浮动会对父元素产生影响，如下图所示父元素变成了一条直线。
这里为大家总结三种常用的清除浮动的方法。
1）使用空标记清除浮动
在浮动元素之后添加空标记，并对该标记应用“clear:both”样式，可清除元素浮动所产生的影响，这个空标记可以为<div>、<p>、<hr />等任何标记。
以上述案例为基础，在浮动元素box01、box02、box03之后添加class为box04的空div，然后对box04应用“clear:both;”样式。这时效果如下图所示。
在上图中，子元素浮动对父元素的影响已经不存在。由于上述方法在无形中增加了毫无意义的结构元素（空标记），因此在实际工作中不建议使用。
2）使用overflow属性清除浮动
对元素应用“overflow:hidden;”样式，也可以清除浮动对该元素的影响。继续以上述案例为基础，对父元素应用“overflow:hidden;”样式，来清除子元素浮动对父元素的影响。这时效果如下图所示。
在上图中，子元素浮动对父元素的影响已经不存在。
3）使用after伪对象清除浮动
after伪对象也可以清除浮动，该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。继续以上述案例为基础，对父元素应用after伪对象样式， CSS代码如下：
.father:after{ /*对父元素应用after伪对象样式*/ display:block; clear:both; content:""; visibility:hidden; height:0;}这时效果如下图所示。
在上图中，子元素浮动对父元素的影响已经不存在。
overflow属性
overflow属性当盒子内的元素超出盒子自身的大小时，内容就会溢出（IE6除外），这时如果想要规范溢出内容的显示方式，就需要使用CSS的overflow属性，其基本语法格式如下：
选择器{overflow:属性值;}
在上面的语法中，overflow属性的常用值有visible、hidden、auto和scroll四个。
1）“overflow:visible;”样式
设置“overflow:visible;”样式后，盒子溢出的内容不会被修剪，而呈现在元素框之外，如下图所示。
2）“overflow:hidden;”样式
设置“overflow: hidden;”样式后，盒子溢出的内容将会被修剪且不可见，如下图所示。
3）“overflow:auto;”样式
设置“overflow: auto;”样式后，元素框能够自适应其内容的多少，在内容溢出时，产生滚动条，否则，则不产生滚动条。当内容溢出时，如下图所示。
4）“overflow:scroll;”样式
当定义overflow的属性值为scroll时，元素框中也会产生滚动条，如下图所示。
与“overflow:auto;”不同，当定义“overflow: scroll;”时，不论元素是否溢出，元素框中的水平和竖直方向的滚动条都始终存在。
元素的定位
元素的定位属性元素的定位属性主要包括定位模式和边偏移两部分。
1）定位模式
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：
选择器{position:属性值;}
在上面的语法中，position属性的常用值有四个，分别表示不同的定位模式，具体如下：
static：自动定位（默认定位方式）
relative：相对定位，相对于其原文档流的位置进行定位
absolute：绝对定位，相对于其上一个已经定位的父元素进行定位
fixed：固定定位，相对于浏览器窗口进行定位
2）边偏移
通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，其取值为不同单位的数值或百分比，对他们的具体解释如下：
top：顶端偏移量，定义元素相对于其父元素上边线的距离
bottom：底部偏移量，定义元素相对于其父元素下边线的距离
left：左侧偏移量，定义元素相对于其父元素左边线的距离
right：右侧偏移量，定义元素相对于其父元素右边线的距离
元素的类型与转换
常见的几种定位模式
1）静态定位
静态定位是元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。
任何元素在默认状态下都会以静态定位来确定自己的位置，所以当没有定义position属性时，并不说明该元素没有自己的位置，他会遵循默认值显示为静态位置。在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。
2）相对定位
相对定位是将元素相对于他在标准文档流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是他在文档流中的位置仍然保留。如下图所示：
如上图中，对child02设置相对定位后，他会相对于其自身的默认位置进行偏移，但是他在文档流中的位置仍然保留。
3）绝对定位
绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。如下图所示：
在上图中，设置为绝对定位的元素child02，依据浏览器窗口进行定位。并且，这时child03占据了child02的位置，即child02脱离了标准文档流的控制，不再占据标准文档流中的空间。
另外，对child02设置了绝对定位，当浏览器窗口放大或缩小时，child02相对于其直接父元素的位置都将发生变化。如下图所示：
4）固定定位
固定定位是绝对定位的一种特殊形式，他以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后，他将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。但是，由于IE6不支持固定定位，因此，在实际工作中较少使用。
5）z-index层叠等级属性
当对多个元素同时设置定位时，定位元素之间有可能会发生重叠，如下图所示：
在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上
八．表格
为什么要应用表格
为什么要应用表格为了清晰地显示数据或信息，常常使用表格对数据或信息进行统计，同样在制作网页时，为了使网页中的元素有条理地显示，也需要使用表格对网页进行规划。
创建表格的基本语法
创建表格的基本语法格式如下：
<table> <tr> <td>单元格内的文字</td> ... </tr> ...</table>在上面的语法中包含三对HTML标记，分别为：
<table></table>、<tr></tr>、<td></td>它们是创建表格的基本标记，缺一不可，对它们的具体解释如下：
<table></table>：用于定义一个表格。
<tr></tr>：用于定义表格中的一行，必须嵌套在<table></table>标记中，在<table></table>中包含几对<tr></tr>，就表示该表格有几行。
<td></td>：用于定义表格中的单元格，必须嵌套在<tr></tr>标记中，一对<tr></tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。
注意：直接在<tr></tr>标记中输入文字的做法是不被允许的。table标记
<table>标记HTML语言为其提供了一系列的属性，用于控制表格的显示样式。
border属性：在<table>标记中，border属性用于设置表格的边框，默认值为0。
cellspacing属性：cellspacing属性用于设置单元格与单元格边框之间的空白间距，默认为2px。
cellpadding属性：cellpadding属性用于设置单元格内容与单元格边框之间的空白间距，默认为1px。
width与height属性：默认情况下，表格的宽度和高度靠其自身的内容来支撑
align属性：用于定义元素的水平对齐方式，其可选属性值为left、center、right。
bgcolor属性：用于设置表格的背景颜色。
background属性：用于设置表格的背景图像。
tr标记
<tr>标记通过对<table>标记应用各种属性，可以控制表格的整体显示样式，但是制作网页时，有时需要表格中的某一行特殊显示，这时就可以为行标记<tr>定义属性，其常用属性如下：
height：设置行高度，常用属性值为像素值。
align：设置一行内容的水平对齐方式，常用属性值为left、center、right。
valign：设置一行内容的垂直对齐方式，常用属性值为top、middle、bottom。
bgcolor：设置行背景颜色，预定义的颜色值、十六进制#RGB、rgb(r,g,b)
background：设置行背景图像，url地址。
td标记
<td>标记 width：设置单元格的宽度，常用属性值为像素值。
height：设置单元格的高度，常用属性值为像素值。
align：设置单元格内容的水平对齐方式，常用属性值为left、center、right
valign：设置单元格内容的垂直对齐方式，常用属性值为top、middle、bottom
bgcolor：设置单元格的背景颜色，常用属性值为预定义的颜色值、十六进制#RGB、rgb(r,g,b)。
background：设置单元格的背景图像，常用属性值为url地址。
colspan：设置单元格横跨的列数（用于合并水平方向的单元格），常用属性值为正整数。
rowspan：设置单元格竖跨的行数（用于合并竖直方向的单元格），常用属性值为正整数。
与<tr>标记不同的是，可以对<td>标记应用width属性，用于指定单元格的宽度，同时<td>标记还拥有colspan和rowspan属性，用于对单元格进行合并。
th标记
<th>标记应用表格时经常需要为表格设置表头，以使表格的格式更加清晰，方便查阅。设置表头非常简单，只需用表头标记<th></th>替代相应的单元格标记<td></td>即可。
九．表单
表单控件
表单控件表单控件用于定义不同的表单功能，如：密码输入框、文本域、下拉列表、复选框等。
input控件
input控件单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等，要想定义这些元素就需要使用input控件，其基本语法格式如下：
<input type="控件类型"/>
在上面的语法中，<input />标记为单标记，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input/>标记还可以定义很多其它的属性，具体解释如下：
type
text：单行文本输入框
password：密码输入框
radio：单选按钮
checkbox：复选框
button：普通按钮
submit：提交按钮
reset：重置按钮
image：图像形式的提交按钮
hidden：隐藏域
file：文件域
name：由用户自定义，表示控件的名称
value：由用户自定义，表示input控件中的默认文本值
size：正整数，表示input控件在页面中的显示宽度
readonly：表示该控件内容为只读（不能编辑修改）
disabled：表示第一次加载页面时禁用该控件（显示为灰色）
checked：表示定义选择控件默认被选中的项
maxlength：整整数，表示控件允许输入的最多字符数
举例：
<form action="#"method="post"> 用户名： <inputtype="text" value="张三" maxlength="6" /><br /><br /> 密码： <inputtype="password" size="40" /><br /><br/> 性别： <inputtype="radio" name="sex" checked="checked" />男 <inputtype="radio" name="sex" />女<br /><br /> 兴趣： <inputtype="checkbox" />唱歌 <inputtype="checkbox" />跳舞 <inputtype="checkbox" />游泳<br/><br /> 上传头像： <inputtype="file" /><br /><br /> <inputtype="submit" /> <inputtype="reset" /> <inputtype="button" value="普通按钮" /> <inputtype="image" src="img/login.gif" /> <inputtype="hidden" /> </form>运行完整的案例代码，得到效果图如下所示。
有时需要将<input />控件联合<label>标记使用，以扩大控件的选择范围，从而提供更好的用户体验。
textarea控件
textarea控件通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：
<textarea cols="每行中的字符数" rows="显示的行数"> 文本内容</textarea>在上面的语法格式中，cols和rows为<textarea>标记的必须属性，其中cols用来定义多行文本输入框每行中的字符数，rows用来定义多行文本输入框显示的行数，它们的取值均为正整数。
举例：
<form action="#" method="post">评论：<br /> <textareacols="60" rows="8">评论的时候，请遵纪守法并注意语言文明，多给文档分享人一些支持。 </textarea><br /><br /> <inputtype="submit" value="提交"/></form>运行完整的案例代码，得到效果图如下所示。
除了cols和rows属性外，<textarea>标记还拥有几个可选属性，分别为disabled、name和readonly，它们的含义和用法同<input />标记中相应的属性相同。
select控件
select控件在HTML中，要想制作如下图所示的下拉菜单，就需要使用select控件。
十．盒子模型
认识盒子模型
认识盒子模型 盒子模型的重要性
盒子模型是CSS网页布局的基础，只有掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素所呈现的效果。首先我们分析一下盒子的构成。
上图就是盒子模型的组成部分，网页中所有的元素和对象都是由上图所示的基本结构组成，理解了盒子模型的结构后，要想随心所欲地控制页面中每个盒子的样式，还需要掌握盒子模型的相关属性。
<select>使用select控件定义下拉菜单的基本语法格式如下：
<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select>值得一提的是，在HTML中，可以为<select>和<option>标记定义属性，以改变下拉菜单的外观显示效果，具体解释如下：
<select>
size：指定下拉菜单的可见选项数（取值为正整数）。
multiple：定义multiple="multiple"时，下拉菜单将具有多项选择的功能，方法为按住Ctrl键的同时选择多项。
<option>
selected：定义selected =" selected "时，当前项即为默认选中项。
举例：
<form action="#"method="post">所在校区：<br /> <select> <option>-请选择-</option> <option>杭州</option> <option>杭州</option> <option>杭州</option> <option>杭州</option> <option>杭州</option> </select><br /><br />特长（单选）:<br/> <select> <option>唱歌</option> <option selected="selected">画画</option> <option>跳舞</option> </select><br /><br />爱好（多选）:<br/> <select multiple="multiple" size="4"> <option>读书</option> <option selected="selected">写代码</option> <option>旅行</option> <option selected="selected">听音乐</option> <option>踢球</option> </select><br /><br /> <inputtype="submit" value="提交"/></form>运行完整的案例代码，得到效果图如下所示。
上面我们实现了不同的下拉菜单效果，但是，在实际网页制作过程中，有时候需要对下拉菜单中的选项进行分组，这样当存在很多选项时，要想找到相应的选项就会更加容易。如下图所示即为选项分组后的下拉菜单中选项的展示效果。
要想实现如上图所示的效果，可以在下拉菜单中使用<optgroup></optgroup>标记，下面通过一个具体的案例来演示为下拉菜单中的选项分组的方法和效果，具体代码如下所示。
<form action="#"method="post">城区：<br /> <select> <optgroup label="杭州"> <option>东城区</option> <option>西城区</option> <option>朝阳区</option> <option>海淀区</option> </optgroup> <optgroup label="杭州"> <option>浦东新区</option> <option>徐汇区</option> <option>虹口区</option> </optgroup> </select></form>盒子模型的组成属性
盒子模型的组成属性 边框属性
为了分割页面中不同的盒子，常常需要给元素设置边框效果，在CSS中边框属性包括边框样式属性（border-style）、边框宽度属性（border-width）、边框颜色属性（border-color）。
1、设置边框样式（border-style）：边框样式用于定义页面中边框的风格，常用属性值如下：
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
使用border-style属性综合设置四边样式时，必须按上右下左的顺时针顺序，省略时采用值复制的原则，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。
接下来运用相应的属性值定义边框样式，具体CSS代码如下：
<style type="text/css">h2{ border-style:double} /*4条边框相同——双实线*/.one{ border-top-style:dotted; /*上边框——点线*/ border-bottom-style:dotted;/*下边框——点线*/ border-left-style:solid; /*左边框——单实线*/ border-right-style:solid; /*右边框——单实线*/ /*上面4行代码等价于：border-style:dotted solid;*/}.two{ border-style:soliddotted dashed; /*上实线、左右点线、下虚线*/}</style>运行例程代码，得到效果图如下所示：
上图就是给盒子分别指定双实线、单实线、虚线、点线后的边框效果。
2、设置边框宽度（border-width）:设置边框宽度的方法如下：
borer-top-width：上边框宽度;
borer-right-width：右边框宽度;
borer-bottom-width：下边框宽度;
borer-left-width：左边框宽度;
borer- width：上边框宽度 [右边框宽度 下边框宽度左边框宽度];
综合设置四边宽度必须按上右下左的顺时针顺序采用值复制，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。
接下来运用相应的属性值定义边框宽度，具体CSS代码如下：
<style type="text/css">p{ border-width:1px; /*综合设置4边宽度*/ border-top-width:3px; /*设置上边宽度覆盖*/ /*上面2行代码等价于：border-width:3px 1px 1px; */}</style>运行例程代码，得到效果图如下所示:
上图就是给段落文本同时设置边框宽度和样式的效果图。
3、设置边框颜色（border-color）:设置边框颜色的方法如下：
border-top-color:上边框颜色;
border-right-color:右边框颜色;
border-bottom-color:下边框颜色;
border-left-color:左边框颜色;
border- color:上边框颜色 [右边框颜色 下边框颜色左边框颜色];
其取值可为预定义的颜色值、#十六进制、rgb(r,g,b)或rgb(r%,g%,b%)，实际工作中最常用的是#十六进制。
边框的默认颜色为元素本身的文本颜色，对于没有文本的元素，例如只包含图像的表格，其默认边框颜色为父元素的文本颜色。
综合设置四边颜色必须按顺时针顺序采用值复制，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。
接下来运用相应的属性值定义边框样式，具体CSS代码如下：
p{ border-style:solid; /*综合设置边框样式*/ border-color:#CCC#FF0000; /*设置边框颜色：两个值为上下、左右*/}总结：
能够用一个属性定义元素的多种样式，这种属性在CSS中称之为复合属性。常用的复合属性有font、border、margin、padding和background等。实际工作中常使用复合属性，它可以简化代码，提高页面的运行速度，但是如果只有一项值，最好不要应用复合属性，以免样式不被兼容。
内边距属性
内边距属性 为了调整内容在盒子中的显示位置，常常需要给元素设置内边距，所谓内边距指的是元素内容与边框之间的距离，也常常称为内填充。
在CSS中padding属性用于设置内边距，同边框属性border一样，padding也是复合属性，其相关设置如下：
padding-top:上边距;
padding-right:右边距;
padding-bottom:下边距;
padding-left:左边距;
padding:上边距 [右边距 下边距左边距];
在上面的设置中，padding相关属性的取值可为：auto自动（默认值）、不同单位的数值、相对于父元素（或浏览器）宽度的百分比%，实际工作中最常用的是像素值px，不允许使用负值。
同边框相关属性一样，使用复合属性padding定义内边距时，必须按顺时针顺序采用值复制：一个值为四边、两个值为上下/左右，三个值为上/左右/下。
接下来通过案例演示元素内边距的设置方式，具体CSS代码如下：
img{ padding:80px; /*图像4个方向内边距相同*/ padding-bottom:0;/*单独设置下边距*/ /*上面两行代码等价于padding:80px 80px 0;*/} p{ padding:5%;} 使用padding相关属性设置图像和段落的内边距，其中段落内边距使用%数值。由于段落的内边距设置为了%数值，当拖动浏览器窗口改变其宽度时，段落的内边距会随之发生变化（这时<p>标记的父元素为<body>）。
外边距属性值
外边距属性值 网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合理地布局网页，就需要为盒子设置外边距，所谓外边距指的是元素边框与相邻元素之间的距离。
在CSS中margin属性用于设置外边距，它是一个复合属性，与内边距padding的用法类似，设置外边距的方法如下：
margin-top:上边距;
margin-right:右边距;
margin-bottom:下边距;
margin-left:上边距;
margin:上边距 [右边距 下边距左边距];
margin相关属性的值，以及复合属性margin取1~4个值的情况与padding相同。但是外边距可以使用负值，使相邻元素重叠，在后面的课程中将详细介绍外边距取负值的情况。
接下来通过案例演示元素外边距的设置方法，具体CSS代码如下：
img{ border:5pxsolid red; float:left; /*设置图像左浮动*/ margin-right:50px; /*设置图像的右外边距*/ margin-bottom:30px; /*设置图像的左外边距*/ /*上面两行代码等价于margin:0 50px 30px 0;*/} 在上面的案例中使用浮动属性float使图像居左，同时设置图像的右外边距和下外边距，使图像和文本之间拉开一定的距离，实现常见的排版效果。
盒子宽度
盒子宽度 网页是由多个盒子排列而成的，每个盒子都有固定的大小，在CSS中使用宽度属性width和高度属性height可以对盒子的大小进行控制。CSS规范的盒子模型的总宽度和总高度的计算原则是：
盒子的总宽度
width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度
height+上下内边距之和+上下边框宽度之和+上下外边距之和
元素类型
元素类型 HTML标记语言提供了丰富的标记，用于组织页面结构。为了使页面结构的组织更加轻松、合理，HTML标记被定义成了不同的类型，一般分为块标记和行内标记，也称块元素和行内元素
块元素
块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
行内元素
行内元素也称内联元素或内嵌元素，其特点是，不必在新的一行开始，同时，也不强迫其他的元素在新的一行显示。一个行内元素通常会和它前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
元素类型转换
元素类型转换 定义
网页是由多个块元素和行内元素构成的盒子排列而成的，如果希望行内元素具有块元素的某些特性，例如可以设置宽高，或者需要块元素具有行内元素的某些特性，例如不独占一行排列，就可以使用display属性对元素的类型进行转换。
行内元素转换为块级元素
display:block
块级元素转换为行内元素
display:inline。
行内块元素
display:inline-block;
此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。
外边距合并问题
外边距合并问题在普通文档流中（没有对元素应用浮动和定位），当两个相邻或嵌套的块元素相遇时，其垂直方向的外边距会自动合并，发生重叠。
相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者，这种现象被称为相邻块元素垂直外边距的合并。
嵌套块元素垂直外边距的合并
当两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
可以通过以下两种方法解决这个问题：
（1）给父盒子加边框（border）
具体css代码书写如下所示：
border:1px solid #F00; /*定义父div的上边框*/
（2）给父盒子样式加overflow:hidden
具体css代码书写如下所示：
overflow:hidden; /*定义父div的overflow属性*/
十一．页面背景相关属性
背景属性
背景属性 背景属性的重要性
网页能通过背景图像给人留下第一印象，如节日题材的网站一般采用喜庆祥和的图片来突出效果，所以在网页设计中，控制背景颜色和背景图像是一个很重要的步骤。
背景颜色
背景颜色 网页元素的背景颜色使用background-color属性来设置，其属性值与文本颜色的取值一样，可使用预定义的颜色、十六进制#RRGGBB、RGB代码rgb(r,g,b)，默认为transparent透明，即子元素会显示其父元素的背景。
接下来通过案例演示元素背景颜色的设置方法，具体CSS代码如下：
h2{ font-family:"微软雅黑"; color:#FFF; background-color:#F00; /*设置标题的背景颜色*/}背景图像
背景图像背景背景不仅可以设置为某种颜色，在CSS中，还可以将图像作为网页元素的背景，通过background-image属性实现。
接下来通过案例演示元素背景图像的设置方法，具体CSS代码如下：
body{ background-color:#CCC; /*设置网页的背景颜色*/ background-image:url(img/jianbian.jpg);/*设置网页的背景图像*/} 背景图像平铺
背景图像平铺默认情况下，背景图像会自动向水平和竖直两个方向平铺，如果不希望图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制，具体使用方法如下：
repeat：沿水平和竖直两个方向平铺（默认值）
no-repeat：不平铺（图像位于元素的左上角，只显示一次）
repeat-x：只沿水平方向平铺
repeat-y：只沿竖直方向平铺
接下来通过案例演示元素背景颜色的设置方法，具体CSS代码如下：
body{ background-color:#eef8ff; /*更改网页的背景颜色*/ background-image:url(img/jianbian.jpg);/*设置网页的背景图像*/ background-repeat:repeat-x; /*设置背景图像的平铺*/} h2{ font-family:"微软雅黑"; color:#FFF;}背景图像定位
背景图像定位 如果希望背景图像出现在指定位置，就需要另一个CSS属性—background-position，设置背景图像的位置。
在CSS中，background-position属性的值通常设置为两个，中间用空格隔开，用于定义背景图像在元素的水平和垂直方向的坐标，例如上面的“right bottom”，默认为“0 0”或“top left”即背景图像位于元素的左上角
background-position属性的取值有多种，具体如下：
1.使用不同单位（最常用的是像素px）的数值：直接设置图像左上角在元素中的坐标，例如background-position:20px 20px。
2.使用预定义的关键字：指定背景图像在元素中的对齐方式。
水平方向值：left、center、right。
垂直方向值：top、center、bottom。
3.使用百分比：按背景图像和元素的指定点对齐。
0% 0% 表示图像左上角与元素的左上角对齐。
50% 50% 表示图像50% 50%中心点与元素50% 50%的中心点对齐。
20% 30% 表示图像20% 30%的点与元素20% 30%的点对齐。
100% 100% 表示图像右下角与元素的右下角对齐，而不是图像充满元素。
接下来通过案例演示元素背景图像位置的设置方法，具体CSS代码如下：
body{ background-image:url(img/wdjl.jpg); /*设置网页的背景图像*/ background-repeat:no-repeat; /*设置背景图像不平铺*/ background-position:50px 80px; /*用像素值控制背景图像的位置*/ }背景图像固定
背景图像固定在网页上设置背景图像时，随着页面滚动条的移动，背景图像也会跟着一起移动。如果希望背景图像固定在屏幕上，不随着页面元素滚动，可以使用background-attachment属性来设置，其属性值如下：
scroll：图像随页面元素一起滚动（默认值）。
fixed：图像固定在屏幕上，不随页面元素滚动。
接下来通过案例演示设置元素背景图像的固定，具体CSS代码如下：
body{ background-image:url(img/wdjl.jpg); /*设置网页的背景图像*/ background-repeat:no-repeat; /*设置背景图像不平铺*/ background-position:50px80px; /*用像素值控制背景图像的位置*/ background-attachment:fixed; /*设置背景图像的位置固定*/ }十二．利用模板创建网页
模板概述
当网站中有许多页面版式色彩相同的情况下，将其定义为网页模板，并定义其中部分可编辑，部分不可利用。省时，省力，操作简单。
创建模板
选择“文件/另存为模板”,模板文件扩展名为.dwt，模板文件一般存放在templates文件夹中。
定义可编辑区域
将以一个网页另存为模板后，整个文档将会被锁定，在该文档中不能进行编辑，因此，需要在模板文档中定义可编辑区域。
“插入/模板/可编辑区域”，需要删除，只需要选择要删除的可编辑区域及其内容，按DELETE将其删除。
定义可选区域
该部分内容在文档中可以出现也可以不出现。
定义可编辑的可选区域
该部分内容在文档中可以出现也可以不出现。若出现可以进行内容编辑
定义重复区域
可以在基于模板的页面中复制任意次数。
应用模板到网页
只需要创建不同的网页元素，然后将模板应用到创建的网页上，这样可以提高网站制作效果。
十三．多媒体技术
多媒体的支持条件
多媒体技术：
在网页设计中，多媒体技术主要是指在网页上运用音频、视频传递信息的一种方式。
HTML5多媒体的特性
在HTML5出现之前并没有将视频和音频嵌入到页面的标准方式，多媒体内容在大多数情况下都是通过第三方插件或集成在Web浏览器的应用程序置于页面中。
运用HTML5中新增的
video标签和
audio标签可以避免这样的问题。
视频和音频编解码器
由于视频和音频的原始数据一般都比较大，如果不对其进行编码就放到互联网上，传播时会消耗大量时间，无法实现流畅的传输或播放。
通过视频和音频编解码器对视频和音频文件进行压缩，就可以实现视频和音频的正常传输和播放。
视频编解码器
视频编解码器定义了多媒体数据流编码和解码的算法。其中编码器主要是对数据流进行编码操作，用于存储和传输。
音频编解码器
音频编解码器定义了音频数据流编码和解码的算法。与视频编解码器的工作原理一样，音频编码器主要用于对数据流进行编码操作，解码器主要用于对音频文件进行解码。
多媒体格式
运用HTML5的video和audio标签可以在页面中嵌入视频或音频文件，如果想要这些文件在页面中加载播放，还需要设置正确的多媒体格式。
视频格式包含视频编码、音频编码和容器格式。
音频格式是指要在计算机内播放或是处理音频文件。
支持视频和音频的浏览器
很多浏览器已经实现了对HTML5中video和audio元素的支持
嵌入视频和音频
在HTML5中，video标签用于定义播放视频文件的标准。
音视频中的source元素
虽然html5支持Ogg、MPEG4和WebM的视频格式以及Vorbis、MP3和Wav的音频格式，但各浏览器对这些格式却不完全支持
在HTML5中，运用source元素可以为video元素或audio元素提供多个备用文件。
CSS控制视频的宽高
在HTML5中，经常会通过为video元素添加宽高的方式给视频预留一定的空间，这样浏览器在加载页面时就会预先确定视频的尺寸，为其保留合适的空间，使页面的布局不产生变化。
在线咨询
