一、
网页制作概述
1、简介
(1)什么是 HTML:
1)HTML 是 Hypertext Markup Language 的缩写,即超文本标记语言。http 是超文本传输
协议。
2)HTML 语言是一种标记语言,不需要编译,直接由浏览器执行。
3)大小写不敏感。
4)HTML 是由 W3C 维护的。
连
(2)什么是 XHTML
1)
XHTML 是 Extensible Hypertext Markup Language 的缩写,
即可扩展的超文本标记语言。
2)XHTML 与 HTML 4.01 几乎是相同的,可以说是 HTML 一个升级版本。
3)XHTML 目标是取代 HTML,建立 XHTML 的目的就是实现 HTML 向 XML 的过度。
4) HTML 区别:
与
每个标签都要有结束标志;
属性要加引号;
大小写敏感
(标签用小写)
。
2、XHTML 语言的语法
(1)XHTML 标签
1)标签是 HTML 中最基本单位,用两个角括号括起来“<”和“>”
。
标签都是闭合的,有两种形式--成对与不成对。 如:<table></table>和<br />
(2)XHTML 标签属性
XHTML 属性一般都出现在 HTML 标签中,是 HTML 标签的一部分。属性的值一定要在
双引号中,标签可以有多个属性。属性由属性名和值成对出现。
(3)XHTML 元素
元素是构建网页的一种单位,由标签和属性组成。
(4)XHTML 文档
HTML 文档就是 HTML 页面,也就是网页,是由 HTML 元素组成的
互联网的所有内容都是由一个个 HTML 文档体现的。
(5)XHTML 注释
<!--被注释的内容-->
(6)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
一、 基本标记
1、 头部标记 <head>: 一般需要包括标题、基底信息、元信息等,CSS 和 JavaScript 都是
定义在头元素中。头部信息的内容不会显示。
(1)标题标记 <title>: <title>文件的标题</title>
(2)元信息标记 <meta>:meta 标记不需要设置结束标记。meta 元素的属性有两种:
name 和 http-equiv。
1 设置页面关键字:<meta name=”keywords” content=”具体的关键字” />
name:○
关键字之间用逗号隔开
2
○设置页面描述:<meta name=”description” content=”对页面的描述语言” />
http-equiv:
1
○设置网页文字及语言:
<meta http-equiv=”Content-Type” content=”text/html;charset=gb2312 ” />
2
○设置网页定时跳转:<meta http-equiv=”refresh” content=”跳转时间;url=
地址” />
单位:秒
(3)基底信息<base>
<base href=http://www.lampbrother.net />
单标记
2、页面的主体标记:
(1) 设置页面背景色 bgcolor:<body bgcolor=”#3399CC”></body>
(2) 设置背景图片 background:
<body background=”地址” bgproperties=图片固定属性>
如果 bgproperties 设置为 fixed,则背景图像相对于浏览者不动。
<html>
<head>
<style type=”text/css”>
body{background-repeat:no-repeat}
</style>
</head>
<body background=”地址”>
</body>
</html>.
水平方向重复:repeat-x
垂直方向重复:repeat-y
(3) 设置文字颜色 text:<body text=”颜色代码”>
(4) 设置链接文字属性 link:
设置未访问的链接文字的颜色:<body link=”颜色代码”></body>
置正在访问的文字的颜色:<body alink=”颜色代码”></body>
设置已经访问后文字的颜色:<body vlike=”颜色代码”></body>
(5) 设置边距 margin:<body topmargin=60 leftmargin=40></body>
3、注释:<!-- -->
二、 文字与段落
1、标题文字的建立:<h1></h1> ... <h6></h6>
越大字越小,上下各空一行。
2、文字格式标记:
(1)设置文字字体 face :face 属性值是一个或多个。
<font face="经典空叠圆通,黑体,Times New Roman,Times">XXXXXX</font>
(2)设置字号 size:可以设置为 1~7,也可以是+1~+7,默认字号与 3 号大小相同。号
越大,字越大。大于 7 的按 7 号字处理。
<font size=1>1 号字体的效果</font>
<font size=2>2 号字体的效果</font>
<font size=3>3 号字体的效果</font>
<font size=4>4 号字体的效果</font>
<font size=+1>+1 号字体的效果</font>
(3)设置文字颜色 color:<font color="#0099FF">xxxx</font>
(4)粗体:<b>xxxx</b>、<strong>xxxx</strong>
斜体:<I>xxxx</I>
下划线:<u><xxxx</u>
(5)上标:<sup>xxxx</sup>
<sub>xxxx</sub>
(6)特殊符号:空格
"
"
& &
<
<
>
>
3、段落标记:
(1)段落标记 P:<p>XXXX</p>
落标记可以没有结束标记,本行下空一行
(2)换行标记:<br />
(3)保留原始排版方式标记:<pre>XXXXX</pre>
(4)居中对齐标记 center:<center>XXXXX</center>
4、水平线标记
(1)添加水平线:<hr />
(2)设置水平线宽度与高度:默认是 100%的宽度,1 像素的高。 宽度既可是像素值
也可以是窗口百分比,而高度只能是像素值。默认无颜色
<hr width=”85%” size=”3”>
(3)设置水平线颜色:<hr color="颜色代码">
(4)设置水平线对齐方式:align
三、 列表
1、无序列表:
<ul>
<li>XXXX</li>
<li>XXXX</li>
<li>XXXX</li>
</ul>
2、设置无序列表的符号类型: <li type=符号类型> disc(实心)
、circle(空心)
、square
3、有序列表标记:
<ol>
<li>XXXX</li>
<li>XXXX</li>
<li>XXXX</li>
</ol>
4、设置有序列表的符号类型:<ol type=符号类型> <li type=符号类型> 1、a、A、i、I
5、有序列表起始值:<ol start=起始数值> 起始数值只能是数字
6、定义列表标记:主要用于解释名词 可以只有 dd
<dl>
<dt>html<dd>aaaa
<dt>css<dd>bbbb
</dl>
7、列表的简化:<dl compact></dl> 通常与自定义列表联合使用
8、设置列表文字的颜色:
<ul><font color="颜色值">
<li>XXXX</li>
<li>XXXX</li>
<li>XXXX</li>
</font>
</ul>
<ul>
<font color="颜色值"><li>XXXX</font>
<li>XXXX</li>
<li>XXXX</li>
</ul>
9、列表嵌套:最常见的是有序列表和无序列表的嵌套
四、 超链接
1、超链接的建立
(1)基本语法:<a href="URL">链接元素</a> 链接元素可以是文字、图片或其它
(2)设置超链接的目标窗口:<a href="链接地址" target="目标窗口打开方式"></a>
_parent(常用于框架)、_blank、_self、_top(在整个窗口打开,忽略任何框架)
2、书签链接
(1)链接到同一页面:
<a href="#aa">aa</a>
<a href="#bb">bb</a>
<a href="#cc">cc</a>
<a name=”aa”>aa</a>
<a name=”bb”>bb</a>
<a name=”cc”>cc</a>
(2)链接到不同页面:<a href="链接的文件地址#书签的名称">链接的文字</a>
(3)EMAIL 链接:
mailto:// 发送 EMAIL:<a href="mailto:邮件地址?CC=抄送人&BCC=密送
人&Subject=主题& Body=内容”> </a>
多地址的时候地址之间用;分开
五、 使用图像
1、图像格式:主要以 gif、jpeg、png 文件格式。
gif:无损、压缩效率高、跨平台,但只能显示 256 色。适合做商标、新闻式标题或其
他小于 256 色的图像。
Jpeg:有损 适合 256 色以上的图像
Png:它提供了将文件以最小的方式压缩却又不造成图像失真的技术
2、添加图像:<img src="图像文件地址" /> 单标签
3、设置图像属性:
(1)设置图像高度宽度:<img src="图像文件地址" height=图像的高度 />
<img src="图像文件地址" width=图像的宽度 />
单位像素。默认情况下,改变高度的同时,其宽度也会等比例行调整。
如果两个属性都调整,图像可能会变形
(2)图像边框:默认情况下,插入图片没有边框。
<img src="地址" border=”边框宽度” /> 单位像素
(3)图像水平间距:通过调整间距,可以使文字和图像的排班不那么拥挤,更加
协调,单位像素。 <img src="地址" hspace=”20”>
(4)图像垂直间距:<img src="地址" vspace=”20”> 单位像素
(5)图像相对于文字基准线的对齐方式 align(top,middle,bottom)
(6)图像无法显示时提示文字:<ima src="地址" alt="文字的内容">
(7)鼠标放置图片上显示文字:<img src=”地址” title=”文字内容” >
4、图像超链接
(1)整幅图:<a href="地址"><img src="a.jpg" hspace=10 alt="中国"></a>
(2)一副图像切分成不同的区域。