HTML语言
1,HTML 的简介
HTML是英文 HyperText Markup Language 的缩写,即“超文本标志语言”,用它编写的文件(文档)的扩展名是.html或.htm,它们是可供浏览器解释浏览的文件格式。一般可以使用记事本、写字板等编辑工具来编写html文件。HTML语言使用标志对的方法编写文件,既简单又方便,它通常使用<标志名></标志名>来表示标志的开始和结束(例如<html></html>标志对),因此在Html文档中这样的标志对都必须是成对使用的。
WEB网页是由HTML语言所构成,HTML是一种建立网页文件的语言,透过标记式的指令 (Tag),将影像、声音、图片、文字等连结显示出来。 HTML标记主要分为 : 单标记指令和双标记指令 ( 由 < 起始标记 >,< / 结束标记 >所构成 ) 。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑,完成后 ( 以 .htm 或 .html 为文件后缀保存 ) 将HTML网页文件由浏览器打开显示,若测试没有问题则可以放到服务器 (Server) 上,对外发布信息。
1.1 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 文件。
2,常用标记
2.1 段落标记
段落<P>
基本语法格式为:<p align=left/center/right >,其中参数align用于设定段落的位置是靠左、靠右还是居中。默认值是靠左。
换行<br>
单标记,放在一行的末尾,可以在一个段落内实现文本的强制换行,设置标记后面的文本
字、图像和表格等内容显示于下一行。
2.2 文本标记
字体标记<font>
其基本语法格式为:<font face=? size=? color=?>…</font>
Face:设置文本显示的字体,值为字体的名称。
Size:设置字体的显示字号,范围是从“1~7”,其中“3”是默认值。
Color:设置文本的颜,值可以是颜名(英文如red代表红)或颜的十六进制代码(#000000代表黑,#FFFFFF代表白)。
在文本的标记中还有很多常用的标记,比如表示字体效果的,<b>(黑体),<i>(斜体),<u>(加下划线)。
特殊字符
HTML中除了上面的标记外,还有一些常用的特殊字符比如“<”,这些特殊字符在HTML语言中都有对应的转义符,常用的转义符与特殊字符参见下表:
HTML 代码 | 显示结果 | 说明 |
< | < | 小于号或显示标记 |
> | > | 大于号或显示标记 |
& | & | 可用于显示其它特殊字符 |
" | " | 引号 |
® | ® | 注册 |
© | © | 版权 |
&trade | ™ | 商标 |
不断行的空格 | ||
水平线标记<hr>
水平线是在网页上划出一条水平的分割线,用<hr>来标记水平线。
语法格式为:<hr align=left/center/right size=? width=? color=?>
Size:设置水平线的高度,以像素为单位。
Color:设置水平线的颜。
Width:设置水平线的宽度,单位是像素或百分比,像素是绝对大小,不会随着程序窗口的大小而改,百分比是相对于程序窗口水平线所占的比例,会随着程序窗口的大小而改变。
Align:设置水平线的对齐方式。对齐方式有左对齐,居中,右对齐三种。
2.3 标题显示等级
语法格式为:<Hn>…</Hn>
n:表示不同级别的标题,n值可以是1-6中的任意数字,其中1表示的标题字体最大。另外,可以用align属性设置对齐方式,常用的有左对齐,居中,右对齐三种对齐方式。
2.4 列表
在HTML中,列表常用的有“有序列表”和“无序列表”。
有序列表<ol>
基本语法结构为:<ol type=n start=?>
<li>项目1
<li>项目2
……
<li>项目n
</ol>
Type:设置列表的序号类型,常用序号有(n=1:用数字作为序号;n=A:用大写字母作为序号;n=a:用小写字母作为序号;n=I:用大写罗马数字作为序号;n=i:用小写罗马数字作为序号)。
Start:为可选参数,用于设置序号的起始数值。如不添加“start”则从每类序号的第一个序号开始。
无序列表<ul>
基本语法结构为:<ul type=n>
<li>项目1
<li>项目2
……
<li>项目n
</ul>
Type:设置符号形状,有实心圆、小正方形、空心圆三种,具体有(n=disk:符号为实心圆;n=square:符号为正方形;n=circle:符号为空心圆)。
3,图像编辑
我们在网页上经常会浏览图像,适当使用图像可以增加网页的美观。在网页最常用到的是插入图像和设置背景图像。
3.1 插入图像
语法格式:<img src=“url”>单标记
Src:指明要添加的图像所在的具体路径和文件名。路径可以是相对路径,也可以是绝对路径。
例:<img src="images/ball.gif">
绝对路径:完整的描述文件位置的路径就是绝对路径。对于绝对路径可以不需要知道其他任何信息就可以判断出文件的位置。
相对路径:所谓相对路径,顾名思义就是当前文档与目标的相对位置。例:<src = 1.bmp>
图像的属性
除了“src”以外,<img>还有其他属性,可以定义图像的对齐方向,与周围元素的距离等,各属性及作用见表。
名称 | 作用 |
border | 设定图像的边框 |
vspace | 设定图像、文字与图像上下之间的间隔 |
hspace | 设定图像、文字与图像左右之间的间隔 |
width | 调整图像的宽度 |
height | 调整图像的高度 |
alt | 当浏览器无法显示图像时,会显示出alt属性所设定的文字 |
3.2 使用背景图像
语法格式为:<body background = “url”>
url为图像所在的具体路径和文件名
4,建立超链接
4.1 建立超链接
建立超链接的标记是<a>,超链接是网页中链接的载体,可以是文字或图像等页面元素,用户点击它就会跳到超链接的目标位置。
语法格式为:<a href = “url”>超链接标识</a>
url:指明链接目标的具体路径和文件名。
4.2 使用书签
定义书签
在HTML中,首先要定义书签,然后才在链接使用。
定义书签的语法格式为:<a name=”书签名”>
注意:书签名不能用中文,只能用英文和数字。
使用书签链接
其链接的格式为:<a href=”#书签名”>超链接标识</a>
注意: #与书签名之间不能有空格。
4.3 标记新窗口和基准链接
标记新窗口(target)
语法格式为:<a href = “url” target = _blank >超链接标识</a>
html frametarget=_blank是链接标记的一个参数,当点击链接载体的,就会在新窗口打开链接目标。
基准链接<base>
<base>标记是单标记,禁止使用结束标记,可以改变文件中所有链接标记的参数默认值。它只能位于文件的开头部分,即标记 <head> 与 </head> 之间。
语法格式为:<base href=“url”>
5,表格与框架
5.1 建立表格
表格标记有<table>、<th>、<tr>和<td>四个,它们的具体含义是:
<table></table>:定义表格,是表格必须的元素
<th></th>:定义标题单元格,在这个单元格中的文字将用粗体表示
<tr></tr>:定义表格中的行
<td></td>:定义单元格,使用<td>标记一定要放在<tr>标记内部
上述标记中,<th></th>可以省略,其他三个是必须的。
<Table>标记中可以添加属性和参数,其中:border用于设置表格的边框宽度,值为大于等于“0”的整数。当值为“0”,在浏览器中显示无边框表格,无边框表格是网页布局最主要的手段。
5.2 表格属性
除了border外,常用的表格属性参数有:
<table cellspacing =?>:定义单元格之间的距离,值为大于等于“0”的整数,单位是像素,“0”表示没有间距
<table Cellpadding =?>:定义单元格内的文字或其他元素到边框的距离,值为大于等于“0”的整数,单位是像素,“0”表示没有距离
<table height =?>:定义表格的高度,值有两种单位,一是像素,表示表格高度为固定大小,一是百分比表示表格占据整个网页的高度百分比
<table width =?>:定义表格的宽度,与高度一样有像素和百分比两种单位
<table bordercolor=?>:定义表格边框的颜
<table bgcolor =?>:定义表格的背景
5.3 建立框架
框架页的基本结构
<html>
<head>
<title>…</title>
</head>
<noframes>…</noframes>
<frameset>
<frame src="url">
<frame src="url">
……
</frameset>
</html>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论