HTML语言简易入门教程.docx
- 文档编号:7823536
- 上传时间:2023-01-26
- 格式:DOCX
- 页数:17
- 大小:23.36KB
HTML语言简易入门教程.docx
《HTML语言简易入门教程.docx》由会员分享,可在线阅读,更多相关《HTML语言简易入门教程.docx(17页珍藏版)》请在冰豆网上搜索。
HTML语言简易入门教程
第一课基础
Html是英文HyperTextMarkupLanguage的缩写,中文意思是“超文本标志语言”,用它编写的文件(文档)的扩展名是.html或.htm,它们是可供浏览器解释浏览的文件格式。
您可以使用记事本、写字板或FrontPageEditor等编辑工具来编写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>
第三课表格
表格是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:
******************.cn
常用链接标记
相关属性:
·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已看过的链接部份颜色 如: 第八课设置图片 图片增加了网站版面的美观,不过也不要放了大量的图片,而拖慢网站传输的效率 有关设定图片的方法共有以下几种: 1.设定html文件背景图片、背景颜色。 如: 2.设定图片。 3.设定地图。 标记。 常用图片标记 相关属性: ·align调整 ·alt提示字 ·border边框 ·height高度 ·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宽度(可设百分比%) 【举例】 如: 如: 一html的标签 table,tbody,tr,td称为html的标签,以双标签的形式出现,所谓双标签,也就是有一个标记。
指令
就有一个对应的
与之对应,同样适用于其他的双标签。
一般标签都为双标签。
标签最终所显示的网页效果由各个属性来表达,属性可选择使用,不一定全部都用。
在整个图片或帖子里双标签以首尾呼应的方式出现。
这里是图片,文字或帖子内容.