HTML基本结构与常用标记Word文档格式.docx
《HTML基本结构与常用标记Word文档格式.docx》由会员分享，可在线阅读，更多相关《HTML基本结构与常用标记Word文档格式.docx（20页珍藏版）》请在冰点文库上搜索。
4.版本信息
迄今为止HTML已公布了多个版本，最新的规范是HTML4.0。
一个完整的HTML文件通常是以版本声明开始的，用以指明文件语法的定义，版本声明标记是<
!
DOCTYPE>
。
5.标题信息
HTML文件首部位于文件开始标记<
之后，并由开始标记<
HEAD>
和结束标记<
/HEAD>
定义。
首部内容包括标题名、文本文件的地址、创作信息等文件信息说明，并由专门标记定义，它们都不在浏览器窗口内显示。
首部内使用的主要标记有：
（1）<
标记
<
标记首部的开始，<
标记首部的结束。
（2）<
TITLE>
/TITLE>
每个HTML文件都有一个标题名，在浏览器中作为窗口名称显示在该窗口的最上方标题栏内。
网页标题名要写在<
标记之间，并且<
标记应包含在<
标记之间。
一个网页只能有一个网页标题名，而且标记中不能包含其他标记。
由于许多浏览器将网页名称放在窗口上的标题框中，因而，页面标题就像是页面的门面，一定要短小精悍，反映页面内容，同时由于浏览器标题栏空间有限，标题不要太长，一般上限是50-60个字符，多余的字符将被截掉。
（3）<
META>
标记是一个单标记，用于指明HTML文件自身的某些信息，例如文件创建工具、文件作者的信息等。
格式为：
METAname="
"
content="
>
METAhttp-equiv="
使用的属性有:
●name指定特性名
●http-equiv定义标记的特性
●content指定特性的值
（4）主体标记<
BODY>
/BODY>
网页中的主要内容就是网页的主体，它写在之间，而<
标记对包含在<
标记对之内。
文件主体定义了网页显示的内容，如文字、链接、图像、表格或者其他对象。
设计制作网页，实际上主要是设计<
标记之间的文本和图形内容及各种标记。
与<
相关的属性主要有:
●background图像设置网页的背景
●bgcolor设置网页的背景色
●text设置网页文本的颜色
●link设置超文本链接尚未访问文本时的颜色,默认为蓝色
●vlink设置超文本链接已经访问文本的颜色,通常为紫色
●alink设置超文本链接被选择瞬间时文本的颜色
2常用HTML标记简介
1．基本结构标记
HTML标记的基本结构由两大部分组成：
1首部标记<
…<
2主体标记<
首部标记和主体标记的主体内容又由其他的标记和文本组成。
在HTML文档中，有的标记只能出现在首部标记中，大多数标记则只能在正文标记中出现。
在首部中出现的标记书写顺序没有严格要求,而在正文中出现的标记的次序不能随意改动，改动后会改娈HTML文档的输出形式。
一个HTML文档应具有下面的结构：
表明HTML文档开始
表明文件头开始
表明文件头结束
表明正文开始
表明正文结束
表明HTML文档结束
2．文本结构标记
当我们要在浏览器中显示文本时，我们可以用文本结构标记来实现，但要注意，文本结构标记是位于<
标记之间的。
常用文本结构标记如下。
P>
/P>
标记对是用来创建一个段落，在此标记对之间加入的文本将按照段落的格式显示在浏览器上。
另外，<
标记还可以使用ALIGN属性来说明对齐方式。
语法是：
PALIGN=″″>
BR>
是一个单一的标记，没有结束标记，作用是用来创建一个回车换行。
如果把<
放在<
标记对的外边，将创建一个行距较大的回车换行，若把<
标记对的里边，将创建一个行距较小的回车换行。
BLOCKQUOTE>
/BLOCKQUOTE>
在<
标记对之间加入的文本将会在浏览器中按两边缩进的方式显示出来。
（4）<
DIV>
/DIV>
标记对用来排版大块Html段落，也用于格式化表，此标记对的用法与标记对<
非常相似，同样有ALIGN对齐方式。
3列表标记
网页中的列表使用如下的标记来创建。
DIR>
/DIR>
用来创建目录表，作为无序列表。
MENU>
用来创建菜单列表，作为无序列表。
DL>
/DL>
，<
DT>
/DT>
DD>
/DD>
用来创建一个普通的列表，<
用来创建表中的上层项目，<
用来分创建列表中的最下层项目。
都必须放在<
标记对之间。
OL>
/OL>
UL>
/UL>
LI>
/LI>
标记对用来创建一个标有数字的列表，<
标记对用来创建一个标有圆点的列表，<
标记用来创建一个列表项，该标记只能在<
或<
标记对之间使用。
若<
之间则在每个列表项前加上一个数字，若在<
之间则在每个列表项前加上一个圆点。
4超级链接标记
超级链接是Html语言的一大特色，正因为有了它，我们对内容的浏览才能够具有灵活性和网络性。
AHREF=″″>
/A>
本标记对的属性HREF是不可缺少的，标记对之间加入需要链接的文本或图像。
HREF的形式可以是URL形式，即网址或相对路径，也可以是MAILTO形式，即发送E-MAIL形式。
如：
AHREF=″HTTP:
//XLD.HOME.CHINAREN.COM/″>
这是我的网站<
或者
AHREF=″MAILTO:
RENWEN@163.COM/″>
这是我的电子邮箱<
此外，<
AHRET=″″>
还具有TARGET属性，此属性用来指明浏览的目标框架。
这将在框架标记中作详细的说明。
这里简单说说，如果不使用TARGET属性，当浏览者点击了链接之后，将在原来的浏览窗口中浏览新的HTML文档；
如果使用TARGET属性且其值等于“-BLANK”，则点击链接之后，将打开一个新的浏览窗口来浏览新的HTML文档。
ANAME=″″>
本标记对要结合<
标记对使用才有效果。
标记对用来在HTML文档中创建一个标签，属性NAME是不可缺少的，它的值也即是标签名，如：
ANAME=″标签名″>
此处创建了一个标签<
创建标签是为了在HTML文档中创建一些链接，以便能够找到同一文档中的有标签的地方。
要找到标签所在地，就必须使用<
标记对。
如要找到“标签名”这个标签，就要编写如下代码：
AHRET=″#标签名″>
点击此处将使浏览器跳到“标签名”处<
MAP>
/MAP>
为用户端的图像映像指定链接，它的属性值为NAME.
AREA>
/AREA>
用于定义热区或区域。
使用的属性有SHAPE（定义形状）与COORDS（定义一个以逗号分隔的坐标列表）。
5表格标记
表格标记对于制用网页是非常重要的，现在的很多网页都是使用多重表格，主要是因为表格不但可以定位文本或图像的输出，而且还可以在表格中进行任意的背景和前景颜色的设置。
TABLE>
/TABLE>
标记对用来创建一个表格，它有八个属性值，分别为：
●<
TABLEBGCOLOR=″″>
：
设置表格的背景色。
TABLEBORGER=″″>
设置边框的宽度，若不设此属性，则边宽为零。
TABLEBORGERCOLOR=″″>
设置边框的颜色。
TABLEBORGERCOLORLIGHT=″″>
设置边框明亮部分的颜色。
TABLEBORGERCOLORDARK=″″>
设置边框昏暗部分的颜色。
TABLECELLSPACING=″″>
设置表格格子之间空间的大小。
TABLECELLPADDING=″″>
设置表格格子边框与内容之间空间的大小。
TABLEWIDTH=″″>
设置表格的宽度。
以上各个属性可以结合使用，有关宽度、大小的单位用绝对像素值。
而有关颜色的属性使用十六进制RGB颜色码或HTML语言给定的颜色常量名。
TR>
/TR>
TD>
/TD>
标记对用来创建表格中的每一行，而<
标记对用来创建表格一行中每一个格子，例如要创建一个一行三列的表格，则标记就可按如下方式书写：
最外层，创建一个表格<
创建一行<
<
要输出的文本<
创建三个格子<
最外层<
TH>
/TH>
标记对用来设置表格头，通常是黑体居中文字。
CAPTION>
/CAPTION>
为表格定义一个标题，使用属性ALIGN指定标题的位置。
6框架标记
创建框架页面时，我们也可以根据框架标记编制出任意的框架集合。
它的标记如下：
FRAMESET>
/FRAMESET>
该标记对用来定义主文档中有几个框架并且各个框架是如何排列的。
该标记放在框架的主文档的<
标记对的外边，也可以嵌在其他框架文档中，并且可以嵌套使用。
它具有ROWS和COLS属性，使用<
标记时这两个属性至少必须选择一个，否则浏览器只显示第一个定义的帧。
ROWS用来规定主文档中各个框架的行定位，而COLS用来规定主文档中各个框架的列定位。
FRAME>
标记放在<
之间，用来定义某一个具体的框架。
标记具有SRC和NAME属性，这两个属性都是必须要取值的。
SRC定义此框架的源HTML文件名，浏览器将会在此框架中显示SRC指定的HTML文件。
NAME是此框架的名字，当此框架要建立超链接时必须要用到。
标记还有SCROLLING和NORESIZE属性，SCROLLING用来指定是否显示滚动条，取值可以是“YES”（显示）、“NO”（不显示）、“AUTO”（需要时显示）。
NORESIZE属性直接加入标记中即可使用，不需赋值，它用来禁止用户调整一个框架的大小。
NOFRAMES>
/NOFRAMES>
标记对也是放在<
标记对之间，用来在那些不支持框架的浏览器中显示文本或图像信息。
7表单标记
FROM>
/FROM>
标记用来创建一个表单，也即定义表单的开始和结束位置，在标志对之间的一切都属于表单的内容。
标记具有action、method和target属性。
Action用来处理程序的程序名，method属性用来定义处理程序从表单中获得信息的方式，可取值为GET和POST的其中一个。
GET方式是处理程序从当前Html文档中获取数据，然而这种方式传送的数据量是有所限制的，一般限制在1KB以下。
POST方式与GET方式相反，它是当前的Html文档把数据传送给处理程序，伟送的数据量要比使用GET方式的大的多。
target属性用来指定目标窗口或目标框架。
INPUTTYPE=″″>
标记用来定义一个用户输入区，用户可以在其中输入信息。
此标记放在<
标记中共提供了八种类型的输入区域，具体是哪一种类型由type属性来决定。
SELECT>
/SELECT>
标记用来创建一个下拉式列表或可以复选的列表框。
具有multiple、name和size属性。
Multiple属性不用赋值，直接加入标志中即可使用，加入发此属性后列表框就成了可多选的了。
Name是此列表框的名字。
Size属性用来设置列表的高度，默认时值为1，若没有设置multiple属性，显示的将是一个弹出式的列表框。
TEXTAREA>
/TEXTAREA>
用来创建一个可以输入多行的文本框，此标记对用于<
具有name、cols和rows属性。
cols和rows属性分别用来设置文本框的列数和行数，以字符为单位。
8音、视频与图像标记与特殊效果标记
网页中如果加入音频、视频与图像，可以使网页显得更加的绚丽多彩。
它们的标记如下：
IMG>
标记并不是真正的把图像给加入到HTML文档中，而是将标记对的SRC属性赋值，这个值是图形文件的文件名，当然包括路径，路径可以是相对路径也可以是网址。
SRC属性在<
标记中是必须赋值的，是标记中不可缺少的一部分。
除此之外，<
标记还有ALT、ALIGN、BORDER、WIDTH和HEIGHT属性。
其中ALT属性是指当鼠标移动到图像上时显示的文本，ALIGN是图像的对齐的方式，BORDER属性是图像的边框，可以取大于或等于零的整数，WIDTH和HEIGHT属性是指图像的宽与高。
BGSOUND>
标记用来加入音频。
也是利用标记对的SRC属性赋值，SRC的值为路径，也是标记中不可缺少的。
该标记对有一个特殊的属性为LOOP，用来控制音频的播入次数，当取值为-1时，指不限制播放次数。
EMBED>
标记用来加入视频。
该标记也是利用SRC属性值来赋值实现的，功能与上面的相同。
NOEMBED>
/NOEMBED>
标记对用来设定当不支持视频播放的浏览器浏览网页时显示的文本或图像。
（5）<
MARQUEE>
/MARQUEE>
标记对用来设置滚动字幕。
该标记有八个属性值，其中BGCOLOR属性值表示背景色，SCROLLAMOUNT表示速度，SCROLLDELAY属性值表示延迟，WIDTH和HEIGHT分别表示该字幕的宽与高，LOOP表示该字幕的循环次数，DIRECTION属性值表示滚动的方向，ALIGN表示对齐方式。
3常用HTML标记汇总
结构标记
1．<
Doctype…>
用于定义HTML文件的类型。
2．<
定义HTML文件的开始和结束.
3．<
出现在HTML文件的起始部分,用来表明文件的标题等相关信息.
4．〈BODY〉…<
BDDY元素是HTML文件的主体,可以理解成除标题以外的所有部分.
文件头部标记
HTML文件头部位于〈HTML〉和〈/HTML〉之间，内容包括标题名、创作信息等。
1．〈BASE〉
这是一个单标记，设定相对引用的基址URL。
2．〈ISINDEX〉
用于在浏览器上建立一个交互索引框。
3．〈LINK〉
定义当前文件和另一文件或资源间的链接关系。
4．〈META〉
用于指明HTML文件自身的一些信息，如：
文件制作工具、文件作者等。
使用的属性有：
Name:
指定特性名；
Content:
指定特性值；
Http-equiv:
定义标记的特性。
5．<
STYLE>
用于定义风格.
6．<
定义标题,用法如:
标题名<
.
格式标记
1.<
B>
/B>
指定文本为粗体.
2.<
BASEFONT>
使用SIZE属性指定文本的基准大小.
3.<
BIG>
/BIG>
大字体文本.
4.<
BLINK>
/BLINK>
设定文本闪烁（只适用于NetscapeNavigator）.
如:
此处是闪烁的文本<
5.<
CITE>
/CITE>
设定斜体文字.
6.<
CODE>
/CODE>
将程序代码显示成等宽字体.如:
intx;
x++;
7.<
DFN>
/DFN>
指定一个术语的定义
8.<
EM>
/EM>
强调某段文字,通常用斜体显示
9.<
FONT>
/FONT>
规定字体属性,使用的属性有:
size、color等
10.<
I>
/I>
斜体格式
11.<
KBD>
/KBD>
提示用户应该从键盘输入的文字，浏览器一般用等宽字体显示
12.<
SAMP>
/SAMP>
样本字体格式，常用于举例，浏览器一般用等宽字体显示.
13.<
SMALL>
/SMALL>
指定一段文字为小字体（比当前一般字体小一号）.
14.<
STRIKE>
/STRIKE>
指定一段文字在浏览器中显示带删除线.
15.<
STRONG>
/STRONG>
粗体显示的强调文本.
16.<
SUB>
/SUB>
下标文字.
17.<
SUP>
/SUP>
上标文字.
18.<
TT>
/TT>
标准打印机字体.
19.<
U>
/U>
带下划线的文字.
20.<
VAR>
/VAR>
参数或变量型字体，常显示为斜体
超文本链接标记
A>
用于创建超文本链接，可以使用的属性有：
Href:
指定一个URL作为有效的链接资源地址
指定一个字符串作为链接时可以使用的位置名称
Target:
用于设置所链接的文件显示在指定的窗口
Rel:
用来指定源端在当前文件的链接
Rev:
用来指定目的端在当前文件的链接，与Rel一样，对A元素它们都不是必须的
为客户端的图像指定链接，使用的属性为Name
用于定义热区或区域，使的属性有:
Shape:
定义形状,属性值可为:
rect,circle,polygon,default.
Coords:
定义一个以逗号分隔的坐标列表.
图像与声音标记
为HTML文件指定背景声音（适用于MicrosoftInternetExplorer）,使用的属性有:
Src:
指定文件的URL.
Loop:
声音播放的次数,若为-1或Infinite,则一直播放下去.
用于将图像嵌入HTML文件.使用的属性有:
指定图像的URL.
Alt:
指定当浏览器尚未完全读入图像、或浏览器不支持内联图像、或用户为加快浏览速度设置不显示图像时，在图像位置显示的说明性文字。
Align:
指定图像的对齐方式和布局方式。
可取值为：
top,texttop,middle,absmiddle,baseline,bottom,absbottom.
Hspace:
设定图像与文本之间水平方向的空白。
Vspace:
设定图像与文本之间垂直方向的空白。
Border:
用于给图像加边。
Height和Width：
用于指定图像的大小。
块标记
ADDRESS>
/ADDRESS>
地址型格式，用于地址、签名等。
表示引用的一段材料
爱因斯坦说过：
A=X+Y+Z，A代表成功…<
强制文本换行
CENTER>
/CENTER>
使文本或图像居中。
用于将文本划分成不同的部分，使用Align属性（值可为left,right,center）为各个段落指定不同的对齐方式。
升级会员 