1.HTML

HTML：(HyperText Markup Language)

超级 文本  标记   语言

用来描述网页的一种标记语言。

2.基础学习

网页的构成：

※文本内容(text content)：在页面上让访问者了解页面内容的纯文字。

※对其他文件的引用(reference to other files)：使用引用可以加载图像、音频、视频文件，以及样式表(控制页面的显示效果)和JavaScript(为页面添加行为)等。

※标记(markup)：对文本内容进行描述并确保引用正确地工作。即是HTML中M就代表标记。

元素与标签

网 页 文 档 的 结 构 和 格 式 的 定 义 是 由 HTML 元 素 来 完 成 的 ， HTML 元 素 是 由 单 个 或 一 对 标 签 定 义 的 包 之 范 围 。 一 个 标 签 就 是 左 右 分 别 有 一 个 小 于 号 ( < ) 和 大 于 号 ( > ) 的 字 符 串 。 开 始 标 签 是 指 不 以 斜 杠 ( / ) 开 头 的 标 签 ， 其 内 是 一 串 允 许 的 属 性 ． 值 对 。 结 束 标 签 则 是 以 一 个 斜 杠 ( / ) 开 头 的 标 签 。

标记形式

HTML框架

第一个页面

3.标记介绍

段落相关的标记

表 示 paragraph, 作 用 ： 创 建 一 个 段 。 属 性 align 表 示 段 的 对 齐 方 式 ， # 可 以

是 ft 、 center 、 right 、 justify

表 示 line break, 作 用 ： 换行

---

表 示 horizontal rule, 作 用 ： 插 入 一 条 水 平 线 。 属 性 color 用 来 指 定 线 的 颜

色 ， clr  可 以 是 预 定 义 的 颜 色 名 字 ， 例 如 ： red 、 blue 、 green 、 black 、

white 、 yellow 、 olive 、 aqua 等 等 ， 或 者 以 16 进 制 数 表 示 的 颜 色 值 ， clr

=#rrggbb, 例 如 ： # ff 0000 表 示 红 色 ， # 00ff 00 表 示 绿 色 ， # 0000ff 表 示 蓝 色

文本显示相关的标签

特殊字符

html注释

列表

表格

表单

超链接

嵌入图像 总结

这篇文章借助概念结合实例来总结孙鑫老师的"快速掌握HTML".

本文中实例存放路径为："F:\实例练习\孙鑫html"。

实例编写工具为：UltraEdit.

显示网页浏览器用：Internet Explorer.

概念结合实例总结如下：

1.WWW:万维网(World Wide Web)。

2.HTML:超文本标记语言(Hypertext Markup Language)。

3.Web页面(网页)也是一种文档，HTML是用于编写网页的一种标记语言。

4.标签：一个标签就是左右分别有一个小于号()的字符串。开始标签是指不以斜杠(/)开头的标签，其内是一串允许的属性-值对。结束标签则是以一个斜杠(/)开头的标签。

5.HTML元素的四种形式

实例1：第一个网页文件：FirstPage.html

步骤：①在"F:\实例练习\孙鑫html"路径下，建立文本文件,改名为"FirstPage.html".

②用"UltraEdit"进行代码的编写。

代码编写：

This is First page!

Hello World!运行结果如下：

HTML一般代码格式介绍：

注意事项：

①我们编写HTML文档时，即使不按照HTML的框架格式，目前我们所用的浏览器(IE)也能够很好地解析文档。例如：我们直接在文档中写上"Hello World!"，IE浏览器会将这些字符作为文档体的内容，在浏览器窗口中显示出来。

②在HTML文档中，一个标签的属性是可选的，你在写一个标签时，根据需要，可写上它的属性，也可不写。

③在HTML文档中，给一个标签的属性赋值的时候，可加双引号，也可不加。例如：和都是合法的。

④HTML中，标签和属性的名字不区分大小写。

⑤在HTML文档中，如果存在连续多个空白字符(空格、制表符、回车、换行等)，浏览器显示时将只解析为一个空格字符。

7.与段落相关的标签

p表示paragraph，作用：创建一个段。属性align表示段的对齐方式，#可以是left、center、right、justify。

表示line break，作用：换行。

表示horizontal rule，作用：插入一条水平线。属性color用来指定线的颜色。

实例2：结合与段落相关的标签，输出"静夜思"古诗。

步骤：①在"F:\实例练习\孙鑫html"路径下，建立文本文件,改名为"JingYeSi.html".

②用"UltraEdit"进行代码的编写。

静夜思

静夜思

作者：李白

床前明月光，疑是地上霜。

举头望明月，低头思故乡。

显示结果，及注释(红色)如下：

8.与文本显示相关的标签

…：使文本居中显示。

…：用于指出文档的标题，n是从1到6的整数，1表示最大标题，6表示最小标题。属性align用于设置标题对齐的方式，#可以是left、center、right。

…：用于设置字体，属性size表示字体的大小，n可以是从1到7的整数，数字越大字体越大；属性color表示字体的颜色，clr是可预订的颜色名字，或者以16进制数表示的颜色值。

…：使文本成为粗体。

…：使文本成为斜体。

实例3：使用了与文本显示相关的标记后，显示"静夜思"页面

静夜思

静夜思

作者：李白

床前明月光，疑是地上霜。

举头望明月，低头思故乡。

显示结果，及注释(红色)如下：

9.列表

①建立数字编号的列表

使用和

标签创建带数字编号的列表；

在标签中使用start属性，设置起始的序号。

在

标签中使用value属性，改变列表内的编号顺序。

②指定编号的格式和顺序

在和

标签中，使用type属性指定编号系统的类型。

③建立带有项目符号的列表

使用和

标签创建带有项目符号的列表，和

标签的type属性指定符号的样式，取值如下：

disc-----显示为实心的圆圈

square----显示为实心的方块

circle-----显示为空心的圆圈

④建立无符号的列表

使用与标签创建无符号的列表

使用标签替换,创建缩进的列表。

⑤建立术语列表

在元素中同时使用和标签，建立术语列表。术语由标签指定，说明由标签指定。

实例4：各种项目编号的"图书列表"

《Java从入门到精通》

《JSP快速入门》

《VC++深入编程》

《VB实例教程》

《Java从入门到精通》

《JSP快速入门》

《VC++深入编程》

《VB实例教程》

《Java从入门到精通》

《JSP快速入门》

《VC++深入编程》

《VB实例教程》

《Java从入门到精通》

《JSP快速入门》

《VC++深入编程》

《VB实例教程》

《Java从入门到精通》

《JSP快速入门》

《VC++深入编程》

《VB实例教程》

《Java从入门到精通》

《JSP快速入门》

《VC++深入编程》

《VB实例教程》

HTML超文本标记语言HTTP超文本传输协议

显示结果如下：

10.表格

表格实例

表格定义：

表格是用＜table＞元素来定义的．如下所示：

...

属性border用干定义表格边框的宽度．n可以是从O开始的整数．如果设

置border=0．那么表格边框没有宽度．如果忽略border属性，浏览器将不会

显示边框，这和设置borde=0是一样的效果。

属性align用于设定表格的对齐方式．alignment可以是left、center或right

属性bgcoIor用于指定表格的背景色．它的取值和前面介绍过的color属性

的取值是一样的。

元素用于定义表格的标题，如：...

元素在表格中添加一个新行，如:

...

属性align用于指定这一行在水平方向上的对齐方式，可以是left、center、right。属性valign用于指定这一行在垂直方向上的对齐方式，可以是top、middle、bottom.

元素用于定义表头，如：...

元素用于定义单元格，如...

实例5：显示"2004年度期末考试成绩单"

表格的例子

2004年度期末考试成绩单

姓名

语文

数学

英语

张三

89

75

90

李四

98

94

92

王五

56

86

67

显示结果

11.HTML交互式表单、列表框、多行文本输入控件

①使用元素，以及在其间嵌入相关元素(控件)，就可以创建作为HTML文档一部分的表单。

表单基本语法：...

元素用于接受用户输入的信息。

②列表框允许用户从一个下拉列表框选择一项or多项，其功能和单选按钮or复选框的功能相同。

列表框由元素创建，列表框中各个选项用元素提供。

③创建多行文本输入控件的语法为：

...

实例6 ：表单的例子

代码编写：

表单的例子

用户名：

密码：

性别：

男

女

兴趣爱好：

足球

蓝球

排球

游泳

最高学历:

...

高中

大学

硕士

个人简介：

个人简介

显示结果如下：

12.超链接格式：...

嵌入图片：