一、互联网基本概念
1、关于WWW：
1）WWW是World Wide Web的缩写，常翻译为 “万维网” 、 “环球信息网”等，简称为Web、 WWW、3W、W3等。
2）它分为Web客户端和Web服务器程序。
3）3W可以让Web客户端（一般为浏览器）访问 浏览Web服务器上的页面。
4）Web中的每个页面是一个由许多互相链接的超文本组成的系统，通过互联网访问。
6）在这个系统中，每个有用的事物，称为资源，这个资源用一个全局的“统一资源定位符” （URL）来标识。
7） Uniform Resource Locator：统一资源定 位符，简称为URL或地址，用来标记互联网上 每个文件的唯一地址。
8）这些资源通过 http 超文本传输协议,即 Hypertext Transfer Protocol传送给用户， 而后者通过点击链接来获得资源。
9）万维网并不等同互联网，万维网只是互联 网所能提供的一项服务而已。
2、关于W3C：
1） World Wide Web Consortium，即万维网联盟，又叫W3C理事会，创建于1994年。
2）它是Web技术领域最具权威和影响力的国际中立性技术标准机构。
3）到目前为止，W3C已发布了200多项影响深 远的Web技术标准及实施指南，
4）包括为业界采用的超文本标记语言（HTML） 和可扩展标记语言（XML）及帮助残障人士有效获得Web内容的信息无障碍指南（WCAG）等。
3、关于Web
1）Web本意为蜘蛛网或网，在网页设计中称为 网页，多用于互联网的技术领域。
2）Web表现为四种形式，即：
超文本（hypertext）
超媒体（hypermedia）
超链接（hyperlink）
超文本传输协议（http）。
二、与网页设计相关的几个概念
1、什么是超文本（hypertext）
1）超文本是一种用户接口方式，用以显示文本 及与文本相关的内容。
2）其中的文字包含有可以链接到其他字段或者文档的超文本链接。
3）并且允许从当前阅读位置直接切换到超文本链接所指向的文字。
2、什么是超媒体（hypermedia）
1）超媒体是超文本（hypertext）和多媒体在 信息浏览环境下的结合。超级媒体的简称。 2）用户不仅能从一个文本跳到另一个文本，而 且可以激活一段声音，显示一个图形，甚至可 以播放一段动画。
3、超文本传输协议（HTTP）HyperText Transfer Protocol
超文本在互联网上的传输协 议。
4、什么是超链接（hyperlink）
1）即超级链接，是指从一个网页指向一个目标 的连接关系。
2）这个目标： 可以是另一个网页； 可以是相同网页上的不同位置； 可以是一个图片； 可以是一个电子邮件地址； 可以是一个文件； 可以是一个应用程序。
综上所述：
1）Internet采用超文本和超媒体的信息组织方 式，遵从超文本传输协议，将信息的链接扩展 到整个Internet上。
2）Web就是一种超文本信息系统，Web的一个主 要的概念就是超文本链接。
3）它使得文本不再像一本死书一样，而是可以 从一处跳到另一处，并从中获取更多的信息。
4）甚至还可以转到别的主题上，只要点一下这 个主题，即可跳转到包含这一主题的文档上。
5）正是以上的这种多样性连接，就象网一样的 相互存在，所以把它称为Web。
三、互联网技术发展历程：
1、以web1.0为主的网络阶段，主流技术是HTML和CSS；
1）Web1.0时代是一个群雄逐鹿网络的时代，表 现在技术创新主导模式的动态网站。网景 公司 Netscape研发出了第一个大规模商用的浏览器， Yahoo推出了互联网黄页， 谷歌Google后来居 上，推出了大受欢迎的搜索服务。
2）标准通用标记语言：Standard Generalized Markup language（SGM），是一种定义电子文 档结构和描述其内容的国际标准语言。
3）主流技术是在SGM基础上发展而来的超文本 标记语言HTML和层叠样式表CSS的最初版本。
2、以web2.0为主的Ajax应用阶段，主流技术是JavaScript/DOM/异步数据请求；
1）用户参与网站内容制造。如微博、相册等， 更加注重交互性，Web1.0是“阅读式互联网” ， Web2.0是“可写可读互联网” 。
2）Web2.0采用AJAX技术，即Asynchronous Javascript And XML（异步JavaScript和XML）， 是一种创建交互式网页应用的网页开发技术。
3）AJAX用于创建快速动态网页，通过少量数据交换，可实现网页异步更新。而传统网页不是更新，必须重载整个网页页面。
4）JavaScript：是一种属于网络的脚本语言, 广泛用于Web应用开发。
5）脚本语言：常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。 6）通常JavaScript脚本以JS文件形式嵌入HTML 中来实现交互行为。
7）JavaScript是一种脚本语言，即代码不进行预编译，通常是解释运行而非编译。
8）JavaScript脚本具有跨平台特性，在绝大多 数浏览器的支持下，可以在多种平台下运行 （如Windows、Linux、Mac、Android、iOS等）。
3、HTML5+CSS3阶段。
1）2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，HTML5.0标准规范制定完成。
2）CSS：Cascading Style Sheets层叠样式表， 是一种用来表现HTML等文件样式的计算机语言。
3）CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
4）CSS 能够对网页中元素位置的排版进行像素级精确控制，几乎支持所有字体字号。
5）CSS当前最优版本为3.0。
四、网页常用设计工具：
1、HTML：
HTML超文本标记语言： HyperText Markup Languag
1）超文本：就是指页面内可以包含图片、链接， 甚至音乐、程序等非文字元素。
2）结构：包括“头”部分（Head）和“主体” 部分（Body），其中“头”部提供关于网页的 信息， “主体”部分提供网页的具体内容。
3）页面：Web上超媒体文档称为页面（page）。 放置开始点的页面称首页或主页（Homepage）， 主页中包括指向其他页面和节点的指针（超级 链接URL），通过点击便可方便地获取新的网页。
4）网站：一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言 （HTML）是为网页创建和浏览信息而提供的一 种标记语言。
5）网页本质：就是HTML结合使用其他的Web技 术（如：脚本语言、公共网关接口、组件等）， 可以创造出功能强大的网页。
6）综上，超文本标记语言HTML是万维网（Web） 编程的基础，也就是说万维网是建立在超文本 基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
2、XML：
XML可扩展标记语言：Extensible Markup Language，
1）和HTML一样，都是标准通用标记语言（SGM） 的子集，1998年2月，W3C正式批准。 2）可扩展标记语言可以对文档和数据进行结构化处理，能够在网页之间进行数据交换，实现 动态内容生成、企业集成和应用开发，例如电 子商务交易等。
3）XML被设计用来传输和存储数据，而HTML被 设计用来显示数据。
五、HTML基础标签：
1、HTML是用来描述网页的一种语言。
1）HTML 不是一种编程语言，而是一种标记语言；
2）标记语言使用一套标记标签来描述网 页。
2、标签
1）标签由尖括号包围的关键词，比如；
2）标签通常是成对出现的，比如<p>和</p>;
3）标签对中的第一个标签是开始标签，第二个 标签是结束标签；
4）也称为开放标签和闭合标签。
5）标签一般使用小写字母。
3、<html>标签：
1）此标签告知浏览器自身是一个 HTML 文档。
2) <html>与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。3)文档的头部由 <head> 标签定义，而主体由<body> 标签定义
4、<head>标签
1）<head>标签定义文档头部，是个容器。
2）<head>中的元素可以引用脚本、指示浏览器 在哪里找到样式表、提供元信息等等。
3）文档的头部描述了文档的各种属性和信息， 包括文档的标题、在 Web 中的位置以及和其他 文档的关系等。
4）<head>标签放在文档开始处，紧跟<html>后<body>标签之前。
5、<titile>标签：
1)<title>定义文档标题。在<head></head>之间。
2)浏览器把它的内容显示在窗口的标题栏上。
3) 是 <head> 标签中唯一要求包含的东西。
6、<body>标签:
1)<body>定义文档的主体
2)<body>包含文档的所有内容
3)用style属性改变标签颜色。
background-color背景色，color前景色4)颜色表示法:基本颜色: blue蓝 yellow黄;
三原色: #FFFFFF共6位16进制，前两位红，中两位绿，后两位蓝，范围从00到FF。
如#OOFFOO绿，#CCDF2A自定义颜色。
7、<h>标签：
1）网页中的标题用<h1>- <h6> 标签定义
2) <h1> 最大标题，<h6> 最小标题。
3）浏览器自动在标题前后添加空行。
4）搜索引擎将使用标题编制索引。应该将 h1 用作主标题 (最重要的)，其后是h2 (次重要的)，再其次是 h3，以此类推。
8、对齐方式: style属性text-align:
1) left: 左对齐，为默认方式。
2）right: 右对齐。
3）center: 居中对齐。
4）justify: 拉伸对齐。
9、<hr/>标签:
1）<hr/>标签在 HTML 页面中创建水平线
2）可用于分隔内容。
3）用来分隔文章中的小节4) 此标签为单标签，不成对
10、<p>标签:
1）用于显示一个段落
2) 浏览器会自动地在段落的前后添加空行
3)多余的空格和空行会被去掉，只显示一个空格。
4）段落的首行缩进使用style属性，值为:text-indent，单位为n个字符，如: 两个字符: 2em。
<html>
<body>
<h1>中华人民共和国合同法</h1>
<p style=“text-indent:2em”>中华人民共和国合同法中华
人民共和国合同法中华人民共和国合同法中华人民共和
国合同法中华人民共和国合同法中华人民共和国合同法
中华人民共和国合同法中华人民共和国合同法中华人民
共和国合同法中华人民共和国合同法。</p>
</body>
</html>11、<br/>标签:
1) 添加一个换行。
2) 单标签。
<html>
<head>
<title>李白诗一首</title>
</head>
<body bgcolor="#cccccc">
<div style="text-align:center">
<h3 style="color:yellow">早发白帝城</h3>
<h6>李白</h6>
<p style="color:blue">
朝辞白帝彩云间，<br/>
千里江陵一日还。<br/>
两岸猿声啼不住，<br/>
轻舟已过万重山。<br/>
</p>
</div>
<hr/>
</body></html>六、HTML文本格式化
1、使用标签的style属性来改变文本的格式；
2、style的几个常用参数:
background-color: 设置背景色
color: 设置字体颜色;
font-family:设置字体;f
ont-size:设置字号;
3、常作用于<h>和<p>标签:
4、格式:(多个参数用分号隔开)
style=“font-family:黑体;color:blue”
5、常用字体:包括中文字体和英文字体;
6、字号表示方法: 用px或者百分比来设置:
7、对齐方式:使用text-align参数
8、常用颜色: aqua、 black、 blue、fuchsia、 graygreen、 lime、 maroon、 navy、 olive、 purple、 redsilver、 teal、 white、 yellow;
9、也可以使用16进制颜色值:如: #000000代表黑色，#FFFFOO代表黄色#FFFFFF代表白色，#C41A6D6为自定义颜色等
示例：
<html>
<body style=“background-color:PowderBlue”>
<h1 style=“font-family:黑体;color:yellow;textalign:center;font-size:500%”>早发白帝城</h1>
<p style="font-family:华文琥珀;font-size:36px;color:blue;text-align:center">
朝辞白帝彩云间， <br/>
千里江陵一日还。<br/>
两岸猿声啼不住，<br/>
轻舟已过万重山。</p>
</body>
</html>七、格式化标签：
1、<b>粗体文字；
2、<strong>加重语气文字；
3、<i>斜体文字；
4、<em>着重文字；
5、<u>或<ins>下划线；
6、<s>
或<del>删除线；7、<t t>等宽字体；
8、<big>放大一号；
9、<small>缩小一号文字；
10、<sup>上标文字；
11、<sub>下标文字；
示例：
<html>
<body>
<h1>满江红</h1>
<p><tt>靖康耻，犹未雪；</tt><br/>
臣子恨，<big>何时灭。</big><br/>
驾长车，<small>踏破贺兰山缺。</small><br/>
壮志饥餐<sup>胡虏肉</sup>，<br/>
笑谈渴饮<sub>匈奴血</sub>。<br/>
待从头、<big>收拾<big>旧山河，</big></big><br/>
朝<small>天<small>阙。</small></small><br/></p>
</body>
</html>1、<pre>标签
1、<pre>元素可定义预格式化的文本。
2、元素中的文本会保留空格和换行符，会呈现 为等宽字体。
3、常用来显示计算机的源代码。
4、<h>和<p>标签不能包含此标签中。
<html><body>
<h1>1至100的累加和</h1>
<pre>
{
sum=0;
for(int i=1;i<=100;i++)
{sum=sum+i;}
System.out.println("1到100的累加和：
"+sum);
}
</pre>
</body></html>2、<bdo>标签：
1、<bdo>改变文本的显示方向；
2、它的dir属性有两个值：ltr和rtl；
3、ltr：left to right左向右；
4、rtl：right to left右向左。
<html>
<body>
<bdo>日照香炉生紫烟</bdo>
<bdo dir=“ltr”>遥看瀑布挂前川</bdo>
<bdo dir=“rtl”>飞流直下三千尺</bdo>
</body>
</html>3、<abbr>标签：
1）<abbr>为缩写文本提供解释；
2）当指针停留在缩略关键词上，会出现提示；
3）解释内容写在它的title属性中。
<html>
<body>
<abbr title ="HyperText Markup Language">HTML</abbr>
语言是
<abbr title="World Wide Web Consortium">W3C</abbr>
根据
<abbr title="标准通用标记语言">WSG</abbr>
标准推出的语言。<br/>
<abbr title="苏维埃社会主义共和国联盟">苏联</abbr>
</body>
</html>4、<address>标签：
1）定义文档或文章作者的联系信息；
2）文本为斜体，前后添加空行。
<html>
<body>
<address>
作者：张三<br/>
请访问我们的站点：<br/>
www.mdjnu.cn<br/>
文化街19号<br/>
牡丹江市 黑龙江省<br/>
中国
</address>
</body>
</html>5、<q>和<blockquote>标签:
1) <q>短的引用，一般自动加引号:
2) <blockquote>长的引用，也叫“块”引用，一般会以缩进、以块的形式显示引用内容。
<html><body>
<p>1949年10月1日，毛泽东主席在天安门城楼庄严宣
告，<q>中国人民站起来了！</q>这声音响彻云霄，不
由得让我想起了毛主席的一首词：</p>
<blockquote>
沁园春·雪<br/>作者：毛泽东<br/>北国风光，千里冰
封，万里雪飘。<br/>望长城内外，惟余莽莽；<br/>大
河上下，顿失滔滔。<br/>山舞银蛇，原驰蜡象，<br/>
欲与天公试比高。<br/>须晴日，看红装素裹，<br/>分
外妖娆。<br/>
</blockquote>
</body></html>八、超链接
1、<a>标签:
1）功能:定义一个超链接与网络上另一个文档相连、
2)开始和结束标签间的文字被作为超级链接来显示
3) 超链接可以是字，词，或是一幅图像，点击后跳转到新的文档，也可以跳转到文档中的某个部分。
4) 当鼠标指针移动到链接上时，箭头会变为小手。
5)链接使用<a>标签的href属性来定义。
示例：
<html>
<body>
<h1>牡丹江师范学院简介</h1>
<p>欢迎光临<a href=“http://www.mdjnu.cn”>牡丹江
师范学院</a>。学院始建于1958年，是黑龙江省所属
普通高等学校，是<a href=“http ://www.hlj.gov.cn”>黑
龙江省政府</a>与<a href=“http://www.mdj.gov.cn”>牡
丹江市政府</a>共建地方大学。</p>
</body>
</html>2、target属性:
1)功能:定义在何处打开新链接:
2) 提供4个属性值:
_blank: 在一个新窗口中显示:
_self: 在当前窗口显示:
_parent: 在父窗口中显示，应用在框架结构中:_top: 清除掉所有框架，显示在整个窗口中:
3) target的默认值为 self;
4)在多框架页面中，用target指显示在某个框架内。
<html>
<body>
<a href=" http://www.sohu.com" target="_blank">搜狐</a>
<a href=" http://www.mdjnu.cn" target="_self">牡师院</a>
</body>
</html>3、图像链接：
1）可以将一个图片做为超级链接点；
2）格式使用href属性，图片使用<img>标签的src属性 指定图片地址。
<html>
<body>
<a href=" http://www.mdjnu.cn" target="_blank">
<img src=
“sy.gif"></a>
</body>
</html>4、页面内的链接：书签
1）书签，也称为锚（anchor）；
2）其功能就是创建直接跳至该命名锚的链接，无需再滚动页面来寻找信息，而直接定位；
3）锚的名称自行定义，不会在页面中显示；
4）使用<a>标签的name属性定义锚（相当于地址）， 使用href属性来链接锚，用#引用；
<html><body>
<h2>数字的三种写法</h2>
<p><a href="#alb">阿拉伯写法</a></p>
<p><a href="#rmb">人民币写法</a></p>
<p><a href="#jtz">简体字写法</a></p>
<h3><a name="alb">阿拉伯写法</h3>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>
7</p><p>8</p><p>9</p><p>10</p>
<h3><a name="jtz">简体字写法</h3>
<p>一</p><p>二</p><p>三</p><p>四</p><p>五</p><p>六
</p><p>七</p><p>八</p><p>九</p><p>十</p>
<h3><a name="rmb">人民币写法</h3>
<p>壹</p><p>贰</p><p>叁</p><p>肆</p><p>伍</p><p>陆
</p><p>柒</p><p>捌</p><p>玖</p><p>拾</p>
</body></html>九、框架
1、基本概念：
1）定义：在一个窗口中显示多个页面，也就是把一 个窗口分割成若干个独立的子窗口，每个子窗口都 可以显示一个网页。
2）缺点：设计者要同时跟踪多个文档，容易出错， 另外很难将整张页面打印输出；
2、<frameset>标签:
1) 定义框架结构，即将页面分割为多个窗口;
2) 框架页面独立存在，里面没有<body>标签:
3) 通过rows和cols属性来横向和纵向分割窗口;
4) 每个具体窗口用<frame>标签来标识
<html>
<frameset cols=“10%,20%,30%,40%”>
<frame><frame><frame><frame>
</frameset>
</html>3、分割方法：
1）像素分割法：用具体像素规定窗口尺寸。 注：若尺寸不足或超出，自动按比例延伸和压缩
<html>
<frameset rows=
“200,400”>
<frame><frame>
</frameset>
</html>2）星号分割法：
不确定尺寸的窗口可用星号代替
<html>
<frameset cols="200,*,400">
<frame><frame><frame>
</frameset>
</html>3）百分比分割法：
使用百分比来设定分割比例。
<html>
<frameset cols=”30%,20%,50%">
<frame><frame><frame>
</frameset>
</html> 4）混合分割法：
可混合使用像素、星号和百分比。
<html>
<frameset cols=”30%,200,50%">
<frame><frame><frame>
</frameset>
</html>
5）纵横分割法：
将页面分割成“田”字格。
<html>
<frameset cols=”30%,70%” rows=“300,*” >
<frame><frame><frame>
<frame>
</frameset>
</html>6）不规则分割法：
子窗口中再分子窗口。
<frameset rows=”30%,50%,20%” >
<frame>
<frameset cols=”25%,50%,25%”>
<frame><frame><frame>
</frameset>
<frame>
</frameset>
</html>
4、框架结构的两个属性：
1）framespacing属性：定义边框宽度。
2）bordercolor属性：定义边框颜色。
<frameset rows="3,5,2" framespacing="10" cordercolor="red">
<frame>
<frameset cols="25%,50%,25%" bordercolor="blue">
<frame><frame><frame></frameset>
<frame>
</frameset>
</html>5、<frame>标签：
1）使用src属性定义子窗口页面，子窗口相互独立。
2）使用noresize属性使窗口尺寸不可调整。
<frameset rows="25%,75%">
<frame src="李白.html">
<frameset cols="30%,70%">
<frame src="苏轼.html" noresize="noresize">
<frameset rows="50%,50%">
<frame src="岳飞.html">
<frame src="毛主席.html">
</frameset></frameset></frameset>
</html>
分页面如下：
李白.html：
<html><h2>李白诗词</h2>
<body style=“background-color:olive”></body></html>
毛主席.html
<html><h2>毛主席诗词</h2>
<body style=“background-color:fuchsia”></body></html>
苏轼.html
<html><h2>苏轼诗词</h2>
<body style=“background-color:lime”></body></html>
岳飞.html
<html><h2>岳飞诗词</h2>
<body style="background-color:aqua“></body></html>6、导航框架：
1）左右结构，左侧显示主页面，右侧显示具体页面。
2）需要预先使用name属性设置“框架锚” 。
3）各个框架的页面之间相互独立。
下例左侧显示导航栏，显示4个诗人的链接列表，单击 链接则会在右侧显示链接内容。
导航框架页面如下：
<html>
<frameset cols=“20%,80%”>
<frame src=“主页面.html”>
<frame src=“苏轼.html” name=“frame1”>
</frameset></html>
主页面.html如下：
<a href="苏轼.html" target=
"frame1">苏轼</a></br>
<a href="李白.html" target=
"frame1">李白</a></br>
<a href="岳飞.html“ target=
"frame1">岳飞</a></br>
<a href="毛主席.html“ target=
"frame1">毛主席</a></br>
</body></html>用CSS美化后的主页面.html
<html><head><style>
a{background-color:#eee;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
border-radius: 4px 4px 0 0;}
a:hover{background-color:red}
</style>
</head><body>
<a href="苏轼.html" target=
"frame1">苏轼</a></br>
<a href="李白.html" target=
"frame1">李白</a></br>
<a href="岳飞.html“ target=
"frame1">岳飞</a></br>
<a href="毛主席.html“ target=
"frame1">毛主席</a></br>
</body></html>
8、<iframe>内联框架
1）一个页面内开一个窗口显示页面。
2）使用src属性设置显示页面。
3）使用height和width设置窗口高和宽的像素值。
4）使用frameborder设置边框宽度。(值：1/0)。
5）使用scrolling设置滚动条(值：yes/no/auto)。
6）使用align设置对齐方式(值：left/center/right)。
7）使用name设置该窗口名称
示例：内联框架1.html
<html>
<body>
<iframe src="baidu.jpg" height=“240" width="500"frameborder="0"></iframe>
<iframe src="sohu.jpg" align=“right”>
</iframe>
</body>
</html>
示例：内联框架2.html
<html>
<body>
<iframe src="毛主席.html" frameborder="1" scrolling="yes" name="iframe1"></iframe>
<p>
<a href="苏轼.html" target="iframe1">苏轼</a>
<a href="李白.html" target="iframe1">李白</a>
<a href="毛主席.html" target="iframe1">毛主席</a>
<a href="岳飞.html" target="iframe1">岳飞</a>
</p>
</body>
</html>十、头部<head>
1、基本概念:
1)此标签用于定义文档的头部，它是所有头部元素的容器;
2)下面这些标签可用在 head 部分:<base>,<link>,<meta>, <script>, <style>
2、<base>基础设置标签
1) 它的target属性指定默认的新窗口打开方式 ( blank，self等) :
2) href属性指定默认的文件目录地址
3、<link>连接外部资源:
常用于连接外部样式表
1) href:指定“连接地址”;
2) rel:指定“样式表”，一般为“stylesheet”;3) type:指定“文档类型”，一般为” text/css
注意: 本例需要建2个文件，link.html和样式1.html
示例: link.html
<html><head>
<link rel=“stylesheet” type=“text/css” href=“样式1.css”</head><body>
<h1>外部样式表“标题1”。</h1>
<p>外部样式表“段落”</p>
</body></html>样式1.css
h1 {color:red)
p {color:blue)4、<meta>提供有关页面的元信息:
如作者信息软件版本、更新频度和关键词等，供浏览器和搜索引擎使用。name是它的一个重要属性，其值有:
1) author(作者);
2) revised(修订人及时间)3) generator (创作工具) :
4) description (网页述)
5）keywords(关键字) ;
6）以上信息值由content属性提供。
示例: meta1.html
<html><head>
<meta name=“author” content=“张三”>
<meta name= "revised" content=“李四,4/5/17”>
<meta name="generator" content=“HTML5/CSS3”>
<meta name=" keywords" content=“HTML,CSS”>
<meta name="description" content=”这是个示例">
</head>
<body>
<p>本页面创作者、修订者由meat提供。</p></body></html>5、<meta>的http-equiv属性
向浏览器提供页面信息及如何打开这个页面。
1）expires（期限）设定网页的到期时间；
2）refresh（刷新）自动刷新并指向新页面；
3）content-type（字符集）设定页面使用的字符集；
4）set-cookie（cookie设定）如果网页过期，那么存 盘的cookie将被删除。
5）以上信息值由content属性提供 。
<html><head>
<meta http-equiv="expires" content="Wed,20-Jun-201722:33:00 GMT">
<meta http-equiv=“set-cookie"content="cookievalue=xxx;expires=Wednesday,20-Jun-2007
22:33:00 GMT;path=/">
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta http-equiv=“refresh" content="5;url=http://www.mdjnu.cn/">
</head><body>
<p>本页面5秒后将转至<a href="http://www.mdjnu.cn">.
..学.</a></p>
</body></html>十一、列表
1、列表的基本概念：
1）定义：将某一个项目以 条目的形式罗列出来，前 面加上符号或数字做为序 号；
2）列表分为无序列表和有序列表；
3）列表项内部可以使用段 落、换行符、图片、链接 以及其他列表（嵌套）等 等。
2、<ul>标签：
1）定义一个无序列表；
2）具体列表项使用<li>标签；
3）使用type属性定义前置标号，
其中：
disc表示实心圆点，
circle表示空心圆点，
square表示实心方块。
基本无序列表 :
<html><body>
<h3>诗人列表：</h3>
<ul type=“disc”>
<li>李白</li><li>杜甫</li></ul>
<h3>诗歌列表：</h3>
<ul type=“circle”>
<li>望庐山瀑布</li><li>枫桥夜泊</li></ul>
<h3>词人列表：</h3>
<ul type=“square”>
<li>苏轼</li><li>李煜</li></ul>
</body></html>
3、<oll>标签：
1) 定义一个有序列表:
2）具体列表项使用<li>标签
3) 使用start属性定义第一项的起始序号，使用type属性定义序号样式，共有1，a，A，i，I共五种样式，分别代表:
1一以阿拉伯数字排序,
a一以小写字母排序:
A一以大写字母排序
i一以小写罗马数字排序:
I 一以大定罗马数字排序。
基本有序列表1：
<html><body>
<h3>诗人列表：</h3>
<ol start="1">
<li>李白</li>
<li>杜甫</li>
<li>白居易</li>
</ol>
<h3>诗歌列表</h3>
<ol start= "100">
<li>望庐山瀑布</li>
<li>枫桥夜泊</li>
</ol>
</body></html>
4、<dl>标签：
1）定义一个自定义列表；
2）不仅定义一列项目，还可以对项目进行注释；
3）每个列表项用<dt>表示，注释用<dd>表示；
自定义列表： （效果见上页图）
<html><body>
<h1>送别</h1>
<dl><dt style=“font-size=120%”><b>长亭外，古道边，芳草碧连天。
</b></dt>
<dd style=“font-family=楷体”><p>本段“写景”，描写在长亭外古道边送
别的画面；</p>
<dt style=“font-size=120%”><b>晚风拂柳笛声残,夕阳山外山。</b></dt>
<dd style=“font-family=楷体”><p>本段则是抒情，抒发知交零落天涯的心
灵悲慨；</dt></p>
<dt style=“font-size=120%”><b>天之涯，地之角，知交半零落。一瓢浊酒
尽余欢，今宵别梦寒。</b></dt>
<dd style=“font-family=楷体”><p>本段从“送友离别”，而感悟到人生短
暂，犹如日落，充满着彻骨的寒意。
</dd></p></dl>
</body></html>十二、表格
1、基本概念：
1）表格由<table>标签来定义
2）<caption>和</caption>之间为表格标题，在<table>标签下，显示居中效果
3）每个表格的行由<tr>标签定义.
4）每行单元格由<td>标签定义，<th>定义表头粗体；
5）<td>和</td>之间、<td>和</td>之间为单元格数据；
6）border属性设置边框宽度，0表示没有边框；
7）bordercolor属性设置边框颜色；
8）若内容为空，最好用  占位符代替。
<html><body>
<h4>一行三列：</h4>
<table>
<tr><td>李白</td><td>杜甫</td><td>白居易</td></tr>
</table>
<h4>三行两列：</h4>
<table border=“1” bordercolor=“blue”>
<caption>诗人列表</caption>
<tr><th>古代诗人</th><th>现代诗人</th></tr>
<tr><td>李白</td><td>汪国真</td></tr>
<tr><td>杜甫</td><td></td></tr>
<tr><td> </td><td>席慕容</td></tr>
</table>
</body></html>2、表格的尺寸与对齐方式
1) 在<table>标签<th>标签<td>标签中使用
2）使用style属性的height和width值设置单元格尺寸， 使用像素px为单位，也可用百分比来表示 ；
3）左右对齐方式：
使用align属性，分别为： left（左），right（右），center（居中）；
4）垂直对齐方式：
使用valign属性，分别为： top（上），middle（中），bottom（下）， baseline（基线）；
<html><body>
<table border="1">
<tr><th style="width:150px" align="left">古代诗人</th>
<th style="width:50%" align="center">现代诗人</th>
<th style="width:200px" align="right">其它诗人</th></tr>
<tr><td style="height:50px" valign="top">李白</td>
<td valign="middle" align="center">汪国真</td>
<td valign="bottom">泰戈尔</td></tr>
<tr><td style="height:80px;font-size:200%" valign="baseline">杜甫</td>
<td valign="baseline">席慕容</td>
<td valign="baseline" style="font-size:400%">普希金</td></tr>
</table>
</body></html>3、表格的合并
1) 在表头标签<th>标签<td>标签中使用
2）使用colspan属性将若干列合并为1列；
3）使用rowspan属性将若干行合并为1行
<html><body>
<table border="1">
<caption>诗人列表</caption>
<tr> <th>外国诗人</th> <th colspan="3">中国诗人</th></tr>
<tr> <td>普希金</td> <td>李白</td> <td>杜甫</td> <td>白居易
</td></tr>
</table>
<table border="1">
<caption>诗人列表</caption>
<tr> <th>外国诗人</th> <td>普希金</td></tr>
<tr> <th rowspan="2">中国诗人</th> <td>汪国真</td></tr>
<tr> <td>席慕容</td></tr>
</table>
</body></html>4、表格边距与间距：
1）边距：即边框与内容之间的距离，用cellpadding属性 来设定，以像素为单位；
2）间距：即单元格之间的距离，用cellspacing属性来设 定，以像素为单位；
3）以上两个属性使用在<table>标签中。
<html><body>
<table border="1">
<caption>无间距</caption>
<tr> <td>李白</td> <td>白居易</td></tr>
<tr> <td>苏轼</td> <td>辛弃疾</td></tr>
</table>
<table border="1" cellpadding="10">
<caption>表格边距</caption>
<tr> <td>李白</td> <td>白居易</td></tr>
<tr> <td>苏轼</td> <td>辛弃疾</td></tr>
</table>
<table border="1" cellspacing="10">
<caption>表格间距</caption>
<tr> <td>李白</td> <td>白居易</td></tr>
<tr> <td>苏轼</td> <td>辛弃疾</td></tr>
</table></body></html>
5、表格背景：
1）颜色背景：即表格背景用颜色填充，用bgcolor属 性来设定；
2）图像背景：即表格背景用图像填充，用background 属性来设定；
3）以上两个属性使用在<table>标签中。
<html><body>
<table border="1" bgcolor="yellow">
<caption>背景为黄色</caption>
<tr> <td>李白</td><td>杜甫</td></tr>
<tr> <td>白居易</td><td>李商隐</td></tr>
</table>
<table border="1" background="sohu.jpg">
<caption>背景为图像</caption>
<tr> <td>中华人民共和国</td><td>美利坚合众国</td></tr>
<tr> <td>英国</td><td>法国</td></tr>
<tr> <td>德国</td><td>俄罗斯</td></tr>
</table>
</body></html>
6、显示/隐藏外边框：
1）使用frame属性来显示/隐藏表格外边框；
2）属性值：
box：显示外边框；
void：不显示外边框；
above：显示上部边框；
below：显示下部边框；
lhs：显示左边框；
rhs：显示右边框；
hsides：显示上下边框；
vsides：显示左右边框；
3）以上两个属性使用在<table>标签中。
<html><body>
<table frame="box"><caption>全边框</caption>
<tr><th>李白</th><th>白居易</th></tr>
<tr><td>杜甫</td><td>李商隐</td></tr></table>
<table frame="above"><caption>上边框</caption>
<tr><th>李白</th><th>白居易</th></tr>
<tr><td>杜甫</td><td>李商隐</td></tr></table>
<table frame="lhs"><caption>左边框</caption>
<tr><th>李白</th><th>白居易</th></tr>
<tr><td>杜甫</td><td>李商隐</td></tr></table>
<table frame="hsides"><caption>上下边框</caption>
<tr><th>李白</th><th>白居易</th></tr>
<tr><td>杜甫</td><td>李商隐</td></tr></table>
</body></html>
7、显示/隐藏表格内边框：
1）使用rules属性来显示/隐藏表格内边框；
2）属性值：
none：不显示内线条；
rows：显示行线条；
cols：显示列线条；
all：显示行列线条；
3）以上两个属性使用在<table>标签中。
<html><body>
<table rules="none"><caption>无线条</caption>
<tr><th>李白</th><th>白居易</th></tr>
<tr><td>杜甫</td><td>李商隐</td></tr></table>
<table rules="rows"><caption>行线条</caption>
<tr><th>李白</th><th>白居易</th></tr>
<tr><td>杜甫</td><td>李商隐</td></tr></table>
<table rules="cols"><caption>列线条</caption>
<tr><th>李白</th><th>白居易</th></tr>
<tr><td>杜甫</td><td>李商隐</td></tr></table>
<table rules="all"><caption>行列线条</caption>
<tr><th>李白</th><th>白居易</th></tr>
<tr><td>杜甫</td><td>李商隐</td></tr></table>
</body></html>8、表格内容：
单元格中的内容可以包含段落、表格 、列表、标题等。
<html><body>
<table border="1">
<caption>多种形式的表格内容</caption>
<tr><td><p>唐诗（段落）</p><p>宋词（另一个段落）</p></td>
<td>这是一个表格：
<table border="1">
<tr><td>李白</td><td>白居易</td></tr>
<tr><td>杜甫</td><td>李商隐</td></tr>
</table></td>
</tr>
<tr><td>这个单元包含一个列表：
<ul><li>李白</li><li>杜甫</li><li>白居易</li></ul></td>
<td><h2>中华人民共和国（标题）</h2></td>
</tr>
</table>
</body></html>练习题：
设计一个4*4的表格，将下列文字及代表的 颜色填充在单元格内。aqua、black、blue、fuchsia、 gray、green、lime、maroon、navy、olive、purple、 red、silver、teal、white、yellow；
<html><body>
<table border="1" style="height:300px;width:500px">
<caption>十六色背景</caption>
<tr><td bgcolor="aqua">aqua</td><td bgcolor="black">black</td>
<td bgcolor="blue">blue</td>
<td bgcolor="fuchsia">fuchsia</td></tr>
<tr><td bgcolor="gray">gray</td><td bgcolor="green">green</td>
<td bgcolor="lime">lime</td>
<td bgcolor="maroon">maroon</td></tr>
<tr><td bgcolor="navy">navy</td><td bgcolor="olive">olive</td>
<td bgcolor="purple">purple</td>
<td bgcolor="red">red</td></tr>
<tr><td bgcolor="silver">silver</td><td bgcolor="teal">teal</td>
<td bgcolor="white">white</td>
<td bgcolor="yellow">yellow</td></tr>
</table>
</body></html>十三、表单
1、基本概念：
1）表单由不同类型的输入元素，如文本框、复选框、单选按钮、提交按钮等组成，用于收集用户信息。
2）使用<form> 标签来定义表单。
3）使用<input>标签来定义输入类型，使用type属性定义样式，如：text定义文本输入框，password定义密码文本，submit定义提交按钮；
实例：
<html>
<body>
<form>
用户名:<br/> <input type="text"><br/>
密码:<br/> <input type="password"><br/><br/>
<input type="submit">
</form>
</body>
</html>2、数据传递：
1）在<form>标签中使用action属性来向指定的地址页面提交表单数据，如php ，asp，jsp等；
2）也可以使用邮件地址，将自动打开邮箱程序；
3）传递方式使用method属性，有get和post两个值，get值对数据不加密，速度较快，长度不能超过8K字符；post值则相反；
4）在<input>标签中使用name属性指定名称来保存数据；
5）在<input>标签中使用value属性显示默认数据；
实例：
示例：form2.html
<html><body>
<form action="login1.asp" method="get">
用户名:<br/>
<input type="text"><br/>
密码:<br/>
<input type="password"><br/><br/>
<input type="submit">
</form>
<form action="tomail:msyfxb333@126.com" method="post">
姓名:<br/>
<input type="text" name="xm"><br/>
年龄:<br/>
<input type="text" name="nl" value="30"><br/><br/>
<input type="submit" value="提交">
</form>
</body></html>3、几个常用属性：
1）readonly 属性规定输入字段为只读，不能修改；
2）disabled 属性规定输入字段是禁用的，不可用和不可点击的，不会被提交；
3）size 属性规定输入字段的尺寸，以字符计算；
4）maxlength 属性规定输入字段允许的最大长度。
示例：form3.html
<html><body>
<form action="">草（完成填空）<br/><br/>
<input type="text" value ="离离原上草" readonly><br/><br/>
<input type="text" value="一岁一枯荣" disabled><br/><br/>
<input type="text" size="30"><br/><br/>
<input type="text" maxlength="4"><br/>
</form>
</body></html>4、单选框与复选框
1）单选框应使用一组<input>标签，type属性值为radio，使用相同的name属性，使用checked表示该项默认选项；
2）当type属性值为checkbox，表示复选框，其它设置与单选框相同。
示例：form4.html
<html><body>
<form>
<input type="radio" name="shiren" value="李白" checked>李白
<input type="radio" name="shiren" value="杜甫">杜甫
<input type="radio" name="shiren" value="白居易">白居易
<br/><br/>
<input type="checkbox" name="nr" value="经典" checked>经典作品
<input type="checkbox" name="nr" value="生平">生平简介
<input type="checkbox" name="nr" value="轶事">奇闻轶事
<br/><br/>
<input type="submit" value="查询">
</form>
</body></html>5、按钮：
1）普通按钮：<input>中type值为button则显示为普通按钮，value值显示按钮内容，onclick值用来执行动作；
2）重置按钮：type值为reset则显示为重置按钮，会将输入的表单内容清除，恢复到初始状态；
3）图像按钮：type值为image则显示为图像按钮，用src来指定图片地址；
4）文件按钮： type值为file则显示为文件按钮，点击后出现浏览对话框，选择文件进行使用。
示例：form5.html
<html><body>
<form>
账号：<input type="text"><br/><br/>
密码：<input type="password"><br/><br/>
<input type="button" value="确定" onclick="alert('确定提交吗？')">
<input type="reset" value="重置"><br/><br/>
<input type="file"><br/>
<input type="image" src="按钮.jpg" onclick="alert('热烈欢迎')">
</form>
</body></html>6、下拉列表、文本域与表单组合框：
1）下拉列表：使用<select>和<option>标签设计一个下拉列表；
2）文本域：相当于多行文本框，定义多行输入字段，使用<textarea>标签定义；
3）表单组合框：<fieldset> 标签会将表单中的相关元素组合起来，使用<legend> 标签显示表单标题。
示例：form6.html
<html><body>
<form>
<fieldset>
<legend align="center">诗人与诗歌</legend>
诗人：
<select name="shiren">
<option value="libai">李白</option>
<option value="dufu">杜甫</option>
<option value="baijuyi">白居易</option>
</select><br><br>
诗歌：<br/>
<textarea name="message" rows="5" cols="15">
离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。
</textarea>
</fieldset>
</form>
</body></html>练习题：按下图示例设计网页。
示例：form7.html
<html><body><form>
<fieldset style=“width:400px” >
<legend>个人信息</legend><br/>
姓名：<input type=“text” name=“xm”><br/><br/>
性别：<input type=“radio” checked>男<input type=“radio”>女<br/><br/>
政治面貌：
<select>
<option value=“dangyuan”>中共党员</option>
<option value=“minzhu”>民主常派</option>
<option value=“wudangpai”>无党派人士</option>
</select><br><br>
爱好：
<input type=“checkbox”>音乐<input type=“checkbox”>舞蹈
<input type=“checkbox”>运动<input type=“checkbox”>读书
<br/><br/>
<input type=“submit” value=“提交”>
<input type=“reset”>
</fieldset>
</form></body></html>十四、媒体（图像、多媒体和滚动字幕）
1、图像
1）基本格式：通过<img>标签使用图像，使用src指定图像位置，使用alt显示替换文本；
2）对齐方式：使用align属性，bottom底部对齐（默认），middle中间对齐，top顶部对齐，left左侧对齐，right右侧对齐；
3）放大缩小：使用width和height属性确定大小；
4）使用边框：使用border确定边框宽度，默认无边框。
示例：img1.html（要先准备mouse.jpg,dt.gif文件）
<html>
<body>
<p>1、基本图像 <img src="mouse.jpg" border="1"></p>
<p>2、底对齐 <img src="dt.gif" align="bottom"> </p>
<p>3、居对齐 <img src="dt.gif" align="middle"></p>
<p>4、顶对齐 <img src="dt.gif" align="top"></p>
<p>5、左对齐 <img src="dt.gif" align="left"></p><br/><br/>
<p>6、右对齐 <img src="dt.gif" align="right"></p><br/>
<p>7、缩小<br/><img src="mouse.jpg" width="50" height="50"></p>
<p>8、放大<br/><img src="mouse.jpg" width="200" height="200"></p>
<p>9、丢失<br/><img src="mouse1.jpg" alt="这是个鼠标"></p>
</body>
</html>2、多媒体
1）概念：Web多媒体指的是音效、音乐、视频和动画，用Web播放多媒体前提是要有相应格式的播放插件。Web支持的多媒体格式有：
视频：avi,wmv,mpg,mov,rm,ram,swf,flv,mp4。
音频：mid,midi,rm,ram,wav,wma,mp3,mpga。
2）插入多媒体元素使用<embed>标签，使用src属性指定源文件，使用width和height设定尺寸；
3）播放控制：循环控制loop（true/false），自动播放autostart(true/false) ，是否隐藏hidden(true/false) ，播放器默认是自动播放；
示例：multimedia1.html（要先准备1.mp3文件）
<html>
<body>
<h1>播放MP3音频</h1>
<embed src=“1.mp3” hidden=“false" autostart=“false”
loop=“true”></embed>
</body>
</html>
示例：multimedia2.html（要先准备1.mp4文件）
<html>
<body>
<h1>播放MP4视频</h1>
<embed src=“1.mp4” autostart=“false” loop=“true”
width=“210” height=“200”></embed>
</body>
</html> 3、滚动字幕
1）概念：是指在网页中能上下或左右活动的字幕，可以是文字，也可以是图片；
2）使用<marquee>标签设置滚动字幕，将字幕内容放在它和</marquee>标签之间；
3）字幕可以使用格式化标签
示例：marquee1.html（要先准备mouse.jpg文件）
<html>
<body>
<marquee>
<h1 style="color:red">李白</h1>
<p style="font-family:华文琥珀;font-size:50px;color:blue">杜甫
</p>
<ol><b><i><li>白居易</li><li>辛弃疾</li></b></i><ol>
<img src="mouse.jpg">
</marquee>
</body>
</html>4)滚动控制：
方向：使用属性direction（left向左/right向右/up向上/down向下）；
方式：使用属性behavior（scroll循环/slide单向/alternate来回）；
示例：marquee2.html（要先准备mouse.jpg文件）
<html><body>
<marquee direction=“up” behavior=“scroll”>
<h1 style=“color:red”>李白</h1>
</marquee>
<marquee direction=“right” behavior=“slide”>
<p style=“font-family:华文琥珀;font-size:50px;color:blue”>杜甫</p>
</marquee>
<marquee direction=“down” behavior=“alternate”>
<ol><b><i><li>白居易</li><li>辛弃疾</li></i></b></ol>
</marquee>
<marquee direction="left" behavior="scroll">
<img src="mouse.jpg">
</marquee>
</body></html>5)字幕背景颜色：使用bgcolor属性；
6）滚动设置：
速度：使用scrollamount属性，数字越大越快；
次数：使用loop属性，数字为次数。
7）滚动窗口：使用width和height属性设置尺寸；
8）窗口位置：使用hspace和vspace设置窗口到左边界和上边界的像素距离。
9）鼠标效果：
onmouseout：鼠标离开时；
onmouseover：鼠标移入时。
示例：marquee3.html（要先准备dt.gif文件）
<html><body>
<marquee bgcolor="green" scrollamount="10">
<h1>李白</h1>
</marquee>
<marquee bgcolor="#823456" scrollamount="20" loop="2">
<h1>杜甫</h1>
</marquee>
<marquee bgcolor="green" width="400" height="50" hspace="470"
vspace="50">
<p>中华人民共和国</p>
</marquee>
<marquee bgcolor="green" width="400" height="50" hspace="470"
vspace="50" onmouseout="this.start()" onmouseover="this.stop()">
<image src="dt.gif">
</marquee>
</body></html>十五、CSS（1）
1、基本概念：
1）功能：Cascading Style Sheet，层叠样式表，或叫“级
联样式表”，主要用来为网页中的元素进行格式设置，
对网页进行排版和风格设计；
2）使用 CSS 同时控制多重网页的样式和布局；
3）样式通常存储在样式表中，解决内容与表现分离的问
题，极大提高工作效率，外部样式表通常存储在 CSS 文件
中，多个样式定义可层叠为一。
2、样式表分类：
1）内联样式表：写在标签之内，使用style属性，其设置仅
能影响本标签范围的内容。
示例：cs1.html
<html>
<body>
<h1 style=“font-family:宋体;color:blue”>李白</h1>
<p style=“font-family:黑体;color:red;font-size:50px">杜甫</p>
</body>
</html>
2）内部样式表：使用<style>标签，位于<head>标签内，可
影响整个文档，其设置会影响具有同等类别的所有标签。
示例：cs2.html
<html><head>
<style>
h1{font-family:宋体;
color:blue;}
p {font-family:黑体;
color:red;
font-size:50px;}
</style>
</head><body>
<h1>李白</h1>
<p>杜甫</p>
</body></html>
3）外部样式表：将标签内容放在外部CSS文本文件中：
示例：cs3.html（演示视频：03.mp4）
<html><head>
<link rel=“stylesheet” type=“text/css” href=“cs3.css”>
</head> <body>
<h1>李白</h1>
<p>杜甫</p>
</body></html>
样式表：cs3.css
h1{font-family:宋体;
color:blue;}
p {font-family:黑体;
color:red;
font-size:50px;}4）样式表的层叠：将多种样式叠加于一个元素，合而为一。如属性发生冲突，优先级：内联->内部->外部。
下例即是两个外部样式表的层叠。对h1叠加下划线，对p叠加斜体。
示例：cs3.html
<html><head>
<link rel=“stylesheet” type=“text/css” href=“cs3.css”>
<link rel=“stylesheet” type=“text/css” href=“cs31.css”>
</head>
<body>
<h1>李白</h1>
<p style=“color:blue”>杜甫</p>
</body></html>
样式表：cs3.css
h1{font-family:宋体;
color:blue;}
p {font-family:黑体;
color:red;
font-size:50px;}
样式表：cs31.css
h1{text-decoration:underline;}
p {font-style:italic;}
3、选择符
1）CSS最大的作用就是能将一种样式加载在多个标签上，
方便管理与修改。
2）选择符可实现：哪些标签元素使用样式，哪些标签元素
使用哪一个样式。
3）类型选择符：即将标签名做为选择符，如：h1{…}，
p{…}，a{…}，td{…}等；
示例：cs4.html（演示视频：04.mp4）
<html><head>
<style>
h1{color:red;}
p{color:blue;}
a{color:green;}
td{color:gray;}
</style></head>
<body>
<h1>李白</h1>
<p>杜甫</p>
<a href="#" >白居易</a><hr/>
<table border="1">
<tr><td>李白</td><td>杜甫</td></tr>
</table></body></html>4)类与ID选择符：相同的标签使用不同的样式，使用类选择符，如：两个h1使用红色和绿色等；
样式1：h1.red{…}
h1.green{…}
样式2：#yellow{…}（可应用于所有标签）
样式3：#blue{…}（应与标签ID值对应）
引用：
<h1 class=“red”>李白</h1>
<h1 class=“green”>杜甫</h1>
<h1 id=“blue”>李白</h1>
<h1 id=“yellow”>杜甫</h1>
注：id的值在网页中是唯一的。
示例：cs5.html（演示视频：05.mp4）
<html><head>
<style>
h1.red{color:red;}
h1.green{color:green;}
.yellow{color:yellow}
#blue{color:blue;}
</style></head><body>
<h1 class=“red”>李白</h1>
<h1 class=“green”>杜甫</h1>
<h1 class=“yellow”>白居易</h1>
<table border=“1”>
<tr><td class=“red”>李白</td><td class=“yellow”>杜甫</td></tr>
<tr><td id=“blue”>白居易</td><td ></td></tr>
</table></body></html>5）包含选择符：层级关系的标签选择。如：
p a{…} （只对p标签下的a标签有效）
li{…} （对所有li标签有效）
ol li{…}（只对ol标签下的li标签有效）
6）分组选择符：相同样式的标签可用逗号连接。如：
h1,p{font-size:30px;}
a,td,li{color:blue;}
7）通用选择符：对所有标签有效。如：
*{font-size:25px;}
示例：cs6.html（演示视频：06.mp4）
<html><head>
<style>
p a{color:red;}
li{color:green;}
ol li{text-decoration:line-through;}
h1,h2,h3{color:blue;}
*{font-size:30px;}
</style></head>
<body>
<h1>样式1</h1>
<h3>样式3</h3>
<h5>样式5</h5>
<p>唐代诗人：<a href="#">李白</a></p>
<ul><li>李白</li><li>杜甫</li></ul>
<ol><li>李白</li><li>杜甫</li></ol>
</body></html>练习：设计如下表格。
字体颜色：蓝色
第一行：斜体，单元格1：宋体，单元格2：黑体；
第二行：粗体，单元格3：仿宋，单元格4：楷体。
示例：cs7.html
<html><head>
<link rel="stylesheet" type="text/css" href=“cs7.css">
</head><body>
<table border="1">
<tr class="a"><td id="a1">李白</td><td id="a2">杜甫</td></tr>
<tr class="b"><td id="b1">白居易</td><td id="b2">辛弃疾
</td></tr></table>
</body><html>
样式表：cs7.css
table{border:double 1px red;color:blue;}
tr.a{font-style:italic;}
tr.b{text-decoration:underline;}
#a1{font-family:宋体;}
#a2{font-family:黑体;}
#b1{font-family:仿宋;}
#b2{font-family:楷体;}十六、CSS02（文本样式设置）
1、CSS文本样式设置：
1）字体：font-family:字体1,字体2…；
2）大小：font-size:共4种设置；
a)绝对：xx-small,x-small,small,medium,large,
x-large,xx-large；
b)相对：larger相对大一些，smaller相对小一些；
c)具体：pt点，px像素，in英寸（=72点）；
d)比例：相对父对象的大小；
3）粗体：font-weight:粗细度；
a)100-900：整百数，细到粗；b)normal正常；
c)bold加粗与700相同；d)bolder特粗；e)lighter细。
4）颜色：color；
5）斜体：font-style；
a)normal正常，b)italic斜体，c)oblique偏斜体。
示例：cs06.html
<html><head>
<style>
h2{font-family:方正姚体;font-size:40px;font-weight:100;}
.mystyle1{font-family:宋体;font-size:larger; font-style:italic;}
.mystyle2{font-family:隶书;font-size:150%;}
#myid1{font-family:黑体;font-weight:bolder;font-
style:oblique;font-size:xx-small;}
p{color:olive}
</style></head>
<body>
<h2>荷塘月色</h2>
<p class="mystyle1">这几天心里颇不宁静...</p>
<p class="mystyle2">沿着荷塘，是一条...</p>
<p id="myid1">路上只我一个人，背着手踱着...</p>
</body></html>2、CSS文本阴影设置
text-shadow：color length1 length2 length3
color：阴影颜色；
length1：阴影左右偏移量，正值向右，负值向左；
length2：阴影上下偏移量，正值向下，负值向上；
length3：阴影模糊程度，0为无模糊，越大越模糊。
注：阴影可以多组叠加，中间用逗号隔开。
示例：cs07.html
<html><head>
<style>
h2{font:100 40px 方正姚体}
p{font:bold 30px 宋体}
.mystyle1{text-shadow:black 0px 0px 10px;}
.mystyle2{text-shadow:blue 10px 10px 5px;}
#myid1{text-shadow:green -6px -7px 5px;}
</style></head>
<body>
<h2>荷塘月色</h2>
<p class="mystyle1">这几天心里颇不宁静...</p>
<p class="mystyle2">沿着荷塘，是一条...</p>
<p id="myid1">路上只我一个人，背着手踱着...</p>
</body></html>几种常用阴影样式。
示例：cs08.html
<html><head>
<style>
.ms1{background:#666666;font:bold 55px 微软雅黑;color: #fff;}
.ms2{color:#eee;text-shadow:5px 5px 0 #666,7px 7px 0 #eee;}
.ms3{color:#000;text-shadow:0 1px 1px #fff;}
.ms4{text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 40px #ff00de,0 0 70px
#ff00de;}
.ms5{color:#ccc;text-shadow:-1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;}
.ms6{color:#566F89;background:#C5DFF8;text-shadow:1px 1px 0 #E4F1FF;}
</style></head><body class="ms1">
<p class="ms2">幻影：望庐山瀑布</p>
<p class="ms3">投影：遥看瀑布挂前川</p>
<p class="ms4">辉光：日照香炉生紫烟</p>
<p class="ms5">浮雕：飞流直下三千尺</p>
<p class="ms6">凹陷：疑是银河落九天</p>
</body></html>3、CSS文本大小写转换与缩进
大小写转换：text-transform：
capitalize：首字母大写；
uppercase：全部大写；
lowercase：全部小写；
文本缩进：text-indent：length缩进量或百分比；
示例：cs09.html
<html><head><style>
.a{text-transform:capitalize;}
.b{text-transform:uppercase;}
.c{text-transform:lowercase;}
.sj1{text-indent:2em;}
.sj2{text-indent:100px;}
.sj3{text-indent:50%;}
</style></head><body>
<p class="a">mudanjiang NORMAL university</p>
<p class="b">mudanjiang NORMAL university</p>
<p class="c">mudanjiang NORMAL university</p>
<p>日照香炉生紫烟，</p>
<p class="sj1">遥看瀑布挂前川。</p>
<p class="sj2">飞流直下三千尺，</p>
<p class="sj3">疑是银河落九天。</p>
</body></html>4、CSS对齐方式与文本修饰：
■左右对齐：text-align：
left：左对齐；
right：右对齐；
center：居中；
■文本修饰：text-decoration：
underline下划线；
overline上划线；
line-through删除线；
示例：cs10.html
<html><head><style>
.a{text-align:left;}
.b{text-align:center;}
.c{text-align:right;}
.xs1{text-decoration:underline;}
.xs2{text-decoration:overline;}
.xs3{text-decoration:line-through;}
</style></head><body>
<p class=“a”>mudanjiang NORMAL university</p>
<p class=“b”>mudanjiang NORMAL university</p>
<p class=“c”>mudanjiang NORMAL university</p>
<p>日照香炉生紫烟，</p>
<p class=“xs1”>遥看瀑布挂前川。</p>
<p class=“xs2”>飞流直下三千尺，</p>
<p class=“xs3”>疑是银河落九天。</p>
</body></html>5、CSS设置间距：
■ 行间距：即行与行之间的距离。
line-height：固定数值px或百分比。
■ 字间距：即每个字之间的距离。
letter-spacing：固定数值px。
示例：cs11.html
<html><head><style>
*{font-size:20px;}
.a{line-height:normal;}
.b{line-height:35px;}
.c{line-height:50%;}
.d{letter-spacing:normal;}
.e{letter-spacing:2px;}
.f{letter-spacing:10px;}
</style></head><body>
<p class="a">日照香炉生紫烟，<br/>遥看瀑布挂前川。</p><hr/>
<p class="b">日照香炉生紫烟，<br/>遥看瀑布挂前川。</p><hr/>
<p class="c">日照香炉生紫烟，<br/>遥看瀑布挂前川。</p><hr/>
<p class="d">日照香炉生紫烟，<br/>遥看瀑布挂前川。</p><hr/>
<p class="e">日照香炉生紫烟，<br/>遥看瀑布挂前川。</p><hr/>
<p class="f">日照香炉生紫烟，<br/>遥看瀑布挂前川。</p><hr/>
</body></html>6、CSS背景
1）背景颜色：
■ 格式：background-color：颜色
2）背景图像：
■ 格式：background-image：url（图像地址）
■ 固定：background-attachment：
scroll滚动;
fixed固定。
示例：cs12.html
<html><head><style>
*{font-size:20px;}
.a{background-color:red;}
.b{background-color:#bbccee;}
.c{background-color:rgb(50%,60%,70%);}
.d{background-image:url(bg.jpg);}
.e{background-image:url(timg.jpg);
background-attachment:fixed;}
</style></head>
<body class=“e”>
<p class=“a”>日照香炉生紫烟，<br/>遥看瀑布挂前川。</p><hr/>
<p class=“b”>日照香炉生紫烟，<br/>遥看瀑布挂前川。</p><hr/>
<p class=“c”>日照香炉生紫烟，<br/>遥看瀑布挂前川。</p><hr/>
<p class=“d”>日照香炉生紫烟，<br/>遥看瀑布挂前川。</p><hr/>
</body></html>3)背景平铺方式：background-repeat；
■ 参数：repeat：平铺，默认；
no-repeat：不平铺；
repeat-x：水平平铺；
repeat-y：垂直平铺；
4）背景图像定位：background-position：水平垂直参数；
■ 参数：x(px) y(px)：横纵坐标；
top：顶端；
bottom：底端；
left：左端；
right：右端；
center：中部。
示例：cs13.html
<html><head><style>
.a{background-image:url(bg.jpg);
background-repeat:repeat-x;}
.b{background-image:url(bg.jpg);
background-repeat:repeat-y;}
.c{background-image:url(bg.jpg);
background-repeat:no-repeat;
background-position:bottom right;}
.d{background-image:url(bg.jpg);
background-repeat:no-repeat;
background-position:200px 200px;}
</style></head><body class=“a">
<p>日照香炉生紫烟，<br/>遥看瀑布挂前川。
</p><hr/>
</body></html>7、边框
1）边框样式：border-style：
参数：none：无边框；solid：实线；dotted：点线；
dashed：短线；double：双实线；groove：沟槽；
ridge：脊形；inset：内嵌；outset：外嵌。
2）样式组合：即4个边框可以自由组合。
格式：1-4个样式。
方法：1个值4边框相同；2个值左右、上下相同；
3个值左右相同； 4个值按上右下左顺序。
示例：cs21.html（演示视频12-01.mp4）
<html><head><style>
.a{border-style:solid;}
.b{border-style:dotted solid;}
.c{border-style:dashed double solid;}
.d{border-style:groove;}
.e{border-style:ridge;}
.f{border-style:inset;}
.g{border-style:outset;}
</style></head><body>
<p class="a">日照香炉生紫烟<br/>遥看瀑布挂前川</p>
<p class="b">日照香炉生紫烟<br/>遥看瀑布挂前川</p>
<p class="c">日照香炉生紫烟<br/>遥看瀑布挂前川</p>
<p class="d">日照香炉生紫烟<br/>遥看瀑布挂前川</p>
<p class="e">日照香炉生紫烟<br/>遥看瀑布挂前川</p>
<p class="f">日照香炉生紫烟<br/>遥看瀑布挂前川</p>
<p class="g">日照香炉生紫烟<br/>遥看瀑布挂前川</p>
</body></html> 3)边框宽度：border-width：
■ 参数：medium：默认宽度；
数值：px（像素）；
thin：比默认宽度小；
thick：比默认宽度大。
■ 格式：可以单独设置4个边框，方法依旧。
4）边框颜色：border-color：颜色值；
■ 格式：可以单独设置4个边框，方法依旧。
示例：cs22.html
<html><head><style>
.a{border-style:solid solid dotted;
border-width:thick 5px thin;
border-color:blue green gray;}
.b{border-style:double double dashed;
border-width:thick 35px;
border-color:red blue;}
.c{border-style:outset;
border-width:15px;
border-color:yellow red blue}
</style></head><body>
<p class="a">日照香炉生紫烟<br/>遥看瀑布挂前川</p>
<p class="b">日照香炉生紫烟<br/>遥看瀑布挂前川</p>
<p class="c">日照香炉生紫烟<br/>遥看瀑布挂前川</p>
</body></html> 5）圆角边框：border-radius：曲率px或百分比
■ 参数：只一个参数：4个角相同；
border-top-left-radius：左上；
border-top-right-radius：右上；
border-bottom-left-radius：左下；
border-bottom-right-radius：右下；
6）边框阴影：box-shadow：
横向px值/纵向px值/模糊px值/颜色；
示例：cs23.html （演示视频12-02.mp4）
<html><head><style>
p {text-align:center;width:60px;padding:10px;border:2px solid blue;}
.a{border-top-left-radius:25px;
border-bottom-right-radius:25px;
box-shadow: 10px 10px 5px #888888;}
.b{border-top-left-radius:10px;
border-top-right-radius:50%;
box-shadow: 10px 0px 5px gray;}
.c{border-radius:50%; box-shadow: 0px 0px 15px yellow;}
.d{border-radius:20% 50%; box-shadow: -10px -10px 5px black;}
</style></head><body>
<p class="a">李白<br/>杜甫<br/>白居易</p>
<p class="b">李白<br/>杜甫<br/>白居易</p>
<p class="c">李白<br/>杜甫<br/>白居易</p>
<p class="d">李白<br/>杜甫<br/>白居易</p>
</body></html>8、外边距
1）概念：用于设置元素周围的边界。
2）格式与单位：用px像素或百分比表示；
■ margin-top：上边距；
■ margin-left：左边距；
■ margin-right：右边距；
■ margin-bottom：下边距；
示例：cs24.html
<html><head><style>
*{font-size:30px;}
img{margin:20px}
.a{margin:40px 30px 10px;text-indent:2em;}
</style></head><body>
<img src="rose.png" align="left">
<p class="a">玫瑰（Rosa）：原产地中国。属蔷薇目，蔷薇科落叶灌木，
枝杆多针刺，奇数羽状复叶，小叶5-9片，椭圆形，有边刺。花瓣倒卵形
，重瓣至半重瓣，花有紫红色、白色，果期8-9月，扁球形。枝条较为柔
弱软垂且多密刺，每年花期只有一次，因此较少用于育种，近来其主要
被重视的特性为抗病性与耐寒性。
</p><p class="a">玫瑰作为经济作物时，其花朵主要用于食品及提炼香精
玫瑰油，玫瑰油应用于化妆品、食品、精细化工等工业。</p>
<img src="rose1.jpg" width="300" align="right">
<p class="a">在欧洲诸语言中，蔷薇、玫瑰、月季都是使用同一个词，如
英语是rose，德语是Die Rose。玫瑰是英国的国花。通俗意义中的“玫瑰
”已成为多种蔷薇属植物的通称。且事实上杂交玫瑰也是由蔷薇属下各
物种杂交选育所产生。此内容请看“玫瑰花”一词。
</p></body></html> 9、内边距
1）概念：用于设置边框和内容之间的距离。
2）格式与单位：用px像素或百分比表示；
■ padding-top：顶端补白；
■ padding-left：左边补白；
■ padding-right：右边补白；
■ padding-bottom：底边补白；
示例：cs25.html
<html><head><style>
*{font-size:30px;}
.a{border-style:double;text-indent:2em;}
.b{background:black;color:white;border-style:inset;
padding:40px;text-indent:2em;}
.c{background:gray;border-style:dashed;border-color:blue;
padding:20px;text-indent:2em;}
</style></head><body>
<p class="a">玫瑰（Rosa）：原产地中国。属蔷薇目，蔷薇科落叶灌木
，枝杆多针刺，奇数羽状复叶，小叶5-9片，椭圆形，有边刺。花瓣倒
卵形，重瓣至半重瓣，花有紫红色、白色，果期8-9月，扁球形。枝条
较为柔弱软垂且多密刺，每年花期只有一次，因此较少用于育种，近来
其主要被重视的特性为抗病性与耐寒性。
</p><p class="b">玫瑰作为经济作物时，其花朵主要用于食品及提炼香
精玫瑰油，玫瑰油应用于化妆品、食品、精细化工等工业。
</p><p class="c">在欧洲诸语言中，蔷薇、玫瑰、月季都是使用同一个
词，如英语是rose，德语是Die Rose。玫瑰是英国的国花。通俗意义中
的“玫瑰”已成为多种蔷薇属植物的通称。且事实上杂交玫瑰也是由蔷
薇属下各物种杂交选育所产生。此内容请看“玫瑰花”一词。
</p></body></html> 10、布局
布局的好坏，直接影响页面的效果，HTML中的元素分为块级元素和内联元素。
1）块级元素：生成矩形区域，相邻元素竖直排列，独占一行，如<p><ul><hl><form>等。
2）内联元素：与相邻元素横向排列，到右端自动换行，不独占一行，如<a><img><input>等。
3）常用<div>块级元素和<span>内联元素进行布局，它们只是个容器，将两种元素进行转换。
4）元素转换：块级元素横向排列，要转换成内联元素，就要进行定位和浮动。内联元素纵向排列，要转换成块级元素，就要放入<div>中
示例：cs26.html （演示视频12-03.mp4）
<html><head><style>
.a{font-family:黑体;
font-size:30px;
font-weight:bold;
color:yellow;
background-color:blue;
text-align:center;
padding-top:20px;
width:400px;
height:100px;}
</style></head><body>
<div class="a">李白杜甫白居易(div)换行</div>
<div class="a">中华人民共和国(div)换行</div>
<span class="a">李白杜甫白居易(span)不换行</span>
<span class="a">中华人民共和国(span)不换行</span>
</body></html>1）定位：position：偏移量
static静态（无定位-默认）；
relative相对定位；
absolute绝对定位；
■ 偏移量：
left左侧长度值（px）/百分比。
right右侧长度值（px）/百分比。
top顶部长度值（px）/百分比。
bottom底部长度值（px）/百分比。
示例：cs27.html （演示视频12-04.mp4）
<html><head><style>
div{font-family:黑体; font-size:40px;
font-weight:bold; color:yellow; text-align:center;
padding-top:20px;}
.a{background-color:blue; width:600px; height:100px;
position:absolute;}
.b{background-color:red; width:300px; height:300px;
position:absolute; left:20px; top:50px;}
.c{background-color:green; width:500px; height:200px;
position:absolute; left:350px; top:150px;}
</style></head><body>
<div class="a">李白杜甫白居易</div>
<div class="b">中华人民共和国</div>
<div class="c">....师范学院</div>
</body></html>
示例：cs28.html
<html><head><style>
.a{position:absolute;left:100px;top:100px;}
.b{position:relative;top:50px;}
</style>
</head>
<body>
<h2>相对定位与绝对定位</h2>
<input type="button" value="按钮1" />
<input type="button" value="按钮2" /><br/>
<input type="button" value="按钮3" />
<input class="a" type="button" value="按钮4" />
<input class="b" type="button" value="按钮5" />
<input type="button" value="按钮6" />
</body></html>2)浮动与隐藏：
■ float：浮动，产生围绕效果。
left居左浮动；
right居右浮动；
none无浮动（默认）。
■ visibility隐藏：
visible可见（默认）；
hidden隐藏。
示例：cs29.html
<html><head><style>
div{border-style:dotted; width:250px; height:50px;}
.a{background-color:yellow; width:100px; margin:10px; float:left;}
.b{background-color:black; color:white; width:100px;
margin:10px; float:right; visibility:hidden;}
</style></head><body>
<div><p>中国CHINA</p>
<p>中华人民共和国中华人民共和国中华人民共和国中华人民共
和国中华人民共和国。</p><hr/>
<p class="a">中国CHINA</p>
<p>中华人民共和国中华人民共和国中华人民共和国中华人民共
和国中华人民共和国。</p><hr/>
<p class="b">中国CHINA</p>
<p>中华人民共和国中华人民共和国中华人民共和国中华人民共
和国中华人民共和国。</p>
</div></body></html>十七、CSS-4-表格、列表与连接
1、表格设置：
1）border：边框，与普通边框border-style相同；
2）padding：内边距，4个边距设置方法依旧；
3）border-collapse：collapse合并/separate独立；
4）border-spacing：边框间距；
5）table-layout：布局；fixed固定宽度/auto自动。
示例：cs30.html
<html><head>
<style type="text/css">
.a{border-collapse:collapse;width:150px;table-layout:fixed;}
.b{border-spacing:50px;table-layout:fixed;}
.c{border:10px double blue;width:50px;padding:0px 20px 20px;}
.d{border:10px outset red;width:50px;padding:20px 0px 20px 20px;}
.e{border:10px ridge green;width:50px;padding:20px 20px 0px
20px;}
.f{border:10px dotted gray;width:50px;padding:20px 20px 0px;}
</style></head><body>
<table border="1" class="a">
<tr><td>李白</td><td>杜甫是唐朝的大诗人</td></tr>
</table><hr/>
<table border="1" class="b">
<tr><th class="c">姓名</th><th class="d">年龄</th></tr>
<tr><td class="e">张三</td><td class="f">三三</td></tr>
</table></body></html>常用经典表格样式
示例：cs31.html
<html><head><style>
#a{font-family:黑体; width:100%; border-collapse:collapse; }
#a td, #a th {font-size:1em; border:1px solid #98bf21;
padding:3px 7px 2px 7px; }
#a th{font-size:1.1em; text-align:left; padding-top:5px;
padding-bottom:4px;
background-color:#A7C942; color:#ffffff; }
.b td{ color:#000000; background-color:#EAF2D3; }
</style></head>
<body><table id=“a">
<tr><th>公司</th><th>领导人</th><th>国别</th></tr>
<tr><td>苹果</td><td>史蒂夫.乔布斯</td><td>美国</td></tr>
<tr class=“b"><td>华为</td><td>任正非</td><td>中国</td></tr>
<tr><td>谷歌</td><td>拉里.佩奇</td><td>美国</td></tr>
<tr class=“b"><td>阿里巴巴</td><td>马云</td><td>中国
</td></tr>
</table>
</body></html>2、列表设置；
list-style-type：列表符号；
2）list-style-image：图像符号url（图像地址）；
3）list-style-position：位置，
outside块外
inside块内；
示例：cs32.html
<html><head><style>
ul.disc {list-style-type:disc;list-style-position:inside;}
ul.square {list-style-type: square;}
ul.decimal {list-style-type: decimal;list-style-position:inside;}
ul.upper-roman {list-style-type: upper-roman;}
ul.lower-alpha {list-style-type: lower-alpha;}
ul.armenian {list-style-type: armenian;}
ul.georgian {list-style-type: georgian;list-style-position:inside;}
ul.image1{list-style-image:url(list1.gif);}
</style></head><body>
<ul class="disc"><li>Disc 类型</li><li>李白</li><li>杜甫</li></ul>
<ul class="square"><li>square 类型</li><li>李白</li><li>杜甫</li></ul>
<ul class="decimal"><li>decimal 类型</li><li>李白</li><li>杜甫</li></ul>
<ul class="upper-roman"><li>u-roman 类型</li><li>李白</li><li>杜甫</li></ul>
<ul class="lower-alpha"><li>l-alpha 类型</li><li>李白</li><li>杜甫</li></ul>
<ul class="armenian"><li>armenian 类型</li><li>李白</li><li>杜甫</li></ul>
<ul class="georgian"><li>georgian 类型</li><li>李白</li><li>杜甫</li></ul>
<ul class="image1"><li>图像类型1</li><li>李白</li><li>杜甫</li></ul>
</body></html>3、边框外轮廓设置
1）outline-style：列表样式；
2）outline-width：列表宽度；
3）outline-color：列表颜色
示例：cs33.html
<html><head>
<style>
p{border: red solid 3px;padding:10px 20px;}
p.double {outline-style: double;outline-width:5px;}
p.dashed {outline-style: dashed;outline-color:blue;}
p.dotted {outline: dotted 10px green;}
</style>
</head>
<body>
<p class="double">李白<br/>杜甫<br/>白居易</p>
<p class="dashed">李白<br/>杜甫<br/>白居易</p>
<p class="dotted">李白<br/>杜甫<br/>白居易</p>
</body></html>4、链接设置：链接的4种状态
1）a:link - 普通的、未被访问的链接；
2）a:visited - 用户已访问的链接；
3）a:hover - 鼠标指针位于链接的上方；
4）a:active - 链接被点击的时刻。
5）text-decoration：下划线：none无/underline有；
6）background-color：链接文本背景色。
注：书写顺序规则：先爱love后恨hate
a:hover必须位于a:link和a:visited之后，
a:active必须位于a:hover之后。
示例：cs34.html
<html><head>
<style>
a:link {color:red;text-decoration:none;}
a:visited {color:black;text-decoration:none}
a:hover {color:blue;text-decoration:underline;}
a:active {color:gray;text-decoration:underline;}
</style></head>
<body>
<p><b><a href="#">...师范学院
</a></b></p>
</body></html>
示例：cs35.html
<html><head><style>
a:link,a:visited{
display:block;
font-weight:bold;font-size:14px;font-family:黑体;color:white;
background-color:green;width:120px;text-align:center;
padding:6px;text-decoration:none;}
a:hover,a:active{
background-color:blue;}
</style></head><body>
<table>
<tr><td><a href="#">...学院</a></td>
<td><a href="#">.大学</a></td></tr>
</table></body></html>5、滚动条设置
1）scrollbar-face-color：滚动条颜色；
2）scrollbar-highlight-color：亮边框颜色；
3）scrollbar-shadow-color：暗边框颜色；
4）scrollbar-arrow-color：滚动条方向箭头颜色；
5）scrollbar-base-color：滚动条基准色。
示例：cs36.html
<html><head><style>
h2{font-family:方正姚体;font-size:20pt;}
img{float:left;}
.a{width:400px;height:180px;overflow:scroll;font-size:14pt;
scrollbar-face-color:red;
scrollbar-highlight-color:blue;
scrollbar-shadow-color:yellow;
scrollbar-arrow-color:white;}
.b{width:400px;height:180px;overflow:scroll;font-size:14pt;
scrollbar-base-color:#9cf;}
</style></head><body leftmagin="30px">
<h2>花朵介绍</h2>
<div class="a">
<img src="rose1.jpg" width="200px">
<p>玫瑰（Rosa）：原产地中国。属蔷薇目，蔷薇科落叶灌木...</p>
<p>在欧洲诸语言中，蔷薇、玫瑰、月季都是使用同一个词，如英语是rose，德语是Die Rose。玫瑰是英国的国花。
</p>
</div></body></html>十八、转换、过渡与动画
1、二维转换
使用transform对元素进行移动、缩放、转动和拉伸，IE浏览器需加前缀-ms-，360浏览器或chrome浏览器需加前缀-webkit-。
1）transform:translate(x,y)：移动至坐标x,y；
2）transform:rotate(x)：顺时针旋转x角度；
3）transform:scale(x,y)：沿横纵向放大缩小x,y倍；
4）transform:skew(x,y)：沿横纵向翻转x,y角度；
示例：cs41.html
<html><head><style>
div{width:180px;padding:20px;height:75px;
background-color:yellow;
border:1px solid black;}
#a{-webkit-transform:translate(50px,10px);}
#b{margin:30px; -webkit-transform:rotate(30deg);}
#c{margin:50px; -webkit-transform:scale(1.5,2);}
#d{margin:60px; -webkit-transform:skew(20deg,30deg);}
</style></head><body>
<div>原始：<br/>李白<br/>杜甫</div>
<div id="a">移动(横50纵10)：<br/>李白<br/>杜甫</div>
<div id="b">旋转（30度）：<br/>李白<br/>杜甫</div>
<div id="c">缩放（横1.5纵2）：<br/>李白<br/>杜甫</div>
<div id="d">翻转（横20度纵30度）：<br/>李白<br/>杜甫</div>
</body></html>2、过渡效果
使用transition属性（360浏览器及IE10支持）。
1）360浏览器或chrome浏览器加前缀-webkit-；
2）transition：设定变化的元素名及时间长度；
3）transform：设定变化的元素目标值；
4）可以使用link,visited,hover,active设置动作开关，若不用则会自动运行；
示例：cs42.html
<html><head><style>
div{background:gray;
width:100px;height:100px;
-webkit-transition:width 3s;}
div:hover{width:300px;}
</style></head>
<body>
<div>
<p>指向此框</p>
</div>
</body></html>
示例：cs43.html
<html><head><style>
div{width:100px;height:100px;background:red;
-webkit-transition:width 2s, height 2s,
-webkit-transform 2s; }
div:active{width:200px;height:200px;
-webkit-transform:rotate(720deg); }
</style></head>
<body>
<div>把鼠标指针按住红色框再松开。</div>
</body></html>
示例：cs44.html
<html><head><style>
div{width:100px;height:100px;background:red;
-webkit-transition-property:height width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:1s;}
div:hover{width:200px;height:400px;}
</style></head>
<body>
<div>把鼠标指针放到框内等待1秒
</div>
</body></html>
3、动画
使用animation属性和@keyframes规则。
1）animation：
animation-name：名；animation-duration：时长；
animation-timing-function：速度曲线；
linear等速；ease慢快慢
ease-in慢开；ease-out慢结
ease-in-out慢开慢结；
animation-delay：动画前延迟；
animation-iteration-count：次数，infinite无限；
animation-direction：alternate反向播放。
注：可简写animation：后面加6个参数。
animation-play-state：pause暂停/running播放。
2）@keyframes格式：用百分比设定中间帧，如：
@keyframes a1
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
示例：cs45.html
<html><head><style>
div{width:200px;height:50px;background:red;position:relative;
-webkit-animation-name:a1;-webkit-animation-duration:5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;}
.a {-webkit-animation-timing-function:linear;}
.b {-webkit-animation-timing-function:ease;}
.c {-webkit-animation-timing-function:ease-in;}
.d {-webkit-animation-timing-function:ease-out;}
.e {-webkit-animation-timing-function:ease-in-out;}
.f {-webkit-animation-timing-function:cubic-bezier(1,0,0,1);}
@-webkit-keyframes a1{0% {left:0px;}100% {left:300px;}}
</style></head><body>
<div class="a">linear等速</div><div class="b">ease慢快慢</div>
<div class="c">ease-in慢开</div><div class="d">ease-out慢结</div>
<div class="e">ease-in-out慢开慢结</div>
<div class="f">cubic-bezier（自定义）</div>
</body></html>示例：cs46.html
<html><head><style>
div{width:100px;height:100px;background:red;
-webkit-animation:a1 7s;}
@-webkit-keyframes a1
{0%{background:red;}
25%{background:blue;}
50%{background:yellow;}
75%{background:green;}
100%{background:red;}
}
</style></head>
<body>
<div></div>
</body></html>示例：cs47.html
<html><head><style>
div{width:100px;height:100px;background:red;
position:relative;
-webkit-animation:a1 5s;
-webkit-animation-direction:alternate;
-webkit-animation-iteration-count:infinite;}
@-webkit-keyframes a1{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:300px; top:0px;}
50% {background:blue; left:0px; top:300px;}
75% {background:green; left:300px; top:300px;}
100% {background:red; left:0px; top:0px;}}
</style></head>
<body>
<div></div>
</body></html>示例：cs48.html
<html><head><style>
div{
width:100px;height:70px;border-radius:10px;color:blue;
background:red;text-align:center;line-height:400%;
position:relative;
-webkit-animation:mymove 3s infinite;
-webkit-animation-timing-function: lineare;}
@-webkit-keyframes mymove{
0% {left:0px;top:0px; background:red;}
5% {transform:rotate(-30deg);}
50%
{left:600px;transform:rotate(0deg);background:#ff00ff;}
100% {left:0px; transform:rotate(-
360deg);background:red;}}
</style></head><body>
<div>CSS-3</div>
</body></html>
扫一扫
3349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
