第1章 HTML语言.ppt

第 1 章 HTML 语言 学习目标 HTML语言结构。 HTML语言的编辑方法。 HTML的常用标记。 文字标识font的使用方法。 图片标识img的使用方法。 超链接标识a的使用方法。 表格标识table的使用方法。 框架标识frameset的使用方法。 表单标识form的使用方法。 CSS+DIV应用 HTML文件的基本结构 HTML HEAD /HEAD BODY Hello world! /BODY /HTML HTML文件的基本结构 HTML文件包括头部HEAD和主体BODY两大部分。文件的基本结构为： HTML HEAD TITLE 网页的标题 /TITLE /HEAD BODY 网页的内容 /BODY /HTML HTML文件 以HTML开头，以/HTML结尾。 HEAD…/HEAD：这是HTML文件的头部，用来说明文件命名和与文件本身的相关信息，其中可包括网页的标题部分TITLE…/TITLE。 BODY…/BODY: HTML文件主体, 网页中真正要显示的内容都包含在主体标记中。 HTML标记并不要求在书写时缩进，但为了代码的易读性，建议网页设计制作者使标记的首尾对齐，内部的内容向右缩进几格。 HTML文件是一种纯文本格式的文件，可用记事本等直接编辑,如EditPlus。在EditPlus编辑窗口中，关键字用特殊颜色字体显示，比较清晰。 常用颜色名称和对应的十六进制数代码 设置背景图片 BODY background = img\bg.jpg text=green 做背景的图片往往是一些小图案的重复,事实也是如此。因为做网页背景的图片太大，会影响浏览速度，为此经常采用小图片平铺的方法做背景，但要求不能有拼接的效果。 文字标记 HTML BODY H1第1级标题（H1）/H1 H2第2级标题（H2）/H2 H3第3级标题（H3）/H3 H4 align=left第4级标题（H4）（居左）/H4 H5 align=center第5级标题（H5）（居中）/H5 H6 align=right第6级标题（H6）（居右）/H6 /BODY /HTML FONT与Hn标记的区别 换行、段落格式 HTML BODY p第一段/p p第二段，用ltBRgt标记强行换行 br 仍然为第二段，但此行已经断开，属于第二行br 默认状态下，行于行之间的行距小，段与段间的距离要大br nbsp;nbsp;nbsp;nbsp这一行的开始是四个空格的效果/p pnbsp;这是两个空行/p /BODY /HTML 插入水平线 HTML BODY 以下是默认水平线HR 以下是左对齐、长度为320像素、粗为6个像素的水平线 HR align=left size=6 width=320 以下是长度为浏览器窗口宽度60%、颜色为蓝色、居中的水平线 HR align=center width=60% color=blue 以下是没有立体效果、粗为6个像素的水平线 HR size=6 noshade /BODY /HTML 常用图片文件比较 常用图片文件大小比较 插入图片 HTML BODY IMG src=img/bg.jpg alt=风景图片 align=top文本与图片顶部对齐 IMG src=img/bg.jpg alt=风景图片 align=middle文本与图片中央对齐 IMG src=img/bg.jpg align=bottom文本与图片底部对齐 /BODY /HTML 超链接 p使用相对URL地址，在当前窗口中打开目标网页：a href = 1-03.htm背景网页/a/p p使用绝对URL地址，在新窗口中打开目标网页：a href = target=_blank搜狐 /a/p p链接到图片的超链接a href = flower.jpg名花欣赏 /a/p p下载文件的超链接a href = winrar.rar下载 /a/p p电子邮件超链接a href = mailto:wangxmx@126.com与作者联系 /a/p 列表的主要标签 列表的主要标签 无序列表 head title无序列表/title /head body ul li默认的无序列表加实心园 　　li默认的无序列表实心园 　　li默认的无序列表实心园 /ul ul ????li type=square无序列表square加方块 　　li type=square无序列表