HTML语言分析

1、第二部分 HTML 语言HTML概念HTML（Hyper Text Markup Language 超文本标识语言）是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档。什么是HTML5 HTML5是一个新的网络标准,目前仍处于发展阶段,目标是取代现有的HTML4.01和XHTML1.0标准.HTML5时间表HTML文档的编写方法1.手工直接编写记事本等，存成.htm .html格式2.使用可视化HTML编 辑 器Frontpage、Dreamweaver等网页文件命名1.*.htm或*.html2.无空格3.无特殊符号（例如&符号），只可以有下划线“_”，只可以

2、为英文、数字4.区分大小写5.首页文件名默认为：index.htm 或 index.htmlHTML 文件结构. 是网页文件的最外层标记.头信息 不会显示在浏览器中，包括基本的描述，整个网页的公共属性. 是网页文件的主体部分正文 ：文字、图片、链接、表单等元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如），也有一个结束的标记（如）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。HTML 文件结构(Document Structures) 第一张网页（01.htm） my first page This is my first

3、homepage! 基本组成部分HTML元素属性HTML元素可以有自己的相关属性，每一个属性还可以赋予一定的值。元素属性出现在元素的内，并且和元素名之间有一个空格分隔；属性值用“”引起来。第二张网页（02.htm） my first page This is my first homepage! HTML字符集特殊字符如何显示?网页中有其特殊意义的字符，键盘上没有的字符。2种表示方式字符代码（命名实体）以&符开始，以分号结束，其间是字符名；数字代码（编号实体）以&符开始，以分号结束，其间是#号加编号。，<或者< HTML字符集空格    大于 > 

4、2;&符号 & &“双引号" " 版权 © ©注册商标® ®乘号× ×除号÷ ÷HTML的有关约定在编辑HTML文件和使用有关标记符时有一些约定或默认的要求。(1) 文件扩展名默认使用htm或html。图像文件的扩展名为gif和jpg。(2) HTML源程序为文本文件，其列宽可不受限制，即多个标记可写成一行，甚至整个文件可写成一行；若写成多行，浏览器一般忽略文件中的回车符（标记指定除外）；对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号“ ；”表示非

5、换行空格；表示文件路径时使用符号“/”分隔，文件名及路径描述可用双引号也可不用引号括起。HTML的有关约定(3) 标记符中的标记元素用尖括号括起来，如：、，带斜杠的元素表示该标记说明结束；大多数标记符必须成对使用，以表示作用的起始和结束；标记元素忽略大小写，即与作用相同；许多标记元素具有属性说明，可用参数对元素作进一步的限定，多个参数或属性项说明次序不限，其间用空格分隔即可；一个标记元素的内容可以写成多行。(4) 标记符号，包括尖括号、标记元素、属性项等必须使用半角的西文字符，而不能使用全角字符。 (5) HTML注释由惊叹号表示，注释内容由符结束。注释内容可插入文本中任何位置。任何标记若在其

6、最前插入惊叹号，即被标识为注释，不予显示。 标签 声明必须位于 HTML5 文档中的第一行，也就是位于 标签之前。该标签告知浏览器文档所使用的 HTML 规范。DOCTYPE 声明不属于 HTML 标签； 它是一条指令，告诉浏览器编写页面所用的标记的版本。在所有 HTML 文档中规定 DOCTYPE 是非常重要的，这样浏览器就能了解预期的文档类型。Head中的标记 Title 定义网页标题，显示在浏览器的标题栏中公司名称+公司产品有利于搜索引擎（也是在搜索引擎中显示的标题）Head中的标记 base基底网址标记用于设定浏览器中文件的绝对路径网页中的文件只需要写下文件的相对路径即可，这个路径就是

7、base中指定下的路径Head中的标记 link设置外部文件的链接标记用于确定本页面和其它文档之间的关系Head中的标记 meta两种用法Name 用于在网页中加入一些关于网页的描述信息，网页的关键字，网页描述信息http-equiv:属性用于在HTML文档中模拟HTTP协议的响应消息头，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。例如，告诉浏览器使用什么样的字符集显示网页内容Meta标签的name属性不是自己定义的值：Keywords : 网页的关键字Description：网页的描述Authormeta 用来标记搜索引擎在搜索你的页面时所取出的关键词。 用来标记文档的作者

8、。 (html4.0.1) (html5)用来标记你的页面的解码方式。 charset=UTF-8用来自动刷新网页UTF-8是世界性通用代码，也完美的支持中文编码，如果我们做的网站能让国外用户正常的访问，就最好用UTF-8。GB2312属于中文编码，主要针对国内用户使用，如果国外用户访问GB2312编码的网站就会变乱码。练习（03.htm）编写一个网页，要求3秒钟后自动跳转到学校的网站。 my first page 三秒钟后本网页将自动跳转到东北师范大学 基本组成部分HTML注释HTML文档可以插入注释。注释内容不会在浏览器窗口显示HTML注释的格式为：元素及元素属性1 元素定义文档的主体。

9、元素包含文档的所有内容，比如文本、超链接、图像、表格、列表等等。在它中放置网页中所有内容TextBgcolorBackgroundLinkAlinkVlinkTopmarginLeftmargin只要是可以用样式控制的就不用HTML本身属性元素及元素属性2元素中有下列元素属性： (1)bgcolorbgcolor属性标志HTML文档的背景颜色。如：bgcolor=“#CCFFCC”。HTML对颜色的控制HTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色进行控制。16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.颜色颜色名和RGB值黑

10、色Black=”#000000”银色Silver=”#c0c0c0”红色Red=”#ff0000”蓝色Blue=”#0000ff”白色White=”#ffffff”黄色Yellow=”ffff00”绿色Green=”#00ff00”海蓝色Aqua=”#00ffff”常见颜色的代码元素及元素属性3元素中有下列元素属性： (2)backgroundbackground属性标志HTML文档的背景图片。如：background=“images/bg.gif。可以使用的图片格式为GIF，JPG元素及元素属性4元素中有下列元素属性： (3)bgproperties=fixedbgproperties=fi

11、xed使背景图片成水印效果，即图片不随着滚动条的滚动而滚动。元素及元素属性5元素中有下列元素属性： (4)texttext属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。Text元素定义的颜色将应用于整篇文档。元素及元素属性6元素中有下列元素属性： (5)超级链接颜色link、vlink、alink分别控制普通超级链接、访问过的超级链接、当前活动超级链接颜色。元素及元素属性7元素中有下列元素属性： (6) leftmargin和topmargin设置网页主体内容距离网页顶端和左端的距离如：leftmargin=20 topmargin=30“HTML 4.01 HTML

12、4.01 与与 HTML 5 HTML 5 之间的差异之间的差异在 HTML 5 中，删除了所有 的特殊属性。而那些属性在 HTML 4.01 中是不被赞成使用的。文字标签属性文字属性标记1.文字颜色 指定颜色 . Color:RRGGBB 16 进制数码Face:客户端可获得的字体Size: 1, 2, 3, 4, 5, 6, 7 or +#, -#HTML 4.01 HTML 4.01 与与 HTML 5 HTML 5 之间的差异之间的差异在 HTML 4.01 中，不赞成使用该元素。在 HTML 5 中，不支持该元素，但是允许由所见即所得的编辑器来插入该元素 。 至至 h6 标签标签 -

13、 标签可定义标题。 定义最大的标题 定义最小的标题。 文字的对齐. (n=1,2,3,4,5,6) . (#=left, center, right)HTML 4.01 HTML 4.01 与与 HTML 5 HTML 5 之间的差异之间的差异在 HTML 4.01 中，h1 - h6 元素的 align 属性不被赞成使用。在 HTML 5 中，h1 - h6 元素的 align 属性不被支持。文字布局行的控制 段(Paragraph) (可以看作是空行) 空白占位符 文字布局行的控制 HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话，就要用到另一个元素，即元素

14、。元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。元素不是成对出现的。文字布局HTML文字与段落格式控制 倾斜文本 粗体文本 下划线文本 删除线文本 HTML 4.01 HTML 4.01 与与 HTML 5 HTML 5 之间的差异之间的差异没有区别在 HTML 5 中不支持 标签。 标签标尺线设定线宽, 线长, 对齐方式 ,线的颜色HTML 4.01 HTML 4.01 与与 HTML 5 HTML 5 之间的差异之间的差异属性：在 HTML 4.01 中，不赞成使用 align, noshade, size 以及 width 属性。在 HTML 5 中不再支持这些属性

15、。在 HTML 5 中， 标签定义内容中的主题变化，并显示为一条水平线。在 HTML 4.01 中，它仅仅显示为一条水平线。3. HTML的段落与分行控制无序列表元素1列表在HTML的文档里有重要的地位,HTML规定了多种列表元素。列表所起的主要作用是使特定的文本有序化。3. HTML的段落与分行控制无序列表元素2无序列表是由和元素定义的:sports food drink friends 3. HTML的段落与分行控制无序列表元素3无序列表的默认符号是圆点。 元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有：disc(圆)、circle（圆圈

16、）、square（方块）3. HTML的段落与分行控制有序列表元素1有序列表由和定义: sports drink friends3. HTML的段落与分行控制有序列表元素2元素也有自己的type属性，type属性的属性值有1、A、a、I、i等。例如，我们以A、B、C作为列表的编号元素还可以定义列表的起始编号，如我们希望列表的第一个编号为5，而不是1，则需要定义元素的start属性4.超级链接普通超级链接1超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念，那么，我们现在所有的WWW的应用将不复存在。所以，对超级链接的掌握具有特殊重要的意义。4.超级链接普通超级链接2超级链接是用锚元素

17、定义的 在元素下，有元素属性href,href的属性值为一个URL地址如：指向学院的超级链接 如：普通超级链接4.超级链接E-mail超级链接 超级链接可以指向E-mail地址如：指向E-mail地址的超级链接4.超级链接新开链接窗口开一个新的(浏览器)窗口 (Target Window) . 例：4.超级链接去除下划线去掉超级连接的下划线：style=“text-decoration: none”4.超级链接其他超级链接 WWW应用仅仅是Internet应用的一种,Internet还有其他很多应用，如：Ftp等。实际上mailto也属于非WWW应用。我们可以类似的创建指向Ftp等的超级链接;

18、指向其他Internet应用的超级链接不是我们掌握的重点。 4.超级链接锚点(书签) 1 指向本页面锚点aa的超级链接指向23页面的锚点top的超级链接练习：手写代码实现链接（新开窗口与Email）、背景、文字颜色、字体、换行、页面标题。HTML对图片的控制-1基本语法:引用图片必须用元素标志。元素下的基本元素属性是src属性，src的属性值为所引用的图片的URL地址。src属性是必须的。Src的URL可以是绝对地址，也可以是相对地址HTML对图片的控制-2所谓图片的替代文本，指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。定义图片替代文本的方法是：HTML对

19、图片的控制-3图片的显示大小我们可以指定一幅图片在浏览器窗口里的显示大小。定义图片的显示大小的方法是：width指定图片的宽度，height指定高度。它们的属性值可以是象素，也可以是%。 HTML对图片的控制-4图片的边框我们可以为一幅图片加一个边框以突出显示： border的属性值为象素数HTML对图片的控制-5图片的对齐方式图片可以相对于页面或单元格有一个对齐方式。定义水平对齐方式的方法是：HTML对图片的控制-6图片的对齐方式定义图片的垂直对齐方式：对于图片的对齐方式不仅是以上几种，但是以上的几种是最常用的。HTML对图片的控制-7定义图片与左、右的文本之间的间距图片在显示时，与左右的文

20、本之间可以有一定的间距 Hspace(horizontal)定义水平间距； Vspace(vertical)定义垂直间距。单位都是象素数.HTML对图片的控制-8图象的超级链接 图象的超级链接是指整个图象的超级链接，当点击图象的任何部分时，都会打开这个超级链接。定义默认超级链接的方法是：所以，所谓超级链接实际上就是用元素标志一个图象的引用;例：34.htmHTML对图片的控制-9图象映射所谓图象映射是指一个图片上的不同位置被指定了不同的超级链接；点击图片的不同位置会打开不同的超级链接目标。这与前面的默认超级链把整个图片作为超级链接的元素是很不一样的。HTML对图片的控制-10图象映射（只要求理

21、解标记含义）图象映射由定义。有一个基本属性是name。Name给图象映射命名，这个命名将会被元素用usemap属性引用。所以，图象上的图象映射实际上是对定义的映射的一个引用。在定义图象映射时，可以定义三种形状的映射： circle(圆形)、rect(矩形rectangle)、poly(多边形)HTML对图片的控制-11图象映射实例（35.htm） 表格制作表格制作一、创建表格 在HTML中可使用、等标记符来创建和设计表格。1）标记符 双标记符和用于定义表格，一个表格的所有内容都放在这2个标记符之间。它具有多个属性，具体内容在后面叙述。2）创建表格标题 双标记符和用于建立表格的标题，并使用ALI

22、GN属性定义标题的位置。ALIGN位置属性有4个值，即top（标题放在表格的上方）、bottom（标题放在表格的下方）、left（标题放在表格的左上方）、right（标题放在表格的右上方）。一个表格只能有一个标题。表格制作表格制作例如：颜色与颜色值对应表，表示将表格标题放在表格的下面且居中。表格制作表格制作表格的定义表格的定义 标题内容标题内容 表格内容表格内容 表格内容表格内容 表格的属性表格的属性标记标记，和和的属性用来定义表格的显示特性的属性用来定义表格的显示特性 标记属性表标记属性表标记属性表标记属性表标记属性表表格制作表格制作3）建立表头 表头是表格中行或列的标题，即表项的名称。使用

23、可以在表的第一行或第一列加表头，表头内容写在和之间，显示时将采用粗体字以醒目。 在表格的第一行加表头的格式为：在表格的第一行加表头的格式为： 表头1表头2表头3在表格的第一列加表头的格式为：在表格的第一列加表头的格式为： 表头1表项1表项2表项3表格制作表格制作4）表格行与列的定义 表格的内容是由行定义标记符和以及列定义标记符与来确定的。可以省略，即一个新的开始，表示前一个的结束。一般的也可以省略。 在、标记符中可使用ROWSPAN和COLSPAN属性对行、列合并。表格制作表格制作 构造表格时，每个标记符产生一行，表格有多少行就应有多少个标记符；表格的列数则由或的个数而定；若表的单元格中无任何

24、内容，则使用无内容的 或 标记符即可。 表格制作表格制作二、表格的修饰 1）表格边框和分隔线 在 标记符内使用FRAME、BORDER属性可以设置表格的边框和单元格分隔线。 FRAME属性用于控制是否显示边框以及如何显示边框,其值可以是void（默认值无边框）、above（只有顶框）、below（只有底框）、hsides（只有顶框和底框）、vsides(只有左右侧框)、lhs（只有左侧框）、rhs（只有右侧框）、box（包含4个边框）。 BORDER属性用于设置边框线的宽度。若BORDER=0，则表示无边框，无分隔线；若取其他值，则意味着包含所有边框和分隔线。若使用，相当于为BORDER设置了

25、非零值。表格制作表格制作2）表格的对齐 表格的对齐指表格在页面中的对齐方式。 表格在页面中的对齐可在标记符中使用ALIGN属性，其取值可有left、center和right。默认值为left、即为页面中左对齐。当表格与文字混合编排时，则文件中安排在表格后面的文字会显示在表格的右边或左边，形成文字与表格环绕的效果表格制作表格制作3）单元格中内容的对齐 单元格内容的对齐包括数据项在水平方向上的对齐和在垂直方向上的对齐。设置数据水平方向对齐是在表格内容标记符、中使用ALIGN属性。其取值可以是center、left、right、justify（两端对齐）。默认为左对齐。 垂直对齐则是使用VALIGN

26、属性，其取值为top（单元格顶部）、bottom（单元格底部）、middle（垂直方向的中部）、baseline（同行单元格一致）。默认值为居中（middle）对齐。表格制作表格制作4）单元格之间的间隔 在标记符中可使用CELLSPACING属性来调节单元格之间的间隔；使用CELLPADDING属性来调节表格分隔线和数据（即数据与单元格边线）之间的间隔。它们的属性项取值为象素值。 表格制作表格制作三、使用表格设计页面布局 HTML中有多种安排页面内容、设计页面布局的方法，运用表格就是方法之一。如果将整个窗口或整个显示的页面定义为一个表格，但隐去表格线，则在每个单元格中可以安排不同的内容（文本或

27、图像）、甚至设置不同的背景，这样便可获得特殊的页面布局。 1）用色块进行页面布局 在标记符、内使用BGCOLOR属性可设置单元格的背景色；使用BACKGROUND属性可设置背景图案。例如：可使表格背景为灰色，而则可使某单元格为黄色。通过大的色块分割，可使整个页面窗口分为几个明显的部分，以使信息归类组织，即醒目又有序。 2）用表格嵌套实现页面布局 将表格作为一个单元格的内容，安排在和标记符之间，即可实现表格的嵌套的页面布局。框架技术框架技术一、框架的概念框架（frame）亦称为“帧”的技术，可以获得在同一个窗口中开辟几个子窗口以便同时显示几个不同页面的效果。要使用框架，首先要了解框架集的概念。框

28、架集是构造整个框架结构的文档，它不包含具体显示的文本和图像，而只包含如何组织安排各个框架位置、大小和初始页面信息的设计。它是框架使用中最基础的文档，常称之为整个框架显示时的主文档。框架集的基本格式如下： 注意到，框架组文档中，用标记符代替了标记符。而标记符则用来指定每一个子窗口的内容。框架技术框架技术1）窗口的分割用来分割浏览器窗口，它使用COLS和ROWS这2个属性项把整个窗口按垂直方向或水平方向分割为多个框架。例如：。该标记符把窗口分成3个垂直的框架，指定左框架宽度值为150象素、中间框架占总宽度的50%，余下的宽度留给右框架。由上例可见，框架尺寸除使用象素值和百分数外，还可以使用*和n*

29、 ；使用*表示剩余部分；当使用n*（如2*）时，n值确定框架之间的比例。例如：*，2*，3*表示左边（或上边）的框架占窗口宽度（或高度）的1/6，中间框架占1/3，右边（或下边）框架占1/2。框架技术框架技术2）标记符的嵌套标记符可以嵌套使用。以构造包含横向和纵向框架的窗口。以下代码用嵌套框架结构建立一个多层框架的窗口。 框架的实现 框架技术框架技术3）框架的初始化标记符用于对各个框架进行初始化设置。使用标记符中的SRC属性指定需要在框架中显示的页面的文件，使用NAME属性指定框架的名称，以便在指定超级链接的目标框架时引用该框架名。标记符的个数应等于框架个数，并依出现的次序和层次先行后列对框架

30、进行初始化。框架技术框架技术二、框架效果设计1) 设置框架边框在标记符中，可使用FRAMEBORDER属性控制是否显示框架边框。属性值取值为1或0。如果取值为1，表示生成三维框架（默认值）；如果取值为0，则不显示框架边框。2) 设置框架边空白在标记符中使用MARGINWIDTH和MARGINHEIGHT属性可分别设定框架中的内容和框架的左右边框，以及上下边框之间的空白。这2个属性的取值均为象素值。框架技术框架技术3) 设置框架的滚动条在标记符中使用SCROLLING属性，可以控制是否为某框架加入滚动条，以便于观看框架中的内容。该属性的取值有yes、no、auto。它们分别表示加入垂直和水平滚动

31、条、不加滚动条、根据需要加滚动条。其中auto为默认值。4) 固定边框位置在标记符中加入NORESIZE属性可以固定边框线的位置，这样浏览者就不能用鼠标来移动框架的边框了。框架技术框架技术三、目标框架的使用如果在有框架的网页中设置了超级链接功能，则必须指定所链接的文件显示在哪一个框架中，这就要用到标记符中NAME属性所定义的框架名。如果不指定框架名，则单击框架内的超链时，目标文件只会显示在当前框架内。控制目标文件在哪一个框架内显示的方法是在标记符中使用TARGET属性，使用格式为：超链内容 表单表单 1.1.表单的定义表单的定义定义表单的语法如下：定义表单的语法如下： form method=get|post action= input type= textarea textarea定义定义 select select定义定义 表单表单 表单可以很简单，只有一个输入域，也可以很复杂，例如有按钮、检查框、滚动窗口的多区域等。最常使用的表单元素标记有三种，即INPUT、SELECT和TEXTAREA。1) 标记符的作用是在表单中建立各种的输入域。其主要的属性有name、value、type等3个。name被用来表示不同的输入域，value被