HTML基础教程

HTML基础HTML基础一、HTML的概念1.什么是HTML？超文本标记语言（HTML——HyperTextMarkupLanguage）是用于设计网页源文件（网页文档）的语言，利用它编写的代码保存在后缀名为.htm或.html的文件中。HTML包括一些定义页面内容和格式的符号，称为标记（标签）。它能够将文本、图像、声音和动画结合在一个网页文档中。这些文档可以通过Web浏览器显示，还可以通过超链接访问其它的信息资源。HTML基础2.什么是标记？标记总是放在三角括号中，大多数标记都成对出现（有开始标记和结束标记）。结束标记和开始标记所用的字符相同，只是前面加一个斜杠。例如：p…/p用于标记一个自然段。标记可以具有相应属性即各种参数，如size、color、text、width和noshade等。例如：fontsize=5color=redHello/font标记可以嵌套使用。例如：uiDreamweaver/i/uHTML基础3.什么是超文本、超媒体和超链接？超文本是网页上具有链接功能的文字。例如：新浪网武汉大学百度超媒体是网页上具有链接功能的多媒体。超链接是超文本和超媒体的统称，分为文字和图像（包括动画）两种。网页中的一段文字、一幅图像或图像的某一部分等都可以定义为超链接。HTML基础三、HTML的常用标记1.文档结构标记用来指明一个HTML文档的基本结构。（1）文档标记：HTML…/HTML整个HTML文档内容均在此标记之中。（2）头部标记：HEAD…/HEAD凡是在此标记之内的内容，例如标题等，均属于头部信息。头部信息不显示在Web页中。HTML基础（3）标题标记：TITLE…/TITLE此标记之间的内容将作为文档标题显示在浏览器的标题栏中。注意：TITLE…/TITLE标记只能放在HEAD…/HEAD标记之间。（4）主体标记：BODY…/BODY主体是Web页的主要部分，在BODY…/BODY标记之间的内容将显示在Web页中。HTML基础htmlheadtitle结构标记示例/title/headbodytext=bluepi斜体字文本/i/p/body/htmlHTML基础2.格式标记（1）段落标记：p…/p此标记用来创建一个段落，在此标记之间的文本将按照段落的格式显示。（2）换行标记：br此标记没有结束标记，用来创建一个换行。（3）两边缩进标记：blockquote…/blockquote在此标记之间的文本将按照两边缩进的方式显示。HTML基础（4）项目列表标记：dl/dl、dt、dd①dl/dl用来创建项目列表②dt用来创建列表中的上层项目③dd用来创建列表中的下层项目dt和dd都必须放在dl/dl标记之间。[例]创建一个项目列表：HTML基础该网页的HTML源文件如下：(项目列表示例.html)htmlheadtitle项目列表示例/title/headbodytext=bluedldt中国城市dd北京dd上海dd广州dt美国城市dd华盛顿dd芝加哥dd纽约/dl/body/htmlHTML基础（5）有/无序号列表标记：ol/ol、ul/ul、li①ol/ol标记用来创建有序号列表②ul/ul标记用来创建无序号列表③li标记只能在ol/ol或ul/ul标记之间使用，用来创建列表项。若li放在ol/ol之间，则每个列表项前有一个数字；若放在ul/ul之间，则每个列表项前有一个圆点。HTML基础[例]创建有序号列表和无序号列表：HTML基础该网页的HTML源文件如下：(有_无序号列表标记示例.html)htmlheadtitle有/无序号列表标记示例/title/headbodytext=blueol中国城市li北京li上海li广州/olul美国城市li华盛顿li芝加哥li纽约/ul/body/htmlHTML基础（6）区隔标记：div/div此标记主要用来设定HTML文档中文字、图形、表格等元素的显示位置。例如：divalign=center…/div表示标记中的文本水平居中显示。align属性用来说明水平对齐方式，取值可以是left(左对齐)、center(居中)或right(右对齐)。HTML基础3.文本标记（1）标题标记：hn/hn(n的范围为1~6)h1/h1是最大的标题，h6/h6则是最小的标题。被标示的文字将以粗体的方式显示在页面中。（2）字体标记：b/b、i/i、u/u①b/b之间的文本以黑体字的形式输出②i/i之间的文本以斜体字的形式输出③u/u之间的文本以加下划线的形式输出HTML基础（3）斜体和加重标记：em/em、strong/strong①em/em用来输出需要强调的文本(通常是斜体)②strong/strong则用来输出加重文本(通常是黑体)（4）字型标记：font/font此标记通常用来控制文字的字型、大小与颜色。它主要有三个属性face、size和color。①face属性用来指定文字的字型，如果指定的字型不存在于系统中，将使用默认字型。②size属性用来指定文字的大小，可以取值+1~+6、-1~-6、1~7，7为最大字体。HTML基础③color属性用来指定文字的颜色，颜色的取值可以是预设的颜色名称或者十六进制的RGB颜色码。例如：fontface=隶书size=4color=red网页设计教程/font预设的颜色名称可参考教材P17例如：fontface=幼圆size=7color=#00ffee网页设计实验指导书/font十六进制的RGB颜色码是用六位十六进制数字表示的红、绿、蓝三原色的组合颜色。HTML基础[例]文本标记的综合示例HTML基础该网页的HTML源文件如下：(文本标记的综合示例.html)htmlheadtitle文本标记的综合示例/title/headbodytext=blueh1最大的标题/h1h3使用h3的标题/h3h6最小的标题/h6pb黑体字文本/b/ppi斜体字文本/i/ppu加下划线文本/u/ppem强调文本/em/ppstrong加重文本/strong/ppfontsize=5color=redsize取值5、color取值red时的文本/font/p/body/htmlHTML基础4.链接标记（1）ahref=目标地址…/a①href属性用来指定链接的目标地址，可使用URL。②在标记之间可指定作为超链接的文本或图像。例如：ahref=武汉大学/aahref==images/whu.jpg/aHTML基础③href属性的值也可以是“mailto:Email地址”的形式。例如：ahref=mailto:[e-mail]联系我/a当在网页中单击这个超链接时，将调用系统默认的客户端电子邮件软件，建立一个空白的电子邮件发送给指定的邮件地址。HTML基础④a/a标记还具有target属性，此属性用来指明链接网页显示的目标窗口，可取_self、_blank、_parent或_top四个值中的任何一个，_self为默认值。例如：ahref==_blank新浪网/aHTML基础（2）锚点链接：aname=标签名/a①此标记用来在网页中创建一个锚点(书签)，以实现同一网页内不同部分之间的跳转。例如：在页面顶端创建一个锚点：aname=TOP页首/a②要找到锚点所标示的位置，就必须使用ahref=#标签名/a标记。例如：ahref=#TOP回到页首/aHTML基础[例]链接标记的综合示例(链接标记的综合示例.html)htmlheadtitle链接标记的综合示例/title/headbodypalign=centerstyle=font-size:9pt;color:yellow;background:blackbraname=Topfontcolor=red创建锚点处/font/abrbrbrbrbrbrbrbrbrbrbr欢迎想要学习网页制作的同学访问网站brahref==lime武汉大学/font/aHTML基础ahref==images\whu.jpg/abrbrbrbrbr本网站的主要内容brbrahref==_blank在新窗口中显示/abr欢迎给我来信，我的E-Mail是：ahref=mailto:[e-mail]=[e-mail]/font/abrbrahref=#Topfontcolor=lime点击此处回到锚点处/font/abrbr/p/body/html5.图像标记和多媒体标记（1）图像标记：imgsrc=图像文件存储位置与名称此标记用于将图像文件加载到网页文档中显示。例如，网页文档与图像文件whu.jpg在同一个目录下，则图像标记写成：imgsrc=whu.jpg假如图像文件放在网页文档所在目录的一个子目录(images)下，则图像标记写成：imgsrc=images/whu.jpg假如图像文件放在网页文档所在目录的上层目录下，则图像标记写成：imgsrc=../whu.jpg。HTML基础此外，img标记还有如下一些常用属性：alt：当浏览器不能显示指定图像时，则以指定给alt属性的字符串替代图像。align：对齐方式。border：设定图像的边框，如果值为0就表示不显示边框。width：设定图像宽度，单位为像素或百分比。height：设定高度高度，单位为像素或百分比。HTML基础[例]图像标记示例HTML基础（2）多媒体标记设置音乐和影像文件的超链接在HTML中，可播放的音乐文件格式包括au、mid和wav等，可播放的影像文件格式包括mov、mpg和avi等。若要提供音乐或影像文件供浏览者播放，可建立指向音乐或影像文件的超链接。例如：ahref=cry.wavDoIhavetocryforyou/aahref=baggio.avi绝对巨星/a直接将音乐或影像嵌入网页利用embed标记可在网页中插入各种媒体，格式可以是mid、wav、au、avi等。例如：embedsrc=baggio.aviwidth=400height=400autostart=trueloop=trueHTML基础播放背景音乐利用bgsound标记可在网页中播放背景音乐，即：bgsoundsrc=音乐文件名loop=播放次数若“播放次数”设为infini