文档库 最新最全的文档下载
当前位置:文档库 › 网站程序语言新手入门三天速成教程

网站程序语言新手入门三天速成教程

语言新手入门教程(一)

?什么是HTML语言

HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语言,由W3C(World Wide Web Consortium)所制定和更新。我们可以用任何一种文本编译起来编辑HTML文件,因为它就是一总纯文本文件。

?HTML语言的基本结构

下面我们来看一小段HTML语言的代码,来了解HTML语言的基本结构:

HTML语言的基本结构

HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语言。

将这一小段代码粘贴至文本文件中,然后选择“另存为”,将文件的后缀名改为.htm或者.html即可,然后再所在的目录下就可看到一个IE的图标,名字就是你所存的文件名称。

…… ……

这是声明HTML文件的语法格式。每一个HTML文件,都必须以开头,以结束…… ……

这是文件头声明的语法格式。在这之内的所有文字都属于文件的文件头,并不属于文件本体。

…… ……

这是声明文件标题的语法格式。在这之中写下的所有内容,都将写在网页最上面的标题栏中。

…… ……

这是声明文件主体的语法格式。在者之间写下的内容都是文件的主体,也就是说将会被显示在客户区之中。

注意:几乎每一种HTML语言的语法都是以<>开头,以结束。在编辑HTML语言过程中,也可以使用注释。语法格式为:。就好像C语言中的/* …… …… */ 一样,中间的内容只是解释说明,并不被编译器所编译。

HTML语言的基本单位

1. 长度单位

长度单位可以用来定义水平线、表格边匡、图像等对象的长、宽、高等一系列属性,同时也可以用来定义这些对象在页面上的位置等属性,用来描述页面上可能遇到的各种长度。

长度的表示方法有两种:绝对长度和相对长度。他们的单位都是像素(pixel)和百分比(%),像素代表的是屏幕上的每个点,而百分比代表的是相对于客户区的多少。下面我们就以水平线的宽度为例,说明这两种表示方法。

HTML语言的长度表示

HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语言。



在文本编译器中编译,改变网页的大小,就会看到这两者表示长度方法的不同。

其中


标记是在页面上建立水平线的标记。width是水平线元素中的一种属性,用来表示水平线的宽度。这里width="500"即表示这个水平线的宽度是500像素;width="%50"即表示水平线占据客户区的总宽度的%50。

2. 颜色单位

和长度单位一样,颜色单位也是描述页面表现形式的一种很重要的的数据类型。颜色单位有三种表示方法:16进制颜色代码、10进制RGB码、直接颜色名称。这三种表示方法不同,但是效果却是一样的。下面用一小段代码说明这三种颜色的表示方法。

HTML语言中颜色的不同表示方法

静夜思

窗前明月光

疑是地上霜

举头望明月

低头思故乡

注意:本文件在保存时请选择Unicode 字符型进行保存。

16进制颜色代码,语法格式:#RRGGBB 。16进制颜色代码之前必须有一个“#”号,这种颜色代码是由三部分组成的,其中前两位代表红色,中间两位代表绿色,后两位代表蓝色。不同的取值代表不同的颜色,他们的取值范围是00--FF。

10进制RGB码,语法格式:RGB(RRR,GGG,BBB) 。在这种表示法中,后面三个参数分别是红色、绿色、蓝色,他们的取值范围是0--255。以上两种表达方式可以相互转换,标准是16进制与10进制的相互转换。

直接颜色名称,可以在代码中直接写出颜色的英文名称。

以上三种表示方法的效果相同,一般16进制颜色代码的表示方法比较常用。读者可以根据自己的喜好和实际情况来决定使用哪一种表示方法。关于不同颜色的定义,请查看相关资料。。

3. URL路径

URL(Universal Resource Locator)路径是一种互联网地址的表示法。在这个数据里可以包括以何种协议连接、要连接到哪一个地址、连接地址的端口(Port)号以及服务器(Server)里文件的完整路径和文件名称等信息。在HTML中,URL路径分为两种形式:绝对路经和相对路径。

a. 绝对路径:

绝对路径是将服务器上磁盘驱动器名称和完整的伦够写出来,同时也会表现出磁盘上的目录结构。

语法格式::

其中,是某一种传输协议,而 则是连接的位置信息。

例如:

b. 相对路径:

相对路径是相对于当前的HTML文档所在目录或站点根目录的路径。

语法格式:相对关系/部分路径/文件名

根据相对路径的参照点又可以分为相对文档的相对路径以及相对根目录的相对路径。

<1>相对文档:

这种路径的表现形式是根据目标文档所在目录和当前文档所在目录之间的关系的一种表现形式。“../”表示上一级目录,没有“../”表示当前目录。

例如当前文档的路径是:test/project1/index.htm 。我们要找test目录下的html.htm 。而当前的目录是project1,我们要回到上一级目录中,所以路径是“../html.htm”。

<2>相对根目录:

这种路径根据目标文档相对于根目录的关系的一种表现形式。在这种表达式种的第一个字符是“/”,这个符号表示这个路径是一个相对于根目录的表达式。

例如:

这一课我给大家介绍html文档中head部分的基本使用方法。

head这一部分是由标记开始,以标记结束,是html文档的首要部分。下面我们看一下head部分所包含的元素:

元素描述

title 文档标题

meta 描述非html标准的一些文档信息

link 描述当前文档与其他文档之间的连接关系

base 定义体试时默认的外部资源

script 脚本程序内容

style 样式表内容

下面简要介绍一下各个部分的功能及用法:

title:

title包含的内容将会被显示在浏览器窗口的标题栏中。给自己的网页起一个适当的名字,可以体现出一些自己的个性。

语法格式:

…… ……

在省略号处加入的文字或符号,都将显示在浏览器的标题栏中。

meta:

meta元素提供的信息是用户不可见的。下面是meta的几种用法:

定义搜索关键字:

这里介绍两种基本的用法:

这样一来,在你的网页中就会体现出这样的信息。但是这些信息是不可见的,只是提供给那些搜索引擎使用。

控制页面缓存:

浏览器一般为了节约时间,都在本地硬盘上保存一个网上的文件作为临时版本。在用户下次打开这个网页的时候,浏览器将会直接调用硬盘上的这个版本,而不是网上的。如果想让浏览者每次打开网页的时候都是看到的最新版本,那么就在网页上加上这一句吧!

定义语言:

我们可以通过这样的语句设定语言的编码方式。这样,浏览器就可以为我们正确的选择语言,不需要我们来选取。上面的例子显示的就是简体中文,如果想要显示繁体中文,将GB3212替换为BIG5就可以了。

刷新页面

这样的语句可以让我们的浏览器按照content属性中制定的时间来跳转到URL属性中设定的URL地址。上面的例子就是在打开页面60秒后调用一个新的页面new.htm。如果没有能够找到new.htm,浏览器就﹞执行刷新本页的操作。这也是大多数聊天室的设定方法。

link:

这个元素用来指定当前文档和其他文档之间的联接关系。

语法格式:

rel说明两个文档之间的关系;href说明目标文档名。以下是一个指定外联样式表文件的例子:

关于css层叠样式表,请查阅有关资料。

base:

用于定义文档提交是默认的外部资源。

语法格式:

href指定文档中链接到的所有文件默认的URL地址。在这里指定href的属性,所有的相对卢劲的前面都会加上href属性中的值。

target指定文档中所有链接的默认打开窗口。最常见的应用是在框架页(frame)中。我们要把Menu框架中的联接显示到content框架中,就可以在Menu的网页中加上。这样,就省去了在Menu网页上所有链接的属性上加上target属性了。

script:

标记用来在页面中加入脚本程序。

语法格式:

在language中一定要指定脚本语言的种类。如VBScript等。

style:

用来指定当前文档的css层叠样式表。css对于网页的字体样式、背景、边界等都有很大的应用。详细部分请大家参阅css有关内容。

这一次我给大家介绍html语言中的body的部分用法。

大家从各大门户网站的主页上就可以看出,body部分占据了大部分的代码。可见body是一个网页代码的绝对主要部分。body是由开始,由结束。下面我们看一下body部分的元素:

元素描述

bgcolor 背景色

background 背景图案

text 文本颜色

link 链接文字颜色

alink 活动链接文字颜色

vlink 已访问链接文字颜色

leftmargin 页面左侧的留白距离

topmargin 页面顶部的留白距离

下面介绍各个部分的功能及用法:

bgcolor:

用于指定页面的背景颜色。在Microsoft公司的IE浏览器中,默认情况下是白色,Netscape公司的Navigator浏览器的默认情况是灰色。

语法格式:

background:

background属性用于指定页面的背景图案。

语法格式:

下面介绍几种文字的属性,可以改变文字的颜色,以及在页面上留出空白:

text link alink vlink leftmargin topmargin

他们的作用分别是:非链接文字的颜色;可连接文字的颜色;正被点击的可链接文字的颜色;已被点击的可链接的文字的颜色;页面左侧的留白;页面顶部的留白。

语法格式:

示例:

body元素示例

这里显示body的示例。

link这样的属性,大多数html的页面已经不使用这样的用法了。现在多数是在head中加入相应的代码。要达到的效果是鼠标放到有链接的字体上时,字体变色,点击后字体变为灰色。具体方法如下:

A:link {color:#00007f;}

A:visited {color:#65038e;}

A:active {color:#ff0000;}

A:hover {color:#ff0000;}

将这段代码加入到head中,在body中加入有链接的文字,就可以看出效果了。这一部分是属于css中的知识。在body中加入有链接的文字:在Dreamweaver中,选定文字后,在下面的Properties中的link中加入想要链接到的页面的地址。在FrontPage中,选定文字后,点击右键就会有相应的选项。

第一课基础

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文件基本架构

文件开始

标头区开始

... 标题区

标头区结束

本文区开始

本文区内容

本文区结束

文件结束

网页文件格式。

标头区 : 记录文件基本资料,如作者、编写时间。

标题区 : 文件标题须使用在标头区内,可以在浏览器最上面</p><!--/p10--><!--p11--><p><BODY> 本文区 : 文件资料,即在浏览器上看到的网站内容。</p><p>注意事项</p><p>通常一份HTML网页文件包含二个部份 : <HEAD>...</HEAD> 标头区、 <BODY>...</BODY> 本文区。而 <HTML> 和 </HTML> 代表网页文件格式。</p><p>习惯上一个网站的首页名称通常订为 index.htm 或 index.html 这样只要浏览网站,浏览器便会自动的找出 index.htm 文件。</p><p>第二课字体</p><p><hn>...</hn> 标题,设定标题字体大小, n = 1 ( 大 ) ~ 6 ( 小 ) 会自动跳下一行。通常用在如章节、段落等标题上。</p><p>如 : <h2> 标题 </h2></p><p>标题</p><p>如 : <h3 align = center> 标题 </h3> ( 标题置中 )</p><p>标题</p><p><b>...</b> 粗体字。</p><!--/p11--><!--p12--><p>: <b> 粗体字 </b></p><p>粗体字</p><p><i>...</i> 斜体字。</p><p>如 : <i> 斜体字 </i></p><p>斜体字</p><p><del>...</del> 横线 ( 表示删除 )。</p><p>如 : <del> 横线 </del></p><p><tt>...</tt> 打字体 ( 固定宽度文字 )。</p><p>如 : <tt> 打字体 </tt></p><p>打字体</p><p><sup>...</sup> 上标字。</p><p>如 : 字体 <sup> 上标字 </sup></p><p>字体上标字</p><p><sub>...</sub> 下标字。</p><p>如 : 字体 <sub> 下标字 </sub></p><p>字体下标字</p><p><!...> 注解 ( 不会显示在浏览器上 ),可以多行。</p><!--/p12--><!--p13--><p>: <! 更新日期 : 2000/1/1></p><p>第三课表格</p><p>表格是html的一项非常重要功能,利用其多种属性能够设计出多样化的表格。使用表格可以使你的页面有很多意想不到的效果,使页面更加整齐美观。</p><p>常用表格标记</p><p><table>...</table>表格指令。</p><p>相关属性 :</p><p>·align 调整</p><p>·bgcolor 背景颜色</p><p>·border 边框</p><p>·height 高度</p><p>·width 宽度</p><p><caption>...</caption>表格标题。</p><p>相关属性 :</p><p>·align 调整</p><p><tr>...</tr>表格列 ( </tr>可省略 ) 。</p><!--/p13--><!--p14--><p>:</p><p>·align 调整</p><p><th>...</th>表格栏标题 ( 表头 ) 粗体字 ( </th>可省略 ) 。相关属性 :</p><p>·align 调整</p><p>·colspan 栏宽</p><p>·rowspan 栏高</p><p><td>...</td>表格栏资料 ( 储存格 ) ( </td>可省略 ) 。</p><p>相关属性 :</p><p>·align 调整</p><p>·bgcolor 背景颜色</p><p>·height 高度</p><p>·width 宽度</p><p>·colspan 栏宽</p><p>·rowspan 栏高</p><p>举例</p><p>如 : ( 基础型 )</p><p><table border=1 align=center></p><p><tr><td>太平洋网络学院<td>太平洋网络学院</p><!--/p14--><!--p15--><p>太平洋网络学院<td>太平洋网络学院</p><p></table></p><p>太平洋网络学院太平洋网络学院</p><p>太平洋网络学院太平洋网络学院</p><p>如 : ( 加强型 ) 增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高。<table border=1 align=center bgcolor=#ccccff></p><p><caption>表格标题</caption></p><p><tr><td><th colspan=2>行标题 1 <th colspan=2>行标题 2</p><p><tr><th rowspan=2>列标题 1 <td>a <td>a <td>a <td>a</p><p><tr><td>b <td>b <td>b <td>b</p><p><tr><th rowspan=2>列标题 2 <td>c <td>c <td>c <td>c</p><p><tr><td>d <td>d <td>d <td>d</p><p></table></p><p>表格标题</p><p>行标题 1 行标题 2</p><p>a a a a</p><p>列标题 1</p><p>b b b b</p><p>c c c c</p><p>列标题 2</p><p>d d d d</p><p>第四课标示</p><!--/p15--><!--p16--><p>提供许多种类的标示标记,作项目标示,而且可以作巢状式标示!</p><p>常用标示标记</p><p><li> 标示项目。</p><p>如 :</p><p><ol></p><p><li>第一项</p><p><li>第二项</p><p></ol></p><p>1.第一项</p><p>2.第二项</p><p><ol>...</ol> 编号标示,可标示数字或英文、罗马字母。</p><p>如 :</p><p><ol type=i></p><p><li>第一项</p><p><li>第二项</p><p></ol></p><p>i.第一项</p><p>ii.第二项</p><p><ul>...</ul> 符号标示,可标示数字或英文、罗马字母。</p><p>如 :</p><p><ul></p><p><li>第一项</p><p><li>第二项</p><p></ul></p><p>?第一项</p><p>?第二项</p><p><dt> 定义项目。</p><p><dd> 定义资料。</p><p><dl>...</dl> 定义标示。</p><p>如 :</p><p><dl></p><p><dt>十进制 :<dd>0、1、2、3、4、5、6、7、8、9</p><!--/p16--><!--p17--><p>十六进制 :<dd>0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f</p><p></dl></p><p>十进制 :</p><p>0、1、2、3、4、5、6、7、8、9</p><p>十六进制 :</p><p>0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f</p><p>巢状式标示</p><p>巢状式标示如 :</p><p><ol><li>第一章 <ol type=i> <li>第一节</p><p><ul> <li>第一段 <li>第二段</p><p></ul> <li>第二节 </ol><li>第二章<li>第三章</ol></p><p>1.第一章</p><p>i.第一节</p><p>?第一段</p><p>?第二段</p><p>ii.第二节</p><p>2.第二章</p><p>3.第三章</p><p>其他标示标记</p><p><dir>...</dir> 目录式标示 ( 自动加圆点 )。</p><!--/p17--><!--p18--><p>:</p><p>网络学院 :</p><p><dir></p><p><li>新手上路</p><p><li>软件教室</p><p><li>设计教室</p><p><li>开发教室</p><p></dir></p><p>网络学院 :</p><p>?新手上路</p><p>?软件教室</p><p>?设计教室</p><p>?开发教室</p><p>注意事项</p><p>标示项目符号也可以用<font>...</font> 标记,以符号字元( ○、◆、◎、?、■...等 ) 标示。</p><p>如:<font color =#ff0000> ● </font></p><p>特殊符号 :</p><!--/p18--><!--p19--><p>在html文件中,有些符号是代表特定的意义的。所以当我们要使用这些特殊符号时,便要用替代指令。</p><p>符号替代指令</p><p>" " 或 "</p><p>& & 或 &</p><p>< < 或 <</p><p>> > 或 ></p><p>不可分空格 </p><p>第五课区段标记</p><p>一个网站不仅要内容丰富外,也要有美观简洁的版面。html所提供的区段标记功能,如果可以好好的利用也会有相当不错的效果。</p><p>常用区段标记</p><p><hr>产生水平线。</p><p>如 : <hr aling=certen width=90%></p><p><br>跳下一行。</p><!--/p19--><!--p20--><p>: 太平洋网络学院,<br>网上学电脑的好去处。</p><p>太平洋网络学院,</p><p>网上学电脑的好去处。</p><p><p>...</p>段落,跳下一行并加一行空白。 ( </p> 可省略 ) 如 : 太平洋网络学院,<p>网上学电脑的好去处。</p><p>太平洋网络学院,</p><p>网上学电脑的好去处。</p><p><center>...</center>置中。</p><p>如 : <center>置中</center></p><p>置中</p><p><nobr>...</nobr>不跳下一行。</p><p>如 : <nobr>太平洋网络学院,</nobr>网上学电脑的好去处。</p><p>太平洋网络学院,网上学电脑的好去处。</p><p><pre>...</pre>以文件原始格式显示。</p><p>如 : <pre>原始格式: 文件</pre></p><p>原始格式: 文件</p><p>第六课链接</p><!--/p20--></div> <div class="pagiv"> </div> </div> <div> <div>相关文档</div> <div class="relatedtopic"> <div id="tabs-section" class="tabs"> <ul class="tab-head"> </ul> </div> </div> </div> </div> <div class="category"> <span class="navname">相关文档</span> <ul class="lista"> </ul> <span class="navname">最新文档</span> <ul class="lista"> <li><a href="/doc/ff19253113.html" target="_blank">26 内分泌科 消渴病(2型糖尿病)中医临床路径(2017年版)</a></li> <li><a href="/doc/f419253114.html" target="_blank">临床路径专业分类</a></li> <li><a href="/doc/ed19045908.html" target="_blank">26 内分泌科 消渴病(2型糖尿病)中医临床路径(2017年版)</a></li> <li><a href="/doc/8c19176006.html" target="_blank">24个专业104个病种中医临床路径</a></li> <li><a href="/doc/7619317001.html" target="_blank">卫生部临床路径(附表单)</a></li> <li><a href="/doc/6a19015407.html" target="_blank">呼吸内分泌科11种临床路径护理表单</a></li> <li><a href="/doc/6a19015406.html" target="_blank">内科8种临床路径流程及表单样本</a></li> <li><a href="/doc/3119238996.html" target="_blank">28 内分泌科 瘿病眼病(甲状腺眼病、甲状腺相关性眼病)中医临床路径(2017年版)</a></li> <li><a href="/doc/3719238995.html" target="_blank">内分泌科 瘿痛(亚急性甲状腺炎)中医临床路径(试行版)</a></li> <li><a href="/doc/f219253112.html" target="_blank">有关成长的故事作文600字(精选26篇)</a></li> <li><a href="/doc/d119192027.html" target="_blank">我成长的故事作文600字(精选26篇)</a></li> <li><a href="/doc/df19192028.html" target="_blank">精选成长的故事作文600字(通用66篇)</a></li> <li><a href="/doc/c919078191.html" target="_blank">成长的故事作文600字(精选45篇)</a></li> <li><a href="/doc/8719176005.html" target="_blank">成长的故事作文600字(精选55篇)</a></li> <li><a href="/doc/5019337961.html" target="_blank">成长的故事作文600字(精选54篇)</a></li> <li><a href="/doc/3019238994.html" target="_blank">成长的故事作文600字(精选29篇)</a></li> <li><a href="/doc/0319489665.html" target="_blank">成长的故事作文600字(精选42篇)</a></li> <li><a href="/doc/d119192026.html" target="_blank">成长的故事作文600字(精选20篇)</a></li> <li><a href="/doc/9819164620.html" target="_blank">成长的故事作文600字(通用34篇)</a></li> <li><a href="/doc/7819316999.html" target="_blank">成长的故事作文600字汇总六篇</a></li> </ul> </div> </div> <script> var sdocid = "0f095a27af45b307e8719762"; </script> <div class="footer"> <p><a href="/tousu.html" target="_blank">侵权投诉</a>  © 2013-2023 www.wendangku.net  <a href="/sitemap.html">站点地图</a> | <a href="https://m.wendangku.net">手机版</a></p> <p><a href="https://beian.miit.gov.cn" target="_blank">闽ICP备11023808号-7</a>  本站文档均来自互联网及网友上传分享,本站只负责收集和整理,有任何问题可通过上访投诉通道进行反馈</p> </div> <script type="text/javascript">foot();</script> </div> </body> </html>