超文本标记语言 -- HTML

原 作者 李猛 | 发表于 | 分类于 2016级

期末考试即将到来，赶在人机界面考试之前，先把 HTML 复习一下。

一、HTML 概述

1. HTML的基本概念

1.1 HTML 介绍

HTML是Hyper Text Markup Language(超文本标记语言)的缩写，是构成Web页面的基本元素，是一种规范，一种标准。

HTML不是一种编程语言，而是一种描述性的标记语言，通过标识符来标识网页中内容的显示方式，例如图片的显示尺寸、文字的大小、颜色、字体等。

浏览器能够对这些标记进行解释，按照要求显示出文字、图像、动画、媒体等网页内容。

HTML文件的后缀名是 .html 或 .htm ，由于HTML是一个纯文本格式的ASCII文件，可以用任何文本编辑器编写HTML网页文件。

主要功能：

  • 格式化文本：设置文本字体、字号、颜色以及文本段落、对其方式等。
  • 创建列表：把信息用一种易读的方式表现出来。
  • 建立表格：表格为浏览者提供快速找到所需信息的显示方式，还可以用表格来布局网页。
  • 插入图片：还可以设置图像的各种属性，如大小、边框、布局等。
  • 加入多媒体：在网页中加入音频、视频、动画等效果。
  • 添加交互式表单：文本框、单选框、复选框、列表框和按钮等。

1.2 标记符

标记符又称标签，用来控制网页内容显示效果。用<>括起来。

标记符不区分大小写，但是为了HTML文档的维护，通常约定标记符使用大写字母。

大部分标标记符都是成对出现的，包括开始标记符和结束标记符，结束标记符比开始标记符多一个斜线，开始标记符和相应的结束标记符定义了标记符所影响的范围。

<标记符>受影响的内容</标记符>

1.3 标记符的属性

标记符仅仅用来标识所显示的内容，想要控制这些内容，就需要在标记符后面加上相关的属性来实现，属性用来描述标记符标识对象的特征。

所有的属性都放在开始标记符的尖括号里，属性与标记符之间用空格分割，属性的值放在相应的属性之后，用等号分隔，而不同的属性之间用空格分隔并且无先后顺序之分。格式为：

<标记符 属性1=属性值1 属性2=属性值2 ...>受影响的内容</标记符>

//例如
<FONT color="red" size="3">属性示例</FONT>

2. HTML 的基本结构

HTML网页文件主要由文件头和文件体两部分内容构成。文件头是对文件进行一些必要的定义，文件体是HTML网页的主要部分，它包括文件所有的实际内容，下面是HTML 网页的基本结构：

    <HTML>          //HTML 文件开始
        <HEAD>      //文件头开始
         文件头
        </HEAD>     //文件头结束
        <BODY>      //文件体开始
        文件体
        </BODY>     //文件体结束
    </HTML>         //HTML 文件结束

2.1 HTML 文件标记符

<HTML>和</HTML>放在网页文档的最外层，表示这对标记符之间的内容是HTML文件。

2.2 HEAD 文件头标记符

<HEAD>和</HEAD>是 HTML 文件头标记符，它用来说明文档的整体信息，所标记的内容并不会出现在WWW浏览器所看到的窗体中。通常与某些标记符一起使用，如：

  • <TITLE>…</TITLE>

用来标识网页文件的标题，出现在浏览器的标题栏中，一个网页只能有一个标题，并且只能出现在文件的头部。
- <META>
<META>标识符是用来提供文档的媒体信息，目的是便于浏览器识别网页内容或便于搜索引擎进行查找和分类。

//标记网页的解码方式，即说明网页使用的文字和语言
<META http-equiv="Content-Type" content="text/html;charset=gb2312">

//标记搜索引擎在搜索你的页面时所取出的关键字
<META name="Keywords" content="关键字">

//标记站点的主要内容
<META name="Description" content="站点主要内容">

//标记文档的作者名称，即告诉搜索引擎你的站点的制作者
<META name="Author" content="作者名称">

2.3 BODY 文件体标记符

<BODY></BODY>是HTML文件的主体标记符。网页正文中的所有内容包括文字、图像、声音和动画等都包含在这对标记符之间，它的格式为

<BODY bgcolor="color" background="image-url" text="color" link="color" vlink="color" alink="color" topmargin="value" leftmargin="value">...</BODY>
  • bgcolor：背景颜色，默认设置为白色。
  • background：背景图片，可以使用的图片格式为GIF，JPG等。
  • text：正文文字颜色，它定义的颜色将应用于整篇文档。
  • 超链接颜色：link、vlink、alink分别控制普通超链接、访问过的超链接、当前活动的超链接的颜色。
  • topmargin 和 leftmargin：设置网页主体内容距离网页顶端和左端的距离。

2.4 第一个网页

<HTML>
    <HEAD>
        <TITLE>my first page</TITLE>
    </HEAD>

    <BODY>
        This is my First homePage !
    </BODY>

</HTML>

3. HTML 语法的基本规则

  1. HTML文件以纯文本形式存放，扩展名为HTM或HTML。如果系统为UNIX系统，则扩展名必须为HTML。
  2. HTML不区分大小写。
  3. 多数HTML标记可以嵌套，但是不能交叉。
  4. 一行可以写多个标记，一个标记也可以分多行写，不用任何续行符号，标记中的一个单词不能分两行写。
  5. 换行必须用<BR>标记，分段必须用<p>和</p>标记(</p>可以省略)，多个连续的空格需要“&nbsp;”转义符号。
  6. 不应该有游离于标记之外的文字或图像，以免产生错误。
  7. 除字符串中的标点符号，其余的都要使用英文标点字符。

二、文字与段落标记

1. 标题字标记

功能：用于定义文章内章节标题的显示格式，并且标题字会单独成行。

格式：

<Hn align="对齐方式">标题文字</Hn>

align用来设置标题在页面中的对齐方式：left（左对齐）、center（居中）、right（右对齐）、bottom（位于底端）、top（位于顶端）。

H1为一级标题

H2为二级标题

…

H6为六级标题

2. 文字格式标记

功能：设置网页中普通文字的显示效果，如文字大小、字体、颜色等。

格式：

<FONT face="字体" size="字号" color="颜色">被设置的文字</FONT>
  • face：用来设置字体。当文字为汉字时，可设置为宋体、幼圆、隶书、楷体_GB2312等。当文字为英文时，字体可设置为Times New Roman等约50种字体。
  • size：设置文字大小。取值范围为1~7，取1时最小，取7时最大。
  • color：设置文字颜色，颜色的取值可以是十六进制的RGB颜色码或者HTML给定的颜色常量名。

3. 字型标记

功能：设置文字的风格，如加粗、斜体、带下划线、上标、下标等。

格式：这是一组标记，可以单独使用，也可以混合使用产生复合修饰效果，常用的标记格式如下：

<B>…</B>：粗体

<I>…</I>：斜体

<U>…</U>：带下划线

<STRIKE>…</STRIKE>或<S>…</S>：删除字效果

<BIG>…</BIG>：使文字大小相对于前面增大一级。

<SMALL>…</SMALL>：使文字大小相对于前面缩小一级。

<SUP>…</SUP>：下标

<SUB>…</SUB>：上标

<BLANK>…</BLANK>：使文字显示闪烁效果

<TT>…</TT>：以等宽体显示西文字符

<CITE>…</CITE>：引用方式的字体，通常是斜体

<EM>…</EM>：强调文字，通常用斜体加黑体

<STRONG>…</STRONG>：强调文字，通常用斜体加黑体

4. 段落标记和强制换行标记

4.1 段落标记

段落标记<P>定义一个新段落的开始，不但能使后面的文字转换到下一行，而且还可以使段与段之间多一空行。

格式：

<P align = "对齐方式">

或

<P align = "对齐方式">...\</p>

align的取值可以为left、center或right，分别表示居左、居中、居右，缺省使默认为居左。

4.2 强制换行标记

强制换行标记<BR>通常单独出现，放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，不会在行与行之间留下空行。

格式：

文字 <BR>

注意：通常一个段落标记<p>可以看做是两个强制换行标记<BR><BR>。

5. 水平线标记

功能：水平线<HR>可以在页面中显示一条水平线，将页面内容分隔开，使其整齐明了。

格式：

<HR align="对齐方式" size="横线粗细" width="横线长度" color="横线颜色" noshade>
  • align：设定横线放置横线的位置，可以选择left、right或center。
  • size：设定线条的粗细，以像素为单位，默认为2。
  • width：设定线段的长度，可以是绝对值（像素为单位），也可以是相对值（百分比为单位）。
  • color：设定线条的颜色，默认值为黑色，颜色可以用相应的应为单词或以#引导的十六进制代码来表示。
  • noshade：设定线条为平面显示（没有三维效果），若缺省会有阴影或立体效果。

6. 空格

HTML提供了5种空格实体（space entity），它们拥有不同的宽度，非断行空格（&nbsp;）是常规空格的宽度，可运行于所有主流浏览器。其他几种空格（&ensp; &emsp; &thinsp; &zwnj;&zwj;）在不同浏览器中宽度各异。

  • &nbsp; 是不换行空格，全称No-Break Space，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的。
  • &ensp; 是“半角空格”
  • &emsp; 是“全角空格”
  • &thinsp; 是窄空格，全称是Thin Space。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是emsp之六分之一宽。
  • &zwnj; 是零宽不连字，全称是Zero Width Non Joiner，简称“ZWNJ”，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”（zero width non-joiner，U+200C），HTML字符值引用为： #8204;
  • &zwj; 是零宽连字，全称是Zero Width Joiner，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML: #8205; &zwj;）。

7. 其他标记

7.1 分区显示标记

可以使文本块或一段文字在网页上：左对齐、居中对齐和右对齐。

格式：

<DIV align="对齐方式">文本或图像</DIV>

align的取值分别为left、center和right。

7.2 特殊符号标记

” & “是特殊字符的开始，“ ; ” 是特殊字符的结束。

特殊字符 全称 所替代的字符 说明
lt less than < 小于号
gt greater than > 大于号
&amp ampersand & 与
quot quotation mark “ 双引号
apos apostrophe ‘ 单引号

三、列表标记

1. 无序列表标记

项目间并无顺序关系，仅仅利用条目来呈现资料，在各条列前面均有一符号以示区隔。

格式：

<UL type="符号类型">
    <LI type="符号类型">列表项目一
    <LI type="符号类型">列表项目二
    <LI type="符号类型">列表项目三
</UL>

<UL>：列表的开始

</UL>：列表的结束

<LI>：一个列表项目

type：用来设置每个项目前显示符号类型，共有三种选择：

符号类型 含义
disc 实心圆
circle 空心圆
square 实心方块

<UL>中的type属性表示所有列表项使用统一的符号类型。

<LI>中的type表示不同的列表项可以使用不同的符号类型。

2. 有序列表标记

用来设置有前后顺序之分的列表项。

格式：

<OL type="序号类型" start="起始号码">
    <LI type="序号类型">列表项目一
    <LI type="序号类型">列表项目二
    <LI type="序号类型">列表项目三
</OL>

<OL>：列表的开始

</OL>：列表的结束

<LI>：一个列表项目

type：用来设置每个项目前显示的序号类型，其值可以为：

序号类型 含义
1 阿拉伯数字
A 大写英文字母
a 小写英文字母
I 大写罗马字母
i 小写罗马字母

start：设置序号的开始值，默认值为1。

3. 自定义列表标记

用于需要对列表条目进行简短说明的场合。

格式：

<DL>
    <DT>列表条目一
    <DD>条目一的说明
    <DT>列表条目二
    <DD>条目二的说明
    ...
</DL>

<DL>和</DL>表示自定义列表的开始和结束。

<DT>：每项自定义条目名称。

<DD>：每项自定义条目的说明，自动向右缩进。

四、表格标记

用户可以通过表格方便灵活地排版。

表格标记可以用来建立基本表格。

格式：

<TABLE>
    <CAPTION align="对齐方式">表格标题</CAPTION>
    <TR>
        <TH>表头一</TH><TH>表头二</TH>...<TH>表头n</TH>
    </TR>
    <TR>
        <TD>表项一</TD><TD>表项二</TD>...<TD>表项n</TD>
    </TR>
    <TR>
        <TD>表项一</TD><TD>表项二</TD>...<TD>表项n</TD>
    </TR>
    ...
</TABLE>
  • 表格的相关属性：
属性类型 含义
width 宽度
height 高度
align 对齐方式
background 背景图片
bgcolor 背景颜色
border 边框的宽度（以像素为单位）
bordercolor 边框颜色
bordercolorlight 边框明亮部分的颜色
bordercolordark 边框昏暗部分的颜色
cellspacing 单元格之间的间距
celladding 单元格内容与边界之间空白距离的大小

- <CAPTION>…</CAPTION>标记表示对表格标题的说明。

align属性表示标题相对于表格的位置。

left、right、center、top和bottom分别表示标题在表格上部左边、上部右边、上部居中、表格上部和表格下部。
  • <TR>…</TR>标记定义行，该标记中间的内容显示在一行，此标记对只能放在<TABLE>…<TABLE>标记之间使用，主要性质如下所示：
性质类型 含义
align 行内容的水平对齐
valign 行内容的垂直对齐
bgcolor 背景颜色
bordercolor 边框颜色
bordercolorlight 亮边框部分的颜色
bordercolordark 暗边框部分的颜色
  • <TH>和<TD>表示单元格标记，这两个标记必须嵌套在<TR>标记中，成对出现。<TH>是标头标记，一般位于首行或首列，标记之间的内容就是位于该单元格的标题内容，其中的文字以粗体居中显示。<TD>是该单元格中的具体数据内容，<TH>和<TD>标记的属性都是一样的，设定如下：
性质类型 含义
colspan 单元格向右打通的栏数
rowspan 单元格向下打通的栏数
width/height 单元格的宽和高，接受绝对值和相对值
align 水平位置，可选left、center、right
valign 垂直位置，可选top、middle、bottom
bgcolor 单元格底色
bordercolor 单元格边框颜色
bordercolorlight 亮边框部分的颜色
bordercolordark 暗边框部分的颜色
background 背景图片

- 要创建多行、多列的单元格，只需在<TH>或<TD>加入ROWSPAN或COLSPAN属性的属性值，表明在表格中要跨越的行或列的个数。

跨多列：<TH colspan=”列数”> <TD colspan=”列数”>

跨多行：<TH rowspan=”列数”> <TD rowspan=”列数”>

五、多媒体标记

1. 图像标记

用<IMG>标记可以在当前位置插入图像。

格式：

<IMG src="文件名" alt="说明" width="x" height="y" border="n" hspace="h" vspace="v" align="对齐方式">

属性：

属性类型 含义
src 图像的文件名，即路径
alt 浏览器尚未完全读入图像时，在图像位置显示的文字或者图像显示时鼠标悬停在图像上的文字
width 宽度（像素数或百分数），通常设为图像的真实大小以避免失真
height 高度（像素数或百分数）
border 边框宽度
hspace 水平方向空白
vspace 垂直方向空白
align 在页面的位置，可设为left、right、top、middle和bottom

2. 音频标记

在网页中加入声音，声音文件可以是*.WAV、*.AU、*.MID等。

格式：

<BGSOUND src="声音文件的URL地址" loop="播放次数">

src表示声音文件存放的地址

loop控制播放次数，取-1或者INFINITE时，声音将一直播放到浏览者离开网页为止。

3. 视频标记

在页面中放置SWF动画（即Flash动画）、mp3音乐、电影等多种格式的媒信息。

格式：

<EMBED src="file_URL" height="value" width="value" hidden="hidden_value" autostart="auto_value" loop="loop_value"></EMBED>
属性类型 作用
src 指明多媒体文件所在的路径
height和width 设置播放区域，取值为像素点数或者相对于窗口的百分比
hidden 控制播放面板的显示和隐藏，True表隐藏，False表显示
autostart 中国多媒体内容是否自动播放，True表自动播放，False表不自动播放
loop 控制是否循环播放，True表无限次循环，False表仅播放一次

六、超链接标记

功能：建立超链接。

格式：

<A href="URL地址" target="打开窗口的方式">显示的文本或图像</A>

href属性设置要链接到的目标URL地址，若资源放在自己的服务器上，可以写相对路径，否则要写绝对路径。

target设置要显示超链接内容的窗口方式。

target取值 说明
_blank 在新窗口中显示链接指向的页面
_parent 在当前页面的父级框架集中显示链接页面
_self 在当前文档的框架集中显示链接页面
_top 在链接所在的完整窗口中显示链接页面
框架名称 只应用于框架中，结果显示在该“框架名称”指定的框架窗口中

1. 创建指向其他页面的超链接

//链接到目录中的文件
<A href="目标文件的路径">显示的文本或者图像</A>

//链接到Internet上的网页
<A href="网址（绝对路径）">显示的文本或者图像</A>

//E-mail 超链接
<A href="mailto:邮件地址">指向E-mail 地址的超链接</A>

2. 创建指向本页面中的超链接

在当前页面内实现超链接，需要定义超链接标记和书签标记。

超链接标记格式：

<A href="#记号名">显示的文本或者图像</A>

书签标记格式：

<A name="记号名">目标文本附近的字符串</A>

单击显示的文本或者图像，将跳转到“记号名”开始的文本。

七、表单标记

表单标记主要用来收集信息，当单击表单中的提交按钮时，输入在表单中的信息就会从客户端的浏览器上传到服务器中，然后由服务器中的有关表单处理程序进行处理，处理后将用户所需信息传送到客户端浏览器上，这样网页就有了交互性。

1. <FORM> </FORM>标记

创建一个表单，即定义表单的开始与结束的位置。

格式：

<FORM name="form_name" method="method" action="url">...</FORM>
  • name：设置表单的名称
  • method：指出采用何种HTTP方法来发送表单数据，可以用 HTTP GET 方法 (method=”get”)，可以用 HTTP POST 方法 (method=”post”)。
  • action：定义表单处理程序的位置及名称。

2. <INPUT type=”“>标记

定义输入区，可以在里面输入信息。

格式：

<INPUT name="field_name" type="type_name">
  • name：设置输入区的名称，服务器就是通过name来获得该区域数据的。
  • type：设置输入区域的类型。
type 属性值及格式 说明
<INPUT type=”Text” maxlength=”” size=”” value=”“> 单行输入文本区域。maxlength为最大输入字符数，size为文本域的宽度，value为文本域的默认值。
<INPUT type=”Password”> 输入密码域
<INPUT type=”File”> 文件域可以让用户在该域内填写自己硬盘中文件路径，然后通过表单上传
<INPUT type=”Checkbox” checked> 一个复选框。checked表示此项被默认选中
<INPUT type=”Radio” checked> 单选按钮框。checked表示此项被默认选中
<INPUT type=”Button”> 不同按钮。配合程序的需要来进行表单的处理
<INPUT type=”Submit” value=”“> 单击“提交”按钮后，可实现表单内容的提交
<INPUT type=”Reset” value=”“> 单击“重置”按钮后，可清除表单的内容，恢复默认的表单内容设定
<INPUT type=”IMAGE” src=”“> 使用图像代替按钮。src设置图片路径
<INPUT type=”Hidden”> 隐藏输入域，用户不能在其中输入，用来预设某些要传送的信息

隐藏表单，一般用来传递参数，而又不想显示在客户端。如网站购买产品，点击提交，通常程序会自动生成一个产品的订单标号，用于后台操作或其它，而此编号通常不必要给用户看。

3. <SELECT> </SELECT>和<OPTION>标记

<SELECTv </SELECT>标记用来创建一个下拉列表框或可以复选的列，它必须放在<FORM> </FORM>标记对之间。

<OPTION>标记用来指定菜单和列表中的一个选项，放在<SELECT> </SELECT>标记对之间。

格式：

<SELECT name="name" size="value" multiple>
<OPTION value="value" selected>选项一
<OPTION value="value">选项二...
</SELECT>

<SELECT>属性：
- name设置菜单和列表的名称。
- size设置显示的选项数目。
- multiple不用赋值可直接加入到标记中，加入后列表框就成了可多选的了。若没有加入该属性，则显示的将是一个弹出式的列表框。

<OPTION>属性：
- value属性用来给<OPTION>指定的那一个选项赋值，这个值是要传送到服务器的，服务器正式通过调用<SELECT>区域名字的value属性来获得该区域选中的数据项。
- selected指定默认的选项。

4. <TEXTAREA> </TEXTAREA>标记

用来创建一个可以输入多行的文本框，在其中可输入更多的文本，此标记要放在<RORM> </FORM>标记对之间。

格式：

<TEXTAREA name="name" rows="value" cols="value"></TEXTAREA>
  • name设置文本框名称。
  • rows和cols属性分别设置文本框的行列数，以字符数为单位。

八、框架标记

框架可以把浏览器划分成几个子窗口，每个子窗口可以调入各自的HTML文档形成不同的页面，也可以按照一定的方式组合完成特殊的效果。可以在一个框架中放置目录并设置链接，点击链接，内容显示在另一个框架中。

框架由框架集和框架组成。

  • 框架集是在一个文档内定义的一组框架结构的HTML网页。它定义了在一个窗口中显示的框架数、框架的尺寸、载入到框架网页等。
  • 框架是指在网页上定义的一个显示区域。

在使用框架集的页面中，页面的<BODY>标记被框架集<FRAMESET>标记所取代，然后通过框架<FRAME>标记定义每一个框架。

1. <FRAMESET> </FRAMESET>标记

定义分割窗口，即主文档中有几个框架并且各个框架是如何排列的。

格式：

<FRAMESET cols="value,value,..." rows="value,value,..." framespacing="value"
bordercolor="Color_value">...</FRAMESET>
  • cols和rows：分别表示左右和上下分割窗口（用“,”分割，value为定义各个框架的宽度值，单位可以是百分比、绝对值或星号“*”，其中星号表示剩余部分）。
  • framespacing：设定框架集的边框宽度。
  • bordercolor：设定框架集边框颜色。

2. <FRAME> </FRAME>标记

定义每一个具体的框架。

格式：

<FRAME src="File_name" name="Frame_NAME" scrolling="value" noresize>...</FRAME>
  • src：设置框架显示的文件路径。
  • name：定义此框架的名字，这个名字供超文本链接标记<A href=”” target=”“>中target属性用来指定链接的目标HTML文件将显示在哪一个框架中。框架名称必须是个单词，可以使用下划线，必须以字母开始，区分大小写。
  • scrolling：设定滚动条是否显示。可以是yes（显示）、no（不显示）或auto（自动）。
  • noresize：禁止改变框架的尺寸大小。

3. <NOFRAME> </NOFRAME>标记

放在<FRAMESET> </FRAMESET>标记对之间，用来在那些不支持框架的浏览器中显示文本或图像信息。

写在最后

这里只是简单的整理了HTML一些基础的知识点，如果想深入学习要查阅相关书籍或者博客。