HTML语言与网页设计

HTML语言与网页设计陈庆章[e-mail]2011年05月30日HTML入门？HTML语言•一种进行网页设计的语言•一种标签式的程序设计语言•一种纯文本式的语言•一种简单易学的语言•一种可以使用文本编辑器进行编辑的语言•编辑的文件名后缀是”.html”。HTML初步•直接用文本编辑（例如记事本）时，不是所见即所得；•有很多网页编辑工具，例如Frontpage、Dreamweaver•Dreamweaver、Flash、Firework称为网页制作三剑客，将三个软件配合起来使用，会制作出非常精美的网页。HTML文件的基本构成•由文件的内容和标签组成；•标签不区分大小写字符，大小写字符效果相同•标签基本上是成对出现，结束标签带有“/”符：•标签名文件的内容/标签名最简单的HTML文件HTMLHEADtitle浙江工业大学应用数学2008级一班title/HEADBODYHTML文件的正文写在这里....../BODY/HTMLHTML语法示例：整体结构HTMLHEADTITLE欢迎学习HTML/TITLE/HEADBODYH3我的第一个HTML文档/H3/BODY/HTML运行结果HTML语法示例：段落标签HTMLHEADTITLE欢迎使用HTML/TITLE/HEADBODYBGCOLOR=lavenderP这会是一种很有趣的体验P另一个段落元素/BODY/HTML运行结果HTML语法示例：换行标签HTMLHEADTITLE欢迎使用HTML/TITLE/HEADBODYBGCOLOR=lavenderP这会是一种很有趣的BR体验P另一个段落元素/BODY/HTML运行结果HTML语法示例：对齐标签HTMLHEADTITLE学习HTML/TITLE/HEADBODYBGCOLOR=lavenderPalign=right这会是一种很有趣的体验/P/BODY/HTML运行结果右对齐Left：左对齐Center：居中Right：右对齐1、职位：关于可申请的职位……2、培训资源：本学院美术学位的培训资源请单击此处查看视频……3、联盟：我们有许多联盟……超链接示意超链接示意链接类型•内部链接到同一文档内或同一网站内的其他部分的链接•外部链接到其他网站或服务器上的页面的链接。----------------------------------------------------------------------Web站点1Web站点2创建超链接：给出URL要创建超链接，必须指定两个部分要链接的文件的完整地址或URL热点热点可以是一行文字甚至一个图像绝对URL文件的完整地址超链接关键标签：HREFAHREF=protocol://host.domain:port/path/filenameHypertext/A•Protocol是协议类型http–超文本传输协议gopher–搜索文件ftp–文件传输协议mailto–发送电子邮件•Host.domain是服务器的Internet地址•Port是目标服务器的端口号•Hypertext是用户必须单击才能激活链接的文本或图像语法为:超链接示意HTMLHEADTITLE使用链接/TITLE/HEADBODYBRBRP本页的所有内容都讲述关于如何创建到文档的链接AHREF=Doc2.html单击此处查看文档2/A/BODY/HTMLHTMLHEADTITLE文档2/TITLE/HEADBODYBRBRP这是文档2。单击文档1中的超链接后将显示本页。BRBRAHREF=Doc1.html返回/A/BODY/HTML超链接到同一文档的各部分HTMLHEADTITLE使用链接/TITLE/HEADBODYAHREF=#Internet互联网/ABRBRAHREF=#HTMLHTML简介/ABRBRAHREF=#Consistency多样化和统一性/ABRBRAname=Internet互联网/ABRP互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输协议绑定在一起。/PAname=HTMLHTML简介/ABRP超文本标签语言是Web用来创建和识别文档的标准语言。虽然它不是标准通用标签语言(SGML)的子集，但与它有着某种程度上的关联。SGML是一种文档格式语言表示方法。/PAname=Consistency多样性和统一性/ABRP万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。/PBRBRBRBRBRBR/BODY/HTML单击当要显示的内容足够长时链接到另一文档中某个特定位置HTMLHEADTITLE主文档/TITLE/HEADBODYAHREF=sg.html#Internet互联网/ABRBRAHREF=sg.html#HTMLHTML简介/ABRBRAHREF=sg.html#Consistency多样性和统一性/A/BODY/HTML单击在网站上导航•线性布局•分层布局•图像映射•超链接•子页面•目录•“后退”和“前进”按钮分层布局•主页具有到其他多个页面的链接•每个页面都有一个到主页的链接------------------------------------------------------------------------------------------------------------------------------------------------------------------HTML各类标签详解HTML标签种类•标题标签•段落级标签•块标签•字符级标签•列表•水平标尺标签HR•字体标签FONT•IMG标签标题标签HTMLHEADTITLEHTML标题标签示意/TITLE/HEADBODYH1HTML简介/H1H2HTML简介/H2H3HTML简介/H3H4HTML简介/H4H5HTML简介/H5H6HTML简介/H6/BODY/HTML可显示六种大小的标题，即H1到H6，H1为最大，H6为最小段落级标签：ADDRESS它可以包含下列内容：到主页的链接，搜索字符串功能，版权信息，文档的作者、地址、签名等信息，………HTMLHEADTITLE欢迎学习HTML/TITLE/HEADBODYBGCOLOR=lavenderH3我的第一个HTML文档/H3P这将是一种很有趣的体验H2使用另一个标题/H2P另一个段落元素ADDRESSPAhref=“”单击此处访问浙江工业大学的主页/A/ADDRESS/BODY/HTML块标签：SPANDIVDIV…/DIV可以定义跨段落的内容块；SPAN…/SPAN定义段落内的内容块HTMLHEADTITLE学习HTML/TITLE/HEADBODYDIV第1部分P元素用于组织元素PDIV通常用于块级元素/DIVDIValign=right第2部分P这是第二部分BRH2您觉得有意思吗？/H2/DIVP第二部分向右对齐。SPANSTYLE=font-size:25公共格式/SPAN应用于这一部分中的所有元素/BODY/HTML注意align用法，可选参数有right,left,center字符级标签B.../B粗体文本TT.../TT固定宽度的字体SUP.../SUP上标文本SUB.../SUB下标文本EM../EM强调文本CODE.../CODE用于显示编程代码CITE.../CITE用于引用字符级标签（示例）HTMLHEADTITLE字符级标签示例/TITLE/HEADBODYPALIGN=centerB字符级标签示例/B/PP圆的面积=pi*rSUP2/SUP/PP水的化学符号：HSUB2/SUBO/PPEM这是一种很有趣的体验/EM/P/BODY/HTML源码格式标签HTMLHEADTITLE字符级标签示例/TITLE/HEADBODYPRE•Here's•someditty•Speciallydone•tolayitoutall•Formattedandpretty.•Unfortunately，thatisall•Thisjunkreallymeans•BecauseIadmitI•couldn'tscrawl•Poetryfor•beans./PRE/BODY/HTML分段标签：brHTMLHEADTITLE字符级标签示例/TITLE/HEADBODYBODY•Here'sbr•somedittybr•Speciallydonebr•tolayitoutallbr•Formattedandpretty.br•Unfortunately，thatisallbr•Thisjunkreallymeansbr•BecauseIadmitIbr•couldn'tscrawlbr•Poetryforbr•beans.br•/BODY/BODY/HTML注意与p的区别字体大小：font•fontsize=#.../font#=1，2，3，4，5，6，7–font标签没有P标签的功能；–可以在原有字体大小的基础上增加（+）或减少（-），•basefontsize=##=1，2，3，4，5，6，7–设置文档的基本字体大小，使用（+）、（-），形成“+#”或“-#”格式，此时都将以基本字体大小为准。字体大小示例HTMLHEADTITLE字符级标签示例/TITLE/HEADBODYfontsize=7今天天气真好！/fontbrfontsize=6今天天气真好！/fontbrfontsize=5今天天气真好！/fontbrfontsize=4今天天气真好！/fontbrfontsize=3今天天气真好！/fontbrfontsize=2今天天气真好！/fontbrfontsize=1今天天气真好！/fontbr/BODY/HTML字体大小示例比较HTMLHEADTITLE字符级标签示例/TITLE/HEADBODYfontsize=7今天天气真