学习网页制作,网页基础教程html代码 - 『青春校园』 - 会师楼中国甘肃白银会宁人家在线论坛

添加马甲

请在下面输入您的马甲帐号信息, 然后点击 "添加" 按钮. 马甲信息添加后不能修改, 如果您修改了马甲的密码或安全提问, 请删除这个马甲并重新添加.
注意，每添加一个马甲收取工本费 200 金钱

用户名
密码

安全提问
回答

附加设置	将正在使用的帐号添加为正在添加的马甲账号的马甲

会师楼 » 『青春校园』 » 学习网页制作,网页基础教程html代码

‹‹ 上一主题 | 下一主题 ››

39 1/4 1 2 3 4 ››

泡泡熊

举人

UID 1197
精华 0
积分 5179
帖子 838
威望 149
金钱 3486
贡献 2
阅读权限 30
注册 2009-8-7
状态离线

楼主

大中小

使用道具

发表于 2011-4-25 20:43 资料短消息加为好友

分享到：

学习网页制作,网页基础教程html代码

第一章 HTML 概述与基本结构
一、HTML 的概述
HTML的英语意思是：Hypertext Marked Language，即超文本标记语言,是一
种用来制作超文本文档的简单标记语言。超文本传输协议规定了浏览器在运行
HTML 文档时所遵循的规则和进行的操作.HTTP协议的制定使浏览器在运行超文
本时有了统一的规则和标准.用HTML编写的超文本文档称为HTML文档，它能独
立于各种操作系统平台，自1990年以来HTML就一直被用作ＷＷＷ（是World Wide
Web的缩写，也可简写WEB、中文叫做万维网) 的信息表示语言，使用HTML语言
描述的文件，需要通过WEB浏览器显示出效果。
所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每
一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，
这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记
结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术----
通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面与世
界各地主机的文件链接。直接获取相关的主题。如下所示：
通过HTML可以表现出丰富多彩的设计风格：
图片调用：<IMG SRC="文件名">
文字格式： 文字
通过HTML可以实现页面之间的跳转：
页面跳转：〈A HREF="文件路径/文件名"></A>
通过HTML可以展现多媒体的效果：
声频：<EMBED SRC="音乐地址" AUTOSTART=true>
视频：<EMBED SRC="视频地址" AUTOSTART=true>
从上面我们可以看到HTML超文本文件时需要用到的一些标签。在HTML中每
个用来作标签的符号都是一条命令、它告诉浏览器如何显示文本。这些标签均由
"<"和">"符号以及一个字符串组成。而浏览器的功能是对这些标记进行解释，显
示出文字、图像、动画、播放声音。这些标签符号用“<标签名字属性>”来表示。
HTML只是一个纯文本文件。创建一个HTML文档，只需要两个工具，一个是
HTML编辑器，一个WEB浏览器。HTML编辑器是用于生成和保存THML文档的应用
程序。WEB浏览器是用来打开WEB网页文件，提供给我们查看WEB资源的客户端
程序。

泡泡熊

举人

UID 1197
精华 0
积分 5179
帖子 838
威望 149
金钱 3486
贡献 2
阅读权限 30
注册 2009-8-7
状态离线

沙发

大中小

使用道具

发表于 2011-4-25 20:45 资料短消息加为好友

二、 HTML 的基本结构：一个HTML文档是由一系列的元素和标签组成.元素名不区分大小写.HTML用标签来规定元素的属性和它在文件中的位置， HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。下面是一个最基本的html文档的代码:1－1.html ---------------------------------------- 开始标签 -------------------------------------- | 头部标签 -------------------------------------- ---------------------------------------- | 欢迎光临我的主页|
| | 文件主体 | 这是我第一次做主页 | | | --------------------------------------- --------------------------------------- 结尾标签在文档的最外层，文档中的所有文本和html标签都包含在其中，它表示该文档是以超文本标识语言（HTML）编写的。事实上，现在常用的 Web浏览器都可以自动识别HTML文档，并不要求有标签，也不对该标签进行任何操作，但是为了使HTML文档能够适应不断变化的Web浏览器，还是应该养成不省略这对标签的良好习惯。是HTML文档的头部标签, 在浏览器窗口中，头部信息是不被显示在正文中的,在此标签中可以插入其它标记, 用以说明文件的标题和整个文件的一些公公属性。若不需头部信息则可省略此标记，良好的习惯是不省略。是嵌套在头部标签中的，标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。标记一般不省略，标签之间的文本是正文，是在浏览器要显示的页面内容。上面的这几对标签在文档中都是唯一的，HEAD标签和BODY标签是嵌套在 HTML标签中的。

泡泡熊

举人

UID 1197
精华 0
积分 5179
帖子 838
威望 149
金钱 3486
贡献 2
阅读权限 30
注册 2009-8-7
状态离线

板凳

大中小

使用道具

发表于 2011-4-25 20:45 资料短消息加为好友

三、 HTML 的标签与属性:
对于刚刚接触超文本的朋友，遇到的最大的障碍就是一些用“<”和 “>”
括起来的句子，我们称它为标签，是用来分割和标签文本的元素，以形成文本的
布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来
标识文档某个部件。属性是标志里的参数的选项，
HTML的标签分单标签和成对标签两种。成对标签是由首标签<标签名> 和尾
标签</标签名>组成的，成对标签的作用域只作用于这对标签中的文档。单独标
签的格式<标签名>，单独标签在相应的位置插入元素就可以了，大多数标签都有
自己的一些属性, 属性要写在始标签内，属性用于进一步改变显示的效果, 各属
性之间无先后次序，属性是可选的，属性也可以省略而采用默认值;其格式如下：
<标签名字属性1 属性2 属性3 … >内容</标签名字>
作为一般的原则，大多数属性值不用加双引号。但是包括空格、％号，＃号
等特殊字符的属性值必须加入双引号。为了好的习惯，提倡全部对属性值加双引
号。如：
字体设置

注意事项：输入始标签时，一定不要在“<”与标签名之间输入多余的空格，
也不能在中文输入法状态下输入这些标签及属性，否则浏览器将不能正确的识别
括号中的标志命令，从而无法正确的显示你的信息
不管是不是" 扫盲"高手也是从这里起步!!有喜欢的我将发到'ASP'编程没人喜欢就不发了!

泡泡熊

举人

UID 1197
精华 0
积分 5179
帖子 838
威望 149
金钱 3486
贡献 2
阅读权限 30
注册 2009-8-7
状态离线

地毯

大中小

使用道具

发表于 2011-4-25 20:46 资料短消息加为好友

第二章 HTML主体标签及属性、颜色的设定
为了使你的网页绚丽多姿，吸引更多的浏览者阅读，可以给网页添加更多的
标签及属性，这是为了对网页中的元素进行修饰、布局。下面就来逐一介绍这些
标签。
一、 html 的主体标签<body>
在<body>和</body>中放置的是页面中所有的内容，如图片、文字、表格、表
单、超链接等设置。
<body>标签有自己的属性，设置 <body>标签内的属性，可控制整个页面的显
示方式。
<body>标签的属性
属性描述
link 设定页面默认的连接颜色
alink 设定鼠标正在单击时的连接颜色
vlink 设定访问后连接文字的颜色
background 设定页面背景图像
bgcolor 设定页面背景颜色
leftmargin 设定页面的左边距
topmargin 设定页面的上边距
bgproperties 设定页面背景图像为固定，不随页面的滚动而滚动
text 设定页面文字的颜色
格式：
<body text="#000000" link="#000000" alink="#000000" vlink="#000000"
background="gifnam.gif" bgcolor="#000000" leftmargin=3 topmargin=2
bgproperties="fixed">
实例：2-1.html
<html>
<head>
<title>bady的属性实例</title>
</head>
<body bgcolor="#FFFFE7" text="#ff0000" link="#3300FF" alink="#FF00FF"
vlink="#9900FF">
<center>
<h2>设定不同的连接颜色</h2>
测试body标签
<a href="http://www.baidu.com/">默认的连接颜色</a>

<a href="http://www.sina.com.cn">正在按下的连接颜色,</a>

<a href="http://www.sohu.com/">访问过后的连接颜色,</a>

<a href="#" >返回</a>
</conter>
</body>
</html>
实例说明：
<body>的属性设定了页面的背景颜色，文字的颜色，链接的颜色为#3300ff，
单击的连接颜色为#ff00ff，单击过后的颜色为#9900ff。
Body里面的是页面中的链接标签，对于属性可根据页面的效果来定，用那
个属性就设定那个属性。对于上面的属性在后面的章节中还会介绍，在这里就不
逐一引用了，我们的学习目的主要是掌握标签及属性的使用方法。

泡泡熊

举人

UID 1197
精华 0
积分 5179
帖子 838
威望 149
金钱 3486
贡献 2
阅读权限 30
注册 2009-8-7
状态离线

第5楼

大中小

使用道具

发表于 2011-4-25 20:47 资料短消息加为好友

二、颜色的设定
颜色值是一个关键字或一个RGB格式的数字。在网页中用得很多，在此就先
介绍一下。
颜色是由 "red" "green" "blue " 三原色组合而成的，在 HTML 中对颜色
的定义是用十六进位的，对於三原色 HTML 分别给予两个十六进位去定义，也就
是每个原色可有 256 种彩度，故此三原色可混合成16777216种颜色。
例如：白色的组成是 red=ff, green=ff, blue= ff,RGB 值即为ffffff
红色的组成是 red=ff, green= 00, blue= 00, RGB值即为ff0000
绿色的组成是 red=00, green=ff, blue= 00, RGB值即为
00ff00
蓝色的组成是 red=00, green= 00, blue= ff, RGB值即为
0000ff
黑色的组成是 red=00, green=00, blue=00, RGB 值即为
000000
应用时常在每个 RGB 值之前加上“ # “ 符号，如： bgcolor="#336699" 用
英文名字表示颜色时直接写名字。如 bgcolor=green
RGB颜色可以有四种表达形式:：
• #rrggbb (如，#00cc00)
• #rgb (如，#0c0)
• rgb(x,x,x) x是一个介乎 0 到 255之间的整数 (如，rgb(0,204,0))
• rgb(y%,y%,y%) y 是一个介乎 0.0到 100.0之间的整数 (如， rgb(0%,80%,0%)
Windows VGA(视频图像阵列)形成了16各关键字: aqua，black， blue，
fuchsia, gray，green， lime，maroon，navy，olive， purple，red，silver，
teal，white，and yellow

泡泡熊

举人

UID 1197
精华 0
积分 5179
帖子 838
威望 149
金钱 3486
贡献 2
阅读权限 30
注册 2009-8-7
状态离线

第6楼

大中小

使用道具

发表于 2011-4-25 20:48 资料短消息加为好友

第三章文字版面的编辑
3-1 换行标签 
换行标签是个单标签，也叫空标签，不包含任和内容，在html文件中的任何位置只要使用了 标签，当文件显示在浏览器中时，该标签之后的内容将显示下一行。

请看下面的例子：3-1html

<html>

<head>
<title>无换行示例</title>
</head>

<body>
无换行标记：登鹳雀楼　白日依山尽，黄河入海流。欲穷千里目，更上一层楼。
 有换行标记： 登鹳雀楼 白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。
</body>

</html>

3-2 换段落标签及属性：

由标签所标识的文字，代表同一个段落的文字。不同段落间的间距等于连续加了两个换行符，也就是要隔一行空白行，用以区别文字的不同段落。它可以单独使用，也可以成对使用。单独使用时，下一个的开始就意味着上一个的结束。良好的习惯是成对使用。

格式：




其中,ALIGN是标签的属性,属性有三个参数left,center,right.这三个参数设置段落文字的左,中,右位置的对齐方式.

实例:3-2html

<html>
<head>
<title>测试分段控制标签</title>
</head>
<body>
花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨，
就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂死的鸣叫。
或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。
而美丽苦短的花期
却是那最后悲伤的秋风挽歌中的瞬间插曲。
</body>
</html>

3-3 原样显示文字标签<pre>

要保留原始文字排版的格式,就可以通过<pre>标签来实现,方法是把制作好的文字排版内容前后分别加上始标签<pre>和尾标签</pre>.

实例:3-3html

<HTML>
<HEAD>
<TITLE>原样显示文字标签</TITLE>
</HEAD>
<BODY>
<PRE>
白日依山尽，

 黄河入海流。

 欲穷千里目，

 更上一层楼。
</PRE>
</BODY>
</HTML>

3-4 居中对齐标签<center>

文本在页面中使用<center>标签进行居中显示,<center>是成对标签,在需要居中的内容部分开头处加<center>,结尾处加</center>

实例：3-4html

<HTML>
<HEAD>
<TITLE>居中对齐标签</TITLE>
</HEAD>
<BODY>
<CENTER>

《送孟浩然之廣陵》

故人西辭黃鶴樓，

煙花三月下揚州。

孤帆遠影碧山盡，

惟見長江天際流。
</CENTER>
</BODY>
</HTML>

3-5 引文标签 (缩排标签）<blockquote>

<blockquote>标签可以用来建立一个引文，他特别适合较长文本的引用，引文显示时将会自动右移，左边空出几个格，加以区别。

实例：3-5html

<HTML>
<HEAD>
<TITLE>引文标签</TITLE>
</HEAD>
<BODY>
春 
<PRE>
<BLOCKQUOTE>
盼望着，盼望着，东风来了，春天脚步近了。 
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球,赛几趟跑，捉几
回迷藏。风轻悄悄的，草软绵绵的。
</BLOCKQUOTE>
<BLOCKQUOTE><BLOCKQUOTE>
桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味儿；闭了眼，村上仿佛已
经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草
丛里像眼睛，像星星，还眨呀眨的。
“吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味儿，还有各种花的香，都在微微润湿的
空气里酝酿。鸟儿将巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，跟轻风流水应和着。牛背上牧童
的短笛，这时候也成天嘹亮地响着。
雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟。树叶儿却绿得发
亮。小草儿也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。在乡下，小路上，石桥边，有撑着伞慢
慢走着的人；地里还有工作的农民，披着蓑戴着笠。他们的房屋，稀稀疏疏的，在雨里静默着。
</BLOCKQUOTE></BLOCKQUOTE>
<BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE>
天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，也都赶趟儿似的，一个个都出来了。舒活舒活筋骨，抖擞
抖擞精神，各做各的一份事儿去。
“一年之计在于春”，刚起头儿，有的是工夫，有的是希望。
春天像刚落地的娃娃，从头到脚都是新的，它生长着。
春天像小姑娘，花枝招展的，笑着，走着。
春天像健壮的青年，有铁一般的胳膊和腰脚，他领着我们上前去。
</BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE>
</PRE>
</BODY>
</HTML>

3-6水平分隔线标签<hr>

<hr>标签是单独使用的标签，是水平线标签，用于段落与段落之间的分隔，使文档结构清晰明了，使文字的编排更整齐。通过设置<hr>标签的属性值，可以控制水平分隔线的样式。

<hr>标签的属性

属性
参数
功能
单位
默认值

size

设置水平分隔线的粗细
pixel(像素）
2

width

设置水平分隔线的宽度
pixel(像素）、%
100%

align
left enter right
设置水平分隔线的对齐方式

center

color

设置水平分隔线的颜色

black

noshade

取消水平分隔线的3d阴影



实例：3-6html

<HTML>
<HEAD>
<TITLE>测试水平分隔线标签</TITLE>
</HEAD>
<BODY>
<CENTER>
春 晓
<HR >
春眠不觉晓，
<hr size="6">
处处闻啼鸟。
<hr width="40%">
夜来风雨声，
<hr width="60" align="left">
花落知多少？
<hr size="6" width="30%" align="center" noshade color=red >
</CENTER>
</BODY>
</HTML>

3-7署名标签<address>

 <address>署名标签一般用于说明这个网页是由谁或是由哪个公司编写的，以及其它相关信息。在<address></address>标签之间的文字显示效果是斜体字。

实例：3-7html

<HTML>
<HEAD>
<TITLE>署名标签</TITLE>
</HEAD>
<BODY>
<CENTER>
乐游原
<HR WIDTH="50%" SIZE="5" COLOR="FFCC00" ALIGN=CENTER>
<PRE>
向晚意不适，
驱车登古原。
夕阳无限好，
只是近黄昏。
</PRE>
<HR WIDTH="50%" SIZE="5" COLOR="FFCC00" ALIGN=CENTER>
<ADDRESS>
[唐] 李商隐
</ADDRESS>
</BODY>
</HTML>
3-8特殊字符

在HTML文档中，有些字符没办法直接显示出来，例如?. 使用特殊字符可以将键盘上没有的字符表达出来，而有些HTML文档的特殊字符在键盘上虽然可以得到，但浏览器在解析HTML文当时会报错，例如"<"等，为防止代码混淆，必须用一些代码来表示它们。

HTML几种常见特殊字符及其代码表

特殊或专用字符
字符代码特殊或专用字符
字符代码
< < © ©
> > × ×
& & ® ®
" " 空格

实例：3-8html

<HTML>
<HEAD>
<TITLE>特殊字符</TITLE>
</HEAD>
<BODY>
<CENTER>
<赋得古原草送别>
<HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE>
<PRE>
离离原上草，
一岁一枯荣。
野火烧不尽，
春风吹又生。
</PRE>
<HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE>
<ADDRESS>
白居易 ©
</ADDRESS>
</BODY>
</HTML>

3-9注释标签

在HTML文档中可以加入相关的注释标记，便于查找和记忆有关的文件内容和标识，这些注释内容并不会在浏览器中显示出来。

注释标签的格式有如下：

泡泡熊

举人

UID 1197
精华 0
积分 5179
帖子 838
威望 149
金钱 3486
贡献 2
阅读权限 30
注册 2009-8-7
状态离线

第7楼

大中小

使用道具

发表于 2011-4-25 20:49 资料短消息加为好友

实例:3-9html <赋得古原草送别> 离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。白居易 © 3-10字体属性 3-10-1标题文字标签标签用于设置网页中的标题文字，被设置的文字将以黑体或粗体的方式显示在网页中。标题标签的格式：<HN align="参数〉标题内容说明：标签是成对出现的，标签共分为六级，在...之间的文字就是第一级标题，是最大最粗的标题；...之间的文字是最后一级，是最小最细的标题文字。align属性用于设置标题的对齐方式，其参数为 left（左）， enter（中)， right (右）。标签本身具有换行的作用，标题总是从新的一行开始。实例 3-10-1html 一级标题。二级标题。三级标题。四级标题。五级标题。六级标题。3-10-2文字格式控制标签[size=+0] [size=+0]标签用于控制文字的字体，大小和颜色。控制方式是利用属性设置得以实现的。 FONT标签的属性属性使用功能默认值 face 设置文字使用的字体宋体 size 设置文字的大小 3 color 设置文字的颜色黑色格式：[size=值2] 说明：如果用户的系统中没有face属性所指的字体，则将使用默认字体。size属性的取值为1~7。也可以用"+"或"-"来设定字号的相对值。color属性的值为：rgb颜色"#nnnnnn"或颜色的名称实例：3-10-2html 盼望着，盼望着，东风来了，春天脚步近了。 [size=+3]一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。 3-10-3特定文字样式标签在有关文字的显示中，常常会使用一些特殊的字形或字体来强调、突出、区别以达到提示的效果。在html中用于这种功能的标签可以分为两类，物理类型和逻辑类型。 1、物理类型 (1) 粗体标签放在与标签之间的文字将以粗体方式显示。 (2) 斜体标签放在与标签之间的文字将以斜体方式显示。 (3) 下划线标签放在与标签之间的文字将以下划线方式显示。实例3-10-31html [size=+2]这些文字是粗体的

这些文字是斜体的

这些文字带有下划线 2、逻辑类型逻辑类型是使用一些标签来改变字体的形态和式样，以便产生一些浏览者习惯的或约定的显示效果，常用的逻辑类型标签有八种，放在标签之间的文字受其控制。下面请看常用逻辑标签的实例实例3-10-32htrml em标签：用于强调的文本，一般显示为斜体字 strong标签：用于特别强调的文本，显示为粗体字 cite标签：用于引证和举例，通常是斜体字 code标签：用来指出这是一组代码 small标签：规定文本以小号字显示 big标签：规定文本以大号字显示 samp标签：显示一段计算机常用的字体，即宽度相等的字体 kbd标签：由用户输入文本，通常显示为较粗的宽体字 var标签：用来表示变量，通常显示为斜体字 dfn标签：表示一个定义或说明，通常显示为斜体字 sup标签：122=144 sub标签：硫酸亚铁的分子式是Fe2SO4