动态网页制作与编程_2_HTML代码.ppt

《动态网页制作与编程_2_HTML代码.ppt》由会员分享，可在线阅读，更多相关《动态网页制作与编程_2_HTML代码.ppt（38页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、动态网页制作与编程动态网页制作与编程孟宇龙孟宇龙孟宇龙孟宇龙哈尔滨工程大学计算机科学与技术学院哈尔滨工程大学计算机科学与技术学院哈尔滨工程大学计算机科学与技术学院哈尔滨工程大学计算机科学与技术学院本次课程主要内容一、认识HTML语言二、HTML语言语法规则三、HTML语言标签分类2一、认识THML语言HTML只不过是组合成一个文本文件的一系列标签。一般有两类标签围堵标记空标记3一、认识THML语言（续上）围堵标记:顾名思义，它以起始标记及终结标记将文字围住，令其达到预期显示效果。例如空标记:是指标记单独出现，只有起始标记没有终结标记。例如4二、HTML语法规则HTML文件总是以htm或html

2、作为文件的扩展名。HTML标签不区分大小写，如与是一样的。多个HTML标签间可以循环嵌套，但不可以交叉嵌套。HTML文件一行可以写多个标签，一个标签也可分多行书写，不用加任何续行符。HTML文件由浏览器解释时只认标签，并不解释源文件中的换行、回车和多个连续空格。若要显示换行则用标签，换段则用标签。5三、HTML语言标签分类1.网页结构类标签2.段落类标签3.列表类标签4.格式化类标签5.超链接类标签6.图像类标签7.表格类标签8.框架类标签61 网页结构类标签1.1 HTML文档标签格式：说明：处于文档的最前面，表示HTML文档的开始，即浏览器从开始解释，直到为止。1.2 HTML文件头标签格

3、式：说明：紧跟标签的后面，表示文件头部开始，到结束。其内容包含了该HTML页面的标题和说明信息，如编码方式、关键字、编辑软件、作者信息等。71 网页结构类标签（续上）1.3 HTML文件标题标签格式：说明：该标签定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示。通过该标题内容的设定，可以使读者迅速了解该网页的主要内容以及在使用搜索引擎时可以找到该页。81 网页结构类标签（续上）1.4 HTML文件说明信息标签格式：说明：该标签可以用来设定说明信息，一般放在文件头部内。属性：（1）描述语言字符集的信息，例如：，常用的#可以为gb2312、x-mac-roman、big5等。（2）描

4、述文档的自身信息，如作者信息、过期时间、关键词列表等。例如：91 网页结构类标签（续上）1.5 HTML文件主体标签格式：说明：位于头部之后，以开始，直到结束。定义了网页上显示的主要内容与显示格式，是整个网页的核心，浏览器窗口中所能显示的内容全部被包含在该标签中。属性：用于设定网页的总体风格。其中：bgcolor设置网页的背景色。background 设置网页的背景图像。text设置网页文本的颜色。link设置尚未被访问过的超链接颜色，默认为蓝色。vlink设置已被访问过的超链接颜色，默认为蓝色。alink设置一个正被激活的超链接颜色，默认为红色。101 网页结构类标签（续上）1.6 注释标签

5、格式：说明：在HTML文件中加入注释可以使程序清晰，容易理解。该标签中的内容在被浏览器解释时会被忽略，也不会被显示。这样做有助于您在以后的时间对代码的编辑。112 段落类标签（续上）2.1 标题标签格式：说明：该标签可以用来指明页面上的n级标题，其中n=16，主要用于对文本中的章节进行划分。2.2 段落标签格式：说明：定义段落，自动在其前后创建一些空白。浏览器会自动添加这些空间，也可以在样式表中规定。属性：align用来设定段落的对齐方式。取值有：left、right和center。122 段落类标签（续上）2.3 换行标签格式：说明：此标签是不分段换行。只是插入一个简单的换行符。标签是空标签

6、，意味着它没有结束标签。请注意，标签只是简单地开始新的一行132 段落类标签（续上）2.4 水平线标签格式：说明：该标签可以用来在页面上插入一条水平标尺线。属性：align用来设定横线放置的位置。取值有：left、right和center。size用来设定线条粗细，取值为n个像素，默认为2。width 用来设定线段长度，取值可为绝对值（n个像素）或相对值（相对于当前窗口的百分比），默认值为100%。143 列表类标签（续上）3.1 编号列表标签格式：说明：该编号列表中每一项由开头。属性：type，用来设定编号方案。其中：type=1默认值，用数字对应编号符，如1，2，3等。type=A用大写字

7、母编号表项，如A，B，C等。type=a用小写字母编号表项，如a，b，c等。type=I用大写罗马字母编号表项，如I，II，III，IV等。type=i用小写罗马字母编号表项，如i，ii，iii，iv等。153 列表类标签（续上）3.2 项目列表标签格式：说明：该项目列表中每一项也由开头。属性：type，用来设定项目符的形状。其中：type=DISC实心圆点（默认值）。type=CIRCLE空心圆点。type=SQUARE实心方块。exam2_1.html164 格式化类标签4.1 字符风格标签格式：粗体斜体下划线删除线 以较大字体显示 以较小字体显示上标下标174 格式化类标签（续上）粗体居

8、中 呈现类似打字机或等宽的文本效果。显示斜体文本效果。这些标签均是字体样式标签。可以使用这些标签。但是如果只是希望通过这些标签单纯地改变文本的样式，则建议使用样式表来取得更加丰富的效果。184 格式化类标签（续上）4.2 预格式化标签格式：说明：多数情况下，html文件中的文本是基于html标签进行格式化的，文本中任何额外的空白字符（空格、制表符、回车符等）都将被浏览器忽略。这个规则的一个例外就是使用标签。任何被该标签括起来的空白字符都可以出现在最后的屏幕输出中。194 格式化类标签（续上）4.3 字符格式标签格式：说明：该标签可以文字的字体、字号和颜色。属性：size 设置文字大小，取值范围

9、是从1到7，其中3是默认值。face 设置文字字体。color 设置文字颜色，取值是颜色名（如red）或颜色数值（如#003366）。204 格式化类标签（续上）4.4使字体变为斜体的几种方式定义变量。显示斜体文本效果。强调，显示斜体文本效果。定义引用，可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。定义一个定义项目。可定义一个地址（比如电子邮件地址），使用它来定义地址、签名或者文档的作者身份。还有换行功能。标签修饰的内容用于强调，现在都是用斜体字来标签修饰的内容用于强调，现在都是用斜体字来显示，但这些内容也具有更广泛的含义，将来的某一天，显示，但这些内容也具有更广泛的含义，将来的

10、某一天，浏览器也可能会使用其他的特殊效果来显示强调的文本。浏览器也可能会使用其他的特殊效果来显示强调的文本。215 超链接类标签1、超链接的定义：是一个网页指向另一个目的端的链接，目的端可以是另一个网页或者同一个网页上的不同位置2、常用有两种链接方式链接到网页 链接到锚点，两个步骤步骤一：设置锚点：步骤二：链接锚点，两种锚点链接方式：a.本地文档锚点：b.另一文档锚点：文档路径可以分为文档路径可以分为:绝对路径、文档相对路径和根相对路径。绝对路径、文档相对路径和根相对路径。exam2_5.htmlexam2_4.html225 超链接类标签（续上）在所有浏览器中，链接的默认外观是：未被访问的链

11、接带有下划线而且是蓝色的 已被访问的链接带有下划线而且是紫色的 活动链接带有下划线而且是红色的235 超链接类标签（续上）同理，也可以使用图像来作链接：usemap属性：通过设置图片的热区，可以实现单击图片不同位置链接到不同网页的效果。246 图像类标签图像格式：图像格式：要想把在文档放置图像，其格式可以是GIF、JPEG、XBM、TIFF、BMP和PICT等。其中：GIF格式文件最多只能显示256中颜色，一般用于制作透明、隔行和动画效果图片等；而JPEG格式文件可以拥有计算机所能提供的最多种颜色，适合存放高质量的彩色图片、照片。256 图像类标签（续上）：用来在文档中嵌入图像。属性：src

12、用来设定要被包含的图像的位置和文件名，其路径名使用规则同 超链接中的href属性。alt 用来设定在纯文本浏览器中替换图像的文本。width和height用来设定图像的尺寸，可取绝对值或相对值。border用来设定图像边框的宽度，其默认值为0，无图像边框。align用来设定图像的位置，取值有bottom、middle、top等。hspace定义图像左侧和右侧的空白。不赞成使用。vspace定义图像顶部和底部的空白。不赞成使用。lowsrc低质量替代图片exam2_3.html267 表格类标签说明：说明：表格标签除了可以显示大量数据列表格式外，往往还可以用于网页的布局。277 表格类标签（续上

13、）属性：属性：border用来设定表格边框粗细。若省略，则无边框。Width用来设定表格，可取绝对值或相对值。height 用来设定表格高度，可取绝对值或相对值。cellspacing用来设定表格间隙。cellpadding用来设定表格内部空白。background设置表格的背景图像bgcolor设置表格的背景颜色align设置表格的对齐方式：center,left和rightrowspan设置跨行数colspan设置跨列数287 表格类标签（续上）exam2_11.html298 框架类标签框架：将同一个画面上分解为多个独立网页，通过使用框架，可以在同一个浏览器窗口中显示多个页面：框架集，可

14、以包含多个框窗，取得多个URL,每个框窗存有独立的文档。exam2_6.html308 框架类标签（续上）的文件组成：一般有多个文件组成318 框架类标签（续上）的属性：cols：垂直切割画面(如分左右两个画面)，接受整数值、百分数，*则代表占用剩余的空间。数值的个数代表分成的视窗数目且以逗号分隔。rows：横向切割，将画面上下分开，数值设定同上。frameborder：设定框架的边框，其值只有 0 和 1，0 表示不要边框，1 表示要显示边框。border：设定框架的边框厚度，以 pixels 为单位。bordercolor：设定框架的边框颜色。328 框架类标签（续上）的属性name：设定

15、这个框窗的名称，这样才能指定框架来作链接，必须但任意命名。scrolling：设定是否要显示卷轴noresize：设定是否可以改变这个框的大小。marginhight：框架高度部分边缘所保留空间。marginwidth：框架宽度部分边缘所保留空间。framespacing：框架与框架间保留的空白的距离。338 框架类标签（续上）当浏览器不支持框架的时候应该怎么办？使用标签您的浏览器无法处理框架！noframes 位于 frameset 元素内部。348 框架类标签（续上）会创建包含另外一个文档的内联框架（即行内框架）。可以把需要的文本放置在 和 之间，这样就可以应对无法理解 iframe 的浏览器。exam2_7.html35标签 标签被用来组合文档中的行内元素 36实例自选主题，制作一个页面。制作一个具有如下框架结构的页面37参考文档html简介.doc38