HTML语法复习

转载 2006年05月21日 19:06:00

HTML写作攻略手册

摘引自--叉神工作室


第一章

何谓HTML

HTML 是 Hyper Text Markup Language 的 缩 写,它 的 意 思 是 超 文 本 标 记
语 言, 它 透 过 一 些 特 别 的 标 签 来 展 现 各 种 不 同 的 风 格, 具 备
有 下 列 几 项 特 色 :

  1. 使 用 改 写 标 签
  2. 随 视 窗 大 小 改 变 的 文 件
  3. 忽 略 多 余 的 空 白 与 行
  4. 超 链 结 的 功 能
  5. 可 呼 叫 程 式

HTML 3.0 的 发 展 是 一 种 开 放 式 的 结 果 , 任 何 有 兴 趣 的 人 都 可
加 入 这 一 发 展 的 组 织 , 各 家 浏 览 器 出 版 公 司 都 各 自 发 表 非
协 定 内 的 语 法 , 使 得 制 作 出 的 文 件 显 得 更 加 丰 富 与 华 丽 .

回目 


第二章

一份简单基本的 Home Page

<HTML>
<HEAD>
<TITLE>这是一个标题</TITLE>
</HEAD>
<BODY>
这是一个简单的范例
</BODY>
</HTML>

这一个范例的样子

<HTML>与</HTML> 这 是 用 来 定 义 一 份 文 件 内 的 HTML 段 落 , 此 标 签 可 以 省 略 .
<HEAD>与</HEAD> 这 是 用 来 描 述 HTML 页 的 内 容 , 此 标 签 也 可 以 省 略 .
<TITLE>与</TITLE> 这 是 显 示 文 件 的 标 题 , 会 被 放 在 浏 览 器 的 最 上 方 .
<BODY>与</BODY> 这 是 定 义 HTML 的 界 限 , 此 标 签 可 以 省 略 .

回目 


第三章

背景的变化

语法:
<BODY TEXT=#008000 LINK=#008000 VLINK=#008000 ALINK=#008000 BGCOLOR=#008000>

<BODY BACKGROUND="HTMLBAK.JPG">

TEXT 本文的颜色
LINK 可以链结的文字颜色
VLINK 已链结过的文字颜色
ALINK 被按下的文字颜色
BGCOLOR 背景颜色
BACKGROUND 背景图形

以 上 各 # 後 为 0-9 的 八 个 数 字,代 表 各 种 颜 色 , 若 无 指 定 则 以 浏 览 器 之 内 定 值 为 准 .

回目 


第四章

字体的变化

语法:<H1>等级一的字</H1>
结果:

等级一的字

语法:<H2>等级二的字</H2>
结果:

等级二的字

语法:<H3>等级三的字</H3>
结果:

等级三的字

语法:<H4>等级四的字</H4>
结果:

等级四的字

语法:<H5>等级五的字</H5>
结果:

等级五的字

语法:<H6>等级六的字</H6>
结果:

等级六的字

语法:<I>斜体字</I>
结果:
斜体字

语法:<B>粗体字</B>
结果:
粗体字

语法:<TT>TELETYPE打字机字体</TT>
结果:
TELETYPE打字机字体

语法:<BLINK>闪烁字体</BLINK>
结果:
闪烁字体

回目 


第五章

一些分隔的标签

<BR>强迫跳到下一行

<P>产生一行空白

范例:
BR可强迫换行<BR>却不多跳一行,P则会换行<P>而且多跳一行

结果:
BR可强迫换行
却不多跳一行,P则会换行

而且多跳一行


<HR>水平分隔线(就是像上面的那一条线)

<HR WIDTH=40%>水平线占萤幕的40Tf!%
结果如下:


<HR SIZE=10>水平线变粗
结果如下:


<HR NOSHADE>不透明水平线
结果如下:


回目 


第六章

如何依照自定义排列方式显示

范例:

<PRE>
因HTML会忽略多余的空白与行,所以如果想依照PE2所输入的格式显示.
就必须加入PRE的标签.
HTML就会依照输入的格式排列.
不再忽略多余的空白与行.
</PRE>


回目 


第七章

各种条列的排列

数字化排列

语法:<OL>
<LI>第一章
<LI>第二章
<LI>第三章
</OL>

结果:

  1. 第一章
  2. 第二章
  3. 第三章
语法:<OL TYPE=I>
<LI>第一章
<LI>第二章
<LI>第三章
</OL>

结果:

  1. 第一章
  2. 第二章
  3. 第三章
语法:<OL TYPE=A>
<LI>第一章
<LI>第二章
<LI>第三章
</OL>

结果:

  1. 第一章
  2. 第二章
  3. 第三章

以上TYPE的变化也可用i或a


非数字化排列

语法:<UL>
<LI>第一章
<LI>第二章
<LI>第三章
</UL>

结果:

  • 第一章
  • 第二章
  • 第三章

限定的排列

语法:<DL>
<DT>第一章
<DD>第一小节
<DT>第二章
<DD>第一小节
</DL>

结果:

第一章
第一小节
第二章
第一小节

回目 


第八章

文件中的注解

如 一 个 HTML 的 文 件 非 常 大 , 最 好 加 上 注 解 , <!- 与 -> , 在 此 标 签 中 的 文 字 , 将 不 会 被 浏 览 器 显 示 出 来 .

回目 


第九章

如何使用超链结

在 HTML 文 件 中 的 一 大 特 色 就 是 随 时 可 以 按 一 个 键 就 可 以 连 往 世 界 任 何 一 个 角 落 这 样 的 功 能 其 实 只 要 一 行 指 令 就 可 以 做 到 了 .

语法:<A HREF="http://www.longlan.com.tw/lshow/chieh/chieh.htm">回到目 </A>

结果:回到目 

http:後面是接著一个网路的位址

其他还有下列各种链结:
gopher:连接gopher资料库系统
ftp:连接ftp撷取档案系统
news:连接news新闻讨论群
mailto:连接E-mail寄信
telnet:连接远程载入系统

以 上 链 结 位 址 如 果 在 同 一 机 器 上 即 可 省 略 成 :
<A HREF="/lshow/chieh/chieh.htm">回到许恩杰的烘培鸡</A>

以 上 链 结 位 址 如 果 在 同 一 机 器 上 而 且 在 同 一 目 录 更 可 省 略 成 :
<A HREF="chieh.htm">回到许恩杰的烘培鸡</A>

这就是所谓的相对路径


链结到文件中的某一部份

语法:<A HREF="#TOP">回到本篇文章的最前面</A>
<A NAME="TOP"></A>

结果:回到本篇文章的最前面

以上语法HREF与NAME需相互对应,按下链结点即可前往NAME所在的地方

回目 


第十章

如何加上图形

加上图形也是一件很简单的事情.

语法:<IMG SRC="k_k.jpg" ALT=KEMOON></IMG>

结果:KEMOON

ALT:如使用无法显示图形的浏览器即会出现ALT後所写的文字


图片放置的位置与大小控制

语法:<IMG SRC="k_k.jpg" ALIGN=LEFT></IMG>图片靠左

结果:
图片靠左
 
 
 
 
 
语法:<IMG SRC="k_k.jpg" ALIGN=RIGHT></IMG>图片靠右

结果:
图片靠右
 
 
 
 
 
语法:<IMG SRC="k_k.jpg" ALIGN=TOP></IMG>图片向上对齐

结果:图片向上对齐

语法:<IMG SRC="k_k.jpg" ALIGN=BOTTOM></IMG>图片向下对齐

结果:图片向下对齐

语法:<IMG SRC="k_k.jpg" ALIGN=MIDDLE></IMG>图片向中对齐

结果:图片向中对齐

语法:<IMG SRC="k_k.jpg" HEIGHT=50 WIDTH=40></IMG>指定图片高度为50宽度40

结果:指定图片高度为50宽度40


文字绕图的写法

语法:<IMG SRC="k_k.jpg" ALIGN=LEFT></IMG>
在HOMEPAGE的制作上<BR>
本人也有一些不清楚的地方<BR>
如INPUT FORM 和CGI的配合使用<BR>
在下一次我们将注重讨论<BR>
同时希望个位高手指点<BR>
请大家支持吧<BR>

结果:
在HOMEPAGE的制作上
本人也有一些不清楚的地方
如INPUT FORM 和CGI的配合使用
在下一次我们将注重讨论
同时希望个位高手指点
请大家支持吧

回目 


第十一章

表格的制作

语法:
<TABLE COLSPEC="L20" BORDER>
<CAPTION ALIGN=top></CAPTION>
<TR><TH>这是一个最简单的表格</TH></TR>
</TABLE>

结果:

这是一个最简单的表格

语法:
<TABLE COLSPEC="L20 L20 L20" BORDER>
<CAPTION ALIGN=top></CAPTION>
<TR><TH>第一格</TH><TH>第二格</TH><TH>第三格</TH></TR>
<TR><TH>下一格</TH><TD>下二格</TD><TD>下三格</TD></TR>
</TABLE>

结果:

第一格 第二格 第三格
下一格 下二格 下三格

语法:
<TABLE COLSPEC="C20 L20 L20" BORDER>
<CAPTION ALIGN=top></CAPTION>
<TR><TH COLSPAN=3>跨栏的表格</TH></TR>
<TR><TH>第一项</TH><TD>第二项</TD><TD>第三项</TD></TR>
</TABLE>

结果:

跨栏的表格
第一项 第二项 第三项

语法:
<TABLE COLSPEC="L20 L20" BORDER>
<CAPTION ALIGN=top></CAPTION>
<TR><TH ROWSPAN=2>跨列的表格</TH><TH>右边第一列</TH></TR> <TR><TD>右边第二列</TD></TR>
</TABLE>

结果:

跨列的表格 右边第一列
右边第二列

语法:
<TABLE COLSPEC="L20" BORDER=10>
<CAPTION ALIGN=top></CAPTION>
<TR><TH>这是指定表格线条的粗细</TH></TR>
</TABLE>

结果:

这是指定表格线条的粗细

语法:
<TABLE COLSPEC="L20" BORDER CELLPADDING=20"
<CAPTION ALIGN=top></CAPTION>
<TR><TH>指定字与表格的距离</TH></TR>
</TABLE>

结果:

指定字与表格的距离

语法:
<TABLE COLSPEC="C20" BORDER>
<CAPTION ALIGN=top></CAPTION>
<TR><TH ALIGN=CENTER>以下文字靠左靠右对中</TH></TR>
<TR><TH ALIGN=LEFT>靠左</TH></TR>
<TR><TH ALIGN=RIGHT>靠右</TH></TR>
<TR><TH>对中</TH></TR>
</TABLE>

结果:

以下文字靠左靠右对中
靠左
靠右
对中

回目 


第十二章

分割画面的制作

语法:

<frameset rows="80%,20%">
<frameset cols="20%,80%">
<frame src=html-13b.htm>
<frame src=html-13c.htm name="lwwwbody">
</frameset>
<frame src=html-13d.htm scrolling=no>
</frameset>
<noframes>
没有NetScape的人就只能看到这里了
</noframes>

说明:
frameset-->设定分割画面的大小比例,此标签须有相对的结束标签
rows-->设定分割为上下画面
cols-->设定分割为左右画面
分割画面大小可用下列数值表示:
80%,20%或300,*或40%,20%,*以此类推可分割成各种不同大小的视窗
frame-->设定各个分割视窗分别使用的html
name-->指定此视窗的名称
scrolling=no或yes或auto-->指定此视窗是否要有卷轴bar
noresize-->强迫此视窗不可拖曳改变大小
noframes-->给浏览器不支援分割画面的使用者看的部份,须有结束标签

以下是一些特殊技巧:
在个别视窗中的html如要使用特殊 的功能就必须加一些参数
否则所有的动作将在自己本身的视窗中进行
语法:
<A HREF="LWWW.HTM" target="_top">
<A HREF="lwwwbody.htm#01" target="lwwwbody">

target-->如设定=_top,代表按下此链结整个画面都会变为所指定的链结
如设定=自定的名称,需与name的参数互相配合,
代表按下此链结与指定name相同名称的视窗才会改变画面.

回目 


第十三章

透明图片,及交错图片的制作


未做成透明图片前 已做成透明图片後

透明图片的制作

想要制作以上透明图片效果,首先须有一套合适的图形编辑软体,例如:
LView或Paint Shop Pro都有此功能,在此以Paint Shop Pro为例:

1.开启所需要的图档,将背景色,也就是想变成透明的地方,改成前景所没有
 的颜色.
2.将图片存成GIF格式,关闭再重新开启一次,如图片原就是GIF格式即可省
 略此步骤.
3.选择工具bar上的滴管,将滴管移到要变成透明的地方,此时最下方的状态
 列会出现I:5,5为此颜色的值,依颜色不同此值会不同,记下此值.
4.选择Save As,在存档视窗中的左下角有File Sub-format的选项,选择
 Version 89a-Noninterlaced.
5.按下右方Options会列出四个选项,选择最後一项Set the Transparency Value
 to在後面的空格填上刚才记下的I值,再按下OK,再存档即可完成透明图片
 的制作.

注意事项:
1.尽量不要用会失真的图形格式如JPG来转成GIF,才不会造成转为透明图片
 後有杂点产生.
2.变成透明的颜色必须为前景所没有的,以免造成不想透明的地方也变成透
 明.
3.虽然变成透明图片,原来图片的边缘还是存在的,如要限定图片的位置,就必
 须将透明的边缘考虑进去.
4.如图片边缘有阴影效果,则最好将要透明的颜色设为与HomePage的底色相
 同以免造成阴影部份不自然的现象.


交错图片的制作

所谓交错显示的图片就是在显示时,先出现整张图片大概的样子,再以类
似马赛克的方式渐渐显示出完整的图片.

1.制作步骤与透明图片相似,只是存档时在File Sub-format的选项,要选择
 Version 89a-Interlaced.
2.以此格式存档的图片就会以交错的方式显示.
3.以此方式显示图片速度并不会比以普通方式显示还快,但可让使用者先
 了解图形大概的样子.
4.其实Version 89a-Noninterlaced的格式也会以交错的方式现示图形,但如
 果不想变成透明图片,还是要存成Version 89a-Interlaced的格式.


Return2.gif(1781 bytes)
举报

相关文章推荐

返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)