应该掌握的几个HTML标记语言(个人总结)

来源：互联网发布：mac重装系统磁盘解锁编辑：程序博客网时间：2024/04/30 15:04

2007-08-24 14:33:36

标签：HTML 职场休闲标记语言

原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。http://cnxfei.blog.51cto.com/166422/39632

HTML的英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。
超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作.
HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准.
用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用作WWW（是World Wide Web的缩写，也可简写WEB、中文叫做万维网) 的信息表示语言，使用HTML语言描述的文件，需要通过WEB浏览器显示出效果。

所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术----通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面与世界各地主机的文件链接

HTML标记语言的特点：

浏览器对HTML的语法要求不是特别严格，不区分大小写，属性值可以加双引号或不加，（这里的双引号是英文的而不是中文的双引号）。
可以用Dreamweaver、记事本或其他工具编写HTML源文档。（简单方便）

HTML文档构成网页的源代码。

浏览器读取*.htm或*.html文件中的标记，并根据这些标记来显示页面。

1.HTML文档结构

HTML文档主要由3部分组成。

（1）HTML部分。HTML标签告诉浏览器这两个标签中间的内容是HTML文档。

（2）头部。这部分包含显示在网页导航栏中的标题和其他在网页中不显示的信息。标题包含在<title>和</title>标签之间。

（3）主体部分。主体部分包含在网页中显示的文本、图象和链接等。

2.HTML基本语法

HTML标签使用时必须用尖括号"<>"把元素括起来,而且是成对出现.无斜杠的标记表示标记的开始,有斜杠的标记表示标记的作用结束.
一般来讲,HTML的标签有3种表示方法:

(1)<元素名>文本或超文本</元素名>

"关闭型"标记,必须有开始和结束对.

例:<body>hello!</body>

(2)<元素名属性名="属性值...">文本或超文本</元素名>

带有可选属性的标记

例:<body bgcolor="limegreen">你好!</body>
bgcolor就是body元素的一个属性,属性的值就是"="后面的单词描述的浅绿色.

(3)<元素名>

"非关闭型"标记.

例:<p>你好!
结尾不用</p>来结束也可以表示这是一段文字,类似的还有换行标记<br>,水平线标记<hr>等.

3.META标记

META标记出现在网页的标题部分.它是HTML语言HEAD部分的一个辅助性标记.
这是一个特殊的HTML标记,提供有关网页的信息,如作者姓名、公司名称、联系信息，以及标注页面的内容提要和关键字等，
许多搜索引擎都要使用此信息。META共有两个属性，分别是name属性和http-equiv属性。

(1)name属性
name属性主要用于描述网页，与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
name属性语法格式是：<meta name="参数" content="具体的参数值">。主要有以下几中参数：

author(作者)：标注网页的作者

例，将KAKA指定为网页的作者，则使用以下META标记：

keywords(关键字)：设定关键字

如果要用keywords(关键字)来告诉搜索引擎网页的关键字是什么，则使用以下META标记：

(因为搜索引擎采用了最新的算法，目前网站在搜索引擎的排名，更多取决于站点的内容好坏，由此可见，关键字只是影响排名的其中一个因素。)

robots(机器人向导):索引向导

告诉搜索引擎机器人哪些页面需要索引，哪些页面不要索引。
content的参数有all,none,index,noindex,follow,nofollow,默认是all（全部）。

例：<meta name="robots" content="all">

(2)http-equiv属性

http-equiv属性可用来代替name属性。
http-equiv类似于HTTP的头部协议，它给浏览器回应一些有用的信息，以帮助正确地显示网页内容。

expires(期限)
可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。注意：必须使用GMT的时间格式。

refresh(自动更新)

间隔10秒网页自动刷新，并指向新的URL网址。

HTML基本标记

标题标记

HTML语言提供了6级标题，<h1>为最大，<h6>为最小.用户只需定义从H1导H6中的一种大小，浏览器将负责显示过程。

例：
<html>
<head>
<title>标题</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>

段落标记

<p>用于标记段落的开始，段落结束标记</p>并非是必需的.即它是一个非关闭型标记.
还可以通过段落的align属性来设置段落的对齐方式,如左对齐(left)、居中(center)、右对齐(right)。

例：<p align="center">居中对齐

换行

<br>
<br>标记没有结束标记。

预格式化标记

<pre>...</pre>
此标签用于显示预先已定义好格式的文本。

文本格式标记

<B>..</B> 加粗
<I>..</I> 斜体
<U>..</U> 下划线
<SUB>..</SUB> 下标标记
<SUP>..</SUP> 上标标记

列表

无序列表(项目列表)
有序列表(编号列表)

无序列表就是项目列表.列表项前面带有项目符号,包含在无序列表标记<UL>...</UL>内.
列表中每项都用列表标记 <LI>标记,其中LI表示列表项.
结束标记</LI>为可选项

有序列表包含在<OL>...</OL>标记内.有序列表也显示列表项,区别于有序列表的列表项以自动生成的编号顺序显示.(1.2.3.)

有序列表--属性

<LI TYPE=I>    大写罗马字母
<LI TYPE=i>    小写罗马字母
<LI TYPE=A>    大写字母
<LI TYPE=a>    小写字母
<OL START=n>   使用1以外的数字开始编号(START属性指定列表的起始数字)

其他常用标记

1.<font>标记
用于控制网页上文本的显示.文本大小、颜色和样式等属性都可以使用。

<font>标记属性

color 指定字体的颜色。可以指定颜色名称或十六进制值
size 用于指定字体的大小。可以为字体指定的大小范围从1~7,最大为7，最小为1；

也可以使用一个默认字体大小，然后相对于该默认大小指定后续字体的大小。

例如，默认字体大小为3，则size+=4将使大小增加到7，size-=1将使大小减小到2
face 用于指定字体的样式、类型

2.<HR>标记
用于在页面上绘制水平线。此标签只有开始标记，没有结束标记，可用于属性控制水平线的显示。

<HR>标签属性

align   指定水平线的位置，可以将水平线居中对齐、右对齐或左对齐，如align=center
width   指定水平线的长度，可以按像素或百分比为单位指定其长度，默认值为100%，即横穿整个文档
size    指定水平线的高度，以像素为单位
noshade 指定水平线以纯色而不是以阴影进行显示
color   指定水平线以一种颜色显示，可以指定颜色名称或以十六进制值表示

3.<IMG>标记
<img>标记用于在HTML文档中插入图像，<img>标记会显示src属性中指定的内容。

<img>标签的align属性可用于调整图像相对于周围文本的对齐方式。
align可取下面的值：top bottom middle left right

4.<EMBED>标记
嵌入音频文件用此标记.

5.<MARQUEE>标记
这个标记经常用来做滚动字幕,可以横向也可以纵向.

<marquee direction="right">hello!</marquee>

direction是方向属性,值可以是up(向上)、down(向下)、left(向左)、right(向右).标记中间可以插入图像，用于制作更复杂的效果。

6.超文本链接标记
语法：<a href="url"></a>

href是hypertext reference的缩写，用于设定链接地址。链接地址必须为URL地址。

几个应用例子：

<a href="sound.wav">播放音频文件</a> 打开链接后，会把链接的音乐源文件下载到本地的播放器程序中进行播放。

<a href="123.doc">文本下载</a> 这是文件下载链接

特殊字符

HTML表格标记

1.<table></table> 定义表格的开始和结束.实现表格的代码就包含在其中.

<table>属性
align 对齐
width 宽度,百分比或像素
bgcolor 背景色
background 定义整个表格背景以一幅图片平铺
border 定义边框是否显示
cellspacing 定义单元格之间的间距
cellpadding 定义单元格内的间距

2.<caption></caption> 定义表格标题.此项可省略

3.<tr></tr> 定义表格的一行

4.<th></th>以及<td></td>
<th>和</th>用来设置表格栏标题(表头),显示为粗体字此标记可省略.
<td>和</td>用来转载单元格数据,它们必须位于<tr></tr>标记之间.
<td>标记属性很多.如:bgcolor(背景色)、align（对齐方式）、valign（垂直对齐方式）

----------------------------------------------------

超链接是从源端点到目标端点的一种调转。由于是在两点之间链接，因此把端点形象地称为锚（Anchor）.
也就是超文本链接中的标记<A>,也称锚记。

URL：Uniform Resoure Locator 统一资源定位器

本文出自 “菜鸟小飞” 博客，请务必保留此出处http://cnxfei.blog.51cto.com/166422/39632