1、第1章 HTML基础,单击此处添加标题文字, 2,主要内容,1.1 HTML语言简介,1,1.2 HTML语言中的标记码,2,1.3 Dreamweaver CS4的使用,3, 3,1.1 HTML语言简介,HTML语言是超文本标记语言（HyperText Markup Language）的缩写，它是Web上的专用表述语言，是SGML（Standard Generalized Markup Language）的一个简化版本。,HTML语言的源文件是纯文本文件，所以，可以使用任何文本编辑器进行编辑，例如UNIX的vi,DOS的edit，Windows中的记事本等 。, 4,1.2 HTML语言中
2、的标记码,1.2.1 标记码简介,1标记码格式要求 （1）任何标记皆由“。 （2）标记名与小于号之间不能留有空白字符。 （3）某些标记需要加上参数，某些则不必。例如：font 标记码中color参数用来设置目标对象的颜色。代码：设置文本文字的颜色属性 （4）参数只可加于起始标记中。 （5）在起始标记之标记名前加上符号“”便是其终结标记，如 （6）标记字母不区分大小写。, 5,1.2 HTML语言中的标记码,1.2.1 标记码简介,2标记码分类及基本结构 标记码按形态分为围堵标记与空标记： （1）围堵标记 也称为双标记或双标签，顾名思义，它以起始标记及终结标记将文字围住，令其达到预期显示效果。即
3、必须成对出现。这类标记的语法是：内容 例如HTML 代码：加粗显示文字不加粗显示文字, 6,1.2 HTML语言中的标记码,1.2.1 标记码简介,（2）空标记 也称为单标记或单标签，因为它只需要单独使用就能完整的表达意思。即只有起始标记没有终结标记。这类标记的语法是： 例如HTML 代码：你喜欢网页制作吗？ 喜欢 , 7,1.2 HTML语言中的标记码,1.2.1 标记码简介,（3）属性 大部分标记码的起始标记内可以包含一些属性，其语法是：你喜欢网页制作吗？ , 8,1.2 HTML语言中的标记码,1.2.2 标记码,HTML文档分文档头和文档体两大部分。文档头对文档进行了一些必要的定义，文
4、档体中显示文档主体的各种信息，所有网页都是在这种架构的基础上逐步润色而形成的。, 9,1.2 HTML语言中的标记码,【例1.1】为设置一些属性参数。,文字的链接 , 10,1.2 HTML语言中的标记码,参数含义,text：指定HTML文件中文字颜色属性。 link：指定HTML文件中待连接超连接对象颜色属性。 alink：指定HTML文件中连接中超连接对象颜色属性。 vlink：指定HTML文件中已连接超连接对象颜色属性。 background：指定HTML背景图形。 bgcolor：指定HTML背景颜色属性。 以下的三个参数只在浏览器中起作用： leftmargin：指定整份文件显示画面
5、的左方边沿空间，单位为像素。 topmargin：指定整份文件显示画面的上方边沿空间，单位为像素。 bgproperties：指定背景图形是否具有卷动属性。, 11,1.2 HTML语言中的标记码,1.2.3 排版标记码,排版标记包括：、。它们都起到安排网页内容所处位置的作用。, 12,（1）增强程序可读性。为文中不同部分加上说明，方便日后维护及修改。 例如：,2段落标记码,称为段落标记，其作用是为文字、图片、表格等之间留一空白行。可以省略，下一个的开始标记着上一个的结束。,1文本注释,1.2 HTML语言中的标记码, 13,【例1.2】文字对齐方式示例。,源代码：设置文本的对齐方式文字右对齐
6、 文字左对齐 文字居中对齐,1.2 HTML语言中的标记码, 14,3换行标记码,称为换行标记，其作用是令文字、图片、表格等对象显示于下一行。,【例1.3】换行示例。 源代码换行示例相见时难别亦难，东风无力百花残。春蚕到死丝方尽，蜡炬成灰泪始干。相见时难别亦难，东风无力百花残。春蚕到死丝方尽，蜡炬成灰泪始干。,1.2 HTML语言中的标记码, 15,4水平线标记码,称为水平线，其作用使HTML文件插入一条水平线，用以分割不同的部分。用代码标记水平线。它可以添加的参数如下所示。 （1）对齐方式align 设定线条置放位置，可选择left、center、right三种设定值。 （2）宽度size
7、设定线条宽度，以像素作单位，缺省值为2像素。 （3）长度width 设定线条长度，可以是绝对值（以像素作单位）或相对值，缺省值为100%。 （4）颜色color 设定线条颜色，缺省值为黑色。（该参数只在浏览器中起作用）。 （5）无阴影noshade 设定线条为平面显示即无阴影显示，若删去则具有阴影或立体，这是缺省值。,1.2 HTML语言中的标记码, 16,【例1.4】水平线示例。 部分源代码：,1.2 HTML语言中的标记码, 17,5居中标记 称为居中标记，其作用是令文字、图片、表格等对象居中显示。 【例1.5】center属性示例。 部分源代码： 文字居中对齐 文字居中对齐 文字居中对齐
8、,1.2 HTML语言中的标记码, 18,1.2.4 文字的字体与样式标记 1 是应用在文件的内文部分，即与之间的位置，只影响所标示的文字，是一个围堵标记。的语法为： 属性参数含义： face：设定文字的字体。face属性可以将文本对象设置成计算机中存在的各种字体。 size：设定文字的大小，其值可以是绝对值或相对值。该属性的有效范围为1-7，其中缺省值为3，可以在size属性值之前加上“+”、“-”字符，来指定相对于字号初始值的增量或减量。,1.2 HTML语言中的标记码, 19,【例1.8】font属性示例。 源代码：设置字体字号颜色示例宋体文字黑体文字 华文琥珀文字 华文琥珀文字,1.2
9、 HTML语言中的标记码, 20,2文字字形样式 【例1.9】设置字形示例。 源代码：设置字形示例粗体文字 加下划线文字 大型文字 小型文字 强调文字 特别强调文字 删除线文字,1.2 HTML语言中的标记码, 21,4.标题 【例1.10】设置字形示例。 源代码：设置标题示例标题1 标题2 标题4 标题5 标题6 ,1.2 HTML语言中的标记码, 22,1.2.5 列表元素标记列表元素标记主要包括以下几种标记：有序列表标记、无序列表标记和列表项标记。 1有序列表标记所谓有序列表标记，就是在每一项前面加上1，2，3等数目，又称编号清单。的常用格式： 2无序列表标记所谓无序列表标记，就是在每一
10、项前面加上实心圆、空心圆、实心方格等符号，故又称符号清单。的常用格式：,1.2 HTML语言中的标记码, 23,【例1.11】列表元素示例。 源代码：,1.2 HTML语言中的标记码, 24,1.2.6 表格标记 1.表格的三个基本要素 表格、表行、表单元格这三个标记是定义表格的最重要的标记，可以说只学这三个以足够处理简单的表格。 （1）表格 是一个容器标记，意思是说它用以宣告这是表格而且其它表格标记只能在他的范围内才适用。 （2）表行 用以标示表格行(row)，每一对可以为表格创建一个行。 （3）表单元格 用以标示单元格(cell)，用创建一个行之后，还需要使用为行创建单元格。,1.2 HT
11、ML语言中的标记码, 25,【例1.12】建立简单表格示例。,1.2 HTML语言中的标记码, 26,【例1.13】表格属性示例。 源代码：表格table标记属性示例 公司名 先尧文化公司地址 哈尔滨江北利民开发区师大南路邮编 150025联系人 马先尧传真 0451-8000000,1.2 HTML语言中的标记码, 27,1.2.7 表单标记表单标记：、等。其中input有以下几种类型：text, radio, checkbox, password, submit/ reset, image, file, hidden, button。1表单标记 称为表单标记，用以宣告此为表单模式，属于一个
12、容器标记，表示其它表单标记需要在它的包围中才有效。 的常用参数设定：, 28,2单行文本框 文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个文字或者简短的回答，如登陆帐号、密码等。 的常用参数设定：,1.2 HTML语言中的标记码, 29,【例1.15】表单元素单行文本框示例。 源代码：表单元素单行文本框示例登陆帐户： 登陆密码： 验 证 码： ,1.2 HTML语言中的标记码, 30,单选按钮 单选按钮是指只能选择其中一项的选项框，在许多情况中，选择只能是其中的一项，例如人的“性别”选项一样，要么是男，要么是女。 的主要参数设定： 男 女 代码显示结果为：性别：男 女,1.2 HTML语言中的标记码, 31,5复选框的主要参数设定： 参数含义：复选框的参数name 、value 、checked参考text部分的说明。6提交按钮及清除按钮 这是表单上重要的两个按键，两者所附带的参数相同。 提交按钮及清除按钮的主要参数设定： （1）设定输入方式为：submit或Reset（2）值value,1.2 HTML语言中的标记码, 32,1.3 Dreamweaver CS4的使用,1.3.1 Dreamweaver CS4简介1.3.2 Dreamweaver CS4使用1.站点定义 2.Web页面制作,谢谢,谢谢观赏,
