HTML语法大全

2023-12-18 05:34•html•阅读 342

卷标 , 属性名称 , 简介

<! - - ... - -> 批注

<!> 跑马灯

<marquee>...</marquee>普通卷动

<marquee behavior=slide>...</marquee>滑动

<marquee behavior=scroll>...</marquee>预设卷动

<marquee behavior=alternate>...</marquee>来回卷动

<marquee direction=down>...</marquee>向下卷动

<marquee direction=up>...</marquee>向上卷动

<marquee direction=right></marquee>向右卷动

<marquee direction=left></marquee>向左卷动

<marquee loop=2>...</marquee>卷动次数

<marquee width=180>...</marquee>设定宽度

<marquee height=30>...</marquee>设定高度

<marquee bgcolor=FF0000>...</marquee>设定背景颜色

<marquee scrollamount=30>...</marquee>设定卷动距离

<marquee scrolldelay=300>...</marquee>设定卷动时间

<!>字体效果

<h1>...</h1>标题字(最大)

<h6>...</h6>标题字(最小)

<b>...</b>粗体字

<strong>...</strong>粗体字(强调)

<i>...</i>斜体字

<em>...</em>斜体字(强调)

<dfn>...</dfn>斜体字(表示定义)

<u>...</u>底线

<ins>...</ins>底线(表示插入文字)

<strike>...</strike>横线

<s>...</s>删除线

<del>...</del>删除线(表示删除)

<kbd>...</kbd>键盘文字

<tt>...</tt> 打字体

<xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)

<plaintext>...</plaintext>固定宽度字体(不执行标记符号)

<listing>...</listing> 固定宽度小字体

...字体颜色

...最小字体

<font style =font-size:100 px>...无限增大

<!>区断标记

<hr>水平线

<hr size=9>水平线(设定大小)

<hr width=80%>水平线(设定宽度)

<hr color=ff0000>水平线(设定颜色)

<br>(换行)

<nobr>...</nobr>水域(不换行)

<p>...</p>水域(段落)

<center>...</center>置中

<!>连结格式

<base href=地址>(预设好连结路径)

<a href=地址>外部连结

<a href=地址 target=_blank>外部连结(另开新窗口)

<a href=地址 target=_top>外部连结(全窗口连结)

<a href=地址 target=页框名>外部连结(在指定页框连结)

<!>贴图/音乐

<img src=图片地址>贴图

<img src=图片地址 width=180>设定图片宽度

<img src=图片地址 height=30>设定图片高度

<img src=图片地址 alt=提示文字>设定图片提示文字

<img src=图片地址 border=1>设定图片边框

<bgsound src=MID音乐文件地址>背景音乐设定

<!>表格语法

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=图片路径>...</table>背景图片的URL=就是路径网址

<table border=边框大小>...</table>设定表格边框大小(使用数字)

<table bgcolor=颜色码>...</table>设定表格的背景颜色

<table borderclor=颜色码>...</table>设定表格边框的颜色

<table borderclordark=颜色码>...</table>设定表格暗边框的颜色

<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色

<table cellpadding=参数>...</table>指定内容与网格线之间的间距(使用数字)

<table cellspacing=参数>...</table>指定网格线与网格线之间的距离(使用数字)

<table cols=参数>...</table>指定表格的栏数

<table frame=参数>...</table>设定表格外框线的显示方式

<table width=宽度>...</table>指定表格的宽度大小(使用数字)

<table height=高度>...</table>指定表格的高度大小(使用数字)

<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)

<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)

<!>分割窗口

<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整

<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整

<frameset cols="20%,*">分割左右两个框架

<frameset cols="20%,*,20%">分割左中右三个框架

<分割上下两个框架

<frameset rows="20%,*,20%">分割上中下三个框架

<! - - ... - -> 批注

<A HREF TARGET> 指定超级链接的分割窗口

<A HREF=#锚的名称> 指定锚名称的超级链接

<A HREF> 指定超级链接

<A NAME=锚的名称> 被连结点的名称

<ADDRESS>....</ADDRESS> 用来显示电子邮箱地址

<B> 粗体字

<BASE TARGET> 指定超级链接的分割窗口

<BASEFONT SIZE> 更改预设字形大小

<BGSOUND SRC> 加入背景音乐

<BIG> 显示大字体

<BLINK> 闪烁的文字

<BODY TEXT LINK VLINK> 设定文字颜色

<BODY> 显示本文

<BR> 换行

<CAPTION ALIGN> 设定表格标题位置

<CAPTION>...</CAPTION> 为表格加上标题

<CENTER> 向中对齐

<CITE>...<CITE> 用于引经据典的文字

<CODE>...</CODE> 用于列出一段程序代码

<COMMENT>...</COMMENT> 加上批注

<DD> 设定定义列表的项目解说

<DFN>...</DFN> 显示"定义"文字

<DIR>...</DIR> 列表文字卷标

<DL>...</DL> 设定定义列表的卷标

<DT> 设定定义列表的项目

<EM> 强调之用

<FONT FACE> 任意指定所用的字形

<FONT SIZE> 设定字体大小

<FORM ACTION> 设定户动式窗体的处理方式

<FORM METHOD> 设定户动式窗体之资料传送方式

<FRAME MARGINHEIGHT> 设定窗口的上下边界

<FRAME MARGINWIDTH> 设定窗口的左右边界

<FRAME NAME> 为分割窗口命名

<FRAME NORESIZE> 锁住分割窗口的大小

<FRAME SCROLLING> 设定分割窗口的滚动条

<FRAME SRC> 将HTML文件加入窗口

<FRAMESET COLS> 将窗口分割成左右的子窗口

<FRAMESET ROWS> 将窗口分割成上下的子窗口

<FRAMESET>...</FRAMESET> 划分分割窗口

<H1>~<H6> 设定文字大小

<HEAD> 标示文件信息

<HR> 加上分网格线

<HTML> 文件的开始与结束

<I> 斜体字

<IMG ALIGN> 调整图形影像的位置

<IMG ALT> 为你的图形影像加注

<IMG DYNSRC LOOP> 加入影片

<IMG HEIGHT WIDTH> 插入图片并预设图形大小

第一章：HTML 语言的结构

　　html文件是标准的ASCII文件，它看起来象是加入了许多被称为链接签(tag)的特殊字符串的普遍文本文件。

　　从结构上讲，html文件由元素(element)组成，组成html文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”，即它有起始标记和结尾标记。元素的起始标记叫做起始链接签(start tag)，元素结束标记叫做结尾链接签(end tag)。

在起始链接签和结尾链接签中向的部分是元素体。每一个元素都有名称和可选择的属性，元素的名称和属性都在起始链接签内标明。比如体元素(body)

This is my first html file. <p>

</body>

　　第一行是体元素的起始链接签，它标明体元素从此开始。因为所有的链接签都具有相同的结构，所以我们将仔细分析这个链接签的各个部分，以便读者对链接签的写法有一大概了解。

　　< 起始链接签开始 body 元素名称，由于元素和链接签一一对应，所以元素名也叫链接签名。需要注意的是<和body之间不能有空格。元素名称不分大小写。background属性名。一个元素可以有多个属性，属性及其属性值不分大小写。本属性指明用什么方法来填充背景。

　　＝指明属性值

　　“background.gif”属性值，表示用background.gif文件来填充背景。

　　属性名,＝,属性值合起来构成一个完整的属性，一个元素可以有多个属性，各个属性用空格分开。

　　>　起始链接链结束。

　　第二行和第三行是body元素的元素体，最后一行是body元素的结尾链接签。结尾链接签用</开始，随后是元素名，然后是大于号>。

　　从上面的例子中，我们可以看出，一个元素的元素体中可以有另外的元素。(上例中第二行的标题元素<h2>…</h2>和第三行的分段元素<p>。实际上，html文件仅由一个html元素组成，即文件以<html>开始，以</html>结尾，文件其部分都是 html的元素体。html元素的元素体由两大部分，即头元素<head>..</head>和体元素<body>…</body>和一些注释组成。头元素和体元素的元素体又由其它的元素和文本及注释组成。也就是说，一个html文件应具有下面的结构：

　　<html>　　　html文件开始

　　 <head> 文件头开始

　　文件头

　　 </head>　文件头结束

　　 <body> 文件体开始

　　文件体

　　 </body> 文件体结束

</html>　　 html文件结束

　　需要说明的是，html是一门发展很快的语言，早期的html文件并没有如此严格的结构，因而现在流行的浏览器(如Netscape,Mosaic等)为保持对早期html文件的兼容性，也支持不按上述结构编写的html文件。还需要说明的是，各种浏览器对html元素及其属性的解释也不完全一样。

　　一般来讲，html的元素有下列三种表示方法：

　　1)<元素名>文件或超文本<／元素名>

　　2)<元素名　属性名＝“属性值…>文本成超文本<／元素名>

　　3)<元素名>

　　第三种写法仅用于一些特殊的元素,比如分段元素P，它仅仅通知www浏览器在此处分段，因而不需要界定作用范围，所以它没有结尾链接签。htlm3.0标准中，也定义了</p> 链接签，它用于需要界定作用范围的段落，比如增加对齐方式属性的段落。

　　html文件中，有些元素只能出现在头元素中，绝大多数元素只能出现在体元素中。在头元素中的元素表示的是该html文件的一般信息，比如文件名称，是否可检索等等。这些元素书写的次序是无关紧要的，它只表明该html有还是没有该属性。与此相反，出现在体元素中的元素是次序敏感的，改变元素在html文件中的次序会改变该html文件的输出形式。

第二章：构成网页的基本元素

2.1题目(TITLE)

　　Title元素是文件头中唯一一个必须出现的元素，它也只

能出现在文件头中。title元素的格式为：

　　<title>文件题目</title>title标明该html文件的题目，是对文件内容的概括。一个好的题目应该能使读者从中判断出该文件的大概内容。文件的题目一般不会显示在文本窗口中，而以窗口的名称显示出来。

　　除了标识窗口外，当将某一 homepage 存入书签或文件时，title还用作书签名或缺省的文件名。

　　title的长度没有限制，但过长的题目会导致折行，一般情况下它的长度不应超过64个字符。由于title的作用是标明文件内容，所以太短的title也是不可取的，比如：introduction 这个题目，读者不可能根据它判断出本文介绍的是什么。一个好的例子是：

<title>　An Introduction to HTML 2.0 </title>

　　在头元素中还可以出现其他元素，如<isindex>，<meta>等等。这些元素都不是必须的，而且也不常用。这些元素的用法和它们的含义可以参考有关文献。

　　下面是一个最简单的html文件

<html>

<title>the simplest html file</title>

This is my first html file.

</html>

§2.2 标题(hn)

　　标题元素有6种，分别为h1, h2,…h6，用于表示文章中的各种题目。标题号越小，字体越大。一般情况下，浏览器对标题作如下解释：

h1 黑体，特大字体，居中，上下各有两行空行。

h2 黑体，大字体，上下各有一到两行空行

h3 黑体(斜体)，大字体，左端微缩进，上下空行

h4 黑体，普通字体，比h3更多缩进，上边一空行

h5 黑体(斜体)，与h4相同缩进，上边一空行

h6 黑体，与正文有相同缩进，上边一空行

　　Netscape 2.0为hn的解释为，一律黑体，字体越来越小。

　　hn可以有对齐属性，align＝#，#表示：left 标题居左；center 标题居中；right 标题居右

例: <h2 align=center>Chapter 2 </h2>

　　下面给出hn的例子及其输出：

<h1>Today is fine!<／h1>

Today is fine!

<h2>Today is fine!<／h2>

Today is fine!

<h3>Today is fine!<／h3>

Today is fine!

<h4>Today is fine!<／h4>

Today is fine!

<h5>Today is fine!<／h5>

Today is fine!

<h6>Today is fine!<／h6>

Today is fine!

§2.3 分段<P>

　　html的浏览器是基于窗口的，用户可以随时改变显示区的大小，所以html将多个空格以及回车等效为一个空格，这是和绝大多数字处理器不同的。html的分段完全依赖于分段元素<P>。比如下面两段源文件有相同的输出。

<h2>This is a level Two Heading </h2>

paragraphy one <p>paragraph two <p>

… … … … … … … … … …

<h2>This Is a Level Two Heading</h2>

paragraph one <p>

paragraph Two <p>

<p>也可以有多种属性，比较常用的属性是：

　　aligh＝# #可以是left,center,right,其含义同上文。

　　例　<p align=center>This is a centeredparagraph <／p>

　　当 html文件中有图形，图形可能占据了窗口的一端，图形的周围可能还有较大的空白区。这时，不带clear属性的<p>可能会使文章的内容显示在该空白区内。为确保下一段内容显示在图形的下方，可使用clear属性。clear属性的含义为：

　　clear=left 下一段显示在左边界处空白的区域

　　clear=right 下一段显示在右边界处空白的区域

　　clear=all 下一段的左右两边都不许有别的内容

§2.4 清单List

　　清单用于列举事实，常用的清单有3种格式，即无序清单(unordered List)，有序清单(ordered list)和定义清单(definition list)

2.4.1 无序清单(ul)

　　无序清单用(ul)开始，每一个清单条目用<li>引导，最后是</ul>，注意清单条目不需要结尾链接签</Li>。输出时每一清单条目缩进，并且以黑点标示。

例：

源文件

　<ul>

　　<li>Today

　　<li>Tommorow

</ul>

输出为：

Today

Tommorow

2.4.2 有序清单<ol>

　　有序清单与无序清单相比，只是在输出时清单条目用数字标示，下面是一个例子及其输出：

　<ol>

　　<li>Today

　　<li>Tommorow

</ol>

输出为：

Today

Tommorow

2.4.3 定义清单<dl>

　　定义清单用于对清单条目进行简短说明的场合，用<dl>开始，清单条目用<dt>引导，它的说明用<dd>引导。

　　<dl>

　　　<dt>Item 1

　　　<dd>The definition of item 1

　　　<dt>Item 2

　　　<dd>Definition or explaination of item 2

　　</dl>

输出为：

Item 1

The definition of item 1

Item 2

Definiton or explaination of item 2

2.4.4 改变条目标记

　　1.改变无序清单条目标记

　　无序清单输出时，每一条目前都有一个黑色圆点，用户可以用type序性修改条目的标记。type可以是：

disc：实心圆点；　circle：圆圈　　square：实心方点

　<ul>

　　<li type=disc>ONE

　　<li type=circle>TWO

　　<li type=square>THREE

</ul>

输出为：

ONE

TWO

THREE

2.改变有序清单条目标记

　　有序清单条目标记的缺省值是阿拉伯数字，可以用type属性修改。方法为:

<Litype=#>

　　#=A, 大写字母

　　　a, 小写字母

　　　I, 大写罗马数字

　　　i, 小写罗马数字

　　　l, 缺省,阿拉伯数字

<ol><li type=A>ONE-ONE

ONE-ONE

ONE-TWO

<ol><li type=a>ONE-ONE

ONE-ONE

ONE-TWO

<ol><li type=I>ONE-ONE

ONE-ONE

ONE-TWO

3.改变有序清单条目的超始数字

　　有序清单的条目数字在缺省情况下是从1开始的，用start属性可修改这一值。方法为<ol start=#> #是条目起始号　　　<ol start=5>

　　　　　　　<li type=A>ONE-ONE

　　　　　　　<li>ONE-TWO

　　　　　　　<li>TWO-ONE

　　　　　　　<li type=i>TWO-ONE

　　　　　　　</ol></ol>

ONE-ONE

ONE-TWO

TWO-ONE

TWO-TWO

2.4.5 清单的嵌套

　　各种清单可以相互嵌套，每一个清单条目都可以是一个单独的清单。每嵌套一层，清单条目的输出就会有更大的缩进。请参照上面的例子。

§2.5 预排版文本<pre>

　　html的输出是基于窗口的，因而html文件在输出时都是要重新排版的，若确实不需要重新排版的内容，可以用<pre>…<／pre>通知浏览器。浏览器在输出时，对这部分内容几乎不做修改地输出，输出的字体电传打字机字体。早期的html规范规定在预排版区内不能出现格式化输出的元素。如hn等，Netscapr2.0在遇到预排版元素时，允许其中有其他元素。

　　<pre>

　　　please use your card.

　　　VISA Master

　　　<b>Here is an order form.</b>

　　　<ul><li>Fax

　　</pre>

§2.6 块引用<BQ>

　　块引用表示其中的内容是引用。浏览器内对块引用的解释一般为左右缩进，上下各有一空行，有些浏览器还采用斜体字。

§2.7 居中<center>

　　很多元素都有对齐方式属性，如hn 、p等。也可以直接用居中链接签<center>…<／center>

<h3 align=center> Wonderful!! </h3>

<center> This must be my dream. </center>

Wonderful!!

This must be my dream.

第三章：超文本链接指针

　　超文本链接指针是html最吸引人们优点之一。使用超文本链接指针可以使顺序存放的文件具有一定程度上随机访问的能力，这更加符合人类的思维方式。人的思维是跳跃的、交叉的，而每一个链接指针正好代表了作者或者读者的思维跳跃。因而组织得好的链接指针不仅能使读者跳过他不感兴趣的章节(比如一些枯燥的数据)，而且有助于更好地理解作者的意图。

一个超文本链接指针由两部分组成。一是被指向的目标，它可以是同一文件的另一部分，也可以是世界另一端的一个文件，还可以是动画或音乐；另一部分是指向目标的链接指针。

§3.1 统一资源定位器URL

　　统一资源定位器(uuiform Resource Locator)是文件名的扩展。在单机系统中，定位一个文件需要路径和文件名，对于遍布全球的Internet网，显然还需要知道文件存放在哪个网络的哪台主机中才行。与单机系统不一样的是在单机系统中，所有的文件都由统一的操作系统管理，因而不必给出访问该文件的方法；而在Internet上，各个网络，各台主机的操作系统都不一样，因此必须指定访问该文件的方法。一个URL包括了以上所有的信息。它的构成为：

　　protocol:// machine.name[:port]／directory／filename

其中protocol是访问该资源所采用的协议，即访问该资源的方法，它可以是：

http 超文本传输协议，该资源是html文件

file 文件传输协议,用ftp访问该资源

ftp 文件传输协议,用ftp访问该资源

gopher gopher协议,该资源是gopher文件

news 表明该资源是网络新闻组

　　madcine.name 是存放该资源主机的IP 地址,通常以字符形式出现,如 sun.ihep.ac.cn port端口号，是服务器在该主机所使用的端口号。一般情况下端口号不需要指定。只有当服务器所使用的端口号不是缺省的端口号时才指定。

　　directory和filename是该资源的路径和文件名。

　　一个典型的URL为:http://www.ihep.ac.cn 它表示中科院高能所WWW服务器上的起始html文件。(文件具体存放的路径及文件名取决于该WWW服务器的配置情况)。

　　与单机系统绝对路径，相对路径的概念类似，统一资源定位器也有绝对URL和相对URL之分。上文所述的是绝对URL。相对URL是相对于你最近访问的URL。比如你正在观看一个URL为http://www.inep.ac.cn/index.html的文件，如果想看同一个目录下的另一个文件china.html，你可以直接使用china.html，这时china.html就是一个相对url，它的绝对url为http://www.ihep.ac.cn/china.html

§3.2 指向一个目标<a>

　　在html文件中用链接指针指向一个目标。其基本格式为：

　　href属性中的统一资源定位器(url)是被指向的目标，随后的“字符串”在html文件中充当指针的角色，它一般显示为蓝色。当读者用鼠标点这个字符串时，浏览器就会将url处的资源显示在屏幕上。例如：

　　<a href="http://www:ihep.ac.cn">IHEP CHINA homepage</a>

用户用鼠标点取IHEP china homepage，即可看到高能所编写的关于中国情况的介绍。在这个例子中，充当指针的是IHEP china homepage，下面我们将看到用图象做为指针的例子。

　　在编写html文件时，需要知道目标的url。如何才能得到目标的url呢？对于自己主机内的文件，它的url 可以根据该文件的实际情况决定。对于Interner上的资源，我们在用浏览器观看时，它的url会在浏览器的Location一栏中显示出来，把它抄下来写到你的html文件中即可。

　　在编写html文件时，对有能确定关系的一组资源(比如在同一个目录中)应采用相对url，这不仅简化你的html文件，而且便于维护。比如当你需要将某个目录整个搬到另外一个地方或把某一主机的资源移到另一台主机时，用相对url写的html文件用不看更新其中的url(只要它们的相对关系没有改变)。但如果你用绝对url编写html，你就不得不逐字修改每个链接指针中的url，这是一件很乏味也很容易出错的工作。

　　对于各个资源之间没有固定的关系，比如你的html文件是介绍各大学情况的，它所指向的目标分布在全球的主机中，这时你就只能用绝对url了。

　　在本章的末尾，作者给出一个完整的html文件，该文件使用了前三章介绍的全部元素，以便于读者理解。

§3.3 标记一个目标

　　上节提到的链接指针可以使读者在整个Interner网上方便地链接。但如果你编写了一个很长的html文件，从头到尾地读很浪费时间，能不能在同一文件的不同部分之间也建立起链接，使用户方便地在上下方之间跳转呢？答案是肯定的。前面曾提到过一个超文本链接指针包括两个部分，一个指向目标的链接指针，另一个是被指向的目标。对于一个完整的文件，我们可以用它的url来唯一地标识它，但对于同一文件的不同部分，我们怎样来标识呢？下面的内容将介绍链接指针元素的另外的一个用途，标识目标。

　　标识一个目标的方法为：

　　name属性将放置该标记的地方标记为“name”，name是一个全文唯一的标记串，text部分可有可无。这样，我们就把放置标记的地方做了一个叫做“name”的标记。

　　做好标记后，可以用下列方法来指向它，<a href="url#name">text </a>

url是放置标记的html文件的url name是标记名，对于同一个文件，可以写为<a href="#name">text </a>

这时就可以点取text跳转到标记名为name的部分了。

§3.4 目标窗口

　　如果希望被指向的目标在一个新的窗口中显示，可以使用target属性来修饰链接指针元素。

将url代表的资源显示在一个新的窗口中，该窗口的名字叫window-name。

§3.5 图象链接指针

　　图象也可以做为链接指针。格式为：<a href="url"><img src="url"></a>

可以看出，上例中用<img src="url">取代了链接指针中text的位置。

　　<img src="url">是图象元素，它表明显示url代表的图象文件，参见图象一章。

　　下面是一个简单的图象链接指针。

HTML语法大全

相关推荐

Java时间日期字符串格式转换大全

mysql sql语句大全 mysql sql语句大全

MySQL sql常用语句大全

mysql sql语句大全

linux CMakeLists.txt 语法

Linux常用命令大全

HTML语言语法大全

Linux常用命令大全，非常全！！！