HTML与JavaScript.doc

第二章 HTML与JavaScript2.1 HTML基础一基础1元素与标签元素(element)指文档的各种成分（如头、标题、段落、表格、列表、斜体、上标等），元素的类型、属性和范围用标签来标识、设置和界定。元素可以嵌套（形成文档的树状结构），但不能交叉。文档中的元素为自由书写格式（似C/C+/Java/C#语言），建议按嵌套层次缩进。标签(tag，标记/标识/标注)是用来描述文档内容的类型、组成与格式化信息的（ASCII可打印）字符串。标签用于标识元素的类型、设置元素的属性，并界定元素内容的开始与结束。元素可按有无元素内容分为非空元素和空元素两类，对应的标签也分为非空标签与空标签。1）非空元素与标签非空元素 = 含有内容的元素。非空标签 = 标识非空元素的标签，即含有元素内容的标签。l 格式：非空元素 = 开始标签 元素内容 结束标签开始标签 = ，标识元素的开始结束标签 = ，标识元素的结束即：非空元素 = 元素内容其中：表示可选，标签名=元素名，属性值可为数字、符号常量和字符串等。l 例子标题(title)：Test锚(anchor)：中山大学字体(font)：这是一段采用三号字的蓝色黑体文字表格(table)：l 说明在HTML中，标签名与属性名都不区分字母的大小写（DOS/Fortran/Basic），但属性值中的字符串区分大小写。按惯例，在HTML中，标签名一般大写、属性名一般小写（也可以大写）、属性值中的符号常量一般小写。但在XML和XHTML中，是区分字母大小写，而且在XHTML中标签名与属性名都是小写的。一个非空元素的开始标签与结束标签总是成对出现的，但在HTML中也有一些标签的结束标签可省略（如、等），由下一个同类元素的开始标签来判断其所描述的元素之结束。但这不是一个良好的习惯，容易产生歧义，同时也给浏览器的分析程序增加了不必要的麻烦。建议为每个非空标签写上配对的结束标签，以便与将来一定会替代HTML的XHTML兼容。开始标签中的属性用空格分隔，出现的顺序是无关紧要的，如与和等都是等价的。在HTML文档中，属性值一般用单引号或双引号括起来，也可以省略引号。但为了与XHTML兼容，最好用引号把属性值括起来。单引号括起来的属性值中可以包含双引号，而双引号括起来的属性值中可以包含单引号，属性值中还可以包含字符实体（如"）和字符编码（如 或 或 常用的转义字符有：字符含义实体引用十进制编码十六进制编码引号quotation"&和号ampersand&大于greater than>空格非断行空白no-break space 2）白空符白空符(white space characters)包括：81l 空格space ()l 制表tab ()l 回车carriage return ()l 换行line feed ()l 换页form feed ()l 零宽空格Zero-width space ()浏览器会自动将HTML文档中的连续多个白空符用一个空格符代替。4HTML 4.0元素与分类1）部分元素的分类l 流(flow)元素：块元素、行内元素l 块(block)元素（块级元素）：P、标头元素、列表元素、PRE、DL、DIV、NOSCRIPT、BLOCKQUOTE、FORM、HR、TABLE、FIELDSET、ADDRESSl 行内(inline)元素（文本级元素）：字符串、字体样式元素、短语元素、特殊元素、表单控件元素l 标头(heading)元素：H1H6l 列表(list)元素：UL、OLl 字体样式(font style)元素：TT、I、B、U、S、STRIKE、BIG、SMALLl 短语(phrase)元素： EM、STRONG、DFN、CODE、SAMP、KBD、VAR、CITE、ABBR、ACRONYMl 特殊(special)元素：A、IMG、APPLET、OBJECT、FONT、BASEFONT、BR、SCRIPT、MAP、Q、SUB、SUP、SPAN、BDO、IFRAMEl 表单控件(form control)元素：INPUT、SELECT、TEXTAREA、LABEL、BUTTON2）HTML 4.0元素（共91个）图例: O(Optional可选), F(Forbidden禁止), E(Empty空元素), D(Deprecated被反对的), L(Loose DTD宽松DTD), F(Frameset DTD框架集DTD)NameStart TagEnd TagEmptyDepr.DTDDescriptionAanchorABBRabbreviated form (e.g., WWW, HTTP, etc.)ACRONYMADDRESSinformation on authorAPPLETDLJava appletAREAFEclient-side image map areaBbold text styleBASEFEdocument base URIBASEFONTFEDLbase font sizeBDOI18N BiDi over-rideBIGlarge text styleBLOCKQUOTElong quotationBODYOOdocument bodyBRFEforced line breakBUTTONpush buttonCAPTIONtable captionCENTERDLshorthand for DIV align=centerCITEcitationCODEcomputer code fragmentCOLFEtable columnCOLGROUPOtable column groupDDOdefinition descriptionDELdeleted textDFNinstance definitionDIRDLdirectory listDIVgeneric language/style containerDLdefinition listDTOdefinition termEMemphasisFIELDSETform control groupFONTDLlocal change to fontFORMinteractive formFRAMEFEFsubwindowFRAMESETFwindow subdivisionH1headingH2headingH3headingH4headingH5headingH6headingHEADOOdocument headHRFEhorizontal ruleHTMLOOdocument root elementIitalic text styleIFRAMELinline subwindowIMGFEEmbedded imageINPUTFEform controlINSinserted textISINDEXFEDLsingle line promptKBDtext to be entered by the userLABELform field label textLEGENDfieldset legendLIOlist itemLINKFEa media-independent linkMAPclient-side image mapMENUDLmenu listMETAFEgeneric metainformationNOFRAMESFalternate content container for non frame-based renderingNOSCRIPTalternate content container for non script-based renderingOBJECTgeneric embedded objectOLordered listOPTGROUPoption groupOPTIONOselectable choicePOparagraphPARAMFEnamed property valuePREpreformatted textQshort inline quotationSDLstrike-through text styleSAMPsample program output, scripts, etc.SCRIPTscript statementsSELECToption selectorSMALLsmall text styleSPANgeneric language/style containerSTRIKEDLstrike-through textSTRONGstrong emphasisSTYLEstyle infoSUBsubscriptSUPsuperscriptTABLETBODYOOtable bodyTDOtable data cellTEXTAREAmulti-line text fieldTFOOTOtable footerTHOtable header cellTHEADOtable headerTITLEdocument titleTROtable rowTTteletype or monospaced text styleUDLunderlined text styleULunordered listVARinstance of a variable or program argument5HTML 4.0通用属性分组l 常用属性组attrs：核心属性组、语言方向属性组、内部事件属性组l 核心属性组coreattrs：id (identifiers), class (document-wide identifiers), style (inline style information) , title (element title)n 标识符：id = name，名称必须在整个文档中唯一，可用于：样单的选择符（单一元素）、超链的目标锚、从脚本对特定元素的引用、已经被声明的OBJECT元素名、用户代理的通用处理。n 类：class = class-name list，类名表（以空格分隔），可用于：样单的选择符（元素集）和用户代理的通用处理。n 样式：style = style，指定当前元素的样式信息，属性值由缺省的样单语言确定，例：Arent style sheets wonderful?n 标题：title = text，提供元素的咨询信息（可在鼠标停留时显示）l 语言方向属性组i18n：lang (language information), dir (text direction)n 语言信息：lang = “language-code”，其中，语言编码=主码(-子码)*u 主码如：fr (French法语), de (German德语), it (Italian意大利语), nl (Dutch荷兰语), el (Greek希腊语), es (Spanish西班牙语), pt (Portuguese葡萄牙语), ar (Arabic阿拉伯语), he (Hebrew希伯来语), ru (Russian俄语), zh (Chinese汉语), ja (Japanese日语), hi (Hindi印地语), ur (Urdu乌尔都语)和sa (Sanskrit梵语)；u 子码如：en-GB (Great Britain大不列颠/英国)、en-US (United States美国)、en-cockney（伦敦东区）、zh-guoyu (国语/普通话)、zh-yue (粤语/广东话)、zh-hakka (客家话)、zh-min (闽语/福建话/台湾话)、zh-min-nan (闽南话)、zh-wuu (吴语/上海话/江浙话)。注意，语言编码的大小写敏感。n 文本方向：dir = ltr | rtl，其中：ltr = left-to-right从左到右、rtl = right-to-left从右到左。n 例子：希伯来语文本l 内部事件属性组intrinsic events：onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyupl 单元对齐属性组：单元垂直对齐属性(valign)、单元水平对齐属性组(align、char、charoff)（参见八.3行组元素的属性说明）下面的各小节用于介绍常用的各组元素的标签及其属性。二文档结构标签1HTML（文档）l 格式：文档内容，语法为： (HEAD, BODY) | (HEAD, FRAMESET) l 说明：是文档的根元素，在HTML文档中不可少，而且必须位于文档的最前面（文档类型声明和版本信息之后）。浏览器从开始解析，遇到结束解释，即后的任何内容都会被丢掉。l 属性：语言方向属性组l 子元素：（逗号表示严格顺序）n (strict.dtd & loose.dtd)：HEAD, BODYn (frameset.dtd)：HEAD, FRAMESET2HEAD（文档头）l 格式：头内容，语法为： (TITLE & ISINDEX? & BASE?) + (SCRIPT | STYLE | META | LINK | OBJECT) l 说明：可选，若有必须位于之后、和之前。头部内容一般只有标题元素TITLE，也可以有若干对文档进行说明的元元素META（如作者、公司、时间等）及若干定义脚本语言的函数的脚本元素SCRIPT（供在文档体中的脚本调用）。但只有TITLE是必须的且唯一，其他都是可选的。l 属性： n 侧面/配置：profile=uri用于指定元数据的位置n 其他属性：语言方向属性组3TITLE（标题）l 格式：标题内容，语法为：字符串l 说明：是HEAD元素的必须子元素，必须唯一，且必须位于头元素内。标题内容被显示在浏览器的标题条上。无子元素。l 属性：语言方向属性组4BODY（文档体）l 格式：文档体内容，语法为： (块元素 | SCRIPT)+ +(INS | DEL) l 说明：可选，若有则必须位于HTML元素内、HEAD元素之后。文档体中的内容被显示在浏览器的客户区之中，文档体=网页。l 属性：n 背景色：bgcolor = color，颜色color = “颜色名” | “RGB值”，其中：颜色名不区分大小写（一般全小写）、RGB值 = # rrggbb十六进制（也不区分大小写），如bgcolor=“red”或bgcolor=“#ff0000”。缺省背景色为白色。颜色名与RGB值Black = #000000Green = #008000Silver = #C0C0C0Lime = #00FF00Gray = #808080Olive = #808000White = #FFFFFFYellow = #FFFF00Maroon = #800000Navy = #000080Red = #FF0000Blue = #0000FFPurple = #800080Teal = #008080Fuchsia = #FF00FFAqua = #00FFFFn 背景图：background = uri，uri为位图文件的地址路径，如background=“zsu.jpg”，浏览器会将指定位图平铺在网页窗口中，缺省无背景图。n 文本色：text = color，缺省为黑色。n 未访问过的超链色：link = color，缺省为蓝色。n 正在访问的超链色：alink = color，缺省为红色。n 已访问过的超链色：vlink = color，缺省为红色。n 响应装入：onload = script（脚本），在浏览器完成窗口或所有框架的装入后调用，可用于BODY和FRAMESET元素。n 响应卸载：onunload = script（脚本），在浏览器从窗口或框架中清除文档后调用，可用于BODY和FRAMESET元素。n 其他可用属性：常用属性组5注释l 格式：l 说明：注释内容中不能包含连续两个以上的连字符”-”；注释可以放在HTML文档的任何地方、可以跨行，但不能位于标签内。注释中的元素、标签、转移字符等实体引用等等，都不会被浏览器解释，而只当作注释的普通说明字符串处理，而且在浏览器分析文档时被丢弃。三段落与文字标签1Hn（heading标头）l 格式：标头内容，语法为： (行内元素)* l 说明：n=16对应于1级6级标头（标题），对应字体从大小。与TITLE元素不同，标头被显示在网页中。标头一般用于章节、段落的标题，以醒目。浏览器会在标头后换行，并且会在后面插入一空行。l 例子：第一级标题第二级标题第三级标题第四级标题第五级标题第六级标题显示为：l 属性：n 对齐：align = left | center | right | justify（调整/撑满/两端对齐），缺省为左对齐。n 其他属性：常用属性组2BR（break line断行）l 格式：或l 说明：BR元素为空元素，其功能为强制换行(forcing a line break)。因为HTML文档为自由书写格式，浏览器会将元素内容中的多个白空符（包括回车和换行符）用一个空格代替，所以为了在文本中换行，必须用BR元素。另外，为了在字符之间添加多个空格，必须使用转义字符 ，如绪   论。l 属性：n 对齐与浮动对象：clear = none | left | right | allu none：下一行正常开始，为缺省值u left：下一行从左边浮动对象（如图像）的下边开始u right：下一行从右边浮动对象的下边开始u all：下一行从任意浮动对象的下边开始* -| | -| 图像 | -| | -* -* -| | -| 图像 | -| | * -* -| | -| 图像 | -| | -* -* -| | -| 图像 | -| | * - * - | | - | 图像 | - | | -* - * - | | - | 图像 | - | | -* - * - | | - | 图像 | | | * - * - | | - | 图像 | | | * -clear=noneclear=leftclear=rightclear=alln 其他属性：核心属性组3P（paragraph段落）l 格式：段落内容，语法为： (行内元素)* l 说明：P元素的功能是开始新的段落=中断现在行、并空一行、然后再开始新的行= 。结束标签可省。另外，P元素内不能包含块级(block-level)元素（从新的一行开始的元素，如P、Hn、UL、OL、LI、TABLE），而只能包含线内(inline)即文本级(text-level)元素（不需从新的一行开始的元素，如BR、FONT、I、SUP、EM）。n 属性：align、常用属性组4PRE（preformatted text预排文本）l 格式：预排文本，语法为： (行内元素)*- (IMG | OBJECT | BIG | SMALL | SUB | SUP) l 说明：可保留文本中的所有白空符（包括空格和换行）、可渲染固定间距的字体、可禁止自动转行、但不能禁止双向处理。l 属性：常用属性组l 例子：床前明月光疑是地上霜举头望明月低头思故乡床前明月光      疑是地上霜举头望明月      低头思故乡床前明月光疑是地上霜举头望明月低头思故乡A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. 显示为：5DIV（division分区）l 格式：块级元素组，语法为： (流元素)* l 说明：DIV元素用于统一设置分区内的所有块级元素的lang、align等属性。浏览器通常会在DIV元素前后断行。l 属性：align、常用属性组6HR（(horizontal rule水平标线）l 格式：或l 说明：空元素，生成一条起分隔和美观作用的水平标线。l 属性：n 对齐：align = left | center | right，缺省为center。n 无阴影：noshade，无属性值，缺省有阴影。n 粗细：size = pixels像素数，缺省值与浏览器有关，IE为2。n 宽度：width = length，长度可为像素数n和可用空间的百分比r%，缺省为100%。n 其他属性：常用属性组l 例子：显示为：7FONT（字体）l 格式：文本内容，语法为： (行内元素)* l 说明：设置文本所用的字型、大小和颜色等属性。l 属性：n 字型：face = 字型名列表（用逗号分隔），由浏览器按序匹配。n 大小：size = 17 | +1 +6 | -1 -6，n为字号、+n表示增大n-1号、-n表示减小n号，但最后所得的字号必须在17之间。n 其他属性：语言方向属性组、核心属性组l 例子n 字号1号字 2号字 3号字4号字 5号字 6号字7号字 -3号字 -2号字 -1号字缺省字号 +1号字 +2号字+3号字 +4号字显示为：n 字型宋体仿宋黑体楷体隶书幼圆新宋体方正舒体方正姚体华文宋体华文仿宋华文细黑华文楷体华文隶书华文中宋华文行楷华文新魏华文琥珀华文彩云Times New RomanArial Courial New显示为：四文字样式标签l 格式：文字，语法为： (行内元素)* l 属性：常用属性组1物理样式标签名l 大字体(big font)：BIGl 小字体(small font)：SMALLl 粗体(bold)：Bl 斜体(italic)：Il 下划线(underlined)：Ul 删除线(strike-through)：S或STRIKEl 电传打字(teletype)：TT（等宽）l 上标(superscript)：SUPl 下标(subscript)：SUB2逻辑样式标签名l 强调(emphasis)：EM（在IE中为斜体）l 重点强调(stronger emphasis)：STRONG（黑体）l 引用(cite)：CITE（斜体）（原文）l 定义(defining)：DFN（斜体）（定义词汇）l 代码(code)：CODE（等宽）（源代码）l 样本(sample)：SAMP（等宽）（程序或脚本）l 键入(keybord)：KBD（无格式等宽）（用户输入）l 变量(variable)：VAR（斜体）（程序变量）l 缩写(abbreviation)：ABBR（如Dec、mass.）l 首字母缩写词(acronym)：ACRONYM（如USA、radar）五列表(list)1分类l 无序列表ULl 有序列表OLl 菜单列表MENU（已过时/被反对的）l 定义列表DL各种列表可以（相互）多层嵌套。2UL（unordered list无序列表）l 格式：表项序列，语法为： (LI)+ l 说明：为表项集合，与上下段之间各有一空行。每个表项前有项目符，表项后换行；同级表项左对齐、嵌套的次级表项右缩进。l 属性（可用于UL和LI）： n 项目符类型：type = disc（缺省1级）| circle（2级）| square或（3级）n 紧凑：compact，效果由浏览器定，IE中不变。n 其他属性：常用属性组3LI（list item表项）l 格式：表项内容，语法为： (流元素)* l 说明：表项内容可以为任何块元素和行内元素，结束标签可省。l 属性：n 序号值：value = 数值（只能用于OL）n 其他：同UL。4OL（ordered list有序列表）格式、语法、说明等都似UL，只是项目符为数字或字母所组成的序号符。l 属性： n 序号符类型：type = 1 | a | A | i | I，含义为：type序号符例子1阿拉伯数字（缺省）123 a小写字母abc A大写字母ABC i小写罗马数字iiiiii I大写罗马数字IIIIII n 紧凑：compact，效果由浏览器定，IE中不变。n 开始序号：start = 数值（对应于序号符）n 其他属性同UL显示为：l 例子：(1)无序列表标题标题级别标题对齐段落字体字体大小英文字体中文字体字体种类字体颜色有序列表标题标题级别标题对齐段落字体字体大小英文字体中文字体字体种类字体颜色有序列表标题标题级别标题对齐段落字体字体大小英文字体中文字体字体种类字体颜色显示为：(2) . Level one, number one. . Level two, number one. . Leve