细说HTML标签Word文档下载推荐.docx
- 文档编号:18059918
- 上传时间:2022-12-13
- 格式:DOCX
- 页数:45
- 大小:77.90KB
细说HTML标签Word文档下载推荐.docx
《细说HTML标签Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《细说HTML标签Word文档下载推荐.docx(45页珍藏版)》请在冰豆网上搜索。
9.表格标签:
教导您如何在网页中运用表格。
10.序列标签:
教导您如何设定文字序列或图形序列。
11.表单标签:
教导您如何制作可填写用的表单。
12.框架标签:
可让同一个视窗由多个网页一起组成。
13.其他技巧:
让您的整个网页背景可以让您设定为图片或是声音。
4.1
网页架构
<
回细说索引>
HTML>
HEAD>
TITLE>
工具啦网页制作教学<
/TITLE>
Meta>
/HEAD>
BODY>
BODY之间则为主要语法所在,也是网页的主要呈现部分。
/BODY>
/HTML>
【标签解说】
以上看到的就是一篇最简单架构的网页。
没错,网页其实就是一堆标签(所谓标签就是指被<
>
包起来的语法)集合起来的,透过浏览器的消化整理,就便成了美仑美奂的网页了。
简单而言,通常一份完整的网页包含了二个部份:
抬头(HEAD)、文件本体(BODY)。
也就是各位在上面所看到的<
以及<
。
在抬头的部份<
中,有另一组标签<
打在<
这里面的文字会出现在浏览器视窗最上头蓝色部份里,当作一篇网页的主题。
您可能会发现,为什么我一直没提到<
这一组标签,嗯!
因为它可有可无。
这一组标签是告诉浏览器说:
我是一份HTML文件喔!
也就是说它是一个网页的格式啦!
通常都包在网页的最上下两端,将所有的原始码都包起来。
4.2
分隔标签
【文字上的分隔标签】
或许你已经发现这个问题了:
天啊!
我不是在记事本里排版排得很漂亮,为何透过浏览器看起来一切都走了样?
对啊!
别太讶异,在网页的编排里,并不像汉书或WORD一样,只要拼命按Enter键或空白键,便能完成分段或分行,因为,HTML语言是不认识我们所谓的Enter键或空白键,所以不管您按了多少次的空白或Enter,浏览器都会当作没看见啦!
14.使用方法:
强制断行标签<
br>
、强制分段标签<
p>
15.标签解说:
我们在写文章时,有时候在特定的地方会强迫断行(<
),或是在写完某一段的时候便会分段(<
),写网页也一样,而且更需要断行及分段的功能,以免整个网页看起来乱糟糟的。
16.使用范例:
原始码
呈现结果
这是一个断行的范例<
看出来了吗?
这是一个断行的范例
这是一个分段的范例<
基本上他会比断行还多空出一行
这是一个分段的范例
基本上分段会比断行还多空出一行
【分隔线标签】
17.使用方法:
上一段文字内容<
hr>
下一段文字内容
18.标签解说:
利用<
这个标签便可产生一条横分隔线。
另外,其有些属性分别说明如下:
19.使用范例:
一般用法
尚未加任何属性。
普通分隔线<
普通分隔线
颜色属性
用法:
hrcolor="
颜色码或颜色名称"
橘色分隔线<
#ff8000"
橘色分隔线
宽度属性
hrwidth="
宽度"
,其单位为px(像素),宽度亦可用百分比来作设定,如50%即意为宽度占萤幕50%。
宽度为240px的分隔线<
240"
宽度为240px分隔线
厚度属性
hrsize="
厚度"
厚度为5的分隔线<
5"
厚度为5分隔线
位置属性
hralign="
水平对齐位置"
,其设定值有三个,也就是置左align="
left"
、置中align="
center"
、置右align="
right"
靠右的分隔线<
靠右的分隔线
阴影属性
hrnoshade>
,无设定值,只要将noshade加入即可,通常会配合颜色设定,效果较佳。
实心分隔线(无阴影)<
实心分隔线(无阴影)
4.3
排版标签
【文字置左、置中、置右】
20.使用方法:
老实说,刚刚我们学过的分段标签<
再加上一些简单的属性设定,就可以让其整个文字段落置左、置中或置右了,就如下表所示:
palign="
文字靠左<
/p>
文字靠左
文字置中<
文字置中
文字靠右<
文字靠右
标签解说:
嗯!
秘诀就在于“align=对齐位置”而已啦!
align是分段标签<
的属性之一,这个属性将来会常常在不同标签中看到,它的功能是专门在设定“水平对齐位置”,其常见的设定值有三个,也就是置左(align="
)、置中(align="
)、置右(align="
)。
【置中标签】
21.使用方法:
center>
这是置中<
/center>
22.标签解说:
这个标签是最常用到的标签了,除了文字,对于图片、表格,任何可以显现在网页上的东西都可以置中喔!
23.使用范例:
这是最中间<
这是最中间
【向右缩排标签】
24.使用方法:
blockquote>
要缩排的文字<
/blockquote>
25.标签解说:
这个标签可以将其包起来的文字,全部往右缩排。
而且加一组标签,往右缩排一单位,加两组标签,往右缩排两单位,依此类推。
26.使用范例:
缩排1单位<
缩排1单位
缩排2单位<
缩排2单位
【保存原始格式标签】强烈推荐!
27.使用方法:
pre>
文字内容<
28.标签解说:
/pre>
这个标签可以将其包起来的文字排版、格式,原封不动的呈现出来。
算是相当好用的标签之一。
29.使用范例:
文 字
格 式
4.4
字体标签
【标题标签】
30.使用方法:
h1>
标题内容<
/h1>
31.标签解说:
标题的大小一共有六种,两个标签一组,也就是从<
到<
h6>
,<
最大,<
最小。
使用标题标签时,该标签会将字体变成粗体字,并且会自成一行。
32.使用范例:
标题一<
标题一
h2>
标题二<
/h2>
标题二
h3>
标题三<
/h3>
标题三
h4>
标题四<
/h4>
标题四
h5>
标题五<
/h5>
标题五
标题六<
/h6>
标题六
【设定字体大小标签】
33.使用方法:
fontsize=3>
/font>
34.标签解说:
标题的大小一共有七种,也就是<
fontsize=1>
(最小)到<
fontsize=7>
(最大),另外,还有一种写法:
fontsize=+1>
,其意思就是说:
比预设字大一级。
当然也可以fontsize=+2(比预设字大二级),或是fontsize=-1(比预设字小一级),以一般而言,预设字体多为3。
35.使用范例:
字体一<
或是
fontsize=-2>
字体一
fontsize=2>
字体二<
fontsize=-1>
字体二
字体三<
fontsize=+0>
字体三
fontsize=4>
字体四<
字体四
fontsize=5>
字体五<
fontsize=+2>
字体五
fontsize=6>
字体六<
fontsize=+3>
字体六
字体七<
fontsize=+4>
字体七
【字型变化标签】
36.使用方法:
b>
文字<
/b>
37.标签解说:
在文字标签里,对于文字的格式也有相当多的变化,如粗体、斜体...等,此外,也定义了一些现成的格式供编者使用,如‘强调’、‘原始码’...等,当然,这只是方便您参考用,并无强迫说遇到原始码就要加上‘原始码’的标签。
38.使用范例:
粗体<
粗体
i>
斜体<
/i>
斜体
u>
底线<
/u>
底线
sup>
上标<
/sup>
上标
sub>
下标<
/sub>
下标
tt>
打字机<
/tt>
打字机
blink>
闪烁<
/blink>
(ie没效果)
闪烁
em>
强调<
/em>
强调
strong>
加强<
/strong>
加强
samp>
范例<
/samp>
范例
code>
原始码<
/code>
var>
变数<
/var>
变数
dfn>
定义<
/dfn>
定义
cite>
引用<
/cite>
引用
address>
所在地址<
/address>
所在地址
【文字颜色设定】
39.使用方法:
fontcolor="
#fefecb"
文字颜色<
40.标签解说:
文字也可以设定颜色喔!
至于颜色有哪些....这....哪天我心血来潮再来做个色彩对应表吧!
41.使用范例:
#ff0000"
红<
红色的字喔!
橙<
橙色的字喔!
#ffff00"
黄<
黄色的字喔!
#00ff00"
绿<
绿色的字喔!
#0080ff"
蓝<
蓝色的字喔!
#0000a0"
靛<
靛色的字喔!
#8000ff"
紫<
紫色的字喔!
#000000"
黑<
黑色的字喔!
#c0c0c0"
灰<
灰色的字喔!
4.5
文字标签
【文字字型设定】
42.使用方法:
fontface="
字型名称"
43.标签解说:
网页上也可以使用字型喔!
唯一的一个限制是:
对方也要有该字型!
否则看到的仍然还是宋体。
另外要说明的是,这个标签并无法保证在每个浏览器上都能正常的显现,不过这并没有关系,看不到特殊的字型时,浏览器仍会以宋体来显示,所以不用怕会一团乱!
另外,如果您的网页中有加上这一行叙述<
metahttp-equiv="
content-type"
content="
text/html;
charset=big5"
(指定网页的语言格式,以后我会解释),那么,netscape可以正确显示出中文,但英文无反应。
若没有加该行,那么英文会正确显示,但中文却仍是宋体。
至于ie系列,均能正常显示。
44.使用范例:
楷体"
楷体<
楷体
华康俪中黑"
华康俪中黑<
华康俪中黑
【特殊字元】
45.使用方法:
&
nbsp;
46.标签解说:
很多特殊的符号是需要特别处理的,比如说"
<
"
、"
>
这两个符号若想要呈现在网页上是没有办法直接打"
的,要呈现"
必须输入编码表示法:
“&
lt;
”,常用的如下:
47.使用范例:
(&
代表一个不断行空白)
gt;
amp;
quot;
【设定文字内定值大小】
48.使用方法:
basefontsize="
1~7"
49.标签解说:
这个标签可以改变文字大小的内定值,直接加在<
body>
标签之后就行了。
一般而言,若是没有特别设定,文字大小内定值预定值为3。
4.6
影像标签
【影像标签】
在使用影像标签时有两件事值得注意一下,一是档名,二是路径。
首先要注意的就是,档名是否正确以及大小写是否一致!
图档名称不正确,任电脑再厉害也找不到您要的图,档名大小写不一致,如Image.gif、image.gif、image.GIF在自己的电脑中看都能正确的显示,但是一但传到网路上去时,因为系统不一样的关系(电脑伺服器的作业系统可比个人用电脑的作业系统严谨多了)就变成三个不一样的档案了,所以,可别忽略档名大小写不一致的影响。
另外一个就是路径问题了,这个问题也不难,我们在稍后会提到。
我们先来看看影像的标签如何写。
50.使用方法:
imgsrc="
boy.gif"
alt="
本站特约模特儿"
align=rightborder=0hspace=2vspace=2height=56width=32>
51.标签解说:
目前常见的网页图形格式有两种就是gif及jpg两种格式。
gif格式只有256色,不过色彩比较鲜艳干净漂亮,适合电脑美工图案。
而jpg格式的图案是全彩失真压缩,比较适合一大堆颜色的图片,如照片就较适合用jpg格式来呈现。
52.使用范例:
基本用法
图档名称、路径"
显示图片最基本的方法(就是不加任何属性啦!
)其中boy.gif就是图档的档名。
http:
//www.tool.la/logo/logo2.gif"
嗨!
我是本站的模特儿喔!
长宽设定
图档"
height="
高度"
width="
设图片的大小,其实不用设也可以,但是有设更好,可以加快浏览速度,因为浏览器就不用在那边花时间算您的图片有多大啦!
此外您也可以自己随意设定图片大小。
加上说明
alt="
说明文字"
滑鼠一到图上时,说明文字就会自动出现。
此外,在图片未显示出来或显示不出来时,也会以这一段字代替,让使用者知道这个未显示出来的图片究竟是干嘛用的。
移到图上看看。
图片位置
align="
位置"
图片位置设定!
可以靠左放:
align=left、靠上align=top、靠下align=bottom、垂直置中align=middle,其中靠左放可以造成‘文绕图’的效果。
align=right>
我往右边靠!
align=left>
我往左边靠!
align=top>
文字对齐我头顶!
align=bottom>
文字对齐我脚底!
align=middle>
文字对齐我中间!
align=absmiddle>
文字对齐我绝对中间!
边框设定
border="
边框粗细"
设定边框大小,通常都设成0感觉比较美观啦!
因为内定的框框实在是不怎么漂亮....。
尤其在链接时,设框框简直是丑毙了...。
4"
左右间距
hspace="
离左右物件的距离"
离文字的水平距离,通常多少也设一点,以免靠文字太近,看起来才不会有太挤的感觉。
左边的字<
15"
右边的字
左边的字
上下间距
vspace="
离上下物件的距离"
离文字的垂直距离,通常多少也设一点,以免靠文字太近,看起来才不会有太挤的感觉。
上面的字<
下面的字
上面的字
由于此网页有用css控制版面图文,故在netscape下观看,会稍有不正确。
【网页影像重要观念】
53.关于路径:
现在我们来谈谈图片路径的事,路径不对,不管您的网页名称写的多正确也没用,因为浏览器无法寻着您的路径去找到该有的图片,所以,我们来看看该如何正确的使用路径。
有些人并不喜欢将网页及图通通放在同一个目录下,比如说有人将图档全放在c:
\images里,而网页档放在c:
\demo里,这样子的话,我们该如何正确的写图片的路径呢?
我将几种常见的情形整理成下表:
html档的位置
图档的位置
写法
情形说明
c:
\demo
logo.gif"
图文均在同一目录
\demo\images
images/logo.gif"
图在网页下一层目录
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 细说 HTML 标签