HTML入门教程.docx
- 文档编号:5444201
- 上传时间:2022-12-16
- 格式:DOCX
- 页数:17
- 大小:22.72KB
HTML入门教程.docx
《HTML入门教程.docx》由会员分享,可在线阅读,更多相关《HTML入门教程.docx(17页珍藏版)》请在冰豆网上搜索。
HTML入门教程
HTML语言入门教程
第一课HTML语言基础
当我们畅游Internet时,我们透过浏览器所看到的网站,是由HTML(HyperTextMarkupLanguage)语言所构成。
HTML(超文件标记语言)是一种建立网页文件的语言,透过标记式的指令(Tag),将影像、声音、图片、文字等连结显示出来。
HTML标记是由<和>所括住的指令,主要分为:
单标记指令、双标记指令(由<起始标记>,结束标记>所构成)。
HTML网页文件可由任何文本编辑器或网页专用编辑器编辑,完成后(以.htm或.html为文件后缀保存)将HTML网页文件由浏览器打开显示,若测试没有问题则可以放到服务器(Server)上,对外发布信息。
HTML文件基本架构
文件开始
标头区开始标头区结束
本文区开始本文区内容
本文区结束
文件结束
网页文件格式。
标头区:记录文件基本资料,如作者、编写时间。
文件标题须使用在标头区内,可以在浏览器最上面看到标题。
文件资料,即在浏览器上看到的网站内容。
注意事项
通常一份HTML网页文件包含二个部份:
...标头区、...本文区。而和代表网页文件格式。
习惯上一个网站的首页名称通常订为index.htm或index.html这样只要浏览网站,浏览器便会自动的找出index.htm文件。
第二课字体设置
我们在这里将要谈的是有关文字的标记,包括字体大小、颜色、字型...等变化,适当的应用可以增加页面的美观!
常用字体标记
通常用在如章节、段落等标题上。
如:
标题
标题
如:
标题
...粗体字。
如:
粗体字
粗体字
...斜体字。
如:
斜体字
斜体字
...加底线。
如:
加底线
加底线
...横线(表示删除)。
如:
横线
...打字体(固定宽度文字)。
如:
打字体
打字体
...上标字。
如:
字体上标字
字体上标字
...下标字。
如:
字体下标字
字体下标字
...>注解(不会显示在浏览器上),可以多行。
如:
更新日期:
2000/1/1>
设定字体大小、颜色、字型
有关设定文字的方法共有以下几种:
1.设定HTML文件主体文字颜色。
...标记。如:
2.设定基本字体大小、颜色、字型。
3.设定字体大小、颜色、字型。
...标记。
如:
基本字体大小为4
如:
设定颜色
如:
设定字型
...基本字体加大。
如:
加大为5
基本字体大小为4,加大为5
...基本字体减小。
如:
减小为3
基本字体大小为4,减小为3
...设定字体大小、颜色、字型,SIZE=1~7,1(最小)7(最大)。
如:
字体大小为4
如:
基本字体大小为4
+1字体大小为5
-2字体大小为2
如:
设定颜色
如:
设定字型
注意事项
1.设定字体的大小分:
绝对SIZE如:
和相对SIZE如:
2.设定字体的颜色可以是颜色名称或#RRGGBB表红绿蓝强度(00暗~FF亮)。
#RRGGBB所代表的是红、绿、蓝三原色,每一色由两位十六进制的数值表示(即十进制0~255)。
十六进制:
0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F。
3.设定字体的字型会按照顺序找出显示的字型,若找不到则以系统预设字型显示
第三课表格
表格是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
看了以上的例子,应该了解表格的基本写法吧!
第四课标示
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
十进制:
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:
//
文件传输如:
ftp:
//
GROPHER传输如:
gropher:
//
远端登入如:
telnet:
//
文件下载如:
file:
//data/html/file.zip
NETNEWS传输如:
news:
E-Mail如:
mailto:
pcedu@
常用链接标记
相关属性:
·HREF链接的URL位址或文件
·TARGET指定链接到的URL位址或文件显示于那一个视窗(可和视窗标记配合使用或开新的视窗)
如:
// //TARGET=frame1> ...链接指令。 相关属性: ·HREF链接的URL位址或文件 ·NAME名称 ·TARGET指定链接到的URL位址或文件显示于那一个视窗(可和视窗标记配合使用或开新的视窗) 如: 外部链接 // //TARGET=frame1>■ 内部链接 ·CH1.HTM文件 ·CH2.HTM文件 "■"表示链接点,可以是文字或图案。 (即游标移到时,会变成手指形状的地方) 链接指令(用于HEAD区,设定CSS文件)。 储存应用资讯,可设定时间载入网页(用于HEAD区)。 相关属性: ·CHARSET设定 ·CONTENT回应表头资料内容,若是数字表示秒数 ·HTTP-EQUIV回应表头,若设定为REFRESH载入URL设定 ·URLHTML位置 如: ·设定中文自动跳行。 ·设定十秒回到首页。 (若不设定HTML文件位置则再载入原HTML文件) 设定链接、未链接部份颜色 设定链接、未链接部份颜色,用 相关属性: ·ALINK按下链接部份未放开时颜色 ·LINK未看过的链接部份颜色 ·VLINK已看过的链接部份颜色 如: 第七课框架 框架架构的标记,主要是分割窗口和插入浮动窗口的功能。 如果能有效的运用将有助于浏览网页的效率! 常用窗口标记 相关属性: ·BORDER边框 ·COLS行,设定分割左右窗口宽度(用『,』分隔,可设百分比%;『*』表示剩余部份) ·FRAMEBORDER显示边框 ·ROWS列,设定分割上下窗口高度(用『,』分隔,可设百分比%;『*』表示剩余部份) 定义窗口。 相关属性: ·FRAMEBORDER显示边框 ·NAME名称 ·NORESIZE设定是否可以调整窗口大小 ·SRC文件或URL位址 ·SCROLLING设定是否可以卷动 插入浮动窗口。 相关属性: ·BORDER边框 ·FRAMEBORDER显示边框 ·NORESIZE设定是否可以调整窗口大小 ·SRC文件或URL位址 ·SCROLLING设定是否可以卷动 举例 如: 本站窗口架构。 (先分割成上下窗口,再于窗口各分割成左右窗口。 ) 如: 浮动窗口 注意 窗口基本架构的文件,通常放在HTML文件的第一页,如: index.htm。 此HTML文件的基本架构并不需要本文区(BODY),只需定义窗口架构,而其他HTML文件可用连结方式(AHREF=...连结标记TARGET属性)显示于指定的窗口中。 第八课设置图片 现在的网站没有用图片的,几乎很少了吧! 图片增加了网站版面的美观,不过也不要放了大量的图片,而拖慢网站传输的效率喔! 有关设定图片的方法共有以下几种: 1.设定HTML文件背景图片、背景颜色。
2.如:
3.