当前位置:文档之家› HTML语言入门教程

HTML语言入门教程

语言入门教程(一)第一课基础Html是英文 HyperText Markup Language 的缩写,中文意思是“超文本标志语言”,用它编写的文件(文档)的扩展名是.html或.htm,它们是可供浏览器解释浏览的文件格式。

您可以使用记事本、写字板或 FrontPage Editor 等编辑工具来编写Html文件。

Html语言使用标志对的方法编写文件,既简单又方便,它通常使用<标志名></标志名>来表示标志的开始和结束(例如<html></html>标志对),因此在Html文档中这样的标志对都必须是成对使用的。

当我们畅游Internet时,我们透过浏览器所看到的网站,是由HTML (HyperText Markup Language) 语言所构成。

HTML ( 超文件标记语言 ) 是一种建立网页文件的语言,透过标记式的指令 (Tag),将影像、声音、图片、文字等连结显示出来。

HTML标记是由 < 和 > 所括住的指令,主要分为 : 单标记指令、双标记指令 ( 由 < 起始标记 >,< / 结束标记 >所构成 ) 。

HTML网页文件可由任何文本编辑器或网页专用编辑器编辑,完成后 ( 以 .htm.html 为文件后缀保存 ) 将HTML网页文件由浏览器打开显示,若测试没有问题则可以放到服务器 (Server) 上,对外发布信息。

HTML文件基本架构<HTML> 文件开始<HEAD> 标头区开始<TITLE>...</TITLE> 标题区</HEAD> 标头区结束<BODY> 本文区开始本文区内容</BODY> 本文区结束</HTML> 文件结束<HTML> 网页文件格式。

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

<TITLE> 标题区 : 文件标题须使用在标头区内,可以在浏览器最上面看到标题。

<BODY> 本文区 : 文件资料,即在浏览器上看到的网站内容。

注意事项通常一份HTML网页文件包含二个部份 : <HEAD>...</HEAD> 标头区、 <BODY>...</BODY> 本文区。

而 <HTML> 和 </HTML> 代表网页文件格式。

习惯上一个网站的首页名称通常订为 index.htm 或 index.html 这样只要浏览网站,浏览器便会自动的找出 index.htm 文件。

第二课字体<hn>...</hn> 标题,设定标题字体大小, n = 1 ( 大 ) ~ 6 ( 小 ) 会自动跳下一行。

通常用在如章节、段落等标题上。

如 : <h2> 标题 </h2>标题如 : <h3 align = center> 标题 </h3> ( 标题置中 )标题<b>...</b> 粗体字。

如 : <b> 粗体字 </b>粗体字<i>...</i> 斜体字。

: <i> 斜体字 </i>斜体字<del>...</del> 横线 ( 表示删除 )。

如 : <del> 横线 </del><tt>...</tt> 打字体 ( 固定宽度文字 )。

如 : <tt> 打字体 </tt>打字体<sup>...</sup> 上标字。

如 : 字体 <sup> 上标字 </sup>字体上标字<sub>...</sub> 下标字。

如 : 字体 <sub> 下标字 </sub>字体下标字<!...> 注解 ( 不会显示在浏览器上 ),可以多行。

如 : <! 更新日期 : 2000/1/1>第三课表格表格是html的一项非常重要功能,利用其多种属性能够设计出多样化的表格。

使用表格可以使你的页面有很多意想不到的效果,使页面更加整齐美观。

常用表格标记<table>...</table>表格指令。

相关属性 :·align 调整·bgcolor 背景颜色·border 边框·height 高度·width 宽度<caption>...</caption>表格标题。

相关属性 :·align 调整<tr>...</tr>表格列 ( </tr>可省略 ) 。

相关属性 :·align 调整<th>...</th>表格栏标题 ( 表头 ) 粗体字 ( </th>可省略 ) 。

:·align 调整·colspan 栏宽·rowspan 栏高<td>...</td>表格栏资料 ( 储存格 ) ( </td>可省略 ) 。

相关属性 :·align 调整·bgcolor 背景颜色·height 高度·width 宽度·colspan 栏宽·rowspan 栏高举例如 : ( 基础型 )<table border=1 align=center><tr><td>太平洋网络学院<td>太平洋网络学院<tr><td>太平洋网络学院<td>太平洋网络学院</table>太平洋网络学院太平洋网络学院太平洋网络学院如 : ( 加强型 ) 增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高。

<table border=1 align=center bgcolor=#ccccff><caption>表格标题</caption><tr><td><th colspan=2>行标题 1 <th colspan=2>行标题 2<tr><th rowspan=2>列标题 1 <td>a <td>a <td>a <td>a<tr><td>b <td>b <td>b <td>b<tr><th rowspan=2>列标题 2 <td>c <td>c <td>c <td>c<tr><td>d <td>d <td>d <td>d</table>表格标题行标题 1 行标题 2a a a a列标题 1b b b bc c c c列标题 2d d d d第四课标示html提供许多种类的标示标记,作项目标示,而且可以作巢状式标示!常用标示标记<li> 标示项目。

如 :<ol><li>第一项<li>第二项</ol>1.第一项2.第二项<ol>...</ol> 编号标示,可标示数字或英文、罗马字母。

如 :<ol type=i><li>第一项<li>第二项</ol>i.第一项ii.第二项<ul>...</ul> 符号标示,可标示数字或英文、罗马字母。

如 :<ul><li>第一项<li>第二项</ul>∙第一项∙第二项<dt> 定义项目。

<dd> 定义资料。

<dl>...</dl> 定义标示。

如 :<dl><dt>十进制 :<dd>0、1、2、3、4、5、6、7、8、9<dt>十六进制 :<dd>0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f </dl>十进制 :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巢状式标示巢状式标示如 :<ol><li>第一章 <ol type=i> <li>第一节<ul> <li>第一段 <li>第二段</ul> <li>第二节 </ol><li>第二章<li>第三章</ol>1.第一章i.第一节▪第一段▪第二段ii.第二节2.第二章3.第三章其他标示标记<dir>...</dir> 目录式标示 ( 自动加圆点 )。

如 :网络学院 :<dir><li>新手上路软件教室<li>设计教室<li>开发教室</dir>网络学院 :∙新手上路∙软件教室∙设计教室∙开发教室注意事项标示项目符号也可以用<font>...</font> 标记,以符号字元( ○、◆、◎、◐、■...等 ) 标示。

如:<font color =#ff0000> ● </font>特殊符号 :在html文件中,有些符号是代表特定的意义的。

所以当我们要使用这些特殊符号时,便要用替代指令。

符号替代指令" &#34 或 &quot&#38 或 &amp< &#60 或 &lt> &#62 或 &gt不可分空格&nbsp第五课区段标记一个网站不仅要内容丰富外,也要有美观简洁的版面。

html所提供的区段标记功能,如果可以好好的利用也会有相当不错的效果。

常用区段标记<hr>产生水平线。

如 : <hr aling=certen width=90%><br>跳下一行。

相关主题