HTML语言剖析

一、Html简介-目录

全写： HyperText Mark-up Language
译名：超文本标识语言
简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标签（tag）使文件达到预期的显示效果。由文字（字母，数字、标点符号）及标签组合而成。任何文字编辑器都可以，这里推荐用：Dreamweaver。
1. Html特点：

► 描述性语言，结构语言，用于决定网页内容以什么样的形式显示；

► 通过标签来控制网页的文档、字符和段落等的格式，以及对脚本语言等的调用；

► 纯文本文件，可以使用各种文本编辑器编写； (Dreamweaver是首选)

► 文件扩展名： .htm 或 .html；

► html文件必须在Web浏览器上运行；（运行环境）

► 具有跨平台性。

2. HTML语法结构：

► HTML文件是由一系列的元素和标签（tag）组成的；

► 元素：网页中的内容；

► 标签：用于规定元素的属性和它在文件中的位置；

► 格式：<元素名称属性="值"...>元素资料</元素名称>,<元素名称属性="值"...>

► 不区分大小写。

3. HTML文件结构：

► 起始标记：<html>　</html>　表示HTML网页的起始；

► 文件头部：<head>　</head>　设置初始化文档信息和文档管理标注；

► 文件主体：<body>　</body>　设置格式化的浏览器显示的文档（内容）；

► 注释部分：　可以放在任何位置；

► <!　　　　　　>

※ 例:
<html>
<head>
<title>Html简介</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
</head>
<body bgcolor="#FFFFFF" text="#000000">

</body>
</html>

n 标签写法：

► 任何标签皆由"<>"所包含，如

► 标签名与小于号之间不能留有空白字符。

► 某些标签　要加上参数，某些则不必。如 大家好

► 参数只可加于起始标签中。

► 在起始标签之标签名前加上符号" / "便是其终结标签，如

► 标签字母大小写皆可。

n 成对标签与单标签：
标签按型态分为成对标签与单标签

1. 成对标签
顾名思义，它以起始标签及终结标签将文字围住，令其达到预期显示效果。
例如 HTML 源码： 我愿意和大家显示成：我愿意和大家一起学好html/css!大家有信心吗？
其中 便称为成对标签。
它以起始标签 及结尾标签 标示文字我愿意和大家一起学好html/css!令它显示成粗体，两者失其一都会发生错误显示。

2. 单标签
是指标签单独出现，只有起始标签没有终结标签。

※ 例如 HTML 源码：
I love my hometown. It's a beautiful place.
显示成：
I love my hometown.
It's a beautiful place.

其中换行标签 便属单标签。
它的作用便是将标签后所有东西显示于下一行，可见结尾标签对于它是没意义的，但有些人会为空标签加上终结标签，如果加上结尾标签，对 HTML没有影响。便于记忆。

二、Html标记一览-目录

标记	类型	译名或意义	作用	备注
文件标记
<HTML>	●	文件声明	让浏览器知道这是HTML文件
<HEAD>	●	开头	提供文件整体信息
<TITLE>	●	标题	定义文件标题，将显示于窗口标题
<BODY>	●	本文	设计文件格式及内文所在
段落标记
<!--注解-->	○	说明标记	为文件加上说明，但不被显示
<P>	○	段落标记	为文字、图片、表格等之间留一空白行
<BR>	○	换行标记	令文字、图片、表格等显示于下一行
<HR>	○	水平线	插入一条水平线
<CENTER>	●	居中	令文字、图片、表格等显示于页面中央	不建议使用
<PRE>	●	保留原格式	令文件按照原始格式的排列方式显示
<DIV>	●	区域标记	设定文字、图片、表格等的摆放位置
<NOBR>	●	强制不分行	令文字不因太长而自动换行
<WBR>	●	根据宽度换行	根据浏览器的大小显示文本
字体标记
<STRONG>	●	加重语气	产生字体加粗Bold的效果
<B>	●	粗体标记	产生字体加粗的效果
<EM>	●	强调标记	字体出现斜体效果
<I>	●	斜体标记	字体出现斜体效果
<TT>	●	打字字体	Courier字体，字母宽度相同
<U>	●	加上底线	加上底线	不建议使用
<H1>	●	一级标题标记	变粗变大加宽，程度与级数反比
<H2>	●	二级标题标记	将字体变粗变大加宽
<H3>	●	三级标题标记	将字体变粗变大加宽
<H4>	●	四级标题标记	将字体变粗变大加宽
<H5>	●	五级标题标记	将字体变粗变大加宽
<H6>	●	六级标题标记	将字体变粗变大加宽
<FONT>	●	字形标记	设定字形、大小、颜色	不建议使用
<BASEFONT>	○	基准字形标记	设定所有字形、大小、颜色	不建议使用
<BIG>	●	字体加大	令字体稍为加大
<SMALL>	●	字体缩细	令字体稍为缩细
<STRIKE>	●	画线删除	为字体加一删除线	不建议使用
<CODE>	●	程式码	字体稍为加宽如<TT>
<KBD>	●	键盘字	字体稍为加宽，单一空白
<SAMP>	●	范例	字体稍为加宽如<TT>
<VAR>	●	变数	斜体效果
<CITE>	●	传记引述	斜体效果
<BLOCKQUOTE>	●	引述文字区块	缩排字体
<DFN>	●	述语定义	斜体效果
<ADDRESS>	●	地址标记	斜体效果
<SUB>	●	下标字	下标字
<SUP>	●	上标字	指数（平方、立方等）
列表标记
<OL>	●	有序列表	列表项目将以数字、字母顺序排列
<UL>	●	无序列表	列表项目将以圆点排列
<LI>	○	列表项目	每一标记标示一项列表项目
<MENU>	●	选单列表	列表项目将以圆点排列，如<UL>	不建议使用
<DIR>	●	目录列表	列表项目将以圆点排列，如<UL>	不建议使用
<DL>	●	定义列表	列表分两层出现
<DT>	○	定义条目	标示该项定义的标题
<DD>	○	定义内容	标示定义内容
表格标记
<TABLE>	●	表格标记	设定该表格的各项参数
<CAPTION>	●	表格标题	做成一打通列以填入表格标题
<TR>	●	表格列	设定该表格的列
<TD>	●	表格栏	设定该表格的栏
<TH>	●	表格标头	相等于<TD>，但其内之字体会变粗
表单标记
<FORM>	●	表单标记	决定单一表单的运作模式
<TEXTAREA>	●	文字区域	提供文字区域以输入更多文字
<INPUT>	○	输入标记	决定输入形式
<SELECT>	●	选择标记	建立下拉列表

<OPTION>	○	选项	每一标记标示一个选项（下拉列表时使用）
图形标记
<IMG>	○	图形标记	用以插入图形及设定图形属性
连结标记
<A>	●	链接标记	加入链接
<BASE>	○	基准标记	可将相对URL转绝对及指定链接目标
框架标记
<FRAMESET>	●	框架设定	设定框架
<FRAME>	○	框窗设定	设定框窗
<IFRAME>	○	页内框架	于网页中间插入动态框架	IE
<NOFRAMES>	●	不支援框架	设定当浏览器不支援框架时的提示
影像地图
<MAP>	●	影像地图名称	设定影像地图名称
<AREA>	○	连结区域	设定各连结区域
多媒体
<BGSOUND>	○	背景声音	于背景播放声音或音乐	IE
<EMBED>	○	多媒体	加入声音、音乐或影像
其他标记
<MARQUEE>	●	滚动文字	令文字左右走动	IE
<BLINK>	●	闪烁文字	闪烁文字	NC
<ISINDEX>	○	页内寻找器	可输入关键字寻找于该一页	不建议使用
<META>	○	开头定义	让浏览器知道这是HTML文件
<LINK>	○	关系定义	定义该文件与其他 URL 的关系
StyleSheet
<STYLE>	●	样式表	控制网页版面
<span>	●	自订标记	独立使用或与样式表同用
注： ► ● 表示该标记属成对标记，即需要关闭标记如 </标记> 。 ► ○ 表示该标记属空标记，即不需要关闭标记。 ► IE 表示该标记只适用于 Internet Explorer。 ► NC 表示该标记只适用于 Netscape Communicator。

三、文件标记-目录

<HTML> ； <HEAD> ； <TITLE> ； <BODY>；<meta>；<base>；<link>；-文件头部标签

n HTML 基本架构：

1. 以下 HTML Source Code(源代码) 便是一份 HTML 文件的基本架构：
<HTML>
<HEAD>
<title>HTML超文本标记语言在线教程</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="author" content="合肥世杰">
<meta name="keywords" content="html,css,asp,jsp,php">
<meta name="description" content="世杰教育网站！">
<meta http-equiv="refresh" content="10">
<meta http-equiv="refresh" content="2;url=http://www.163.com">
<meta http-equiv="Expires" content="01 Jan 2008 00:00:00">
<base href="http://www.sje.com.cn" rel="external nofollow" rel="external nofollow" target="_blank">
<link href="../css.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
<link rel="fontdef" src="Amelia.pfr" rel="external nofollow" rel="external nofollow" >
</HEAD>
<BODY> 网页的内容，很多标记都作用于此
</BODY>
</HTML>

2. 特点解说：

► 整个文件处于标记<HTML>与</HTML>之间。<HTML>用以声明这是HTML文件，让浏览器认出并正确处理此HTML文件。

► 文件分两部分，由<HEAD>至</HEAD>称为开头，<BODY>至</BODY>称主体（或者称之为正文）。
基本上两者各有适用的标记，如<TITLE>只可出现于开头部分。

► 开头部分用以保存重要信息，而只有主体部分会被显示。所以大部分标记会运用于主体部分。

► <TITLE>所标示的是文件的标题。会出现于窗口标题及别人加入收藏时显示的名称，所以每页有不同而明确的标题是有必要的。

上述标记中只有<BODY>具有参数设定。

3. <META>标签相关属性

► 文档标题标签：<title>HTML超文本标记语言在线教程</title>

► <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

► 作者：<meta name="author" content="合肥世杰">

► 关键字：<meta name="keywords" content="html,css,asp,jsp,php">

► 描述信息：<meta name="description" content="世杰教育网站！">

► 刷新：<meta http-equiv="refresh" content="10">

► 跳转：<meta http-equiv="refresh" content="2;url=http://www.163.com">

► 文档过期：<meta http-equiv="Expires" content="01 Jan 2008 00:00:00">

► 基础地址：<base href="http://www.sje.com.cn" rel="external nofollow" rel="external nofollow" target="_blank"> 为当前文档提供了完整的URL

► 链接文件：<link href="../css.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
　　　　　 <link rel="fontdef" src="Amelia.pfr" rel="external nofollow" rel="external nofollow" >
　　　　　定义在当前文档和其它文档之间的关系

属性描述：

href	提供被链接的文档的Internet地址。
rel	提供向前链接的类型。
rev	指明反向链接。
title	提供一个建议的标题。
type	指明连接的style sheet媒体类型。

► 页面过渡效果：
<meta HTTP-EQUIV="page-enter" CONTENT="revealtrans(duration=5,transition=23)">

<meta HTTP-EQUIV="page-exit" CONTENT="revealtrans(duration=5,transition=23)">

n <BODY> 之参数设定：

※ 例:
<BODY text ="#000000" link ="#0000FF" alink ="#FF0000" vlink ="#0000FF" background ="bg1.gif" bgcolor ="#FFFFFF" leftmargin =2 topmargin =2 bgproperties ="fixed">

► text ="#000000"
用以设定文字颜色。 #000000 代表黑色，亦可以采用颜色的名称，即 text=" black " 。各种颜色的值及名称可参考【调色原理】一节。

► link ="#0000FF"
设定一般文字链接颜色。（默认为蓝色）

► alink ="#FF0000"
设定鼠标刚按下时文字颜色。

► vlink ="#0000FF"
设定链接访问后的颜色。（被点击过）。

► background ="bg1.gif"
设定背景图片。GIF 或 JPEG 皆可，可以是绝对途径或相对途径。

► bgcolor ="#FFFFFF"
设定背景颜色。当己设定背景图片时会失去作用，除非图片有透明部分。

► leftmargin =2
设置网页的左边距，单位为像素。『只适用于IE』

► topmargin =2
设置网页的上边距。『只适用于IE』

► bgproperties ="fixed"
固定背景图片，当滚动条拖动时背景图片不会跟着滚动。『只适用于IE』

注：标记及参数之字母大小都可以。

本博客所有文章如无特别注明均为原创。作者：fyq ，复制或转载请以超链接形式注明转自免费精品资源分享。
原文地址《HTML语言剖析》