html标签以及词汇全方面

HTML语言基础知识及使用广州市白云行知职业技术学校简金花本次课内容：一、引入新课——网页源文件及考证试题二、HTML语言（一）什么是HTML语言（二）HTML文档的结构（三）HTML文档的特点（四）查看HTML文档的方法三、HTML标签（一）什么是HTML标签（二）HTML标签的格式（三）HTML标签的特点（四）HTML的颜色四、HTML标签的使用（一）文档标签（二）排版标签（三）链接标签htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312metaname=GENERATORcontent=MicrosoftFrontPage4.0metaname=ProgIdcontent=FrontPage.Editor.DocumenttitleNewPage1/title/headbodypahref==大峡谷玻璃走廊开放src==0width=390height=240/a/p/body/html图片对应的HTML语言如下:一、引入新课htmlheadmetaname=GENERATORcontent=MicrosoftFrontPage4.0titleNewPage1/title/headbodyh1郑智十岁在电影的台词是/h1divid=option_leftinputonclick=“frmguess.submit();”type=“radio”value=“1”name=“chk_question”“我要做球星！”brinputonclick=frmguess.submit();type=radiovalue=2name=chk_question“我要做马拉多纳！”brinputonclick=frmguess.submit();type=radiovalue=3name=chk_question“我是伟大的左后卫！”brinputonclick=frmguess.submit();type=radiovalue=4name=chk_question“点球！点球！”/div/body/html（一）什么是HTML语言全写：HyperTextMark-upLanguage译名：超文件注标识语言（译名之一）简释：一种为普通文件中某些字句加上标识的语言，其目的在于运用标签（tag）使文件达到预期的显示效果。HTML的格式非常简单，只是由文字及标签组合而成，于编辑方面，任何文字编辑器都可以，只要能将文件另存成ASCII纯文字格式即可（二）HTML文档的结构HTML文档一般由两部分组成：1文档所要表达的内容信息；2一系列HTML标签。HTML的标签分单标签和成对标签两种。成对标签是由首标签标签名和尾标签/标签名组成的，成对标签的作用域只作用于这对标签中的文档。单独标签的格式标签名，单独标签在相应的位置插入元素就可以了，大多数标签都有自己的一些属性,属性要写在始标签内，属性用于进一步改变显示的效果,各属性之间无先后次序，属性是可选的，属性也可以省略而采用默认值;其格式如下：标签名字属性1属性2属性3…内容/标签名字二、HTML语言作为一般的原则，大多数属性值不用加双引号。但是包括空格、％号，＃号等特殊字符的属性值必须加入双引号。为了好的习惯，提倡全部对属性值加双引号。如：fontcolor=#ff00ffface=宋体size=30字体设置/font单独标签是指标签单独出现，只有起始标签没有终结标签。例如HTMLSource：IloveCreationofWebpage.brIt‘sawonderfulplace.显示成：IloveCreationofWebpage.It'sawonderfulplace.其中换行标签br便属单独标签。它的作用便是将标签后所有东西显示于下一行，可见终结标签于它是没意义的，但有些人会为空标签加上终结标签，这是为方便记认而己，对HTML没有影响。一个标准html文件应具有下面的结构：htmlhtml文件开始head文件头开始title文档标题/title/head文件头结束body文件体开始文档的主要内容/body文件体结束/htmlhtml文件结束返回注意：html网页文件格式。head标头区:记录文件基本资料，如作者、编写时间。title标题区:文件标题须使用在标头区内，可以在浏览器最上面看到标题。body本文区:文件资料，即在浏览器上看到的网站内容。1通用性2简单性、3可扩展性、4平台无关性、5编辑器无关性（四）查看HTML文档的方法查看一个网页HTML源代码的方法是:打开一个网页之后，点击浏览器上的菜单“查看”，选择下面的“源文件”选项，即可打开一个记事本文件，其中就是这个网页所所有代码。可以将鼠标放置到网页上的任何位置（只要位于没有链接、图片处，最好是网页中的空白区域），点击鼠标右键，选择其中的“查看源文件”即可。（三）HTML文档的特点三、HTML标签（一）什么是HTML标签HTML标签是由和所括住的指令，主要分为:单标签指令（起始标签）、双标签指令(由起始标签，/结束标签所构成)。（二）HTML标签的格式HTML标签的格式是：标签名相应内容/标签名如：title网页的标题/title•任何标签皆由及所围住，如P•标签往往成对出现•标签名与小于号之间不能留有空白字符。•某些标签要加上属性，某些则不必。如fontsize=2Hello/font如hr•属性只可加于起始标签中。•在起始标签之标签名前加上符号/便是其终结标签，如/font•标签字母大小写皆可。•不同标签之间可以嵌套，但不能交叉。（三）HTML标签的特点最后一个特点如何理解？请举例说明。（四）HTML的颜色HTML的颜色表示可分两种：•以命名方式定义常用的颜色，如RED。•以RGB值表示，如#FF0000表示red。命名方式涵括的色种不多亦不甚方便，较少采用，以下介绍RGB值的原理：於应用时常在每个RGB值之前加上符号#以示分别，但不加亦可。具体的颜色的表示参见另一个网页文件思考题：HTML中“#9ACD32”表示什么颜色？“#800080”呢？“#90EE90”呢？四、HTML标签的使用（一）文档标签htmlheadtitlebody上述标记中只有BODY具属性设定。■BODY之属性设定：例子：BODYtext=#000000link=#0000FFalink=#FF0000vlink=#0000FFbackground=bg1.gifbgcolor=#FFFFFFleftmargin=2topmargin=2bgproperties=fixed•text=“#000000”用以设定文字颜色。#000000代表黑色，亦可以采用颜色的名称，即text=“black”。各种颜色的值及名称可参考【HTML的颜色】。•link=#0000FF设定一般文字属性颜色。•alink=#FF0000设定刚按下时文字属性颜色。•vlink=#0000FF设定属性后的颜色。（被按过）。•background=bg1.gif设定背景墙纸。GIF或JPEG皆可，可以是绝对途径或相对途径。•bgcolor=#FFFFFF设定背景颜色。当己设定背景墙纸时会失去作用，除非墙纸有透明部分。•leftmargin=2设定整份文件显示画面的左方边沿空间，单位为像素。『只适用于IE』•topmargin=2设定整份文件显示画面的上方边沿空间。『只适用于IE』•bgproperties=fixed固定背景墙纸，当卷动文字时墙纸不会跟著卷动。『只适用于IE』标记及属性之字母大小都可以。CENTER；!--注解--；P；BR；HR；（二）排版标签!--注解--：像很多电脑语言一样，HTML文件亦提供注解功能。浏览器会忽略此标记中的文字（可以是很多行）而不作显示，一般使用目的：•为文中不同部份加上说明，方便日后修改。这对较复杂或非私人网页尤其重要，它不单是提醒自已，亦提醒你的同事这部分做什么、那部分做什么。例子：!--由这处开始是产品订购表格--•用作版权声明。假如你不希望别人使用或复制你的网页，可加上警告字眼。例子：!--本文版权为1998,CreationofWebpage所拥有，未经许，请勿抄摘--P：P称为段落标记。作用：为字、画、表格等之间留一空白行。本来P是一围堵标记，标于一段落的头尾，但从HTML2.0开始己不需要/P作结尾。P的常用属性align表示段落文字的对齐方式：如：palign=center•align=center可选值：right,left,center。内定值：align=left原始码Hereisthetextformyparagraph.Itdoes'tmatterhowlongitis,howmanyspacearebetweenthewordsorwhenIdecidetohitthereturnkey.ItwillcreateanewparagraphonlywhenIbeginthetagwithanotherone.PHere'sthenextparagraph.显示结果Hereisthetextformyparagraph.Itdoes'tmatterhowlongitis,howmanyspacearebetweenthewordsorwhenIdecidetohitthereturnkey.ItwillcreateanewparagraphonlywhenIbeginthetagwithanotherone.Here'sthenextparagraph.例子：BR：BR称为换行标签。作用：令字、画、表格等显示于下一行。由于浏览器会自动忽略原始码中空白和换行的部分，这令到BR成为最常用的标记之一。因为无论你在原始码中编好了多漂亮的文章，若不适当地加上换行标签或段落标签，浏览器只会将它显示成一大段。原始码566EBostonPostRDMamaroneckNY10543-9982UnitedStatesofAmerica显示结果566EBostonPostRDMamaroneckNY10543-9982UnitedStatesofAmerica错误示范：（邮局可不会接受一行过的地址）正确例子：原始码566EBostonPostRDBRMamaroneckNY10543-9982BRUnitedStatesofAmerica显示结果566EBostonPostRDMamaroneckNY10543-9982UnitedStatesofAmericaHR：HR称为水平线。作用：插入一条水平线。HR之属性修改：以：HRalign=“LEFT”size=“2”width=“70%”color=“#0000FF”noshade为例。noshade表示实线（无阴影）•align=LEFT设定线条置放位置，可选择：left；right；center三种设定值。•size=2设定线条厚度，以像素作单位，内定为2。•width=70%设定线条长度，可以是绝对值（以像素作单位）或相对值，内定为100%。•color=#0000FF『只适用于IE』设定线条颜色，内定为黑色。#0000FF代表蓝色，亦可以采用颜色的