（一）初探网页结构 :
HTML（Hypertext markup language）即超文本标签语言，是用于描述网页文档的一种标记语言。一个 HTML页面由各种标签组成.
HTML的特点：
HTML 文档的结构:
1.1.1 HTML 的基本结构:
完整的 HTML 文件至少包括<html>标签、<head>标签、<title>标签和<body>标签，且这些标签式成对出现 的，起始标签为<标签名>、结束标签为</标签名>，可以在标签起始于结束之间添加内容。一个完整的标签组成一个标签元素 HTML 的基本结构分为两部，分别是头部（head）和主体（body）。
（1）<html>:标签 HTML 内容的开始和结束，页面中的所有内容都必须包含在<html>和</html>之间。
（2）<head>:标记 HTML 文件的头部，包含不再正文中显示的关键字、标题和脚本等。
（3）<title>:标记 HTML 文件的标题，打开 HTML 页面时，标题会显示在 IE9 浏览器的选项卡上。
（4）<body>:标记 HTML 文件的正文部分，所有显示在网页中的内容均包含在该标签内
注意：
HTML 标签成对出现的，<head>和</head>就是一对 HTML 标签。标签中可以嵌套另外的标签，所以<head>标签中可以嵌套<title>标签，标签名称建议使用小写字母。
1.1.2 使用记事本开发 HTML 页面 :
<html>
<head>
<title>Tzl-html 课程</title>
</head>
<body>
我制作的第一个页面。It is so cool!
</body>
</html> 保存编写的内容后，关闭“记事本”，将该文本的名称和后缀修改为 first.html。 （3）使用 IE 浏览器打开 first.html 文件
1.1.3 使用 Adobe Dreamweaver CS6 开发网站 :
（1）<! DOCTYPE >声明位于文档中最前面的位置，在<html>标签之前，此标签可告知浏览器文档使用哪种 HTML 或 xhtml 规范。 （2）<meta>标签，该标签用于描述页面的具体摘要信息，包括文档内容类型，字符编码信息，搜索关键字，网站提供的功能与服务的描述信息等。
注意：
<meta>标签描述的内容并不显示，其目的是方便浏览器或利用搜索引擎搜索，它采用“名称/值”对的方式描述摘要信息。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>工具的使用</title>
</head>
<body>
<h1>使用 DW 开发网页</h1>
<p> Adobe Dreamweaver CS6 是网页三剑客之一 </p>
</body>
</html>1.1.4 设置页面背景或背景图片 :
使用 Web 浏览器网页时，其背景为白色，如果想为背景添加好看的颜色或图片，则可以使用<body>标签的 bgcolor 属性设置背景颜色，使用 background 属性设置网页的背景图片
语法：
<body bgcolor=”背景颜色” backround=”背景图片”> „„ </body>
示例1：
<html>
<head>
<title>背景颜色设置</title>
</head>
<body bgcolor="yellow">
背景为黄色的页面。It’s so cool!
</body>
</html>示例2：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>背景图像设置</title>
</head>
<body background="spring.jpg">
21 世纪是互联网的时代，IT 行业到处是欣欣向荣的景象！
</body>
</html>文本相关的标签:
1.2.1标题标签 :
HTML 提供了六级标题，其中<h1>为最大级别、<h6>为最小级别。用户只需要定义从<h1>至<h6>中的一种，浏览器即会按级别显示标题内容。
示例：
<html>
<head>
<title>不同等级的标题</title>
</head>
<boby>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</boby>
</html>示例 1.4 在浏览上。
1.2.2字体标签 :
<font>是字体标签，用于控制网页上的文体的显示外观。字体大小、字体类型和颜色等属性均可通过<font>标签的属性来指定
示例：
<font size=“5”color=“red” face=“隶书”> 文本内容 </font>
属性 说明 size 用于设置字体的大小，取值范围为 1 至 7，默认为 3 face 用于设置字体类型，如“黑体”、“隶书”等 color 用于设置字体的颜色。可用颜色的名称，如 red 代表红色，green代表绿色。还可以 使用十六进制代表颜色值，如#FF0000 表示红#00FF00 表示绿色
字体形状标签及其作用
标签名称 说明 <i> 设置为倾斜字体 <u> 用于加下划线 <sub> 设置字体为下标 <sup> 设置字体为上标 <strong> 定义加重语气的字体 <b> 设置字体为粗体
1.2.3段落标签 :
我们使用<p>标签可以将文本内容组合为段落。段落标签中的内容会单独占一行显示，并与其他标签的内容形成一定的段落间距，还可以使用<p>的属性控制其内容显示的对齐方式等.
语法：
<p align=”对齐方式”>段落内容</p> align 表示段落的对齐方式，其取值可以为 left、right 和 center，它们分别表示段落内容居左、居右和居中。
1.2.4 换行标签 :
我们可以看到段落内容与其他内容之间是换行显示的，如果想将段落中的文本内容换行处添加 标签实现换行显示，该标签内并不需要添加内容，可以直接关闭。
注意：
在 HTML 代码中,通过回车键将代码换行后不会使页面中的显示内容换行，浏览器显示页面内容的换行是通过标签<br/>来实现的。
1.2.5 水平线标签 :
水平线标签用<hr/>表示，其作用是在页面中绘制水平线分隔线，该标签可以直接关闭。
语法：
<hr size=”高度” color=”颜色” width=”宽度” /> 其中，size 属性用于指定水平线的高度，以像素为单位；color 属性用于设置水平线的颜色；width 属性用于改变水平线的宽度，可以像素为单位，也可以使用窗口的百分比。
示例：水平金字塔
<html>
<head>
<title>标签绘制金字塔形状</title>
</head>
<body>
<h3 align="center">水平线金字塔</h3>
<hr color="#000000" width="100%"/>
<hr size = "5" color="yellow" width="50"/>
<hr size = "5" color="yellow" width="100"/>
<hr size = "6" color="yellow" width="200"/>
<hr size = "7" color="yellow" width="300"/>
<hr size = "8" color="yellow" width="400"/>
<hr size = "9" color="yellow" width="500"/>
<hr size = "10" color="yellow" width="600"/>
</body>
</html>1.2.6 HTML 文档注释和特殊字符 :
1. HTML 文档注释 在 HTML 网页中，可以使用“<！--注释内容-->”加入页面注释，注释中的内容将被浏览器忽略。
语法：
<！--注释内容-->
注意：
HTML 注释与标签的用法相同，不能交叉使用，“<!--”要与其后出现的“-->”相匹配。
HTML 实体与特殊符号
HTML实体 显示结果 描述 < < 小于号 > > 大于号 & & &符号 ® ® 己注册 © © 版权 ™ TM 商标 空格 空格符 " “ 引号
图片相关的标签:
1.3.1 图像标签的使用 :
常见的图片格式有 JPEG、GIF 和 PNG 等格式。JPEG 文件的后缀名为.jpg 或 jpeg。GIF 图片文件的后缀名为.gif，它是最多支持 256 种色彩的图像
语法：
<img src=”路径” alt=”提示信息” align=”对其方式” border=”边框大小” width=”宽度” height=”高度” />在<image>标签中，src 属性用于设置图像文件所在的位置，width 和 height 属性用于指定图像的宽度和高 度。alt 属性用于表示两种提示文字：第一种是，如果图像没有被下载，则会在图像位置上出现的提示文字；第二种是，如果图像下载完毕，将鼠标放在该图像上，在鼠标旁边出现的提示文字。img 标签的使用见示
示例：
<p>
<img src="images/iphone.jpg" alt="点击购买苹果 5 手机" width="200" height="200"/><br/>
Apple 型号: iPhone 5<br/>
手机价格区间: 4000 元以上<br/>
网络类型: GSM/WCDMA/LTE<br/>
</p>1.3.2 图像标签的属性 :
<img>标签的 src 属性用于设置图片的位置，如果 src 的路径设置错误，则会导致<img>标签引用的图片不能显示。为了避免这些错误，必须正确地引用文件路径及名称。HTML 路径有两种类型：相对路径和绝对路径
两种路径方式：
（1）相对路径：相对于页面的路径。 ①如果网页和所引用的图片在同一个目录中，则直接输入引用文件名即可 <img src=”bg.jpg”/> ②如果所要引用的图片位于网页的上一级目录中，则使用“../”符号，该符号表示当前目录的上级目录，依次类推“../../”表示当前目录的上上级目录 <img src=”../bg.jpg”/> ③如果所要引用的图片在页面的下一级目录中，则直接写目录和文件名即可 <img src=”images/bg.jpg”/> （2）绝对路径：文件所在位置的完整路径。 图片的绝对路径指的是图片所在位置的完全路径，它分为本地绝对路径和网络绝对路径。本地绝对路径是包括盘符和目录的完全路径。 那么，project.jpg 的绝对路径是“D:\project\images\product.jpg”。网络绝对路径即资源的网站，如 http://www.baidu.com/images/product.jpg
图像与文本的对齐：
<img>标签的 align 属性可用于调整图片相对于周围文本的对齐方式. align 属性的取值可为 top、bottom、middle、left 或 right，如<img align=”middle”>。当 align 取值为 top 时，图片周边的文字与图片顶端对齐；当 align 取值为 bottom 时，图片周边的文字与图片底端对齐；当 align 取值为 middle 时，图片周边的文字与图片中间对齐
示例：
<body>
联想电脑型号:Lenovo U310-ITH
<img src="images/lenovo.jpg" alt="联想电脑" align="top"/>
爆款全网最低，极致轻薄，多彩时尚，送无线鼠标。
<hr/>
联想电脑型号:Lenovo U310-ITH
<img src="images/lenovo.jpg" alt="联想电脑" align="middle"/>
爆款全网最低，极致轻薄，多彩时尚，送无线鼠标。
<hr/>
联想电脑型号:Lenovo U310-ITH
<img src="images/lenovo.jpg" alt="联想电脑" align="bottom"/>
爆款全网最低，极致轻薄，多彩时尚，送无线鼠标。
</body>1.3.3 图像与文字的滚动 :
使用<marquee>标签可以实现文字或图片的滚动特效，在页面中实现滚动特效可以吸引浏览者的注意，实现页面的滚动效果，
语法：
<marquee scrolldelay=”滚动延时” direction=”滚动方向”> 滚动文字或者图像 </marquee>
注意：
scrolldelay 表示滚动延时时间，默认值为 90ms。direction 表示滚动的方向，默认为从右向左。可以取 up、down、left、和 right 这 4 个值，
示例：
<body>
<img src="images/taobao.png" />您好，欢迎来到淘宝网！<br/>
<marquee scrolldelay="100" direction="up">
<h4><a name="digital">数码产品<a></h4>
<img src="images/d1.png"/>
<img src="images/d2.png"/>
<img src="images/d3.jpg"/>
</marquee>
</body>超链接相关的标签:
1.4 超链接标签 :
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是同一个网页中的不同位置，还可以是一个 Email 地址等。
1.4.1 页面间链接 :
语法：
<a href=”链接地址” target=”目标窗口位置”> 链接文字或图像 </a>
示例：
<p>
<a href="img.html" target="_blank">苹果手机</a>
<a href="img_align.html" target="_blank">联想电脑</a>
</p>注意：
超链接标签的属性 href 的取值为其链接页面的路径，可以使用链接页面的相对地址或绝对地址。 其地址可以是本地的，也可以是网络中的 URL 路径 http://www.baidu.com/index.html 就是一个网络 URL，而 C:\project\index.html 则是一个本地网页路径
示例：
<a href="http://www.iqiyi.com">奇艺高清</a>
<a href="http://www.tudou.com">土豆网</a>
<a href="http://tv.sohu.com">搜狐视频</a>
<a href="http://www.letv.com">乐视网</a>
<a href="http://www.kankan.com">迅雷看看</a>1.4.2 锚点链接 :
创建锚点链接的步骤：
（1）在页面中创建锚点，使用<a>标签的 name 属性创建锚点。 <a name=”锚点名称”> 内容 </a> （2）在页面中创建锚点链接，语法如：<a href=”#锚记名称”> 内容 </a>。在超链接 href 属性值中的“#”中，通知浏览器该链接将链接到页面内的某个锚记点
1.4.3 电子邮电链接 :
可以通过在超链接标签中插入 mailto:邮箱地址来实现在网页中发送电子邮件的功能
示例：
<a href="mailto:webmaster@taobao.com">站长信箱<a>(二)排列网页内容 :
列表标签:
2.1.1 无序列表 :
语法：
<ul type ="项目符号类型">
<li>列表项内容</li>
<li>列表项内容</li>
<li>列表项内容</li>
</ul>注意：
无序列表标签的 type 属性决定了列表项开始的符号，它可以取 disc（默认值，表示实心圆）、circle(空心圆环)和 square（正方形）这 3 个值
2.1.2 有序列表 :
语法：
<ol type="序号类型"> <li>列表项</li> <li>列表项</li> </ol>
注意：
有序列表项中的 type 属性决定有序列表的序号类型，它可以取 1、a、A、i 和 I 这五个值他们分别表示数字序列、小写罗马数字序列以及大写罗马数字序列
2.1.3定义列表 :
语法：
经验：
在实际应用中，定义列表还被扩展应用到图文混合的场合，将产品图片作为定义标题<dt>，文字内容作为定义描述<dd>。这种局部布局结构在商品展示中广泛使用。
表格标签:
2.2.1 表格的基本结构:
表格至少由<table>标签、<tr>标签和<td>标签这三种标签组成，否则，就不能成为完整的表格。<table>……</table>标签中包括所有表格元素，表格元素主要有行、列和单元格等。
语法：
<table> <tr> <td>第 1 行第 1 个单元格的内容</td> <td>第 1 行第 2 个单元格的内容</td> „„ </tr> <tr> <td>第 2 行第 1 个单元格的内容</td> <td>第 2 行第 2 个单元格的内容</td> „„ </tr> </table>
相关标签：
标签名称 使用说明 <table> 用于在 HTML 文档中创建表格,在表格中有多行 <tr> 用于在表格中定义表格的行,在行中有多个单元格 <td> 用于定义行中的单元格,实际也是一行中的一列 <th> 用于定义表格的标题列,该标签和<td>类似,放置于<tr>标签中
2.2.2 表格的使用:
（1）创建表格标签<table>……</table> （2）在表格标签<table>……</table>中创建行标签<tr>……</tr>,可以有多行 （3）在行标签<tr>……</tr>中创建单元格标签<td>……</td>,可以有多个单元格。 有为了显示表格的边框，通常还需要设置<table>标签的“border”属性，通过“border”属性来设置表格边 框的宽度
2.2.3 合并单元格:
语法：跨列
<table> <tr> <td colspan="所跨的列数">单元格内容</td> </tr> </table> col 为 column (列)的缩写，span 为跨度，所以 colspan 意思为跨列
示例：
<table border="1">
<tr>
<td colspan="3">
<font face="黑体" size="4">全球 IT 企业 2012 年底市值排行榜 </font>
</td>
</tr>
<tr>
<td>排名</td><td>IT 企业</td><td>市值</td>
</tr>
<tr>
<td>1</td><td>苹果</td><td>5006.1 亿美元</td>
</tr>
<tr>
<td>2</td><td>谷歌</td><td>2324.4 亿美元</td>
</tr>
<tr>
<td>3</td><td>三星</td><td>2290.7 亿美元</td>
</tr>
<tr>
<td>4</td><td>微软</td><td>2248.0 亿美元</td>
</tr>
</table>第一行的第一个单元格在水平方向上跨 3 列，因为表格总列数也是 3 列，所以第一行只需要一个单元格。
语法：跨行
<table>
<tr>
<td rowspan="所跨的行数">单元格内容</td>
</tr>
</table>row 为行的意思，rowspan 意思为跨行
经验：
根据需求合并单元格，要是每一行单元格里面有四列，第一行第一列使用了，rowspan=’2‘。那么第二行第一列的空间，就被占用了，所以第二行，就剩下三列。
2.2.4 表格的高级用法：
(1) 表格标题标签<caption>，用于描述整个表格的标题。 (2) 表格表头<th>，用于定义表格的表头，通常是表格的第一行数据，以粗体、居中的样式显示数据。 <thead>对应表格的表头部分，<tbldy>对应表格的数据主体部分，<tfoot>对应表格的底部页脚部分，各分组标签内由多行<tr>组成
<table border="1">
<caption>数码之家季度报表</caption>
<thead>
<tr>
<th>月份</th><th>收入（RMB）</th>
</tr>
</thead>
<tbody>
<tr>
<td>1 月</td><td>50000</td>
</tr>
<tr>
<td>2 月</td><td>60000</td>
</tr>
</tbody>
</tbody>
<tfoot>
<tr>
<td>平均月收入</td><td>50000</td>
</tr>
<tr>
<td>总计</td><td>150000</td>
</tr>
</tfoot>
</table>表格美化修饰与布局:
（1）表格的高度、宽度和边框。
语法：
<table width ="宽度" height= "高度" border= "边框">„„</table> 其中，表格的宽度格高度可以用像素来表示，也可以用百分比（与浏览器当前窗口相比的大小比例）来表示。表格边框的宽度只能用像素表示。
示例：
<table width = "800" height="300" border="10" bordercolor="red">（2）表格列与行的背景。
（1）表格背景:
语法：
<table bgcolor="整个表格的背景颜色" background ="表格背静图像地址"> „„ </table>
（2）行背景色：
语法：
<td bgcolor="单元格的背景色">„„</td>
（3）表格内容的对齐方式。
表格的对齐方式:
表格中的数据通常需要设置对齐方式，设置表格、行或列的对齐方式使用 align 属性，其取值可以为 right（右对齐）、center（居中）和 left（左对齐），默认为 left
（4）表格单元格的填充、间距的设置。
表格的填充与间距:
设置单元格的间距与填充使用 cellspacing 属性和 cellpadding 属性
语法：
<table cellspacing="单元格间距"cellpadding= "单元格内填充"> „„ </table> <table cellspacing="80" cellpadding="30" border="3" bordercolor="red">
div 标签和 span 标签:
div标签:
语法：
<div> 其它标签或者内容</div> <div>标签没有特定的含义，时用于组合其它 HTML 元素的容器。它是块级元素，浏览器会在块级元素的起始和结束处换行
span标签:
<span>标签也没有特定的含义，可以做文本的容器。<span>标签为行内元素，行内元素与其它行内元素并列在同一行显示，不会默认换行
（三）传递网页数据 ：
掌握表单标签的用法：
表单 ：
表单在网页开发中很常见，典型的应用场场景有以下几种： (1) 网站的登陆、注册。 (2) 网上填写订单信息。 (3) 填写调查问卷。 (4) 网上输入关键字搜索。 如图 3.1.2 所示的网页就是一个注册页面，注册表单包含了以下表单元素： (1) 文本框，常用于输入姓名、用户名和电子邮箱等。 (2) 密码框，用于输入密码，显示为代替字符，如星号（*）。 (3) 单选按钮，在多个选项中选择一个，如性别。 (4) 复选框，在多个选项中可以选择 1 个或者多个，如爱好。 (5) 下拉列表，在多个下拉列表选项中选择 1 个，如省份、月份等。 (6) 按钮，通常用于执行表单信息的提交或者是取消等功能。
表单的基本语法 :
使用<form>标签用于创建表单。在<form>标签体可以嵌入各种类型的表单元素。
语法：
<form name=”表单名字” action=”URL” method=”get/post”> 表单元素 </form>
name属性：
用于设置标识表单的名称。
action 属性:
用于设置处理表单提交数据的 URL。例如： <form action=”URL”>„„</form>
method 属性:
其值可以取 get 和 post 两种
掌握各种表单元素：
表单元素的基本格式:
除下拉列表框，多行文本域等少数表单元素外，大部分表单元素均都使用<input>标签，只是他们的属性设
置不同，统一用法如下：
<input name=”表单元素名称” type=”类型” value=”值” size=”显示宽度” maxlength=”能输入的最大字符长度” checked=”是否选中”/>
input元素的属性:
属性 说明 Type 指定表单元素的类型，可用的选项 text、password、checkbox、 radio、submit、file、hidden、image、和 button、默认 为 text name 指定表单元素的名称 value 指定表单元素的初始值 size 指定表单元素的初始宽度。如果 type 为 text 或 password,则表 单元素的大小以字符为单位；对于其他输入类型，宽度以像素为单位 maxlength 指定可以在 text 或 password 元素中输入的最大字符串，默 认无限制 checked 此属性只有一个值，为“checked”,表示选中状态，如果不选中， 则无须添加此属性 readonly 当文本框的标签的 readonly 属性指定为“readonly”时，文本 框中的值不允许更改
文本框 :
表单中最常用的输入元素就是文本框（text）,提供给用户输入的单行文本信息，如用户名的输入
示例：
姓名：<input type =”text” name=”isername” value=”jack” readonly =”readonly” size=”20”/><br/>
邮箱：<input type=”text” name=”username” value=”xxx@/>密码框 :
将表单元素的 type 属性设置为“password”就可以创建一个密码框，在密码框中输入的字符均以“.”显示，可以提高数据的安全性。
示例：
姓名：<input type =”text” name=”username” size=”20”/><br/>
密码：<input type=”password” name=”pwd”/><br/>单选按钮:
单选按钮用于一组相互排斥的选项，组中的每个选项应具有相同的名称(name),以确保用户只能选择一个选项，单选按钮对应的 type 属性为“radio”。
示例：
性别：<input type=”radio” name=”sex” value=”男” checked=”checked” />男
<input type=”radio” name=”sex” value=”女”/>女复选按钮 :
复选按钮用于选择多个选项，将 input 的 type 属性设置为“checkbox”就可以创建一个复选框。
示例：
<input type=”checkbox” name=”hobby” value=”篮球” checked=”checked”/>
篮球
<input type=”checkbox” name=”hobby” value=”足球”/>足球
<input type=”checkbox” name=”hobby” value=”羽毛球”/> 羽毛球
<input type=”checkbox” name=”hobby” value=”唱歌” />唱歌文件域 :
文件域用于上传文件，使用文件域表单元素只需要 type 属性设置为“file”即可
<form name=”myform” action =”” method=”post”>
照片：<input type=”file” name=”photo”/><br/>
</form>下拉列表框 :
它是通过<option>标签来实现的，<select>标签用于显示可供用户选择的下拉列表，每个选项用一个<option>标签标示，<select>标签必须包含至少一个<option>标签
语法：
<select name=”指定列表的名称”size=”行数”>
<option value=”可选择的值” selected=“selected”>显示项的内容</option>
<option value=“可选择的值”>显示项的内容</option>
„„
</select>多行文本域 :
多行文本域用于显示或输入两行或两行以上的文本，它使用的标签是<textarea>
语法：
<textarea name=”指定名称” cols=”列数” rows=”行数”> 文本域的内容 </textarea> 其中，cols 用于来指
提交、重置与普通按钮 :
如果要禁用，则使用 disabled 属性设置其取值为“disabled”即可。
语法：
<input type=”submit” value=”提交按钮的显示值” name=”名称”/>
<input type=”reset” value=”重置按钮的显示值” name=”名称”/>
<input type=”button” value=”普通按钮的显示值” name=”名称”/>理解 get 和 post 的区别：
get和post的区别：
①安全性：get提交信息，会出现在地址栏，post不会在地址栏，中出现，所以，post比get安全。 ②提交的长度：使用 get 方式提交的数据有长度限制，使用 post 方式提交的数据没有长度限制，所以当使用表单提交的数据比较大时，建议使用 post 方式
示例：
<form action=”login_success.html” method=”get”>(四)框架组合网页:
框架结构介绍：
使用内嵌框架可以在一个页面中嵌入另一个页面，这样可以实现重用某个页面的内容
框架集：
（1）框架（frame），是一个网页窗口的区域，该区域对应一个网页文件，次网页文件独立于其他区域的内 容。 （2）框架集（frameset）是一个网页文件，它将一个窗口通过横向和纵向的方式分隔成多个框架，每个框架中要显示的均为不同的网页文件。
语法：
<frameset cols =”25%,50%,*” rows=”50%,*” border=”5”> <frame src=”url” name=”名称”> „„ </frameset> *表示剩余%的全部 < frameset >标签的 cols 属性表示将页面横向分隔为几列 < frameset >标签的 rols 属性表示将页面纵向分隔为几行
框架的使用 ：
（1）按行组合框架，是将一个框架集页面按照行来进行分隔，每个行对应一个框架。 （2）按列组合框架，是将一个框架集页面按照列来进行分隔，每一个列对应一个框架。 （3）行列混合组合框架，是将一个框架页面按照行和列混合分隔，每个分隔的区域对应一个框架。
按行组合框架:
<html>
<head> <title>按行划分的框架</title> </head>
<frameset rows="25%，50%，*" border="5" bordercolor="red">
<frame src="top.html" name="topFrame"/>
<frame src="mid.html" name="midFrame"/>
<frame src="bot.html" name="botFrame"/>
</frameset>
</html>注意：
在使用框架的页面中，< frameset >标签和<body>标签不能同时使用，所以需要使用< frameset >代替页面中的<body>标签。
按框架组合框架:
示例：
<html>
<head><title>按列划分的框架</title> </head>
<frameset cols="25%,50%,*" border="5" bordercolor="red">
<frame src="top.html" name="topFrame"/>
<frame src="mid.html" name="midFrame"/>
<frame src="bot.html" name="botFrame"/>
</frameset>
</html>行列混合组合框架:
<html>
<head> <title>IT 名企</title> </head>
<body>
<p><a href="http://www.baidu.com">百度</a></p>
<p><a href="http://www.qq.com" target="rightFrame">腾讯</a></p>
<p><a href="http://www.sina.com" target="rightFrame">新浪</a></p>
</body>
</html>整个页面分为上下两行，高度分别为整个窗口的25%和75%，main.html对应的关键代码如下： <frameset rows="25%,*"> <frame src="第一行的页面"/> <frame src="第二行的页面"/> </frameset> 第 2 行再次分为左右两部分，宽度分别为窗口的 20%和 80%，即需要将上述第 2 个<frame>修改为 <frameset>实现，对应的关键代码如下： <frameset rows="25%,*"> <frame src="top.html"/> <frameset cols="20%,*"> <frame src="left.html"/> <frame src="right.html"/> </frameset> </frameset>
框架<frame>的常见属性:
属性 作用 举例 border 是否显示框架周围的边框 border=”1” name 框架标识名 name=”mainframe” scrolling 是否显示滚动条 scrolling=”no” noresize 是否允许调整框架窗口的大小 noresize=” noresize”
实现窗口间的关联:
（1）在框架页面中，为右侧的框架页面添加“name”属性标识右侧的框架，关键代码如下： <frame src="right.html" name="rightFrame"/> （2）在左侧框架对应的页面中，设置超链接的“target”属性，设置打开的目标窗口，关键代码为： <p> <a herf=”http://www.baidu.com” target=”rightFrame”>百度</a> </p> <p> <a herf=”http://www.baidu.com” target=”rightFrame”>腾讯</a></p> <p> <a herf=”http://www.baidu.com” target=”rightFrame”>新浪/a></p>
超链接 target 属性的取值:
属性值 含义 _blank 在新窗口中打开链接 _self 在链接所在页面的自身窗口中打开链接 框架窗口名 在指定窗口的框架窗口中打开链接，即框架中name属性的取值 _parent 在父框架中打开链接，如果不是框架页面，则含义_self _top 在顶级窗口即整个浏览器窗口中打开链接
内嵌框架：
<iframe>的使用：
<iframe scr=”页面地址” name=”框架名” frameborder=”边框” scrolling=”是否出现滚动条”></iframe>
示例：
<body>
<iframe src="http://www.baidu.com" width="700px" height="700px" frameborder="1"
scrolling="yes">
</iframe>
<iframe src="http://www.soso.com" width="600px" height="700px" frameborder="1"
scrolling="no">
</iframe>
</body>超链接与内嵌框架关联 :
首先需要为内框架添加 name 属性，通过 name 属性标识内嵌框架；然后通过设置超链接的 target 属性设置内嵌框架的名称，所链接的页面将会在所设置的内嵌框架中打开
(五)CSS 样式基础 :
CSS 是 Cascading Style Sheets 的缩写，通常翻译为层叠样式表，使用样式表可以修饰美化网页内容。
语法：
<style type="text/css">
选择器 {
属性 1：属性值 1;
属性 2：属性值 2;
„„
}
</style>
经验：
（1）虽然 CSS 代码不区分大小写，但推荐全用小写。 （2）每条样式规则用分号（；）隔开，通常写为多行，简单的规则也可以合并为一行。 （3）当 CSS 代码较多时，可以使用“/*... ...*/”添加必要的注释，增加代码的可读性。
标签选择器:
语法：
<style type="text/css">
标签名 {
属性 1：属性值 1;
„„
}
</style>
类选择器 :
<style type="text/css">
.类名 {
属性 1：属性值 1;
„„
}
</style>
ID 选择器 :
ID 属性作为 HTML 元素的唯一标识，要求页面内不能有重复的 ID 标识属性
<style type="text/css">
#ID 标识名 {
属性 1：属性值 1;
„„
}
</style>
注意：
CSS 中规定的优先级规则为：ID 选择器>类选择器>标签选择器。如果优先 级相同，则 CSS 会采用就近原则来使用样式
常用的文本属性 :
属性名 含义 应用场景 line-height 设置行高（即行间距），常用取值为 25px、28px 布局多行文本 text-align 设置对齐 方式，常用的取值为 left、right、center 各种元素对齐 letter-spacing 设置字符间距，常用的取值为 3px、8px 加大字符间间距 text-decoration 设置文本修饰，常用的取值为 underline（下划线）、none 加下划线、中划线等
常用的字体属性 :
属性名 含义 举例 font 设置字体的所有样式属性 font：bold 12px 宋体 font-family 定义字体类型 font-family：宋体 font-size 定义字体的大小 font-size：12px font-weight 定义字体的粗细 font-weight：bold color 字体颜色
提示：
①多个选择器用空格分隔则表示上下级元素，
例如，ul li a {color:red},表示<ul>标签的<li>标签下的<a>标
签的字体设置为红色
②多个选择器用逗号分隔，表示多个选择器共用一套样式规则，即“多个元素均采用这种样式”，也称为组选择器或群选择器。
body，div，p {font-size：12px }，表示<body>标签、<div>标签和<p>标签中的字体大小均为 12p
说明：
（1）每个 HTML 标记均可看作一个盒子。 （2）每个盒子都有边界、边框、填充、宽度和高度五个属性。 （3）盒子的 margin、padding 和 border 属性均包括四个部分：上（top）、右（right）、下（bottom）、 左（left）。这四部分可同时设置，也可分别设置。 （4）盒子内容的大小可以通过宽度（width）和（height）进行设置。
盒子模型常见的属性：
类别 属性 说明 边界属性（外边距） Margin-top 设置元素上方的外边距，取值一般为像素，如 margin-top:20px; Margin-right 设置元素右方的外边距 Margin-bottom 设置元素下方的外边距 Margin-left 同时设置左方的外边距 margin 设置元素上、右、下、左外边距的值 边框属性 Border-style 设置边框样式，取值有 none 无边框、solid 实线以及 dashed 虚线 Border-width 设置边框宽度 Border-color 设置边框颜色，如 Border-color:red;或 Border-color:#CCCCCC; Border 同时设置上、右、下、左边框的值 填充属性（内边距） Padding-top 设置元素上方的内边距，取值一般为像素，如 padding-top:10px; Padding- right 设置元素右方的内边距 Padding-bottom 设置元素下方的内边距 Padding-left 同时设置左方的内边距 padding 设置元素上、右、下、左内边距的值 内容属性 Width 元素中内容所占宽度，取值一般为像素，如 Width:1oopx; height 元素中内容所占高度
技巧：
①当 margin、padding 和 Border 分别设置 4 个方向 的值时，取值的顺序必须按顺时针方向排列，即上、右、下、左，值之间用空格隔开 ②如果同时设置两个值时，则前面的值表示上下的取值，后面的值 表示的取值，值之间用空格隔开
border（边框） ：
元素的边框（border）是围绕元素内容和内边距的一条或多条线，border 属性允许开发者规定元素边框的样式、宽度和颜色
padding（填充） :
元素的填充也称为内边距，它是指元素内容与边框之间的距离，填充分为上、下、左、右四个方向
margin（边界） :
边界是指页面中元素与元素之间的间隔，margin 也分为 上、下、左、右四个方向
提醒：
在设置 margin 时，两个元素的上下边界都设置了 margin 值，则取上边距或下边距中的较大值为两个元素的上下间隔。如果是左右边界，则取两个元素左右边界 margin 值得和为最终两个元素的间隔。
width 和 height :
width 和 height 属性分别设置元素内容的宽度和高度，默认情况下只有块级元素才能通过设置width和height来改变大小。行内元素的宽度与高度由内容自身的大小来决定，设置width和height对行内显示的元素没有作用（除非行内元素以块级方式显示）
提示：
元素在浏览器中显示的实际的宽度=元素的宽度（width）+左填充（padding-left）+右填充（padding-right）+左边框（border-width）+右边框（border-width）。高度的计算与宽度类似。
背景属性 :
背景属性 含义 background 简写属性，用于将背景属性设置在一个声明中 background-color 设置背景颜色 background-image 设置背景图片 background-repeat 设置背景的平铺方式 background-position 设置背景出现的初始位置
（1） 背景颜色{ Background-color ：颜色}。
（2） 背景图片{ Background-image ：url(图片文件路径)|none}。
（3） 背景重复{ Background-repeat ：Inherit|no-repeat|repeat-x|repeat-y}。
（4） 背景定位{ Background-position ：数值|top|bottom|left|right|center}。
（5） 背景样式{ Background：背景颜色|背景图片|背景重复|背景定位}
样式使用分类:
行内样式表 :
行内样式使用元素标签的 style 属性定义
语法：
<标签名 style=”样式属性：属性值；”>„„.</标签名>
示例：
<p style="color:red;font-size:30px;font-family:黑体;">使用行内样式的段落！
</p>
<p>没有使用行内样式的段落！</p>内嵌样式表 :
内嵌样式表是写在<head>与</head>标签中的
语法：
<head>
<style type=”text/css”>
选择符 {样式属性：属性值;......}
选择符 {样式属性：属性值;......}
......
</style>
</head>
外部样式表 :
有两种使用方式，一种为链接外部样式表，另一种为导入样式表
链接外部样式表:
<head>
<link rel=”stylesheet” type=”text/css” href=” newstype.css”>
</head>
导入样式表:
<head>
<style type="text/css">
@import "css/newstyle.css";
</style>
</head>注意：
当三中样式使用方法作用于同一个标签时，样式规则的优先级别：行内样式表>内嵌样式表>外部样式表。
(六)网页布局设置:
理解标准文档流：
标准文档流 :
元素按照从左至右、自上而下的顺序排列
在标准文档流中，如果想改变块级元素与行内元素的默认显示方式，可以通过 display 属性来更该。display采用的取值有：bolck、inline 和 none；当 display 取值为 block 时，行内元素将按块级来显示，即每个元素占一行，还可以设置元素的 width 和 height；当 display 取值为 inline 时，块级标签会失去块级显示的特性，变为与行内元素相同，显示在一行且从左至右排列，同时也不能设置 width 和 height，其宽度与高度由自身的内容来决定；当 display 取值为 none 时，该元素不会显示在网页中
掌握盒子的定位属性：
盒子的定位:
（1）static：静态定位，它是默认的属性值，取该值的元素按照标准文档流进行布局排列。 （2）relative：相对定位，使用相对定位的元素以标准文档流为基础，元素可以在它原来的位置上进行偏移，该元素的偏移是显示上的偏移，但在文档流中的位置不会变化。 （3）absolute：绝对定位，绝对定位的元素会脱离标准文档流，对其后的其他元素没有影响，它可以以界面左上角为基准，定位至页面的任何地方。 （4）fixed：固定定位，它与绝对定位类似，只是其以浏览器窗口为基准进行定位，即当拖动浏览器窗口的滚动条时，他依然保持位置不变
注意：
绝对定以页面为参照，拖动滚动条时，绝对定位的元素会随页面的移动而移动。固定定位以浏览器窗口为 参照，拖动滚动条时，固定定位的元素与浏览器窗口相对位置保持不变。
掌握盒子的浮动属性：
在标准文档流中，如果想让块级元素在一行上从左至右的排列，则可以通过display属性取值为，inline，inline属性值可以将块级标签设置为行显示，块级标签就在同一行了。但是块级标签设置完inline后，元素就不能通过设置宽和高度改变元素的大小了，其宽度和高度由其内容绝定。
盒子的浮动是通过float属性来完成的。 属性取值：none，left，right。 none为不浮动，left为左浮动，元素会脱离标准文档流，不占文档流的位置空间。right为右浮动，元素也会脱离标准文档流。
处理浮动塌陷：
浮动可以使多个块级元素停靠到同一行，如果一个元素 的高度为自适且该元素内的所有子元素均为浮动元素，此时会出现浮动塌陷，导致元素的高度变为 0px。 通过clear属性，清除浮动，left清除左浮动，right清除又浮动，both清除两边的浮动，none不清楚浮动。
（七）css样式表进阶：
复合选择器：
交集选择器：
交集选择器由两个选择器直接亲连接构成的，结果是选中两者各自元素访问的交集。第一个必须是标签选择器，第二个必须是类选择器，或者ID选择器。两个选择器之间，不能有空格，必须连续写代码。
p.red {
color:red;
font-size:23px;
}“p.red”即为交集选择器，该选择器的范围是选中<p>标签中的 class 属性值为“red”的所有元素。
并集选择器：
其选择范围是各选择器范围的并集，任何形式的选择器均可作为并集选择器的一部分，使用并集选择器时，各选择器用逗号连接。
p,.red,#header {
color:red;
font-size:12px;
}可以设置所有的<p>标签、class 属性值为“red”的标签以及 ID 为“header”的标签的样式。
后代选择器：
后代选择器，也称包含选择器。主要用于选择元素的后代元素。所谓后代元素即该标签内的元素，我哦们也经常称外层的标签为父标签，内层的标签为子标签。
#header ul li a {
color:blue;
text-decoration:none;
}特殊选择器：
语法：
标签名：伪装名{
属性:属性值;
}
①a:link a:link{color:#999;} 未单击访问时的超链接样式。
②a:visited a:visited{color:#333;} 单击访问后的超链接样式。
③ a:hover a:hover{color:#f60;} 鼠标悬浮在超链接上的样式。
④a:active a:active{color:#999;} 鼠标单击为释放的超链接样式。css特性：
继承性：
样式的继承性是指后代元素（子元素），拥有父类元素的部分样式风格。如字体，颜色等样式，并可以在父元素样式风格的基础上加以修改，产生自己独特的风格。
层叠性：
层叠性是指，当有多个选择器都作用于同一元素时，即多个选择器中的样式发生重叠，css会对其进行处理。
处理原则：
①多个选择器定义的样式规则不发生冲突，则元素将应用所有选择器定义的样式。 ②多个选择器定义的样式规则发生了冲突，则 CSS 按照选择器的优先级来处理。优先级从高到低为: 行内样式>ID 样式> 类样式>标签样式。其总原则是: 越特殊的样式，优先级越高。
常见样式属性：
文本属性：
属性 描述 color 设置文本颜色 letter-spacing 设置字体间距 text-align 设置文版的水平对齐方式 text-decoration 设置文本的装饰效果 line-height 设置行高
列表属性：
属性 描述 list-style 设置列表的所有属性 list-style-image 将图像设置为列表项标记 list-style-type 设置列表项标记的类型
尺寸属性：
属性 描述 width 设置元素内容的宽度 height 设置元素内容的高度
定位属性：
属性 描述 position 设置元素内容的定位 float 设置元素的浮动 clear 设置元素那一侧，不允许有其他浮动元素。 display 设置元素的显示类型 vertical-align 设置元素的垂直对齐方式。 left 设置元素左边框边界与包含块左边界之间的偏移 right 设置元素右边框边界与包含块右边界之间的偏移 bottom 设置元素下边框边界与包含块下边界之间的偏移 top 设置元素上边框边界与包含块上边界之间的偏移 overflow 设置内容溢出元素边框时的处理方式 z-index 设置元素的堆叠顺序
盒子属性：
属性 描述 margin 同时设置上、右、下、左外边距的值 margin-top 设置元素上方的外边距 margin-right 设置元素右方的外边距 margin-bottom 设置元素下方的外边距 margin-left 设置元素左方的外边距 border 同时设置上、右、下、左边框的值 border-style 设置边框的样式，取值有 none 无边框、solid 实线以及 dashed 虚线 border-width 设置边框的宽度 border-color 设置边框的颜色 padding 同时设置上、右、下、左内边距的值 padding-top 设置元素上方的内边距 padding-right 设置元素右下方的内边距 padding-bottom 设置元素下下方的内边距 padding-left 设置元素左下方的内边距
背景属性：
属性 描述 background 设置背景的所有属性 background-color 设置背景的颜色 background-image 设置背景图像 background-position 设置背景图像的开始位置 background-repeat 设置背景图像如何重复展开
354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
