Fork me on GitHub

HTML(一)

字数统计: 11.1k字   |   阅读时长≈ 40分

HTML(一)

元信息标记meta

meta元素提供的信息是用户不可见的，它不显示在页面中，一般用来定义页面信息的名称、关键字、作者等。在HTML中，meta标记不需要设置结束标记，在一个尖括号内就是一个meta内容，而在一个HTML头页面中可以有多个meta元素。meta元素的属性有两种：name和http-equiv，其中name属性主要用于描述网页，以便于搜索引擎机器人查找、分类。下面根据功能的不同分别介绍元信息标记的使用方法。

页面关键字

1
<meta name="keywords" content="具体的关键字">

在该语法中，name为属性名称，这里是keywords，也就是设置网页的关键字属性，而在content中则定义了具体的关键字内容。

页面描述

1
<meta name="description" content="对页面的描述语言">

在该语法中，name为属性名称，这里设置为description，也就是将元信息属性设置为页面描述，在content中定义具体的描述语言。

编辑工具

1
<meta name="generator" content="编辑软件的名称">

在该语法中，name为属性名，设置为generator，也就是设置编辑工具，在content 中定义具体的编辑器名称。

作者信息设置

1
<meta name="author" content="作者的姓名">

在该语法中，name为属性名，设置为author，也就是设置作者信息，在content中定义具体的信息。

限制搜索方式

1
<meta name="robots" content="搜索方式">

在该语法中，搜索方式的值和其所对应的含义如表所示。

网页文字及语言

(1)

1
<meta http-equiv="Content-Type" content="text/html;charset=字符集类型">

(2)

1
<meta http-equiv="Content-Language" content="语言">

在该语法中，http-equiv用于传送HTTP通信协议的标头，也就是设定标头属性的名称，而在content中才设置具体的属性值。其中charset设置了网页的内码语系，也就是字符集的类型，charset往往设置为gb_2312，即简体中文。英文是ISO-8859-1字符集，此外还有BIG5、utf-8、shift-Jis、Euc、Koi8等字符集。

定时跳转页面

1
<meta http-equiv="refresh" content="跳转时间;url=链接地址">

在该语法中，refresh表示网页的刷新，而在content中设定刷新的时间和刷新后的地址，时间和链接地址之间用分号相隔。默认情况下，跳转时间是以秒为单位的。

有效期的设置

1
<meta http-equiv="expires" content="到期的时间">

在该语法中，到期的时间必须是GMT时间格式，即“星期日 月 年 时 分 秒”，这些时间都使用英文和数字进行设定。

禁止从缓存中调用

使用网页缓存可以加快浏览网页的速度，因为缓存将曾经浏览过的页面暂存在计算机中，当用户下次打开同一个网页时，即可快速浏览该网页，省去读取同一网页的时间。但是如果网页的内容频繁更新，网页制作者希望用户随时都能查看到最新的网页内容，则可以通过meta语句禁用页面缓存。
(1)

1
<meta http-equiv="cache-control" content="no-cache">

(2)

1
<meta http-equiv="pragma" content="no-cache">

在该语法中，cache-control和pragma都可以用来设定缓存的属性，而在content中则是真正禁止调用缓存的语句。

删除过期的cookie

1
<meta http-equiv="set-cookie" content="到期的时间">

在该语法中，到期的时间同样是GMT时间格式。

强制打开新窗口

强制网页在当前窗口中以独立的页面显示，可以防止自己的网页被别人当作一个frame页调用。

1
<meta http-equiv="windows-target" content="_top">

在该语法中，windows-target 表示新网页的打开方式，而content中设置_top则代表打开的是一个独立页面。

网页的过滤效果设置

1
<meta http-equiv="过滤事件" content="revealtrans(duration=过滤效果持续时间,transition=过渡方式)">

在该语法中，过渡事件可以进入页面或者离开页面。进入页面的http-equiv 值为page-enter，离开页面的http-equiv值为page-exist。过渡效果的持续时间默认情况下以秒为单位，过渡方式的编号如表所示。

基底网址标记base

URL路径是一种互联网地址的表示法，在这个数据里可以包括以何种协议连接、要连接到哪一个地址、连接地址的端口（Port）号以及服务器（Server）里页面的完整路径和页面名称等信息。在HTML中，URL路径分为两种形式：绝对路径和相对路径。绝对路径是将服务器上磁盘驱动器名称和完整的路径写出来，同时也会表现出磁盘上的目录结构；相对路径是相对于当前HTML文档所在目录或站点根目录的路径。

HTML页面通过基底网址，把当前HTML页面中所有的相对URL转换成绝对URL。一般情况下，通过基底网址标记base设置HTML页面的绝对路径，那么在页面中的链接地址只需设置成相对地址即可。当浏览器浏览页面时，会通过base标记将相对地址附在基底网址的后面，从而转化成绝对地址。

1
<base href="链接地址" target="新窗口的打开方式">

在该语法中，“链接地址”就是要设置的页面的基底地址，而“新窗口的打开方式”可以设置为不同的效果，其属性值及含义如表所示。

页面的主体标记body

在网页的主体标记中有很多的属性设置如表所示。

注释<!- ->

1
<!-- 注释的文字 -->

标题文字

在浏览器中的正文部分，可以显示标题文字，所谓标题文字就是以某种固定的字号显示文字。HTML文档中的标题文字分别用来指明页面上的1～6级标题。

标题字标记H

标题文字共包含6种标记，每一种的标题在字号上有明显的区别，一般用标题来强调段落要表现的内容。在HTML中，6级标题从1级～6级依次递减。

1
2
3
4
1级标题:<h1>...</h1>
2级标题:<h2>...</h2>
...
6级标题:<h6>...</h6>

标题文字的对齐方式——align

默认情况下，标题文字是左对齐的。而在网页制作的过程中，可以实现标题文字的编排设置。在标题标记中，最主要的属性是align对齐属性，用于定义标题段落的对齐方式，使页面更加整齐。

1
<h2 aligh="对齐方式">...</h2>

在该语法中，align属性需要设置在标题标记的后面，标题字的对齐属性如表所示。

文字格式

文字字体——face

在HTML语言中，可以通过face属性设置文字的不同字体效果。设置的字体效果必须在浏览器安装了相应的字体后才可以正确浏览，否则这些特殊字体会被浏览器中的普通字体所代替。因此，在网页中尽量少用过多的特殊字体，以免在用户浏览时无法看到正确的效果。由于浏览器默认情况下都包含了宋体、黑体等几种基本字体，因此网页的创建者应该注意在设计网页时，多利用这几种字体。

1
<font face="字体1,字体2,...">应用了该字体的文字</font>

在该语法中，face属性的值可以是1个或者多个。默认情况下，使用第1种字体进行显示；如果第1种字体不存在，则使用第2种字体进行代替，以此类推。如果设置的几种字体在浏览器中都不存在，则会以默认字体显示。

字号——size

HTML页面中的文字可以使用不同的字号表现。字号指的是字体的大小，它没有一个绝对的大小标准，其大小只是相对于默认字体而言。除了使用标题文字标记设置固定大小的字号之外，HTML语言提供了font标记的size属性来设置普通文字的字号。

1
<font size="文字字号"></font>

在该语法中，文字的字号可以设置1～7，也可以是+1～+7 或者是-1～-7。这些字号并没有一个固定的大小值，而是相对于默认文字大小来设定的，默认文字的大小与3号字相同，而数值越大，文字也越大。

文字颜色——color

在HTML页面中，还可以通过不同的颜色表现不同的文字效果。丰富的字符颜色毫无疑问能够极大地增强文字的表现力。

1
<font color="颜色代码"></font>

粗体、斜体、下划线——strong、em、u

在浏览网页时，还常常可以看到一些特殊效果的文字，例如粗体字、斜体字以及下划线文字。而这些文字效果也可以通过设置HTML语言的标记来实现。

1
2
3
<strong>粗体的文字</strong>
<em>斜体字</em>
<u>带下划线的文字</u>

这几种效果的语法类似，只是标记不同。粗体的效果也可以通过标记b来实现；斜体字也可以使用标记I或者cite表示。

上标与下标——sup、sub

除了设置不同的文字效果之外，有时候在网页中还需要一种特殊的文字效果，即上标和下标，这在显示公式时常常会出现。而在HTML语言中，也可以通过标记轻松地进行设置。

1
2
<sup>...</sup>上标标记
<sub>...</sub>下标标记

删除线——strike在

网页中可以通过strike参数对文字添加删除线效果。

1
2
3
<strike>文字</strike>
或
<s>文字</s>

等宽文字标记——code

等宽文字标记常用于英文效果，使用该标记可以实现网页中字体的等宽效果。使用等宽效果能够使页面显得更加整齐。

1
2
3
<code>文字</code>
或
<samp>文字</samp>

其他特殊符号

除了空格以外，在网页的创作过程中，还有一些特殊的符号也需要使用代码进行代替。一般情况下，特殊符号的代码由前缀“&”、字符名称和后缀“；”组成。使用方法与空格符号类似，具体如表所示。

段落格式

文字属性的设定我们已经做了介绍，文字的组合就是段落，在文本编辑窗口中，输入完一段文字后，按下回车键后就生成了一个段落，而在HTML中可以通过标记实现段落的效果。下面具体介绍和段落相关的一些标记。

实现段落——p

在HTML语言中，有专门的标记标示段落。所谓段落，就是一段格式统一的文本。在文档窗口中，每输入一段文字，按下回车键后，就自动生成一个段落。按下回车键的操作通常被称作硬回车，可以说，段落就是带有硬回车的文字组合。在HTML语言中，段落通过p标记来表示。

1
<p>段落文字</p>

取消文字换行标记——nobr

如果浏览器中单行文字的宽度过长，浏览器会自动将该文字换行显示。如果希望强制浏览器不换行显示，可以使用相应的标记。

1
<nobr>不换行显示的文字</nobr>

换行标记——br

段落与段落之间是隔行换行的，造成文字的行间距过大，这时可以使用换行标记来完成文字的紧凑换行显示。

1
<br/>

使文字水平居中——center

对于段落来说，和普通文字类似，有时候也需要将段落居中。在HTML语言中提供了专门的标记。

1
<center>文字</center>

在标记之间的文字会自动居中显示。

文字段落的缩进——blockquote

使用blockquote标记可以实现页面文字的段落缩进。这一标记每使用一次，段落就缩进一次，可以嵌套使用，以达到不同的缩进效果。

1
<blockquote>文字</blockquote>

水平线标记

添加水平线——hr

1
<hr>

在网页中输入一个hr标记，就添加了一条默认样式的水平线。

水平线宽度与高度属性——width、height

在默认情况下，在网页中插入的水平线是100%的宽度，1像素的高度，而在实际创建网页时，可以对水平线的宽度和高度进行设置。

1
<hr width=水平线宽度 height=水平线高度>

在该语法中，水平线的宽度值可以是确定的像素值，也可以是窗口的百分比。而水平线的高度值则只能是像素数。如果在创建水平线时只设置一个参数，那么另外一个参数则会取默认值。

水平线的颜色——color

为了使水平线更美观，同整体页面更协调，我们可以设置水平线的颜色。

1
<hr color="颜色代码">

水平线的对齐方式——align

通过前面几个实例可以看到，水平线在默认情况下是居中对齐的。如果希望水平线左对齐或右对齐，就需要使用align参数。

1
<hr aligh="对齐方式">

在该语法中“对齐方式”可以有3种，包括left、center和right，其中，center的效果与默认效果相同。

去掉水平线阴影——noshade

在默认情况下，水平线是空心带阴影的立体效果，通过设置noshade参数可以将水平线的阴影去掉。

1
<hr noshade="noshade">

其他文字标记

文字标注标记——ruby

在网页中可以通过添加对文字的标注来说明网页中的某段文字。

1
2
3
4
<ruby>被说明的文字
<rt>文字的标注
</rt>
</ruby>

声明变量标记——var

在使用网页讲解某些知识时，为了突出变量，常常将其设置为斜体。而在HTML中也提供了一种标记，专门用于设置变量的效果。

1
<var>变量</var>

忽视HTML标签标记——plaintext、xmp

忽视HTML标签标记主要是用来使HTML标记失去作用，而直接显示在页面中。这一标记在实际中应用并不多。

1
2
3
<plaintext>
或
<xmp>

这两个标记中的任何一个如果加入到HTML代码中，都会使HTML标签失去作用，一般放置在body标记之后。

列表标记

列表分为两种类型，一是无序列表，一是有序列表。前者用项目符号来记录无序的项目，而后者则使用编号来记录项目的顺序。

列表的主要标记如表所示。

无序列表

在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用u>、dir、dl、menu、li几个标记和type属性。

无序列表标记——ul

无序列表的特征在于提供一种不编号的列表方式，而在每一个项目文字之前，以符号作为分项标识。

1
2
3
4
5
<ul>
    <li>第一项</li>
    <li>第二项</li>
    ...
</ul>

在该语法中，使用ul></ ul>标记表示这一个无序列表的开始和结束，而li则表示这是一个列表项的开始。在一个无序列表中可以包含多个列表项。

无序列表的类型——type

默认情况下，无序列表的项目符号是●，而通过type参数可以调整无序列表的项目符号，避免列表符号的单调。

1
2
3
4
<ul type=符号类型>
   <li>第一项</li>
   ...
</ul>

在该语法中，无序列表其他的属性不变，type属性则决定了列表项开始的符号。它可以设置的值有3个，如表所示。其中disc是默认的属性值。

有序列表

有序列表使用编号而不是项目符号来编排项目。列表中的项目采用数字或英文字母开头，通常各项目间有先后的顺序性。在有序列表中，主要使用ol和li两个标记以及type和start两个属性。

有序列表标记——ol

有序列表中，各个列表项使用编号而不是符号来进行排列。列表中的项目通常都有先后顺序性，一般采用数字或者字母作为顺序号。

1
2
3
4
5
<ol>
   <li>第一项</li>
   <li>第二项</li>
   ...
</ol>

在该语法中，ol和/ol>标记标志着有序列表的开始和结束，而li标记表示这是一个列表项的开始。默认情况下，采用数字序号进行排列。

有序列表的类型——type

默认情况下，有序列表的序号是数字的，通过type属性可以调整序号的类型，例如将其修改成字母等。

1
2
3
4
<ol type=符号类型>
   <li>第一项</li>
   ...
</ol>

在该语法中，序号类型可以有5种，如表所示。

有序列表的起始数值——start

默认情况下，有序列表的列表项是从数字1开始的，通过start参数可以调整起始数值。这个数值可以对数字起作用，也可以作用于英文字母或者罗马数字。

1
2
3
4
<ol start=起始数值>
   <li>第一项</li>
   ...
</ol>

在该语法中，不论列表编号的类型是数字、英文字母还是罗马数字，起始数值只能是数字。

定义列表标记——dl

定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号。定义列表也称为字典列表，因为它与字典具有相同的格式。在定义列表中，每个列表项带有一个缩进的定义字段，就好像字典对文字进行解释一样。

1
2
3
4
5
6
<dl>
  <dt>名词1<dd>解释1
  <dt>名词2<dd>解释2
  <dt>名词3<dd>解释3
  ...
</dl>

在该语法中，dl标记和/dl>标记分别定义了定义列表的开始和结束，dt后面就是要解释的名词，而在dd后面则添加该名词的具体解释。作为解释的内容在显示时会自动缩进，有些像字典中的词语解释。

菜单列表标记——menu

菜单列表主要用于设计单列的菜单列表。菜单列表在浏览器中的显示效果和无序列表是相同的，因此它的功能也可以通过无序列表来实现。

1
2
3
4
5
6
<menu>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ...
</menu>

目录列表——dir

目录列表用于显示文件内容的目录大纲，通常用于设计一个压缩窄列的列表，用于显示一系列的列表内容，例如字典中的索引或单词表中的单词等。

1
2
3
4
5
6
<dir>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
   ...
</dir>

超链接

使用超链接

1
2
3
<a href="文件名">链接元素</a>
或
<A href="URL">链接元素</A>

在该语法中，链接元素可以是文字，也可以是图片或其他页面元素。其中href是hypertextreference的缩写。通过超级链接的方式可以使各个网页之间链接起来，使网站中众多的页面构成一个有机整体，使访问者能够在各个页面之间跳转。超级链接可以是一段文本、一幅图像或其他网页元素，当在浏览器中用鼠标单击这些对象时，浏览器可以根据指示载入一个新的页面或者转到页面的其他位置。

链接到另一个网页

在网页中，文本超链接是最常见的一种，它通过网页中的文件和其他的文件进行链接。

1
<A href="链接地址">链接文字</A>

在该语法中，链接地址可以使绝对地址，也可以是相对地址。

超链接的目标窗口

在创建网页的过程中，有时候并不希望超链接的目标窗口将原来的窗口覆盖，比如在打开新的窗口时，主页面的窗口仍保留在原处。这时可以通过target参数设置目标窗口的属性。

1
<A href="链接地址" target=目标窗口的打开方式>链接文字</A>

target参数的取值有4种，如表所示。

书签链接

在浏览页面的时候，如果页面的内容较多，页面过长，浏览的时候需要不断拖动滚动条，很不方便，如果要寻找特定的内容，就更加不方便。这时如果能在该网页或另外一个页面上建立目录，浏览者只要单击目录上的项目就能自动跳到网页相应的位置进行阅读，这样无疑是最方便的事。并且还可以在页面中设定诸如“返回页首”之类的链接。这就称为书签链接。

建立书签链接分为两步，一是建立书签，二是为书签制作链接。

建立书签

书签可以与链接文字在同一页面，也可以在不同的页面。但是要实现网页内部的书签链接，都需要先建立书签，通过建立书签才能对页面的内容进行引导和跳转。

1
<a name="书签名称">文字<a>

书签名称就是对于后面要跳转所创建的书签，而文字则是设置链接后跳转的位置。

链接到同一页面的书签

1
<a href="# 书签的名称">链接的文字</a>

链接到不同页面的书签

1
<a href="链接的文件地址# 书签的名称">链接的文字</a>

外部链接

所谓外部链接，指的是跳转到当前网站的外部，是与其他网站中页面或其他元素之间的链接关系。这种链接在一般情况下需要书写绝对链接地址。

制作外部链接的时候，使用URL统一资源定位符来定位万维网信息，这种方式可以简洁、明了、准确地描述信息所在的地点。

最常见的URL格式是“http://”，其他的格式如表所示。

通过HTTP

网页中最常使用HTTP协议进行外部链接的是在设置友情链接时。

1
<a href="http://...">链接文字</a>

通过FTP

Internet上资源丰富，通过文件传输协议FTP，就可以足不出户获得各种免费软件和其他文件。FTP即“文件传输协议”，它是使计算机与计算机之间能够相互通讯的语言。FTP使文件和文件夹能够在Internet上公开传输。在某些情况下，需要从网络计算机管理员处获得许可才能登录并访问计算机上的文件。但是通常会发现，可以使用FTP访问某个网络或服务器，而不需要拥有该计算机的账户，也不必是授权的密码持有人。这些匿名FTP服务器可包含能够通过FTP公开获得的广泛数据。

1
<a href="ftp://">文字链接</a>

发送Email

在网络中，很多拥有个人网页的朋友都喜欢在网站的醒目位置处写上自己的电子邮件地址，这样网页浏览者一旦用鼠标单击由mailto组成超链接后，就能自动打开当前计算机系统中默认的电子邮件客户端软件，例如Outlook Express、Foxmail等。其实这是通过mailto标签来实现的。

1
<a href="mailto:电子邮件地址">链接文字</a>

在该语法的电子邮件地址后还可以增加一些参数，如表所示。

这些参数可以没有，也可以同时设置几个。在带有多个参数时，需要使用&符号对参数进行分隔。

下载文件

如果希望制作下载文件的链接，只需在链接地址处输入文件所在的位置即可。当浏览器用户单击链接后，浏览器会自动判断文件的类型，以对不同情况做出处理。

1
<a href="文件所在地址">链接文字</a>

在文件所在地址中设置文件的路径，可以是相对地址，也可以是绝对地址。

其他链接

除了常见的内部链接、外部链接、书签链接以外，在页面中还可以使用脚本链接和空链接。

脚本链接

在链接语句中，可以通过脚本来实现HTML语言完成不了的功能。下面以JavaScript脚本为例说明脚本链接的使用。

1
<a href="JavaScript:...">文字链接</a>

空链接

在链接中，可以通过#符号实现空链接。所谓空链接，是指鼠标指向链接后，就变成手形，但单击后，仍然停留在当前页面。

1
<a href="#">文字链接</a>

图像

img

有了图像文件之后，就可以使用img标记将图像插入网页中，从而达到美化页面的效果。

1
<img src="图像文件的地址">

在该语法中，src参数用来设置图像文件所在的路径，这一路经可以是相对路径，也可以是绝对路径。

图像属性

在网页中直接插入图像时，图像的大小和原图是相同的，而在实际应用时，可以通过各种图像属性的设置调整图像的大小、分辨率等内容。

图像高度——height

通过height属性可以设置图像显示的高度，默认情况下，改变高度的同时，其宽度也会等比例地进行调整。

1
<img src="图像文件的地址" height=图像的高度>

在该语法中，图像的高度单位是像素。

图像宽度——width

图像宽度的属性与图像高度类似，同样是用来调整图像大小的。

1
<img src="图像文件的地址" width=图像的宽度>

在该语法中，图像的宽度单位是像素。如果在使用属性的过程中，只设置了高度或宽度，则另一个参数会等比例变化。如果同时设置了两个属性，且缩放比例不同的情况下，图像很可能会变形。

图像边框——border

在默认情况下，页面中插入的图像是没有边框的，可以通过border属性为图像添加边框。

1
<img src="图像文件的地址" border="图像边框的宽度">

图像水平间距——hspace

如果不使用br标记或者>标记进行换行显示，那么添加的图像会紧跟在文字之后。而图像与文字之间的水平距离是可以通过hspace参数进行调整的。通过调整间距，可以使文字和图像的排版不那么拥挤，看上去更加协调。

1
<img src="图像文件的地址" hspace="水平间距">

图像垂直间距——vspace

图像和文字之间的距离是可以调整的，这个属性用来调整图像和文字之间的上下距离。此功能非常有用，有效地避免了网页上文字和图像拥挤的现象。

1
<img src="图像文件的地址" vspace="垂直间距">

图像相对于文字基准线的对齐方式——align

图像和文字之间的排列通过align参数来调整。图像的绝对对齐方式与相对文字的对齐方式不同，绝对对齐方式包括左对齐、右对齐和居中对齐3种，而相对文字的对齐方式则是指图像与一行文字的相对位置。

1
<img src="图像文件的地址" align="相对文字的对齐方式">

在该语法中，align的取值如表所示。

图像的提示文字——alt

提示文字有两个作用。当浏览该网页时，如果图像下载完成，鼠标放在该图像上，鼠标旁边会出现提示文字。也就是说，当鼠标指向图像上方的时候，稍等片刻，可以出现图像的提示性文字，用于说明或者描述图像。第二个作用是，如果图像没有被下载，在图像的位置上就会显示提示文字。

1
<img src="图像文件的地址" alt="提示文字的内容">

跳转——图像的超链接

除了文字可以添加超链接之外，图像也可以设置超链接属性。而一幅图像可以切分成不同的区域设置链接，而这些区域被称为热区。因此一幅图像也就可以设置多个链接地址。

图像的超链接

给整个一幅图像文件设置超链接，实现的方法比较简单，其实现的方法与文本链接类似。

1
<a href="链接地址"target="目标窗口的打开方式"><img src="图像文件的地址"></a>

在该语法中，href参数用来设置图像的链接地址，而在图像属性中可以添加图像的其他参数，如height、border、hspace等。

图像热区链接

除了对整个图像进行超链接的设置外，还可以将图像划分成不同的区域进行链接设置。而包含热区的图像也可以称为映射图像。

首先需要在图像文件中设置映射图像地址，在图像的属性中使用usemap标记添加图像要引用的映射图像名称，代码如下：

1
<img src="图像地址" usemap="# 映射图像名称">

然后需要定义如下热区图像以及热区的链接属性。

1
2
3
<map name="映射图像名称">
  <area shape="热区形状" coords="热区坐标" href="链接地址"/>
</map>

在该语法中要先定义映射图像的名称，然后再引用这个映射图像。在标记中定义了热区的位置和链接，其中shape用来定义热区形状，可以取值为rect（矩形区域）、circle（圆形区域）以及poly（多边形区域）；coords参数则用来设置区域坐标，对于不同形状来说，coords设置的方式也不同。

对于矩形区域rect来说，coords包含4个参数，分别为left、top、right和bottom，也可以将这4个参数看做矩形两个对角的点坐标；对于圆形区域circle来说，cooeds包含3个参数，分别为center-x、center-y和tadius，也可以看作是圆形的圆心坐标（x，y）与半径的值；对于多边形区域poly设置坐标参数比较复杂，与多边形的形状紧密相关。coords参数需要按照顺序（可以是逆时针，也可以是顺时针）取各个点的x、y坐标值。

表格

在HTML的语法中，表格主要通过3个标记来构成，表格标记、行标记、单元格标记。

表格中3个标记的说明如表所示。

表格的基本构成——table、tr、td

表格标记是table>…/table>，表格的其他各种属性都要放在表格的开始标记table>和表格的结束标记/table>之间才有效。

1
2
3
4
5
6
7
8
9
10
11
12
13
<table>
    <tr>
        <td>单元格内文字</td>
        <td>单元格内文字</td>
        ...
    </tr>
    <tr>    
        <td>单元格内文字</td>
        <td>单元格内文字</td>
        ...
    </tr>
    ...
</table>

table>标记和/table>标记分别标志一个表格的开始和结束；而tr>和/tr>则分别表示表格中一行的开始和结束，在表格中包含几组tr>…/tr>，就表示该表格为几行；td>和/td>表示一个单元格的起始和结束，也可以说表示一行中包含了几列。

表格的标题——caption

表格中除了td>和/td>可用来设置表格的单元格外，还可以通过caption来设置一种特殊的单元格，即标题单元格。表格的标题一般位于整个表格的第一行。为表格标识一个标题行，通常在表格上方加一个没有边框的行来存放表格标题。

1
<caption>表格的标题</caption>

表格的表头——th

在表格中还有一种特殊的单元格，称为表头。表格的表头一般位于第一行和第一列，用来表明这一行的内容类别，用th>和/th>标记来表示。表格的表头与td>标记使用方法相同，但是表头的内容是加粗显示的。

1
2
3
4
5
6
7
8
9
10
11
12
13
<table>
    <tr>
        <th>表格的表头</th>
        <th>表格的表头</th>
        ...
    </tr>
    <tr>    
        <td>单元格内文字</td>
        <td>单元格内文字</td>
        ...
    </tr>
    ...
</table>

表格属性

表格宽度——width

默认情况下，表格的宽度可根据内容自动调整，但也可以手动设置表格的宽度。

1
<table width=表格宽度>

表格宽度的值可以是具体的像素数，也可以设置为浏览器的百分比数。

表格高度——height

设置表格高度的方法与设置表格宽度的方法相同，也可以将表格的高度设置为浏览器高度的百分比或者是固定的像素数。

1
<table height=表格高度>

表格对齐方式——align

表格的对齐方式用于设置整个表格在网页中的位置。在表格中通过设置属性align的值来设定表格的对齐方式。

1
<table align="表格的对齐方式">

align 参数的取值可以为left（左对齐）、center（居中）或者right（右对齐）。

表格边框

表格除了设置基本属性外，还可以设置边框效果，包括颜色、宽度等。

表格边框宽度——border

默认情况下，表格是不显示边框的。为了使表格更加清晰，可以使用border参数设置边框的宽度。

1
<table border="边框宽度">

只有设定了border 参数，且其值不为0，在网页中才能显示出表格的边框。border 的单位为像素。

表格边框颜色——bordercolor

默认情况下，边框的颜色是灰色的，为了让表格更鲜明，可以使用bordercolor参数设置不同的表格边框颜色。但是设置边框颜色的前提是边框宽度不能为0，否则无法显示出应有的效果。

1
<table border="边框宽度" bordercolor="边框颜色">

内框宽度——cellspacing

表格的内框宽度是指表格内部各个单元格之间的宽度。

1
<table cellspacing="内框宽度">

表格内文字与边框间距——cellpadding

在默认情况下，表格内的文字会紧贴着表格的边框，这样看上去非常拥挤，可以使用cellpadding参数来调整这一距离，即动态表格内框的宽度。

1
<table cellpadding="文字与边框的距离">

表格背景

为了凸显表格，还可以为表格设置与页面不同的背景。

表格背景颜色——bgcolor

设置表格背景，最简单的就是给表格设置背景颜色。

1
<table bgcolor="颜色代码">

表格的背景图像——background

除了背景颜色之外，我们还可以为表格设置背景图像，让表格更加绚丽。

1
<table background="背景图像的地址">

背景图像的地址可以设置为相对地址，也可以设置为绝对地址。

表格行属性

设定了表格的整体属性后，还可以对单独一行表格进行属性设置。

行高度的设置——height

在网页中常常遇到一些表格中某一行高度和其他行不同的情况，这时就需要使用height参数。

1
<tr height="表格中某行高度">

这一参数只对设置的这一行有效。

行的边框颜色——bordercolor

与表格相同，对表格的行来说，也可以单独设置其外框颜色。

1
<tr bordercolor="颜色代码">

行的背景颜色——bgcolor

与设置行的边框颜色相同，行的背景颜色也可以单独设置。

1
<tr bgcolor="颜色代码">

行文字的水平对齐方式——align

表格中也可以为单独的一行设置特殊水平对齐方式。

1
<tr align="水平对齐方式">

这里的水平对齐方式包含3种，分别为left、center和right。

行文字的垂直对齐方式——valign

表格中也可以为单独的一行设置特殊的垂直对齐方式。

1
<tr valign="垂直对齐方式">

这里垂直对齐方式可以取的值包含3种，分别为top（顶端）、middle（居中）和bottom（底端）。

表格标题的垂直对齐方式——align

表格标题是一种特殊的行，这种行没有边框，但是依然可以设置对齐方式。

由于表格标题也是行的一种，其水平对齐方式的设置与其他行相同，通过align参数来设置，这里不重复说明。

此处只讲解一下标题的垂直对齐方式，虽然同样使用align参数来设置，但与其他行不同的是，标题的垂直对齐方式是指标题位于表格的上方或下方。

1
<caption align="垂直对齐方式">表格的标题</caption>

这里垂直对齐方式的值可以是top或者bottom。取值为top，是将标题文字设置在表格的上方；取值为bottom，是将标题文字设置在表格的下方。

单元格属性

表格中另外一种元素就是单元格，单元格的属性标记和行标记非常相似。

单元格大小——width、height

默认情况下，单元格的大小会根据内容自动调整，也可以进行手动调整。

1
<td width="单元格宽度" height="单元格高度">

水平跨度——colspan

在复杂的表格结构中，有的单元格在水平方向上是跨过多个列的，这就需要使用跨列属性colspan来合并单元格。

1
<td colspan="跨的列数">

垂直跨度——rowspan

单元格除了可以在水平方向上跨列，还可在垂直方向上跨行。跨行设置需要使用rowspan参数来合并单元格。

1
<td rowspan="单元格跨行数">

与水平跨度相对应，rowspan设置的是单元格在垂直方向上跨行的个数。

对齐方式——align、valign

单元格的对齐方式设置与行的对齐方式设置方法相似。

1
<td align="水平对齐方式" valign="垂直对齐方式">

在该语法中，水平对齐方式的取值可以是left、center或right；垂直对齐方式的取值可以是top、middle或bottom。

单元格的背景色——bgcolor

为了增加表格的绚丽，可以为不同的单元格分别设置不同的背景颜色。它的用法与设置表格的背景颜色相同。

1
<td bgcolor="颜色代码">

单元格的边框颜色——bordercolor

单元格的边框颜色可以通过bordercolor 参数单独设置。

1
<td bordercolor="颜色代码">

单元格的亮边框——bordercolorlight

单元格的亮边框就是单元格边框向光的部分。通过bordercolorlight参数可以单独定义单元格亮边框的颜色。

1
<td bordercoloelight="颜色代码">

单元格的暗边框——bordercolordark

单元格的暗边框就是单元格边框背光的部分。通过bordercolordark参数可以单独定义单元暗边框的颜色。

1
<td bordercoloedark="颜色代码">

单元格的背景图像——background

与表格的行设置不同的是，单元格可以设置背景为图像格式。

1
<td background="背景图像的地址">

背景图像的地址可以是绝对地址，也可以是相对地址。

完整的表格结构

除了对表格的设计标记外，还有一些标记是用来明确表格结构的。通过对结构的设置而实现对表首、表主体以及表尾的样式进行设置。这些都通过成对出现的标记设置，应用到表格里用于整体规划表格的行列属性。使用这些标记能对表格的一行或多行单元格属性进行统一修改，从而省去了逐一修改单元格属性的麻烦。

表格的表首标记——thead

表首样式的开始标记是thead>，结束标记是/thead>，它们用于定义表格最上端表首的样式，其中可以设置背景颜色、文字对齐方式、文字的垂直对齐方式等。

1
2
3
<thead bgcolor="颜色代码" align="对齐方式"valign="垂直对齐方式">
...
</thead>

在该语法中，bgcolor、align、valign参数的取值范围与单元格中的设置方法相同，align可以取值left、center或right，valign可以取值top、middle或bottom。在thead标记内还可以包含td、th和tr标记，而一个表元素中只能有一个thead标记。

表格的表主体标记——tbody

与表首样式的标记功能类似，表主体样式用来统一设计表主体部分的样式，标记为tbody。

1
2
3
<tbody bgcolor="颜色代码" align="对齐方式"valign="垂直对齐方式">
...
</tbody>

在该语法中，bgcolor、align、valign 参数的取值范围与thead标记中的相同。一个表元素中只能有一个tbody标记。

表格的表尾标记——tfoot

tfoot标记用于定义表尾样式。

1
2
3
<tfoot bgcolor="颜色代码" align="对齐方式"valign="垂直对齐方式">
...
</tfoot>
赏

谢谢你请我吃糖果

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

中南大学计算机科学与技术