HTML语言与网页设计.ppt

HTML语言与网页设计 陈庆章 qzchen@ 2011年05月30日 HTML入门？ HTML语言 一种进行网页设计的语言 一种标签式的程序设计语言 一种纯文本式的语言 一种简单易学的语言 一种可以使用文本编辑器进行编辑的语言 编辑的文件名后缀是”.html”。 HTML初步 直接用文本编辑（例如记事本）时，不是所见即所得； 有很多网页编辑工具，例如Frontpage 、Dreamweaver Dreamweaver、Flash、Firework称为网页制作三剑客，将三个软件配合起来使用，会制作出非常精美的网页。 HTML文件的基本构成 由文件的内容和标签组成； 标签不区分大小写字符，大小写字符效果相同 标签基本上是成对出现，结束标签带有“/”符： 标签名 文件的内容 /标签名 最简单的HTML文件 HTML HEAD title浙江工业大学应用数学2008级一班title /HEAD BODY HTML 文件的正文写在这里... ... /BODY /HTML HTML语法示例：整体结构 HTML语法示例：段落标签 超链接示意 超链接示意 创建超链接：给出URL 超链接关键标签：HREF 超链接示意 超链接到同一文档的各部分 链接到另一文档中某个特定位置 在网站上导航 分层布局 主页具有到其他多个页面的链接 每个页面都有一个到主页的链接 HTML 各类标签详解 HTML 标签种类 标题标签 段落级标签 块标签 字符级标签 列表 水平标尺标签HR 字体标签 FONT IMG 标签 标题标签 HTML HEAD TITLEHTML标题标签示意/TITLE /HEAD BODY H1HTML 简介/H1 H2HTML 简介/H2 H3HTML 简介/H3 H4HTML 简介/H4 H5HTML 简介/H5 H6HTML 简介/H6 /BODY /HTML 段落级标签：ADDRESS 它可以包含下列内容：到主页的链接，搜索字符串功能，版权 信息，文档的作者、地址、签名等信息，……… 块标签：SPAN DIV DIV…/DIV可以定义跨段落的内容块； SPAN…/SPAN定义段落内的内容块 字符级标签 字符级标签（示例） HTML HEAD TITLE字符级标签示例/TITLE /HEAD BODY P ALIGN=centerB字符级标签示例/B/P P圆的面积=pi*rSUP2/SUP/P P水的化学符号：HSUB2/SUBO/P PEM这是一种很有趣的体验/EM/P /BODY /HTML 源码格式标签 HTML HEAD TITLE字符级标签示例/TITLE /HEAD BODY PRE Heres some ditty Specially done to lay it out all Formatted and pretty. Unfortunately， that is all This junk really means Because I admit I couldnt scrawl Poetry for beans. /PRE /BODY /HTML 分段标签：br HTML HEAD TITLE字符级标签示例/TITLE /HEAD BODY BODY Heresbr some dittybr Specially donebr to lay it out allbr Formatted and pretty.br Unfortunately， that is allbr This junk really meansbr Because I admit Ibr couldnt scrawlbr Poetry for br beans.br /BODY /BODY /HTML 字体大小：font font size=# ... /font #=1， 2， 3， 4， 5， 6， 7 font标签没有P标签的功能； 可以在原有字体大小的基础上增加（+）或减少（-）， basefont size=# #=1， 2， 3， 4， 5， 6， 7 设置文档的基本字体大小，使用（+）、（-