语言入门教程(一)
第一课基础
Html是英文 HyperText Markup Language 的缩写,中文意思是“超文本标志语言”,用它编写的文件(文档)的扩展名是.html或.htm,它们是可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或 FrontPage Editor 等编辑工具来编写Html文件。Html语言使用标志对的方法编写文件,既简单又方便,它通常使用<标志名>标志名>来表示标志的开始和结束(例如标志对),因此在Html文档中这样的标志对都必须是成对使用的。
当我们畅游Internet时,我们透过浏览器所看到的网站,是由HTML (HyperText Markup Language) 语言所构成。HTML ( 超文件标记语言 ) 是一种建立网页文件的语言,透过标记式的指令 (Tag),将影像、声音、图片、文字等连结显示出来。
HTML标记是由 < 和 > 所括住的指令,主要分为 : 单标记指令、双标记指令 ( 由 < 起始标记 >,< / 结束标记 >所构成 ) 。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑,完成后 ( 以 .htm
.html 为文件后缀保存 ) 将HTML网页文件由浏览器打开显示,若测试没有问题则可以放到服务器 (Server) 上,对外发布信息。
HTML文件基本架构
文件开始
标头区开始标头区结束
本文区开始本文区内容
本文区结束
文件结束
网页文件格式。
标头区 : 记录文件基本资料,如作者、编写时间。注意事项
通常一份HTML网页文件包含二个部份 :
... 标头区、 ... 本文区。而 和 代表网页文件格式。习惯上一个网站的首页名称通常订为 index.htm 或 index.html 这样只要浏览网站,浏览器便会自动的找出 index.htm 文件。
第二课字体
如 :
标题
如 :
标题
... 粗体字。
如 : 粗体字
粗体字
... 斜体字。
: 斜体字
斜体字
... 横线 ( 表示删除 )。
如 : 横线
... 打字体 ( 固定宽度文字 )。
如 : 打字体
打字体
... 上标字。
如 : 字体 上标字
字体上标字
... 下标字。
如 : 字体 下标字
字体下标字
注解 ( 不会显示在浏览器上 ),可以多行。如 :
第三课表格
表格是html的一项非常重要功能,利用其多种属性能够设计出多样化的表格。使用表格可以使你的页面有很多意想不到的效果,使页面更加整齐美观。
常用表格标记
相关属性 :
·align 调整
·bgcolor 背景颜色
·border 边框
·height 高度
·width 宽度
相关属性 :
·align 调整
相关属性 :
·align 调整
:
·align 调整
·colspan 栏宽
·rowspan 栏高
·align 调整
·bgcolor 背景颜色
·height 高度
·width 宽度
·colspan 栏宽
·rowspan 栏高
举例
如 : ( 基础型 )
太平洋网络学院 | 太平洋网络学院 |
太平洋网络学院 | 太平洋网络学院 |
太平洋网络学院太平洋网络学院
太平洋网络学院
如 : ( 加强型 ) 增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高。
行标题 1 | 行标题 2 | |||
---|---|---|---|---|
列标题 1 | a | a | a | a |
b | b | b | b | |
列标题 2 | c | c | c | c |
d | d | d | d |
表格标题
行标题 1 行标题 2
a a a a
列标题 1
b b b b
c c c c
列标题 2
d d d d
第四课标示
html提供许多种类的标示标记,作项目标示,而且可以作巢状式标示!
常用标示标记
如 :
1.第一项
2.第二项
如 :
i.第一项
ii.第二项
如 :
?第一项
?第二项
如 :
十进制 :
0、1、2、3、4、5、6、7、8、9
十六进制 :
0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f
巢状式标示
巢状式标示如 :
1.第一章
i.第一节
?第一段
?第二段
ii.第二节
2.第二章
3.第三章
其他标示标记
如 :
网络学院 :
软件教室
网络学院 :
?新手上路
?软件教室
?设计教室
?开发教室
注意事项
标示项目符号也可以用... 标记,以符号字元( ○、◆、◎、?、■...等 ) 标示。
如: ●
特殊符号 :
在html文件中,有些符号是代表特定的意义的。所以当我们要使用这些特殊符号时,便要用替代指令。
符号替代指令
" " 或 "
& 或 &
< < 或 <
> > 或 >
不可分空格 
第五课区段标记
一个网站不仅要内容丰富外,也要有美观简洁的版面。html所提供的区段标记功能,如果可以好好的利用也会有相当不错的效果。
常用区段标记
如 :
跳下一行。
如 : 太平洋网络学院,
网上学电脑的好去处。
太平洋网络学院,
网上学电脑的好去处。
...
段落,跳下一行并加一行空白。 ( 可省略 ) 如 : 太平洋网络学院,网上学电脑的好去处。
太平洋网络学院,
如 :
置中
如 :
太平洋网络学院,网上学电脑的好去处。
...以文件原始格式显示。
如 :
原始格式: 文件
原始格式: 文件
第六课链接
链接可说是html中最重要的功能!因为html拥有链接的功能,使你能接上internet、www ……享受多姿多彩的网络世界。
基本上链接分成 :
外部链接——链接至网络的某个url网址或文件,可参考考网络链接方式。
内部链接——链接html文件的某个区段。
网络链接方式 : //主机名称 / 路径 / 文件名称
网址如 : http : //https://www.doczj.com/doc/7e7366004.html,/
文件传输如 : ftp : //https://www.doczj.com/doc/7e7366004.html,/
gropher 传输如 : gropher : //https://www.doczj.com/doc/7e7366004.html,/
远端登入如 : telnet : //https://www.doczj.com/doc/7e7366004.html,/
文件下载如 : file : //data/html/file.zip
net news 传输如 : news : https://www.doczj.com/doc/7e7366004.html,
e-mail 如 : mailto : pcedu@https://www.doczj.com/doc/7e7366004.html,
常用链接标记
相关属性 :
·href 链接的url位址或文件
·target 指定链接到的url位址或文件显示于那一个视窗 ( 可和
视窗标记配合使用或开新的视窗 )
:
...链接指令。
相关属性 :
·href 链接的url位址或文件
·name 名称
·target 指定链接到的url位址或文件显示于那一个视窗 ( 可和
视窗标记配合使用或开新的视窗 )
如 :
外部链接
第六课链接
内部链接
·ch1.htm 文件
■ ( 欲链接至html文件 a 点 )
文件 a 点 )
·ch2.htm文件
■ (欲链接至ch1.htm 文件 a 点 )
" ■ " 表示链接点,可以是文字或图案。( 即游标移到时,会变成手指形状的地方 )
链接指令 ( 用于head区,设定css文件 )。储存应用资讯,可设定时间载入网页 ( 用于head区 )。
相关属性 :
·charset 设定
·content 回应表头资料内容 , 若是数字表示秒数
·http-equiv 回应表头 , 若设定为refresh载入url设定
·url html位置
如 :
·设定中文自动跳行。
content="text/html;charset=gb2312">
·设定十秒回到首页。 ( 若不设定html文件位置则再载入原html文件 )
设定链接、未链接部份颜色,用
...标记。相关属性 :
·alink按下链接部份未放开时颜色
·link未看过的链接部份颜色
·vlink已看过的链接部份颜色
如 :
第八课设置图片
图片增加了网站版面的美观,不过也不要放了大量的图片,而拖慢网站传输的效率
有关设定图片的方法共有以下几种 :
1.设定html文件背景图片、背景颜色。
...标记。如 :
... 或...2.设定图片。标记。
3.设定地图。标记。
常用图片标记
相关属性 :
·align 调整
·alt 提示字
·border 边框
·he ight 高度
·src 文件或url位址
·usemap 地图名称
·width 宽度
如 : 可插入图片 ( gif、jpg格式 )、avi电影
地图
相关属性 :
·name名称
设定地图动作区域
·coords设定动作区域座标 ( 左上角座标 : x1,y1 ; 右下角座标 : x2,y2 )
·href 动作区域连结点 ( 可载入位址或文件 )
·nohref 动作区域连结点不动作
·shape 外型
举例
设定地图
第九课加入声音
html不仅能插入图片,也可以载入midi音乐、wav 音效喔!
常用音乐标记
·loop 循环 , 背景音乐播放次数
·src 文件或url位址 (可为wav、midi格式 )
如 :
内嵌音乐插件
内嵌插件。
相关属性 :
·height 高度
·width 宽度 ( 可设百分比% )
·src 设定内嵌物件的 url 位址
·loop 循环 , 背景音乐播放次数
·autostart 自动播放
如 :
第十课滚动条
ie提供的滚动条,可不要被众多的属性吓到了,越多的属性功能越强喔!
【文字卷动标记】
文字卷动 ( 滚动条 )。
【相关属性】
·behavior = 设定卷动方式
-- alternate 交替来回卷动
-- scroll 卷动 ( 预设 )
-- slide 滑动
·bgcolor = color 背景颜色
·direction = 设定卷动方向
·height = n 高度
·loop = n 循环 , 卷动次数 ( 预设循环 )
·scrollamount = n 设定卷动距离
·scrolldelay = milliseconds 设定卷动时间
·truespeed = milliseconds 设定卷动速度
·width = n 宽度 ( 可设百分比% )
【举例】